آموزش adobe xd طراحی نشانگر map

آموزش adobe xd
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/04/07

با درود، در این پست با آموزش adobe xd طراحی نشانگر map در خدمت شما همراهان بیت بنگ هستیم! گاهی لازم است تا icon های خودمان را بدون استفاده از پلاگین های adobe xd ایجاد کنیم. در این مطلب قرار است طراحی آیکن نشانگر map را به شما آموزش دهیم.   قدم اول؛ ایجاد یک

آموزش adobe xd

با درود، در این پست با آموزش adobe xd طراحی نشانگر map در خدمت شما همراهان بیت بنگ هستیم!

گاهی لازم است تا icon های خودمان را بدون استفاده از پلاگین های adobe xd ایجاد کنیم.

در این مطلب قرار است طراحی آیکن نشانگر map را به شما آموزش دهیم.

 

قدم اول؛ ایجاد یک پروژه جدید در Adobe xd

آموزش adobe xd - ایجاد پروژه

 

برای این پروژه من artboard دلخواه خودم را انتخاب می کنم.

شما نیز می توانید هر آرت بوردی که می خواهید انتخاب کنید!

من رنگ پس زمینه را به یک رنگ تیره تغییر دادم.

 

قدم دوم؛ ایجاد ساختار آیکن نشانگر map در adobe xd

برای این کار ابتدا به یک دایره نیاز داریم.

با استفاده از ابزار رسم دایره در adobe xd یک دایره ایجاد می کنیم، می توانید دکمه شیفت را نگه دارید تا قطر دایره به یک اندازه در هر جهات افزایش یابد.

سپس border دایره ای که رسم کردیم را بر می داریم.

 

آموزش adobe xd

 

قسمت پایین دایره را باید کمی به سمت پایین بکشیم و زاویه آن را بسته تر کنیم.

برای این کار ابتدا آبجکت دایره را به path تبدیل می کنیم تا بتوانیم نقاط و خطوط آبجکت را کنترل کنیم.

بر روی دایره کلیک کرده و مانند تصویر زیر ابتدا از منو باز شده گزینه Path و سپس Convert To Path را انتخاب کنید.

می توانید از کلید میان بر ctrl + 8 نیز برای این کار استفاده کنید.

 

آموزش adobe xd

 

پس از تبدیل شدن به Path با دو بار کلیک بر روی path که ایجاد کردیم می توانید نقاط مختلف آن را برای تغییر شکل کنترل کنید.

بر روی نقطه پایین دایره کلیک کرده و آن را به پایین بکشید، سپس خط افقی را با کلیک، انتخاب و به سمت مرکز خط بکشید.

در تصویر زیر می توانید جزئیات این کار را مشاهده کنید :

 

آموزش adobe xd

 

قدم سوم؛ ایجاد یک حفره بر روی آبجکت در adobe xd

 

حالا آیکن ما شکل اولیه خود را بدست آورد!

می خواهیم دایره ای در مرکز آیکن و در قسمت بالای آن به صورت توخالی ایجاد کنیم تا تصویر پشت آیکن دیده شود.

برای این کار یک دایره دیگر بر روی آیکن ایجاد می کنیم :

 

آموزش adobe xd طراحی icon

 

من کمی رنگ دایره جدید را تیره کردم تا قابل مشاهده باشد.

حالا وقت آن است تا دایره جدید را تبدیل به یک حفره خالی روی آیکن کنیم تا پس زمینه دیده شود!

برای این کار آیکن و دایره را به صورت همزمان انتخاب کنید.

برای این کار می توانید بر روی artboard کلیک کرده و موس را روی آبجکت ها بکیشد تا انتخاب شوند و یا از قسمت لایه ها در منو اصلی هر دو لایه را انتخاب کنید.

سپس طبق تصویر گزینه Exclude Overlap را از پنل سمت راست انتخاب کنید، درست مانند تصویر زیر :

 

آموزش adobe xd

 

برای این کار همچنین می توانید به راحتی از کلید میانبر Ctrl + Alt + X استفاده کنید.

تصویر نهایی آیکن به شکل زیر در خواهید آمد :

 

آموزش adobe xd

 

کمی به آیکن سایه می دهیم و پس زمینه آن را با استفاده از افکت Gradient در Adobe xd زیباتر می کنیم.

 

آموزش طراحی آیکن در adobe xd

 

امیدوارم در این پست از آموزش adobe xd طراحی نشانگر map لذت برده باشید.

اگر پرسشی دارید می توانید از بخش دیدگاه ها بیان کنید.

شاد و پیروز باشید.