Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Створюємо тематичні іконки Хануки в Адобе Ілюстратор

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

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

Отже, як кажуть, якщо ви гордий власник стоси, надіньте її і приготуйтеся дивуватися.

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

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

Оскільки я більш ніж впевнений, що ви вже маєте Ілюстратор у фоновому режимі, відкрийте його та створіть Новий документ (Файл> Створити або Control-N), користуючись наступними налаштуваннями:

  • Кількість монтажних областей: 1
  • Ширина: 800 px
  • Висота: 600 px
  • Одиниці: Пікселі

На вкладці Додатково:

  • Колірний режим: RGB
  • Растрові ефекти: Екран (72ppi)
  • Режим перегляду: Усталений
setting up a new document

Швидка підказка: деякі з вас, можливо, помітили, що параметр Вирівняти нові об'єкти по піксельній сітці відсутній, це тому що я користуюсь новою версію програмного забезпечення CC 2017, в якому були внесені великі зміни в те, як Ілюстратор оброблює спосіб прив'язки фігур до базової Піксельної сітки.

2. Налаштуємо власну сітку

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

Крок 1

Перейдіть до меню Редагування> Параметри> Напрямні та сітка та застосуйте наступні параметри:

  • Лінія сітки через кожні: 1 px
  • Підрозділи: 1
setting up a custom grid

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

Крок 2

Як тільки ми налаштуємо нашу власну сітку, все, що потрібно зробити, щоб переконатись, що наші форми виглядають чітко, - увімкнути параметр Прив’язати до сітки, який знаходиться в меню Перегляд, який буде перетворюватися в Прив’язати до точки щоразу, коли ви вводите Перегляд у вигляді пікселів.

Тепер, якщо ви новачок у всьому "ідеальному робочому процесі пікселів", я настійно рекомендую вам пройти цей урок: Як створити ідеальну монтажну область для роботи з пікселями. Він допоможе вам розширити свої технічні навички в найкоротший час.

3. Налаштуємо шари

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

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

  • шар 1: довідкові сітки
  • шар 2: дрейдль
  • шар 3: суфганія
  • шар 4: менора
setting up the layers

4. Створимо довідкові сітки

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

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

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

Крок 1

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

creating the main shape for the reference grid

Крок 2

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

creating the main shape for the active drawing area

Крок 3

Згрупуйте два квадрати, що складають довідкову сітку, за допомогою комбінації клавіш Control-G, а потім створіть дві копії на відстані 40 px одна від одної, переконавшись, що ви вирівняли їх по центру Монтажної області.

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

creating and positioning all three reference grids

5. Створюємо іконку дрейдля

Ми збираємося почати проект, з створення маленької дерев'яної іграшки, на якій зазвичай є чотири літери на івриті נ (Nun), ג (Gimmel), ה (Hey) і ש (Shin), ми ж намалюємо тільки третю букву. Як уже сказано, переконайтеся, що ви перебуваєте на правильному шарі (це - другий), а потім збільште масштаб першої довідкової сітки і давайте почнемо.

Крок 1

Створіть основну форму дрейдля, використовуючи прямокутник розміром 64 x 80 px (#BA8258), який ми відрегулюємо, встановивши Радіус його верхніх кутів на 2 px, а нижніх - на 32 px в панелі Трансформувати. Додайте отриману форму по центру, поєднавши її з нижнім краєм основної активної області малювання на відстані 4 px.

creating and positioning the main shape for the dreidels body

Крок 2

Перейдіть в режим Перегляд у вигляді пікселів (Alt-Control-Y) і почніть роботу з наконечником, клацнувши по ньому. Використайте інструмент Додати опорну точку, щоб зробити його більш точним, а потім відрегулюйте його бічні криві, спочатку згладивши їх, скориставшись функцією Перетворити виділені кутові точки на кутові, а потім пограйте з ручками.

adjusting the shape of the dreidels body using the anchor point handles

Крок 3

Додайте до отриманої формі контур, скориставшись методом Зсув контуру, для цього виберіть контур, перейдіть в пункт Об'єкт> Контур> Зсув контуру і введіть 4 px в поле Зсув.

adding the outline to the dreidels body

Крок 4

Змініть колір щойно створеного нами контура, на #54423E, щоб він виділявся з верхньої форми заливки, потім виділіть і згрупуйте їх разом за допомогою поєднання клавіш Control-G.

changing the color of the dreidels main outline

Крок 5

Створіть передню частину іграшки, використавши прямокутник розміром 64 x 62 px (#E0A26E), який ми відрегулюємо, встановивши Радіус його верхніх кутів на 2 px, а нижніх - на 32 px. Застосуйте до отриманої форми контур 4 px товщиною і кольором (#54423E), а потім згрупуйте (Control-G) і розмістіть їх над великою формою, відцентрувавши їх по верхньому краю контуру.

creating and positioning the main shapes for the dreidels front section

Крок 6

Почніть роботу над маленьким символом Hey, створивши прямокутник розміром 28 x 8 px, який ми розфарбуємо, використовуючи #54423E, а потім центруємо на формі дрейдля на відстані 14 px від його контуру.

creating the main shape for the upper section of the dreidels hey symbol

Крок 7

Виділіть щойно створену нами форму, і почніть її корегування, встановивши Радіус її правих кутів на 2 px, а нижній лівий - на 4 px.

adjusting the corner of the top section of the dreidels symbol

Крок 8

Використовуючи інструмент Прямокутник (M), додайте квадрат розміром 4 x 4 px (#54423E), який ми розмістимо над формою, створеної нами в попередніх кроках, вирівнявши його по лівій стороні, а потім відрегулюємо, встановивши Радіус його верхнього лівого кута на 4 px.

adding the top-left corner to the dreidels hey symbol

Крок 9

Завершимо верхню частину символу, створивши коло 8 x 8 px (#54423E), яке ми відрегулюємо, вибравши його верхню і праву опорні точки за допомогою інструменту Часткове виділення (A), а потім видалимо їх, натиснувши Delete. Об'єднайте останні опорні точки за допомогою інструменту Перо (P), а потім виберіть всі форми символу і згрупуйте їх, використовуючи режим Об'єднати в панелі Обробка контурів.

adding the top-right curvature to the top section of the dreidels symbol

Крок 10

Створіть ліве стебло символу за допомогою прямокутника розміром 8 x 18 px (#54423E), встановивши Радіус його верхніх лівих і нижніх правих кутів на 8 px, розташувавши отриману фігуру під створеної нами в попередніх кроках формою, на відстані 4 px.

creating and positioning the left stem for the dreidels symbol

Крок 11

Створіть праве стебло, використовуючи прямокутник розміром 8 x 22 px (#54423E), встановивши Радіус його верхнього лівого кута на 4 px, а нижнього - на 8 px, розташувавши отриману фігуру прямо під верхньою частиною символу, на відстані 2 px від його правого краю .

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

creating and positioning the right stem to the dreidels symbol

Крок 12

Завершіть дрейдл, додавши маленьку ручку, використавши прямокутник розміром 12 х 28 px (#BA8258), і встановіть Радіус його верхніх кутів на 2 px. Застосуйте до отриманої форми контур 4 px (#54423E), а потім Згрупуйте (Control-G) і вирівняйте по центру обидві верхні частини основи іграшки.

Як завжди, перш ніж рухатися далі, не забудьте виділити і згрупувати всі складові фігури іконки разом, за допомогою поєднання клавіш Control-G.

adding the handle to the upper section of the dreidels body

6. Створюємо іконку тарілки з суфганією

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

Крок 1

Створіть основну форму тарілки, скориставшись колом 112 х 112 px, з кольором #82705B, та надайте колу товстий контур 4 px кольором #54423E. Згрупуйте обидві форми (Control-G), а потім розташуйте їх, вирівнявши по центру основної активної області малювання.

creating and positioning the main shapes for the plates body

Крок 2

Додайте невелику деталізовану лінію до центру тарілки, створивши коло 104 × 104 px (#54423E), з якого ми виріжемо менше коло, розміром 100 х 100 px, скориставшись режимом Мінус передній план в панелі Обробка контурів.

adding the circular detail line to the plates body

Крок 3

Створіть центр темнішої секції тарілки за допомогою кола 48 х 48 px (#725F4C) з контуром, товщиною 4 px (#54423E), які ми згрупуємо (Control-G), а потім вирівняємо по центру більшого нижнього корпусу.

adding the center darker section to the plates body

Крок 4

Створимо зірку Давида за допомогою прямокутника 18 × 15 px (#54423E) (1), який ми скорегуємо, додавши нову опорну точку по центру його верхнього краю, скориставшись інструментом Додати опорну точку (+), та видаливши потім бічні частини (2).

Змініть отриману заливку на обведення (Control-X), встановивши його Щільність на 2 px та Кінець на Округлені кінці (3). Після завершення налаштування створіть копію форми (4), яку ми відобразимо горизонтально (права кнопка миші> Трансформувати> Дзеркальне відображення> Горизонтально), а потім перемістіть вниз на 5 px (клацніть правою кнопкою миші> Трансформувати> Перемістити> Вертикально> 5 px) (5). Нарешті, згрупуйте (Control-G) обидві фігури разом, а потім вирівняйте по центру темної секції тарілки.

Оскільки ми досить багато працюємо над тарілкою, ви можете зробити те ж саме з її іншими формами.

creating the plates star of david

Крок 5

Почнемо працювати над першою суфганією, створивши коло розміром 36 х 36 px, кольором #FFBB71 та надайте їй 4 px обведення (#54423E). Потім згрупуйте (Control-G) та розмістіть їх по центру, вирівнявши їх по верхньому краю контуру тарілки.

creating and positioning the main shapes for the first sufganiyah

Крок 6

Додайте желе, заливши створений круг 4 х 4 px кольором (#E87552) з товстим контуром 4 px (#54423E), які ми згрупуємо (Control-G), а потім вирівняємо по центру форми пончика.

creating and positioning the main shapes for the sufganiyahs jelly filling

Крок 7

Завершіть пончик, додавши цукрову пудру, використавши купу кругів розміром 2 х 2 px, кольором #FFE3C5. Збережіть свій час, тож, як тільки закінчите, обов'язково згрупуйте кола разом, використовуючи комбінацію клавіш Control-G, та повторюючи той самий процес для композиційних форм пончика пізніше.

adding the powdered sugar to the first sufganiyah

Крок 8

Створіть другу суфганію, скориставшись копією тієї, що ми щойно створили (Control-C> Control-F), та розмістіть на нижньому лівому боці тарілки, на відстані 4 px від оригіналу.

Також ви можете надати дублікату різні відчуття, повертаючи його горизонтально або вертикально (клацніть правою кнопкою миші> Трансформувати> Дзеркальне відображення> Горизонтально або Вертикально, залежно від того, що вирішите), так що вони не будуть виглядати однаковими.

creating and positioning the second sufganiyah

Крок 9

Додайте третій і останній пончик, скориставшись ще однією копією оригіналу (Control-C> Control-F), яку ми розмістимо по правій стороні тарілки, на відстані 16 px зверху та 12 px вліво.

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

creating and positioning the third sufganiyah

7. Створюємо іконку Менори

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

Крок 1

Створіть основну форму для Менори, намалювавши прямокутник розміром 40 х 4 px, кольором #FCC96D, з контуром 4 px (#54423E), а потім центруйте його по нижньому краю активної області малювання.

creating and positioning the main shapes for the menorahs base

Крок 2

За допомогою інструмента Прямокутник (M) додайте горизонтальну деталізовану лінію розміром 40 х 2 px до центру щойно створених форм, кольором #54423E.

adding the horizontal detail line to the menorahs base

Крок 3

Додайте бічні розділи основи, за допомогою двох прямокутників розміром 2 x 8 px (#54423E), які ми відцентруємо по вертикалі за допомогою панелі Вирівняти, виділивши та об'єднавши (Control-G) всі ці фігури пізніше.

adding the side section to the menorahs base

Крок 4

Створіть круглу задню частину основи за допомогою еліпсу розміром 28 х 16 px, кольором #DDA654, та потім видаліть нижню частину, вибравши нижню опорну точку за допомогою інструмента Часткове виділення (A), і натиснувши Delete. Об'єднайте отриманий шлях за допомогою комбінації клавіш Control-J, а потім надайте йому товстий контур 4 px (#54423E), згрупуйте (Control-G) та розташуйте обидва позаду нижньої секції основи (права кнопка миші> Впорядкувати> Перемістити назад).

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

creating and positioning the back section of the menorahs base

Крок 5

Створіть центральний "хребет" Менори, скориставшись прямокутником 2 x 72 px (#DDA654) з контуром 4 px (#54423E), які ми вирівняємо по центру основи, розташувавши їх так, що контури перекриють один інший.

creating and positioning the main shapes for the menorahs spine

Крок 6

Почнемо працювати над основними фігурами для першого набору ручок, створивши коло розміром 26 х 26 px (# DDA654), з якого виріжемо розміром менше 22 х 22 px, відцентруємо форму відповідно до стовбура та розташуємо на відстані 23 px від нижнього верхнього краю області активного малювання.

creating and positioning the main shapes for the menorahs first set of arms

Крок 7

Створіть другий набір ручок, з колом 54 х 54 px (#DDA654), виріжте з нього менше, 50 x 50 px, та вирівняйте отриману форму по формі з попереднього кроку.

creating and positioning the main shapes for the menorahs second set of arms

Крок 8

Створіть третій набір ручок, скориставшись колом 82 х 82 px (#DDA654), виріжте з нього менше коло 78 x 78 px, та вирівняйте отриману форму до попередньо створеного кільця.

creating and positioning the main shapes for the menorahs third set of arms

Крок 9

Створіть основні форми для четвертого та останнього набору ручок, використовуючи коло 110 х 110 px (#DDA654), з якого ми вирізаємо менший розмір 106 х 106 px, та вирівняйте отриману форму по центру попереднього кільця.

creating and positioning the main shapes for the menorahs fourth set of arms

Крок 10

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

adjusting the shape of the menorahs first ring

Крок 11

Припускаючи, що ви закінчили видалення верхніх половинок, надайте кожній з отриманих форм контур 4 px, та обов'язково змініть колір на #54423E.

adding the outlines to the menorahs arms

Крок 12

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

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

correctly positioning the outlines of the menorahs arms

Крок 13

Створимо основні форми для центральної свічки Менори, скориставшись прямокутником розміром 2 х 16 px (#FFE1BD) з товстим контуром 4 px (#54423E), який ми розмістимо на вершині центрального стовбуру, переконавшись, що їх обриси накладаються.

creating and positioning the main shapes for the menorahs center candle

Крок 14

Додайте прямокутник 12 x 4 px (#54423E) до основи контуру свічки та ще один 4 x 2 px (#54423E) над ним, далі виділіть та згрупуйте (Control-G) всі його складові форми.

adding details to the menorahs center candle

Крок 15

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

adding the remaining candles to the menorahs arms

Крок 16

Коли свічки вже на місці, створимо основні форми для передньої декоративної тарілки, скориставшись еліпсом 30 x 22 px (#FCC96D) із товщиною 4 px (#54423E), який ми згрупуємо (Control-G), а потім вирівняємо по центру Менори, на відстані 31 px від її основи.

creating and positioning the main shapes for the menorahs front decorative plate

Крок 17

Оберіть копію (Control-C) зірки Давида, яку ми створили для другої іконки, і вставте її (Control-F) у третю референсну сітку, орієнтуючись по центру декоративної тарілки Менори.

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

positioning the start of david onto the menorahs front decorative plate

Крок 18

Завершимо іконку, додавши меншу декоративну тарілку, за допомогою еліпсу 6 x 4 px (#FCC96D) з контуром 4 px (#54423E), який ми згрупуємо (Control-G), а потім вирівняємо по центру четвертої ручки Менори, на відстані 12 px від її основи.

Після того як всі частини на місці, виберіть усі складові форми іконки та згрупуйте їх.

creating and positioning the main shapes for the menorahs secondary decorative plate

Це все!

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

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

finished project preview
Advertisement
Advertisement
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.