Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon 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. Створюємо біблію

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

Крок 1

Створіть основну форму для бази Біблії, за допомогою прямокутника розміром 84 x 116 px, розфарбуйте його в #895C4D, а потім вирівняйте по центру основної активної області малювання.

creating and positioning the main shape for the bibles body

Крок 2

Додайте більш темну секцію обкладинки, скориставшись прямокутником розміром 6 x 116 px, розфарбувавши його у #70473C, а потім центруйте його по лівому краю раніше створеної форми.

adding the darker section to the bibles cover

Крок 3

Додайте контур на обкладинці за допомогою методу Обведення, створивши копію (Control-C) більшої форми та вставивши її попереду (Control-F). З копією на тому ж місці змініть свою заливку на обведення (Shift-X), а потім відрегулюйте її, змінивши її колір на #332E2E і встановивши Щільність на 4 px, а також Кут на Округлені стики в панелі Обведення.

adding the outline to the bibles body

Крок 4

Використовуючи інструмент Перо (P), намалюйте вертикальний контур для більш темної ділянки обкладинки, використовуючи те ж 4 px товсте Обведення (#332E2E), потім переконайтеся, що його Опорні точки перекривають шлях більшого контуру, переходячи через правий край основного прямокутника.

adding the vertical outline to the darker section of the bibles cover

Крок 5

Додайте дві горизонтальні роздільні лінії шириною 8 px (#332E2E), розташувавши по одній з кожного боку обкладинки на відстані 8 px від зовнішнього краю більшого контуру. Потім виділіть і згрупуйте (Control-G) всі складові фігури обкладинки.

adding the horizontal divider lines to the darker section of the bibles cover

Крок 6

Використовуючи інструмент Прямокутник (M), створіть форму розміром 68 x 106 px (#332E2E), яку ми перетворимо в контур 2 px, а потім розмістимо його поверх обкладинки, поєднавши його з центром більш світлої секції.

adding the inner decorative line to the bibles cover

Крок 7

Створіть менший прямокутник розміром 50 x 88 px, який ми розфарбуємо в #70473C, а потім вирівняйте по центру декоративної лінії, створеної нами в попередньому кроці.

creating and positioning the main shape for the bibles larger cover insertion

Крок 8

Упорядкуйте фігуру з попереднього кроку, розташувавши коло розміром 20 x 20 px (виділено оранжевим кольором) на кожному з її кутів, а потім виріжте їх, використовуючи режим Мінус передній план в панелі Обробка контурів.

adjusting the inner darker section of the bibles cover

Крок 9

Надайте отриманій формі гарний товстий контур, скориставшись її копією (Control-C> Control-F), яку ми відрегулюємо, змінивши її заливку на обведення (Shift-X), а потім встановивши її колір на #332E2E та Щільність на 4 px.

adding the outline to the bibles inner darker section

Крок 10

Наступна частина зажадає від вас трохи більше творчості, так як вам доведеться малювати маленькі вертикальні лінії за допомогою Пера (P). При цьому встановіть Щільність вашого Обведення на 2 px, Кінець на Округлені кінці, і, використовуючи #332E2E в якості основного кольору, поступово додайте лінії, згрупувавши їх (Control-G), після завершення.

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

Крок 11

Створіть маленький золотий хрест, застосувавши вертикальний прямокутник розміром 8 x 48 px, над яким ми додамо горизонтальний 24 x 8 px, об'єднавши їх разом, а потім пофарбувавши в колір #E0AA75. Далі ми розташуємо отриману фігуру над більш темною ділянкою обкладинки, на відстані 18 px від верхньої частини його контуру.

creating and positioning the main shapes for the bibles golden cross

Крок 12

Надайте хресту товстий контур 4 px товщиною, використовуючи #332E2E як колір Обведення, потім виділіть і згрупуйте обидві фігури за допомогою поєднання клавіш Control-G.

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

adding the outline to the bibles cross

Крок 13

Почніть роботу над нижнім золотим кутом, створивши прямокутник розміром 20 x 20 px (#E0AA75), упорядкувавши його, і вирізавши круг 28 x 28 px з його верхнього лівого кута. Надайте отриманій фігурі контур 4 px товщиною (#332E2E) за допомогою Miter Join, а потім вирівняйте обидва в нижньому правому куті основної форми Біблії.

creating and positioning the main shapes for the bibles bottom-right golden corner

Крок 14

Додайте прямокутник розміром 6 x 6 px (#332E2E) в щойно створений нами кут, який ми потім відрегулюємо, замінивши його заливку на 2 px тонкого обведення (Shift-X) і встановивши Кути на Miter Join. Потім виділіть і згрупуйте (Control-G) все три фігури.

adding the little detail square to the bibles bottom golden corner

Крок 15

Завершіть іконку, створивши верхній золотий кут, для цього скориставшись копією створеного нами раніше кута (Control-C> Control-F), а потім розмістіть його угорі, відобразивши горизонтально, для цього клацніть правою кнопкою> Трансформувати> Дзеркальне відображення> Горизонтально.

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

adding the top-right golden corner to the bibles cover

6. Створюємо часник

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

Крок 1

Створимо основну форму для тіла часника, скориставшись еліпсом 100 x 76 px, яку ми розфарбуємо у колір #AF9591, а потім розташуємо по центру нижньої активної зони малювання на відстані 8 px від її нижнього краю.

creating and positioning the main shape for the lower section of the garlics body

Крок 2

Візьміть інструмент Прямокутник (M) та створіть форму розміром 12 х 2 px, яку ми розфарбуємо у колір #AF9591, а потім вирівняємо по центру кола з попереднього кроку, на відстані 32 px від його верхньої опорної точки.

creating and positioning the main shape for the upper section of the garlics body

Крок 3

Користуючись інструмент Часткове виділення (A), виберіть нижню опорну точку прямокутника та верхню частину еліпса, а потім видаліть їх за допомогою клавіші Delete. Об'єднайте два отримані шляхи, натиснувши двічі Control-J.

uniting the top and bottom paths of the garlics body

Крок 4

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

Найкращий спосіб зробити це - увімкнути режим Перегляд у вигляді пікселів (Alt-Control-Y), а потім перетягнути та розмістити кінці ручок на 42 px для верхньої опорної точки та 28 px для нижньої.

adjusting the main shape of the garlics body

Крок 5

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

adding the outline to the garlics main shape

Крок 6

Створіть центральну секцію часника тим же самим чином, але цього разу використайте менший розміром еліпс 88 x 76 px для основи, кольором #BFA9A5 та згрупуйте (Control-G) разом його та контур (#332E2E).

creating and positioning the main shapes for the garlics center section

Крок 7

Створіть передню частину часнику, виконавши той самий процес, але цього разу, використайте ще менший еліпс 64 x 76 px (#E5D8D3) для основи. Надайте отриманій фігурі товстий контур 4 px (#332E2E), а потім згрупуйте (Control-G) та помістіть дві фігури на інші частини, вирівнявши їх по центру.

creating and positioning the main shapes for the garlics front section

Крок 8

Використовуючи інструмент Перо (P), на верхній частині часнику намалюйте дві вертикальні лінії деталей, використовуючи товсте Обведення 2 px з кольором #332E2E та встановленим Кінцем на Округлені кінці. Завершивши, виділіть та згрупуйте (Control-G) усе разом, зробивши те ж саме для інших створених форм іконки пізніше.

adding the two vertical detail lines to the upper section of the garlics body

Крок 9

Створіть нижню частину часнику, скориставшись прямокутником розміром 28 х 8 px (#BC895B), який ми скорегуємо, поодинці вибравши його нижні опорні точки та перемістивши їх всередину на 2 px (права кнопка миші> Трансформувати> Перемістити> + / - 2 px в залежності від точки, з якої почнете). Надайте отриманій фігурі товстий контур 4 px (#332E2E) з Round Join, а потім центруйте обидва по нижньому краю активної області малювання.

creating and positioning the main shapes for the garlics bottom section

Крок 10

Додайте пару вертикальних ліній деталей, застосувавши товсте Обведення 2 px (#332E2E) з Округленими кінцями, а потім згрупуйте (Control-G), їх, а також основні фігури нижнього розділу часника разом, відправивши їх позаду більшої форми (права кнопка миші> Упорядкувати> Перемістити назад).

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

adding details to the bottom section of the garlics body

Крок 11

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

creating and positioning the main shapes for the garlics rosary beads

Крок 12

Змініть колір деяких намистин на #AF7054, починаючи з першої, поки не отримаєте чотири темного кольору та ще чотири світлішого кольору.

adjusting the colors of some of the garlics rosary beads

Крок 13

Відрегулюйте положення деяких частин намиста, вибравши дві пари, а потім рухаючи їх догори, на 2 px та 4 px, доки не отримаєте приємну нахилену арку вниз.

Завершивши, не забудьте виділити та згрупувати (Control-G) усі вісім разом.

adjusting the position of the garlics rosary beads

Крок 14

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

adding the back beads to the garlics rosary

Крок 15

Почніть працювати над маленьким хрестом, що висить з чоток, створивши вертикальний прямокутник розміром 6 х 24 px, на вершині якого ми додамо горизонтальний, розміром 18 х 6 px, та потім об'єднаємо їх разом за допомогою режиму Об'єднати в панелі Обробка контурів. Розфарбуйте отриману форму у #CCCCCC, та надайте їй товстий контур 4 px кольором #332E2E, згрупувавши усе (Control-G) та розташувавши під центральними намистинами, на відстані 2 px.

creating and positioning the main shapes for the garlics front cross

Крок 16

Завершіть чотки, намалювавши маленький шматочок струни (#332E2E), інструментом Перо (P), встановіть Щільність на 4 px, згрупувавши струну (Control-G) з намистом, а потім перетягніть.

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

garlic icon finished

7. Створюємо зброю

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

Крок 1

Створіть основну форму дерев'яного молотка за допомогою прямокутника розміром 14 х 116 px (#AF7054), яку ми виправимо, встановивши Радіус його верхніх кутів на 2 px, а його нижніх - на 4 px, та вирівняємо отриману форму унизу по центру активної області малювання.

creating and positioning the main shape for the mallets body

Крок 2

Перемкніть на режим Перегляд у вигляді пікселів (Alt-Control-Y), а потім візьміть інструмент Додати опорну точку (+) та додайте пару опорних точок на відстані 42 px від верхнього краю форми, а іншу пару на відстані 34 px від її нижнього краю. Потім поодинці виділіть та перемістіть верхні середні точки на внутрішню сторону на 2 px за допомогою інструмента Перемістити (права кнопка миші> Трансформувати> Перемістити +/- 2 px, залежно від того, з якої точки ви почнете).

further adjusting the shape of the mallets body

Крок 3

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

adding the outline to the mallets main body

Крок 4

Створіть секцію ручки за допомогою прямокутника розміром 14 x 23 px (#BF8B6F) з контуром 4 px (#332E2E), на вершині якого ми додамо групу з шести 2 px ліній деталей (#332E2E), розташованих по вертикалі 1 px одна від одної. По завершенні, згрупуйте (Control-G) всі складові елементи секції, та вирівняйте їх по центру нижньої форми, на відстані 4 px від її контуру.

creating and positioning the main shapes for the mallets handle

Крок 5

Додайте маленький хрест, скориставшись вертикальним прямокутником розміром 2 х 10 px, та горизонтальним, розміром 6 х 2 px на відстані 2 px від верхнього краю, і об'єднайте їх разом, застосувавши команду Об'єднати в панелі Обробка контурів. Розфарбуйте отриману форму за допомогою кольору #332E2E, а потім відцентруйте її по ручці, створеній нами у попередньому кроці, на відстані 6 px від її контуру.

adding the little cross onto the mallets handle

Крок 6

Застосуйте інструмент Перо (P), щоб намалювати маленькі вертикальні лінії деталей, використовуючи товсте Обведення 2 px (#332E2E) з Округленими кінцями, та згодом згрупуйте (Control-G).

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

adding the little detail lines to the mallets body

Крок 7

Створіть голівку молотка за допомогою заокругленого прямокутника 64 × 34 px (#BF8B6F) з 4 px Радіусом кута та контуром 4 px (#332E2E), далі згрупуйте (Control-G), а потім вирівняйте по центру до нижньої ручки на відстані 6 px від верхнього краю активної зони малювання.

creating and positioning the main shapes for the mallets head

Крок 8

Настав час проявити трохи творчості та намалювати невеличку горизонтальну лінію-деталь на голові молотка,за допомогою Пера (P), з Товщиною обведення  2 px та Округленими кінцями, використовуючи як колір #332E2E.

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

adding the horizontal detail lines to the mallets head

Крок 9

Створіть основну форму дерев'яного кілка за допомогою прямокутника розміром 12 х 64 px, який ми розфарбуємо у #BF8B6F, а потім розмістимо по лівій стороні молотка, на відстані 10 px від контуру голови молотка.

creating and positioning the main shape for the wooden stakes body

Крок 10

Відрегулюйте форму, додавши нову опорну точку по центру її нижнього краю, а потім виділіть та пересуньте її сторону угору на 14 px (права кнопка миші> Трансформувати> Перемістити> Вертикально> -14 px).

adjusting the shape of the wooden stakes body

Крок 11

Створіть та розмістіть трохи коротший прямокутник розміром 12 x 40 px (#AF7054) на вершині того, який ми тільки-но налаштували, а потім додайте товстий контур 4 px (#332E2E), встановивши кут на Round Join.

adding the outline to the main shape of the stakes body

Крок 12

Використовуючи інструмент Перо (P), намалюйте горизонтальну роздільну лінію (#332E2E) над нижнім краєм темної секції кола, одночасно застосуйте таку ж товщину 4 px для Обведення.

adding the horizontal divider line to the darker section of the stakes body

Крок 13

За допомогою інструмента Перо (P), намалюйте невеличкі вертикальні лінії деталей, використовуючи товщину Обведення 2 px (#332E2E) з Округленими кінцями, далі виділіть та згрупуйте всі складові частини кола (Control-C).

adding the little vertical detail lines to the wooden stakes body

Крок 14

Почніть працювати над основою маленького флакона, створивши заокруглений прямокутник розміром 16 x 44 px (#332E2E) з Радіусом Кута 4 px, який ми розмістимо по правій стороні молотка, на відстані 30 px від контуру голови молотка.

creating and positioning the main shape for the vials body

Крок 15

Додайте менший прямокутник розміром 8 х 2 px (#332E2E) поверх тієї форми, яку ми щойно створили, та вирівняйте їх обидва по центру на відстані 2 px один від одного.

creating and positioning the main shape for the vials neck

Крок 16

Використовуючи інструмент Часткове виділення (A), виберіть нижні опорні точки прямокутника та верхні округлі прямокутники та видаліть їх, натиснувши Delete, та об'єднайте обидва шляхи, двічі натиснувши Control-J. Потім, використовуючи аналогічний процес, яким ми створювали основу часника, відрегулюйте кривизну переходу, перетягуючи отриману залиту фігуру форми з товщиною контуру 4 px Обведення (#332E2E).

adjusting the stroke of the vials body

Крок 17

Створіть заповнений флакон за допомогою прямокутника 16 x 38 px (#CCCCCC), який ми виправимо, встановивши Радіус його нижніх кутів на 4 px, а потім покладіть його під основний контур (права кнопка миші> Впорядкувати> Перемістити назад).

adding the fill section to the vials outline

Крок 18

Заливши фігуру на місці, намалюйте горизонтальну лінію поділу, дотримуючись лінії верхнього краю, скориставшись товстим Обведенням 4 px #332E2E.

adding the horizontal divider line to the vials fill shape

Крок 19

Додайте маленькі горизонтальні лінії деталей, використовуючи Обведення 2 px (#332E2E) з Округленими кінцями, згрупувавши потім всі частини (Control-G).

adding the horizontal detail lines to the vials body

Крок 20

Почнемо працювати над нижньою частиною пробки, створивши прямокутник розміром 8 х 6 px (#895C4D) з контуром 4 px (#332E2E), який згрупуємо (Control-G), а потім розташуємо над верхньою частиною контуру флакону. 

creating and positioning the main shapes for the lower section of the vials cork

Крок 21

Завершіть флакон, а з ним - саму іконку, створивши верхню частину пробки, використовуючи прямокутник розміром 12 x 8 px (#AF7054) із товстим контуром 4 px (#332E2E), на вершині якого ми додамо роздільну лінію 2 px товщиною (#332E2E), а далі згрупуємо (Control-G) і розташуємо фігури над частиною, створеною нами у попередньому кроці.  

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

weapons icon finished

Тепер спакуємо!

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

project final 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.