() translation by (you can also view the original English article)
З давніх часів люди страшно боялися невідомого, і це приводило їх уяву до народження міфічних істот, які переслідують їх протягом століть.
Сьогодні ми збираємося отримати доступ до цієї боротьби проти надприродного і створимо наш власний комплект полювання на вампірів, використовуючи деякі основні форми та інструменти Адобе Ілюстратор.
Як
сказано раніше, покладіть руки на свою срібну чашку, і тримайтеся
міцніше, це обіцяє бути цікавим.
О, і не забудьте, що ви завжди можете розширити проект, відправившись на GraphicRiver, де ви знайдете безліч приголомшливих тематичних вампірських іконок, які очікують захоплення.
1. Налаштуємо новий документ
Оскільки я більш ніж впевнений, що ви вже маєте Ілюстратор у фоновому режимі, відкрийте його та створіть Новий документ (Файл> Створити або Control-N), користуючись наступними налаштуваннями:
- Кількість монтажних областей: 1
- Ширина: 800 px
- Висота: 600 px
- Одиниці: Пікселі
На вкладці Додатково:
- Колірний режим: RGB
- Растрові ефекти: Екран (72ppi)
- Режим перегляду: Усталений
Швидка підказка: деякі з вас, можливо, помітили, що параметр Вирівняти нові об'єкти по піксельній сітці відсутній, це тому що я користуюсь новою версію програмного забезпечення CC 2017, в якому були внесені великі зміни в те, як Ілюстратор оброблює спосіб прив'язки фігур до базової Піксельної сітки.
2. Налаштуємо власну сітку
Оскільки ми збираємося створювати іконки, користуючись бездоганним процесом роботи з пікселями, нам потрібно налаштувати приємну маленьку Сітку, щоб ми могли повністю контролювати наші форми (в тому випадку, якщо ми застосовуємо стару версію програмного забезпечення).
Крок 1
Перейдіть до меню Редагування> Параметри> Напрямні та сітка та застосуйте наступні параметри:
- Лінія сітки через кожні: 1 px
- Підрозділи: 1
Підказка: ви можете дізнатись більше про сітки, прочитавши цю детальну інформацію про те, Як працює система сіток в Ілюстратор.
Крок 2
Як тільки ми налаштуємо нашу власну сітку, все, що потрібно зробити, щоб переконатись, що наші форми виглядають чітко, - увімкнути параметр Прив’язати до сітки, який знаходиться в меню Перегляд, який буде перетворюватися в Прив’язати до точки щоразу, коли ви вводите Перегляд у вигляді пікселів.
Тепер, якщо ви новачок у всьому "ідеальному робочому процесі пікселів", я настійно рекомендую вам пройти цей урок: Як створити ідеальну монтажну область для роботи з пікселями. Він допоможе вам розширити свої технічні навички в найкоротший час.
3. Налаштуємо шари
Коли новий документ створено, було б непогано структурувати наш проект за допомогою декількох шарів, оскільки таким чином ми можемо підтримувати постійний робочий процес, концентруючи увагу на одній іконці за раз.
Тож оберіть панель Шари та створіть чотири шари, які ми перейменуємо наступним чином:
- шар 1: довідкові сітки
- шар 2: біблія
- шар 3: часник
- шар 4: зброя
4. Створимо довідкові сітки
Довідкові сітки (або Базові сітки) являють собою набір чітко визначених еталонних поверхонь, які дозволяють будувати наші іконки, концентруючись на розмірі та послідовності.
Зазвичай розмір сіток визначає розмір фактичних значків, і вони завжди повинні бути першим рішенням, яке ви приймаєте під час запуску нового проекту, оскільки ви завжди будете хотіти почати з мінімально можливого розміру, спираючись на нього.
Тепер, в нашому випадку, ми збираємося створити набір іконок, використовуючи тільки один розмір, а точніше 128 x 128 px, який є досить великим.
Крок 1
Почніть з блокування всіх шарів, окрім шару опорної сітки, а потім візьміть інструмент Прямокутник (M) та створіть оранжевий квадрат 128 x 128 px кольором (#F15A24), який допоможе визначити загальний розмір наших іконок.
Крок 2
Додайте ще один менший квадрат 120 х 120 px (#FFFFFF), який буде нашою активною областю малювання, що дасть нам загальну 4-px прокрутку.
Крок 3
Згрупуйте два квадрати, що складають довідкову сітку, за допомогою комбінації клавіш Control-G, а потім створіть дві копії на відстані 40 px одна від одної, переконавшись, що ви вирівняли їх по центру Монтажної області.
Коли закінчите, заблокуйте поточний шар та переходьте до наступного, де ми почнемо працювати над нашою першою іконкою.
5. Створюємо біблію
Ми збираємося почати проект зі створення невеликої стилізованої біблії, тому переконайтеся, що ви перебуваєте на правильному шарі (це - другий), а потім збільште масштаб першої довідкової сітки і давайте почнемо.
Крок 1
Створіть основну форму для бази Біблії, за допомогою прямокутника розміром 84 x 116 px, розфарбуйте його в #895C4D, а потім вирівняйте по центру основної активної області малювання.
Крок 2
Додайте більш темну секцію обкладинки, скориставшись прямокутником розміром 6 x 116 px, розфарбувавши його у #70473C, а потім центруйте його по лівому краю раніше створеної форми.
Крок 3
Додайте контур на обкладинці за допомогою методу Обведення, створивши копію (Control-C) більшої форми та вставивши її попереду (Control-F). З копією на тому ж місці змініть свою заливку на обведення
(Shift-X), а потім відрегулюйте її, змінивши її колір на #332E2E і встановивши Щільність на 4 px, а також Кут на Округлені стики в панелі Обведення.
Крок 4
Використовуючи інструмент Перо (P), намалюйте вертикальний контур для більш темної ділянки обкладинки, використовуючи те ж 4 px товсте Обведення (#332E2E), потім переконайтеся, що його Опорні точки перекривають шлях більшого контуру, переходячи через правий край основного прямокутника.
Крок 5
Додайте дві горизонтальні роздільні лінії шириною 8 px (#332E2E), розташувавши по одній з кожного боку обкладинки на відстані 8 px від зовнішнього краю більшого контуру. Потім виділіть і згрупуйте (Control-G) всі складові фігури обкладинки.
Крок 6
Використовуючи інструмент Прямокутник (M), створіть форму розміром 68 x 106 px (#332E2E), яку ми перетворимо в контур 2 px, а потім розмістимо його поверх обкладинки, поєднавши його з центром більш світлої секції.
Крок 7
Створіть менший прямокутник розміром 50 x 88 px, який ми
розфарбуємо в #70473C, а потім вирівняйте по центру декоративної лінії, створеної нами в попередньому кроці.
Крок 8
Упорядкуйте фігуру з попереднього кроку, розташувавши коло розміром 20 x 20 px (виділено оранжевим кольором) на кожному з її кутів, а потім виріжте їх, використовуючи режим Мінус передній план в панелі Обробка контурів.
Крок 9
Надайте отриманій формі гарний товстий контур, скориставшись її копією (Control-C> Control-F), яку ми відрегулюємо, змінивши її заливку на обведення (Shift-X), а потім встановивши її колір на #332E2E та Щільність на 4 px.
Крок 10
Наступна частина зажадає від вас трохи більше творчості, так як вам доведеться малювати маленькі вертикальні лінії за допомогою Пера (P). При цьому встановіть Щільність вашого Обведення на 2 px, Кінець на Округлені кінці, і, використовуючи #332E2E в якості основного кольору, поступово додайте лінії, згрупувавши їх (Control-G), після завершення.
Потім, перш ніж перейти до наступного кроку, переконайтеся, що ви вибрали більш темну секцію обкладинки разом з її контурами і лініями деталей і згрупуйте (Control-G) все.
Крок 11
Створіть маленький золотий хрест, застосувавши вертикальний прямокутник розміром 8 x 48 px, над яким ми додамо горизонтальний 24 x 8 px, об'єднавши їх разом, а потім пофарбувавши в колір #E0AA75. Далі ми розташуємо отриману фігуру над більш темною ділянкою обкладинки, на відстані 18 px від верхньої частини його контуру.
Крок 12
Надайте хресту товстий контур 4 px товщиною, використовуючи #332E2E як колір Обведення, потім виділіть і згрупуйте обидві фігури за допомогою поєднання клавіш Control-G.
Потім виділіть хрест разом з нижньою темною секцією, і Згрупуйте (Control-G).
Крок 13
Почніть роботу над нижнім золотим кутом, створивши прямокутник розміром 20 x 20 px (#E0AA75), упорядкувавши його, і вирізавши круг 28 x 28 px з його верхнього лівого кута. Надайте отриманій фігурі контур 4 px товщиною (#332E2E) за допомогою Miter Join, а потім вирівняйте обидва в нижньому правому куті основної форми Біблії.
Крок 14
Додайте прямокутник розміром 6 x 6 px (#332E2E) в щойно створений нами кут, який ми потім відрегулюємо, замінивши його заливку на 2 px тонкого обведення (Shift-X) і встановивши Кути на Miter Join. Потім виділіть і згрупуйте (Control-G) все три фігури.
Крок 15
Завершіть іконку, створивши верхній золотий кут, для цього скориставшись копією створеного нами раніше кута (Control-C> Control-F), а потім розмістіть його угорі, відобразивши горизонтально, для цього клацніть правою кнопкою> Трансформувати> Дзеркальне відображення> Горизонтально.
Потім, після завершення не забудьте виділити і згрупувати всі складові форми Біблії за допомогою поєднання клавіш Control-G.
6. Створюємо часник
Припускаючи, що ви вже заблокували попередній шар і перемістилися на третій, збільште другу довідкову сітку, щоб ми могли почати роботу над нашою другою іконкою.
Крок 1
Створимо основну форму для тіла часника, скориставшись еліпсом 100 x 76 px, яку ми розфарбуємо у колір #AF9591, а потім розташуємо по центру нижньої активної зони малювання на відстані 8 px від її нижнього краю.
Крок 2
Візьміть інструмент Прямокутник (M) та створіть форму розміром 12 х 2 px, яку ми розфарбуємо у колір #AF9591, а потім вирівняємо по центру кола з попереднього кроку, на відстані 32 px від його верхньої опорної точки.
Крок 3
Користуючись інструмент Часткове виділення (A), виберіть нижню опорну точку прямокутника та верхню частину еліпса, а потім видаліть їх за допомогою клавіші Delete. Об'єднайте два отримані шляхи, натиснувши двічі Control-J.
Крок 4
Налаштуйте нову форму, згладжуючи її бічні секції. Вигніть свої опорні точки за допомогою функції Перетворити вибрані опорні точки на гладкі точки, а потім пограйтеся з ними за допомогою ручок, користуючись контрольним зображенням в якості довідника.
Найкращий спосіб зробити це - увімкнути режим Перегляд у вигляді пікселів (Alt-Control-Y), а потім перетягнути та розмістити кінці ручок на 42 px для верхньої опорної точки та 28 px для нижньої.
Крок 5
Надайте отриманій фігурі товстий контур 4 px шириною (#332E2E) використавши Miter Join, а потім оберіть і згрупуйте обидві фігури разом за допомогою комбінації клавіш Control-G.
Крок 6
Створіть центральну секцію часника тим же самим чином, але цього разу використайте менший розміром еліпс 88 x 76 px для основи, кольором #BFA9A5 та згрупуйте (Control-G)
разом його та контур (#332E2E).
Крок 7
Створіть передню частину часнику, виконавши той самий процес, але цього разу, використайте ще менший еліпс 64 x 76 px (#E5D8D3) для основи. Надайте отриманій фігурі товстий контур 4 px (#332E2E), а потім згрупуйте (Control-G) та помістіть дві фігури на інші частини, вирівнявши їх по центру.
Крок 8
Використовуючи інструмент Перо (P), на верхній частині часнику намалюйте дві вертикальні лінії деталей, використовуючи товсте Обведення 2 px з кольором #332E2E та встановленим Кінцем на Округлені кінці. Завершивши, виділіть та згрупуйте (Control-G) усе разом, зробивши те ж саме для інших створених форм іконки пізніше.
Крок 9
Створіть нижню частину часнику, скориставшись прямокутником розміром 28 х 8 px (#BC895B), який ми скорегуємо, поодинці вибравши його нижні опорні
точки та перемістивши їх всередину на 2 px (права кнопка миші> Трансформувати> Перемістити> + / - 2 px в залежності від точки, з якої почнете). Надайте отриманій фігурі товстий контур 4 px (#332E2E) з Round Join, а потім центруйте обидва по нижньому краю активної області малювання.
Крок 10
Додайте пару вертикальних ліній деталей, застосувавши товсте Обведення 2 px (#332E2E) з Округленими кінцями, а потім згрупуйте (Control-G), їх, а також основні фігури нижнього розділу часника разом, відправивши їх позаду більшої форми (права кнопка миші> Упорядкувати> Перемістити назад).
Крім того, оскільки ми закінчили роботу над самим часником, ви можете виділити та згрупувати (Control-G) всі його складові форми.
Крок 11
Почніть працювати над чотками, створивши вісім круглих намистинок 12 x 12 px (#BF8B6F) з товстим обведенням 4 px (#332E2E), які ми розташуємо поруч одна з одною у ряд, щоб їх контури накладалися.
Крок 12
Змініть колір деяких намистин на #AF7054, починаючи з першої, поки не отримаєте чотири темного кольору та ще чотири світлішого кольору.
Крок 13
Відрегулюйте положення деяких частин намиста, вибравши дві пари, а потім рухаючи їх догори, на 2 px та 4 px, доки не отримаєте приємну нахилену арку вниз.
Завершивши, не забудьте виділити та згрупувати (Control-G) усі вісім разом.
Крок 14
Оскільки ми хочемо створити враження, що чотки тягнуться по всій довжині окружності часнику, нам потрібно буде додати ще дві кульки до задньої частини основи, трохи зрушивши їх угору, та не забудьте розфарбувати по черзі решту елементів.
Крок 15
Почніть працювати над маленьким хрестом, що висить з чоток, створивши вертикальний прямокутник розміром 6 х 24 px, на вершині якого ми додамо горизонтальний, розміром 18 х 6 px, та потім об'єднаємо їх разом за допомогою режиму Об'єднати в панелі Обробка контурів. Розфарбуйте отриману форму у #CCCCCC, та надайте їй товстий контур 4 px кольором #332E2E, згрупувавши усе (Control-G) та розташувавши під центральними намистинами,
на відстані 2 px.
Крок 16
Завершіть чотки, намалювавши маленький шматочок струни (#332E2E), інструментом Перо (P), встановіть Щільність на 4 px, згрупувавши струну (Control-G) з намистом, а потім перетягніть.
Крім того, оскільки ми завершили роботу з самою іконкою, ви також можете вибрати та згрупувати (Control-G) всі складові форми.
7. Створюємо зброю
Зараз ми приступаємо до нашої третьої і останньої іконки, тому, якщо ви вже натренувалися, збільште масштаб на своїй довідковій сітці, щоб ми могли розпочати роботу.
Крок 1
Створіть основну форму дерев'яного молотка за допомогою прямокутника розміром 14 х 116 px (#AF7054), яку ми виправимо, встановивши Радіус його верхніх кутів на 2 px, а його нижніх - на 4 px, та вирівняємо отриману форму унизу по центру активної області малювання.
Крок 2
Перемкніть на режим Перегляд у вигляді пікселів (Alt-Control-Y), а потім візьміть інструмент Додати опорну точку (+) та додайте пару опорних точок на відстані 42 px від верхнього краю форми, а іншу пару на відстані 34 px від її нижнього краю. Потім поодинці виділіть та перемістіть верхні середні точки на внутрішню сторону на 2 px за допомогою інструмента Перемістити (права кнопка миші> Трансформувати> Перемістити +/- 2 px, залежно від того, з якої точки ви почнете).
Крок 3
Надайте отриманій фігурі товстий контур 4 px (#332E2E), після цього згрупуйте обидві форми ще раз, скориставшись командою Control-G.
Крок 4
Створіть секцію ручки за допомогою прямокутника розміром 14 x 23 px (#BF8B6F) з контуром 4 px (#332E2E), на вершині якого ми додамо групу з шести 2 px ліній деталей (#332E2E), розташованих по вертикалі 1 px одна від одної. По завершенні, згрупуйте (Control-G) всі складові елементи секції, та вирівняйте їх по центру нижньої форми, на відстані 4 px від її контуру.
Крок 5
Додайте маленький хрест, скориставшись вертикальним прямокутником розміром 2 х 10 px, та горизонтальним, розміром 6 х 2 px на відстані 2 px від верхнього краю, і об'єднайте їх разом, застосувавши команду Об'єднати в панелі Обробка контурів. Розфарбуйте отриману форму за допомогою кольору #332E2E, а потім відцентруйте її по ручці, створеній нами у попередньому кроці, на відстані 6 px від її контуру.
Крок 6
Застосуйте інструмент Перо (P), щоб намалювати маленькі вертикальні лінії деталей, використовуючи товсте Обведення 2 px (#332E2E) з Округленими кінцями, та згодом згрупуйте (Control-G).
Ви також можете виділити та згрупувати (Control-G) складові форми ручки, оскільки ми дуже багато працювали над цією частиною.
Крок 7
Створіть голівку молотка за допомогою заокругленого прямокутника 64 × 34 px (#BF8B6F) з 4 px Радіусом кута та контуром 4 px (#332E2E), далі згрупуйте (Control-G), а потім вирівняйте по центру до нижньої ручки на відстані 6 px від верхнього краю активної зони малювання.
Крок 8
Настав час проявити трохи творчості та намалювати невеличку горизонтальну лінію-деталь на голові молотка,за допомогою Пера (P), з Товщиною обведення 2 px та Округленими кінцями, використовуючи як колір #332E2E.
Збережіть свій час, та після завершення згрупуйте (Control-G), всі лінії разом, а потім виконайте те ж саме з головою та всім молотком.
Крок 9
Створіть основну форму дерев'яного кілка за допомогою прямокутника розміром 12 х 64 px, який ми розфарбуємо у #BF8B6F, а потім розмістимо по лівій стороні молотка, на відстані 10 px від контуру голови молотка.
Крок 10
Відрегулюйте форму, додавши нову опорну точку по центру її нижнього краю, а потім виділіть та пересуньте її сторону угору на 14 px (права кнопка миші> Трансформувати> Перемістити> Вертикально> -14 px).
Крок 11
Створіть та розмістіть трохи коротший прямокутник
розміром 12 x 40 px (#AF7054) на вершині того, який ми тільки-но налаштували, а потім додайте товстий контур 4 px (#332E2E), встановивши кут на Round Join.
Крок 12
Використовуючи інструмент Перо (P), намалюйте горизонтальну роздільну лінію (#332E2E) над нижнім краєм темної секції кола, одночасно застосуйте таку ж товщину 4 px для Обведення.
Крок 13
За допомогою інструмента Перо (P), намалюйте невеличкі вертикальні лінії деталей, використовуючи товщину Обведення 2 px (#332E2E) з Округленими кінцями, далі виділіть та згрупуйте всі складові частини кола (Control-C).
Крок 14
Почніть працювати над основою маленького флакона, створивши заокруглений прямокутник розміром 16 x 44 px (#332E2E) з Радіусом Кута 4 px, який ми розмістимо по правій стороні молотка, на відстані 30 px від контуру голови молотка.
Крок 15
Додайте менший прямокутник розміром 8 х 2 px (#332E2E) поверх тієї форми, яку ми щойно створили, та вирівняйте їх обидва по центру на відстані 2 px один від одного.
Крок 16
Використовуючи інструмент Часткове виділення (A), виберіть нижні опорні точки прямокутника та верхні округлі прямокутники та видаліть їх, натиснувши Delete, та об'єднайте обидва шляхи, двічі натиснувши Control-J. Потім, використовуючи аналогічний процес, яким ми створювали основу часника, відрегулюйте кривизну переходу, перетягуючи отриману залиту фігуру форми з товщиною контуру 4 px Обведення (#332E2E).
Крок 17
Створіть заповнений флакон за допомогою прямокутника 16 x 38 px (#CCCCCC), який ми виправимо, встановивши Радіус його нижніх кутів на 4 px, а потім покладіть його під основний контур (права кнопка миші> Впорядкувати> Перемістити назад).
Крок 18
Заливши фігуру на місці, намалюйте горизонтальну лінію поділу, дотримуючись лінії верхнього краю, скориставшись товстим Обведенням 4 px #332E2E.
Крок 19
Додайте маленькі горизонтальні лінії деталей, використовуючи Обведення 2 px (#332E2E) з Округленими кінцями, згрупувавши потім всі частини (Control-G).
Крок 20
Почнемо працювати над нижньою частиною пробки, створивши прямокутник розміром 8 х 6 px (#895C4D) з контуром 4 px (#332E2E), який згрупуємо (Control-G), а потім розташуємо над верхньою частиною контуру флакону.
Крок 21
Завершіть флакон, а з ним - саму іконку, створивши верхню частину пробки, використовуючи прямокутник розміром 12 x 8 px (#AF7054) із товстим контуром 4 px (#332E2E), на вершині якого ми додамо роздільну лінію 2 px товщиною (#332E2E), а далі згрупуємо (Control-G) і розташуємо фігури над частиною, створеною нами у попередньому кроці.
Після завершення, не забудьте згрупувати (Control-G) складові фігури флакона, зробивши те ж саме для всієї іконки згодом.
Тепер спакуємо!
Зараз ви отримали свій власний набір іконок для полювання на вампірів, який допоможе вам вбити будь-яку істоту, що наважилися перетнути ваш шлях. Сподіваюся, вам вдалося не відстати від кроків та, найголовніше, дізнатися щось нове і корисне на цьому шляху.
