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

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

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

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

• سطح سختی: مبتدی
• مدت آموزش: 60 تا 80 دقیقه
• نرم افزار استفاده شده: Adobe Illustrator

1. تنظیم سند جدید

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

Number of Artboards روی1

Width روی 800 پیکسل

Height روی 600 پیکسل

Units روی Pixels

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

Color Mode روی RGB

Raster Effects روی Screen(72ppi)

Preview Mode روی Default

2. تنظیم Custom Grid

گام اول

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

Gridline Every روی 1 پیکسل

Subdivisions روی 1

گام دوم

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

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

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

Layer 1: Reference Grids

Layer 2: Battery

Layer 3: Settings

Layer 4: Messaging

Layer 5: Alarm

Layer 6: Photos

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

گام اول

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

گام دوم

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

گام سوم

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

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

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

گام اول

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

گام دوم

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

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

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

گام سوم

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

گام چهارم

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

گام پنجم

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

گام ششم

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

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

گام اول

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

گام دوم

با اسلایدر وسط آیکن کار رو ادامه میدیم. برای طراحی این قسمت، یک مستطیل به ابعاد 4 در 32 پیکسل درست می کنیم. یا اینکه یک Stroke با ارتفاع 32 پیکسل و Weight که روی 4 پیکسل تنظیم شده، درست می کنیم. کد رنگی #ffffff رو براش در نظر می گیریم و اون رو در وسط دایره بزرگتر قرار میدیم. طوری که 18 پیکسل از بالا فاصله داشته باشه.

گام سوم

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

گام چهارم

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

گام پنجم

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

گام ششم

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

گام هفتم

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

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

گام هشتم

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

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

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

گام اول

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

گام دوم

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

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

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

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

دوره های آموزشی مرتبط