آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

آموزش Illustrator : طراحی آیکن های اندروید قسمت اول

توی این آموزش، طراحی آیکن های اندروید رو با Illustrator با هم می بینیم و با ابزارها و تکنیک های مورد نیاز آشنا میشیم. بیاین شروع کنیم!

با ” آموزش Illustrator : طراحی آیکن های اندروید ” با ما همراه باشید…

  • سطح سختی: مبتدی
  • مدت آموزش: ۶۰ تا ۸۰ دقیقه
  • نرم افزار استفاده شده: Adobe Illustrator
  1. تنظیم سند جدید

وارد مسیر File > New میشیم یا میانبر Ctrl+N رو فشار داده و یک سند جدید با تنظیمات زیر درست می کنیم.

Number of Artboards روی۱

Width روی ۸۰۰ پیکسل

Height روی ۶۰۰ پیکسل

Units روی Pixels

وارد تب Advanced میشیم.

Color Mode روی RGB

Raster Effects روی Screen(72ppi)

Preview Mode روی Default

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

  1. تنظیم Custom Grid

گام اول

وارد مسیر Edit > Preferences > Guides & Grid میشیم و تنظیمات رو به شکل زیر انجام میدیم:

Gridline Every روی ۱ پیکسل

Subdivisions روی ۱

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام دوم

وارد منوی View میشیم و Snap to Grid رو فعال می کنیم.

  1. تنظیم لایه ها

وارد پنل Layers میشیم و در مجموع شش تا لایه با نام های زیر درست می کنیم.

Layer 1: Reference Grids

Layer 2: Battery

Layer 3: Settings

Layer 4: Messaging

Layer 5: Alarm

Layer 6: Photos

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

  1. اضافه کردن خطوط راهنما

گام اول

تمام لایه ها رو به غیر از لایه Reference Grid، قفل یا Lock می کنیم. ابزار Rectangle رو برداشته و یک مربع به ابعاد ۹۶ پیکسل رسم می کنیم. کد رنگی #f15a24 رو براش در نظر می گیریم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام دوم

یک مربع دیگه به ابعاد ۸۸ پیکسل درست می کنیم. کد رنگی #ffffff رو بهش اختصاص میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام سوم

هر دو مربع رو با همدیگه گروه می کنیم. برای این کار میانبر Ctrl+G رو فشار میدیم. بعد هم سه کپی از اون تهیه کرده و با فاصله ۲۴ پیکسل از همدیگه قرار میدیم. بعد هم اون ها رو در وسط صفحه میزاریم.

لایه کنونی رو قفل کرده و میریم سراغ لایه بعدی و کار طراحی آیکن رو شروع می کنیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

  1. طراحی آیکن باطری

گام اول

برای طراحی پس زمینه آیکن، ابزار Ellipse رو برداشته و یک دایره ۸۸ پیکسلی رسم می کنیم. کد رنگی #۰۰c853 رو براش در نظر می گیریم و اون رو در وسط مربع قرار میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام دوم

برای طراحی بدنه اصلی باطری، یک مستطیل به ابعاد ۲۴ در ۲۰ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در وسط دایره سبز رنگ قرار داده و همین طور، ۲۰ پیکسل از لبه پایین دایره، فاصله میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول


توصیه می کنم دوره های جامع فارسی مرتبط با این موضوع آریاگستر رو مشاهده کنید:

– صفر تا صد آموزش ایلاستریتور


گام سوم

می خوایم شکلی که رسم کردیم رو به Outline تبدیل کنیم. برای این کار، Shift+X رو فشار داده و Fill رو با Stroke عوض می کنیم. بعد هم وارد پنل Stroke میشیم و Weight رو روی ۴ پیکسل و Corner رو روی Round Join قرار میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام چهارم

برای طراحی اولین نوار، یک مستطیل به ابعاد ۱۲ در ۴ پیکسل درست می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم. یا اینکه یک Stroke به عرض ۲ پیکسل و Weight که روی ۴ پیکسل تنظیم شده، درست کرده و اون رو در محلی که می بینین، با فاصله ۴ پیکسل از پایین، قرار میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام پنجم

دو تا نوار دیگه اضافع کرده و اون ها رو ۴ پیکسل از همدیگه فاصله میدیم. بعد هم با فشار دادن Ctrl+G، اون ها رو با همدیگه گروه می کنیم.

گام ششم

برای تکمیل آیکن باطری، یک کلاهک درست می کنیم. یک مستطیل به ابعاد ۸ در ۴ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر گرفته و اون رو در محلی که می بینین، میزاریم.

  1. طراحی آیکن تنظیمات

گام اول

درست مثل آیکن قبلی، با پس زمینه آیکن شروع می کنیم. برای این کار، ابزار Ellipse رو برداشته و یک دایره ۸۸ پیکسلی رسم می کنیم. کد رنگی #۲۱۹۶f3 رو براش در نظر می گیریم و اون رو در وسط شکل مربع قرار میدیم.

گام دوم

با اسلایدر وسط آیکن کار رو ادامه میدیم. برای طراحی این قسمت، یک مستطیل به ابعاد ۴ در ۳۲ پیکسل درست می کنیم. یا اینکه یک Stroke با ارتفاع ۳۲ پیکسل و Weight که روی ۴ پیکسل تنظیم شده، درست می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در وسط دایره بزرگتر قرار میدیم. طوری که ۱۸ پیکسل از بالا فاصله داشته باشه.

گام سوم

یک مستطیل ۱۲ در ۴ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر گرفته و اون رو وسط شکل قبلی قرار داده و ۴ پیکس از لبه پایینی فاصله میدیم.

گام چهارم

برای طراحی بخش پایینی اسلایدر، یک مستطیل ۴ در ۱۲ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در محلی که می بینین، قرار میدیم. تمام شکل ها رو با همدیگه گروه می کنیم.

گام پنجم

یک مستطیل دیگه به ابعاد ۴ در ۱۲ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در محلی که می بینین قرار میدیم و ۱۲ پیکسل از اسلایدر اول فاصله میدیم.

گام ششم

یک مستطیل دیگه به ابعاد ۴ در ۱۲ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در محلی که می بینین قرار میدیم و ۴ پیکسل از لبه پایین فاصله میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام هفتم

یک مستطیل دیگه به ابعاد ۴ در ۳۲ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در محلی که می بینین قرار میدیم.

وقتی این کار انجام شد، هر سه شکل رو با استفاده از میانبر Ctrl+G، با همدیگه گروه می کنیم و اون رو در وسط قرار میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام هشتم

وارد مسیر Ctrl+C, Ctrl+F میشیم و اسلایدر سمت چپ رو رو کپی می کنیم و اون رو سمت راست دایره قرار میدیم. اون رو ۴ پیکسل از اسلایدر وسط فاصله میدیم.

اون ها رو با همدیگه گروه می کنیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

  1. طراحی آیکن پیام رسانی

گام اول

برای طراحی پس زمینه آیکن، ابزار Ellipse رو برداشته و یک دایره ۸۸ پیکسلی رسم می کنیم. کد رنگی #۷c4dff رو براش در نظر گرفته و این دایره رو در وسط مربع قرار میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

گام دوم

برای طراحی شکل اصلی آیکن پیام رسانی، یک مستطیل ۳۲ در ۲۴ پیکسل رسم می کنیم. کد رنگی #ffffff رو براش در نظر گرفته و اون رو در محلی که می بینین قرار میدیم. این شکل رو ۲۰ پیکسل از لبه چپ و ۲۰ پیکسل از لبه بالایی فاصله میدیم.

آموزش Illustrator : طراحی آیکن های اندروید – قسمت اول

” آموزش Illustrator : طراحی آیکن های اندروید – قسمت دوم “


توصیه می کنم دوره های جامع فارسی مرتبط با این موضوع آریاگستر رو مشاهده کنید:

– صفر تا صد آموزش ایلاستریتور


 

0نظرات
دیدگاه خود را بنویسید

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *