Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Як створити набір іконок на тему завантаження в Adobe Illustrator для Android

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Final product image
What You'll Be Creating

В цій статті ми дещо відійдемо від нашої звичайної програми і торкнемося теми, яку я хотів підняти вже протягом довгого часу. Якщо ви ще не здогадалися із заголовку про що йде річ, ми збираємось створити п'ять простих іконок, які ви можете перетворити на іконки на тему завантаження для Android для будь-яких майбутніх додатків, які ви можете створити самі, або будучи залученими до їх створення.

Щодо процесу, то ми будемо використовувати вашу базову вибірку геометричних фігур в поєднанні з панеллю Align і деякі інші інструменти, з якими ви, напевно, працюєте кожного дня.

Як кажуть, візьміть чашечку кави і давайте почнемо.

О, і не забудьте, ви завжди можете розширити можливості вашого проекту, перейшовши на GraphicRiver, де ви знайдете масу наборів іконок, розроблених для Android, на які потрібно просто клікнути мишкою.

1. Налаштовуємо документ.

Мені здається, що у вас уже запущений Illustrator, тому просто відкрийте його та перейдіть в New Document (File > New or Control-N), щоб налаштувати новий документ з наступними параметрами:

  • Number of Artboards: 1;
  • Width: 800 px;
  • Height: 600 px;
  • Units: Pixels.

В розділі Advanced:

  • Color Mode: RGB;
  • Raster Effects: Screen (72ppi);
  • Preview Mode: Default.
setting up a new document

Маленька підказка: Дехто з вас міг помітити, що опція Align New Objects to Pixel Grid упущена. Це тому, що я використовую нову версію програми, СС 2017, в яку внесено суттєві зміни щодо поводження фігур відносно нижче розташованої сітки Pixel Grid.

2. Налаштування сітки.

Оскільки ми будемо створювати іконки з ідеальними пікселями, нам потрібно встановити красиву маленьку сітку, Grid, щоб мати повний контроль над фігурами. Ми зробили б так, якщо використовували б старшу версію програми.

Крок 1

Перейдіть в Edit > Preferences > підменю Guides & Grid і налаштуйте наступні параметри:

  • Gridline every: 1 px;
  • Subdivisions: 1.
setting up a custom grid

Маленька підказка: ви можете отримати більше інформації про сітки, прочитавши детальну статтю, як працює система сітки Illustrator.

Крок 2

Після того, як ви налаштували сітку користувача, все що нам потрібно зробити, щоб переконатися, що наші фігури будуть чіткими, це активувати опцію Snap to Grid під меню View, яка буде переходити в Snap to Pixel щоразу, коли ви включаєте режим Pixel Preview.

Якщо ви не знайомі з методом “pixel-perfect workflow”, я нагально рекомендую вам перейти до статті how to create pixel-perfect artwork, яка допоможе вам розширити ваші технічні навики за одну мить.

3. Як налаштувати шари.

Коли у нас є готовий новий документ, хорошою ідеєю буде структурувати наш проект за допомогою декількох шарів, оскільки таким чином ми збережемо наш робочий процес стабільним та сфокусуємось на кожній іконці окремо.

Тепер включіть панель Layers і створіть шість шарів, які ми перейменуємо наступним чином:

  • шар 1, layer 1: reference grids;
  • шар 2, layer 2: battery;
  • шар 3, layer 3: settings;
  • шар 4, layer 4: messaging;
  • шар 5, layer 5: alarm;
  • шар 6, layer 6: photos.
setting up the layers

4. Створюємо сітку.

Сітки Reference Grids (або Base Grids) -  це чітко визначена та обмежена область, яка дозволяє вам будувати іконку, зосереджуючись на розмірі і узгодженості елементів.

Зазвичай розмір сітки визначає розмір іконки, і це найперше, з чим ви повинні визначитися на самому початку вашого проекту, оскільки ви завжди бажали б почати з найменшого можливого розміру і потім відштовхуватись від нього.

Тепер, оскільки у нас є чіткий намір створювати іконки для їх подальшого використання для Android OS, ми будемо використовувати рекомендовані розмір і формат і встановимо сітку розміром 96 x 96 px з полями по периметру 4 px.

Крок 1

Почніть з того, що поставте замочок на всіх шарах, крім шару grid layer, далі виберіть інструмент Rectangle Tool (M) істворіть квадрат розміром 96 x 96 px оранжевого кольору (#F15A24), який допоможе нам визначити загальний розмір наших іконок.

creating the main shape for the reference grid

Крок 2

Додайте ще один, менший квадрат, розміром 88 x 88 px (#FFFFFF), який буде нашою активною областю малювання і надасть нам відступ в 4 px по периметру.

creating the main shape for the active drawing area

Крок 3

Створіть групу з двох квадратів, скориставшись комбінацією клавіш Control-G, далі створіть три копії на відстані 24 px одна від одної, переконавшись що вони вирівняні по центру нашого Artboard.

Коли ви це зробили, поставте замочок на активному шарі і перейдіть до наступного. Тут ми і почнемо працювати над нашою першою іконкою.

creating and positioning all the reference grids

5. Створюємо іконку зарядної батареї.

Ми розпочнемо наш проект зі створення іконки зарядної батареї, яку можна буде використати для додатку по збереженню рівня заряду або в якості індикатора статусу, оскільки він виглядатиме досить просто і універсально.

Переконайтесь, що ви знаходитесь на правильному шарі (на другому), потім збільшить масштаб для початку роботи.

Крок 1

Почніть зі створення фону іконки за допомогою круга розміром 88 x 88 px, колір #00C853, потім вирівняйте його по центру відносно нижньої активної області малювання.

creating and positioning the main shape for the battery icons background

Маленька підказка: так як Google дав дуже хорошу інструкцію щодо кольорів Material Design (Material Design guideline for colors), я скористався декількома значеннями їх відповідності і поєднання при створенні фонів.

Крок 2

Створіть основне тіло батарейки за допомогою прямокутника розміром a 24 x 40 px, колір (#FFFFFF), і вирівняйте його по центру відносно більшого круга, на відстані 20 px від його нижнього краю.

creating and positioning the main shape for the battery icons body

Крок 3

Перетворіть фігуру, яку ми щойно створили на контур, замінивши її заливку, Fill, контуром, Stroke (Shift-X), і задавши її ширину, Weight: 4 px, а значення параметра CornerRound Join на панелі Stroke.

turning the battery icons body into an outline using the stroke panel

Крок 4

Створіть перший індикатор рівня зарядки за допомогою прямокутника розміром 12 x 4 px, колір (#FFFFFF), або лінії довжиною 12 px,  колір (#FFFFFF), і товщиною 4 px Weight, які ми вирівняємо по центру відносно батарейки, залишивши відступ по периметру в 4 px.

creating and positioning the battery icons first state indicator bar

Крок 5

Додайте ще два индикатора різні зарядки, які ми розмістимо на відстані 4 px один від одного, після чого згрупуйте їх (Control-G).

adding the remaining state indicator bar to the battery icon

Крок 6

Закінчимо роботу над іконкою, додавши верхню "кепочку" за допомогою прямокутника розміром 8 x 4 px, колір (#FFFFFF), який ми вирівнюємо по центру основної батарейки на відстані 6 px (4 px для відступу + 2 px для верхньої половини лінії).

Як тільки ви закінчите, не забудьте вибрати і згрупувати всі складові фігури батарейки (Control-G), що ми також зробимо для всіх складових частин іконки.

finishing off the battery icon

6. Як створити іконку налаштування.

Оскільки ви завершили першу іконку, поставте замочок на шарі і потім перемістіться на наступний шар (він буде у нас третім). Тепер попрацюємо над іконкою налаштування.

Крок 1

Як ми робили для попередньої іконки, почніть зі створення фону за допомогою круга розміром 88 х 88 px, колір #2196F3, вирівняйте його по центру відносно нижньої активної області малювання.

creating and positioning the main shape for the settings icons background

Крок 2

Почнемо з центрального слайдера, створивши прямокутник розміром 4 x 32 px або лінію довжиною 32 px  і шириною 4 px, колір (#FFFFFF), потім вирівняйте її по центру великого круга на відстані 18 px від верхнього краю.

creating and positionign the main shape for the settings icons center slider

Крок 3

Створіть індикатор слайдера за допомогою прямокутника розміром 12 x 4 px, колір (#FFFFFF), який ми вирівняємо по центру відносно попереднього створеної фігури на відстані 4 px від її нижнього краю.

creating and positioning the main shape for the center sliders state indicator

Крок 4

Додайте нижню область слайдера за допомогою прямокутника розміром 4 x 12 px, колір (#FFFFFF), який ми розмістимо прямо під попереднім індикатором, виділивши і згрупувавши згодом всі три фігури разом (Control-G).

creating and positioning the main shape for the center sliders lower section

Крок 5

Створіть верхню частину лівого слайдера за допомогою меншого прямокутника розміром 4 x 12 px,  колір (#FFFFFF), який ми вирівняємо відносно верхньої сторони центрального слайдера, розмістивши його на відстані 12 px від останнього.

creating and positioning the main shape for the left sliders upper section

Крок 6

Додайте індикатор слайдера за допомогою прямокутника розміром 12 x 4 px, колір (#FFFFFF), який ми розмістимо вертикально до попередньо створеної фігури на відстані  4 px від її нижнього краю.

creating and positioning the main shape for the left sliders state indicator

Крок 7

Закінчимо роботу над лівим слайдером, додавши нижню частину, яку ми створимо за допомогою прямокутника розміром 4 x 32 px, колір (#FFFFFF), і який розмістимо під індикатором.

Коли все завершено, виберіть три фігури і згрупуйте їх (Control-G), як ми зробили це з центральним слайдером.

finishing off the settings icons left slider

Крок 8

Закінчимо працювати над іконою, створивши копію лівого слайдера (Control-C > Control-F), яку ми розмістимо з правої сторони на відстані 4 px від центрального слайдера.

Коли закінчите, не забудьте виділити і згрупувати (Control-G) всі складові елементи, щоб випадково вони не були роз'єднані.

finishing off the settings icon

7. Як створити іконку повідомлення.

Сподіваюсь, що ви вже перемістилися на наступний шар (він буде у нас четвертим), збільшіть третю сітку - і за роботу.

Крок 1

Створіть фон для іконки за допомогою круга розміром 88 x 88 px, колір #7C4DFF, і вирівняйте її по центру відносно нижньої активної області малювання.

creating and positioning the main shape for the messaging icons background

Крок 2

Створіть основну фігуру лівої іконки повідомлення, скориставшись прямокутником розміром 32 x 24 px,  колір (#FFFFFF), потім розмістіть її на відстані 20 px  відносно лівого і правого країв активної області малювання.

creating and positioning the main shape for the messaging icons left text box

Крок 3

Розпочніть налаштовувати фігуру, яку ми щойно створили, перейшовши в режим Pixel Preview (Alt-Control-Y) і потім додавши опорну точку до її нижнього краю на відстані 10 px зліва, скористайтесь для цього інструментом Add Anchor Point Tool.

Коли ви завершили, не забудьте вийти з режиму Pixel Preview, натиснувши на клавіатурі Alt-Control-Y.

adding a new anchor point to the bottom edge of the messaging icons left text box

Крок 4

Подовжуйте налаштовувати прямокутник, вибравши його ліву нижню опорну точку за допомогою інструмента Direct Selection Tool (A), потім потягніть її вниз на 8 px,  скориставшись інструментом Move (клікніть правою кнопкою > Transform > Move > Vertical > 8 px).

adjusting the shape of the messaging icons left text box

Крок 5

Перетворіть отриману фігуру на контур, змінивши її параметр Fill на Stroke (Shift-X) і встановивши Weight на 4 px та Corner на Round Join.

turning the messaging icons left text box into an outline

Крок 6

Додайте меншу лінію тексту, створивши прямокутник розміром 10 x 4 px, колір (#FFFFFF), і розмістіть її всередині маленького блоку повідомлення, вирівнявши її відносно правого лівого кута, переконавшись що залишився проміжок в 4 px.

creating and positioning the first text line onto the messaging icons left text box

Крок 7

Додайте ширшу лінію тексту за допомогою прямокутника розміром 20 x 4 px, колір (#FFFFFF), який ми вирівняємо по лівій стороні попередньої лінії на відстані 4 px від її нижнього краю.

Коли все зроблено, не забудьте виділити і згрупувати всі елементи текстового повідомлення за допомогою комбінації клавіш Control-G.

creating and positioning the second text line onto the messaging icons left text box

Крок 8

Створіть копію (Control-C > Control-F) контуру маленького текстового повідомлення (клікніть правою кнопкою миші > Transform > Reflect > Vertical) і розмістіть її по правій стороні круга на відстані 18 px від правої і нижньої сторони активної області малювання.

creating and positioning the messaging icons second text box

Крок 9

Закінчимо працювати над іконою, видаливши ділянку текстового блоку, який накладається (виділено червоним), так щоб в результаті у вас був проміжок 4 px між двома блоками тексту. Щоб зробити це, просто додайте нову опорну точку на лівій і верхній стороні, а решту - вилучіть. 

Коли закінчите, виділіть всі складові частини іконки і згрупуйте їх, скориставшись комбінацією клавіш на клавіатурі Control-G.

finishing off the messaging icon

8. Як створити іконку будильника.

Оскільки ви, напевно, знаєте що потрібно зробити, поставте замочок на шарі перемістіться на наступний (він буде у нас п'ятим) - і почнемо працювати над іконкою будильника.

Крок 1

Створіть круг розміром 88 x 88 px, колір #FFC107, вирівняйте його по центру активної нижньої області малювання.

creating and positioning the main shape for the alarm icons background

Крок 2

Створіть основне тіло будильника за допомогою круга розміром 40 x 40 px, колір (#FFFFFF), і вирівняйте його по центру відносно активної області малювання на відстані 20 px від її нижнього краю.

creating and positioning the main shape for the alarm icons body

Крок 3

Перетворіть фігуру, яку ми щойно створили, в контур, змінивши Fill на Stroke, потім задайте значення Weight: 4 px на панелі Stroke.

turning the alarm icons main body into an outline

Крок 4

Виберіть інструмент Pen Tool (P) і намалюйте стрілки годинника за допомогою товстої лінії, Stroke, 4 px, колір (#FFFFFF), встановіть Corner на Round Join, переконавшись що ви залишили відступ в 4 px  між більшою стрілкою та більшим колом.

drawing in the little hands inside the alarm clocks main body

Крок 5

Перемістіться на декілька пікселів вгору і створіть прямокутник розміром 8 x 6 px, колір (#FFFFFF), який ми відцентруємо відносно верхньої частини більшого круга, розмістивши його так, що він накладатиметься на верхню половину лінії.

creating and positioning the main shape for the alarm clocks upper section

Крок 6

Додайте прямокутник розміром 16 x 4 px, колір (#FFFFFF), зверху щойно створеного нами прямокутника, після чого виберіть їх і згрупуйте (Control-G).

finishing off the alarm clocks top section

Крок 7

Закінчіть роботу над іконкою, намалювавши два маленькі діагональні елемента за допомогою лінії товщиною 4 px,  встановити колір (#FFFFFF). Коли ви закінчите, виділіть і згрупуйте всі фігури (Control-G), після чого зробіть те ж саме для всієї іконки.

finishing off the alarm clock icon

9. Як створити іконку фотографії.

Перейдіть до шостого і останнього шару, щоб створити іконку фотографій, чим і закінчимо роботу над проектом.

Крок 1

За допомогою круга розміром 88 x 88 px (#FF6F00) створіть фон іконки, який ми вирівняємо по центру відносно нижчої активної області малювання.

creating and positioning the main shape for the photos icons background

Крок 2

Створіть основне тіло фотографії за допомогою прямокутника розміром 36 x 36 px, який ми замалюємо білим кольором (#FFFFFF), а потім вирівняємо по центру відносно іншої активної області малювання на відстані 20 px від її краю.

creating and positioning the main shape for the photos icons body

Крок 3

Перетворіть фігуру, яку ми щойно створили на контур, змінивши Fill на Stroke (Shift-X), а потім встановивши значення Weight на 4 px та Corner на Round Join на панелі Stroke.

turning the photos icons main body into an outline

Крок 4

За допомогою інструменту Pen Tool (P) намалюйте горизонтальні розділяючи лінії товщиною 4 px,  скориставшись інструментом Stroke (#FFFFFF). Розмістіть лінії всередині попередньо створеної фігури на відстані 4 px від її нижнього краю.

adding the horizontal divider line to the lower body of the photos icon

Крок 5

За допомогою тієї ж товстої лінії в 4 px (#FFFFFF) в режимі Round Join почніть малювати першу гору, розмістивши вашу першу опорну точку по лівій стороні фотографії на відстані 10 px  від горизонтальної розділяючої лінії, яку ми щойно створили.

Додайте другу опорну точку на відстані 10 px від горизонтальної та вертикальної лінії. Закінчіть гору,  додавши третю опорну точку на горизонтальній розділяючій лінії, утримуючи при цьому клавішу Shift, щоб намалювати ідеальну діагональ.

drawing the photos icons first mountain

Крок 6

Намалюйте другу меншу гору, використавши ту ж саму товсту лінію 4 px, (#FFFFFF), а коли завершите, виділіть і згрупуйте всі складові фігури фотографії за допомогою комбінацій клавіш Control-G на клавіатурі.

drawing the photos icons second mountain

Крок 7

Створіть нижню область іконки за допомогою прямокутника розміром 28 x 6 px, замалюйте його білим кольором (#FFFFFF), а потім вирівняйте його по центру відносно нижньої області контуру фотографії на відстані 4 px.

creating and positioning the main shape for the lower section of the photos icon

Крок 8

Завершіть роботу над іконкою, перетворивши фігуру, яку ми щойно створили, на контур товщиною 4 px (#FFFFFF) в режимі Round Join, і потім налаштувавши її, додавши нову опорну точку по центру верхньої сторони, яку пізніше ми вилучимо, щоб відкрити шлях (виділено червоним).

Виділіть отриману фігуру і решту складових елементів фотографії та згрупуйте їх (Control-G), потім зробіть теж саме для всіх складових частин іконки.

finishing off the photos icon

Ось і все!

Я сподіваюся, що ви слідували кожному кроку і, що найголовніше, навчився чомусь новому і корисному в процесі роботи. І як кажуть, побачимося на наступному уроці!

Final Design
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.