Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Emoticon Design
Design

Як створити набір смайликів в Adobe Illustrator

by
Difficulty:AdvancedLength:LongLanguages:

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

Final product image
What You'll Be Creating
Цей урок був опублікований в січні 2013 як урок Envato Tuts+ Premium. Тепер він доступний безкоштовно. Хоча він не використовує найновішу версію Adobe Illustrator, методи і процес доречні і сьогодні.

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

Хочете класні смайлики для вашого наступного проекту? Тоді погліньте на великий вибір преміум смайликів на GraphicRiver і Envato Elements.

1. Як створити основу смайлика

Крок 1

Спочатку створіть новий документ (Command-N) і додайте шари у такому порядку:  верхній шар "Обличчя", потім шар " Ескізи облич" і шар "Основа" (тут ми збираємося малювати наших базову форму смайлика) і нарешті шар "Ескіз основи".

Create the Emoticon Base

Крок 2

На шарі "Ескіз основи" намалюємо нашу основу фігурки смайлика, використовуючи інструмент "Пензель" (Shift-B). У нашому випадку, це просто коло з кількома елементами для визначення тіні та світла. Зменшіть непрозорості ескізу до 40% і заблокуйте шар "Ескіз основи". Ми збираємося почати малювати на шарі "Основа".

Create the Emoticon Base

Крок 3

Розмір кола (L300х300 px. Це базова форма, тому намалюйте його з  чорним штрихом 1pt.

Create the Emoticon Base

Крок 4

Виділіть коло та застосувати параметр Зсув контуру (Об'єкт > Шлях > Зсув контуру) зі значенням зсуву -10 px. Так ми отримаємо трохи менше коло, ніж оригінал (ви також можете зробити це шляхом копіювання і трансформації).

Create the Emoticon Base

Крок 5

Тепер продублюйте коло (синє на зображенні) з допомогою Command-C для копіювання та Command-F, щоб вставити попереду і перетягніть його як пурпурове коло на зображенні. Ще раз скопіюйте синє коло, виберіть обидва колв та наимсніть Перетин на панелі "Обробка контурів".

Create the Emoticon Base

І ми отримаємо нову фігуру (жовта) — це світла область смайлика.

Create the Emoticon Base

Крок 6

Тепер, повторіть процес — знову зробіть копію кола. Перетягніть його як пурпурове коло на зображенні, дублюйте синє коло знову, виділіть обидва та  знову застосуйте Перетин на панелі "Обробка контурів".

Create the Emoticon Base

І ми отримаємо наступну фігуру (жовта), темнішу область смайлика.

Create the Emoticon Base

Крок 7

Виберіть всі фігури та натисніть D. Це основа нашого смайлика без кольору. Розмальовуючи смайлик ми додамо трохи більше деталей. Тепер ви можете видалити шар "Ескіз основи".

Create the Emoticon Base

Крок 8

Це наша палітра:

  • Білий #FFFFFF
  • Жовтий #FCF17C
  • Червоний #F05850
  • Синій #67CDF5
  • Коричневий #641912

Використовуючи ці кольори, ми створимо всі потрібні градієнти, щоб мати більш повну палітру (ми використаємо лише лінійні градієнти). Щоб зберегти палітру кольорів, виберіть колір і клацніть значок Нова група кольорів на панелі "Зразки".

Create the Emoticon Base

Просто вкажіть назву вашої палітри та натисніть кнопку ОК.

Create the Emoticon Base

Крок 9

Тепер ми створимо градієнт для кожного кольору, спочатку з непрозорістю від 100% до 0% для кожного. Щоб змінити кольори на панелі градієнтів, просто двічі клацніть на колір і ви побачите вашу панель "Зразки", і там просто змініть колір.

Create the Emoticon Base

Крок 10

Тепер зробіть градієнти усіх кольорів з білим.

Create the Emoticon Base

Далі з жовтим.

Create the Emoticon Base

Червоний колір.

Create the Emoticon Base

І нарешті синій. Тепер у нас є всі комбінації градієнтів цих кольорів, і це буде нашою палітрою. Щоб додати градієнти на панель "Зразки", вам потрібно перетягнути їх з вікна кольору.

Create the Emoticon Base

Крок 11

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

Create the Emoticon Base

Крок 12

Тепер застосуємо червоно-жовтий градієнт; На панелі "Градієнт" оберемо радіальний замість лінійного. Це буде єдиний радіальний градієнт, який ми використаємо.

Create the Emoticon Base

Крок 13

Для тіні ми використовуємо червоний градієнта як на зображенні.

Create the Emoticon Base

Крок 14

Для освітлення ми використаємо білий градієнт. Тепер ми можемо побачити трохи об'єму на нашій формі.

Create the Emoticon Base

Крок 15

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

Create the Emoticon Base

2. Як створити смайлика, що плаче

Крок 1

Зробимо п'ять копій основи смайлика і в шарі "Ескіз облич", з допомогою інструменту "Пензель"Ляпка"" (Shift-B), намалюємо ескізи — сумного, сердитого, здивованого, щасливого та закоханого смайлика. Ми встановимо непрозорість на 40% щоб легше малювати та заблокуємо цей шар, і зрештою починаємо перемальовувати на шар "Обличчя".

Create the Crying Emoticon

Крок 2

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

Create the Crying Emoticon

Крок 3

Тепер щоб додати більше деталей, таких блиск на сльозах, ми намалюємо трикутники за допомогою інструменту "Багатокутник". Об'єднаємо їх на панелі "Обробка контурів" у форму прямокутника.

Create the Crying Emoticon

Крок 4

Щоб намалювати блиск, намалюйте трикутник за допомогою інструменту "Багатокутник". Намалюйте багатокутник і клавішами стрілки  вгору і вниз, ви зможете додати або видалити сторони багатокутника. Зробіть трикутник, а потім дублюйте його та перемістіть натиснувши клавішу Alt. Потім  натисніть Command-D, щоб дублювати копію на такій же відстані, зробіть три копії та поверніть їх з допомогою Rotate Tool (R) як на малюнку. Нарешті, застосуйте кнопку Об'єднати на панелі "Обробка контурів".

Create the Crying Emoticon

Крок 5

Щоб намалювати рот, ми починаємо з округленого прямокутника. Виберіть його, а потім інструментом "Гумка" (Shift-Е), натиснувши Alt ми зітремо половину фігури. Потім ми зробимо копію нашої форми і знову з інструментом "Гумка" розріжемо його, щоб отримати зуби.

Додайте кілька прямокутників для детальнішого вигляду. Намалюйте один і потім копіюйте. Виберіть його цей та натисніть Alt-Shift і перетягніть, щоб отримати копію вашого прямокутника. Натисніть Command-D, щоб зробити ваш останній крок, і ви отримаєте копію прямокутника на такій же відстані. Потім виберіть всі три. Натисніть об'єднати, а потім перетин на панелі "Обробка контурів" на фігурі зубів (не забудьте дублювати основу зубів).

Create the Crying Emoticon

Крок 6

Тепер для того, щоб додати тінь зубів. Використовуйте базову форму, скопіюйте її і перетягніть трохи вниз  а потім копіюйте знову і ви отримаєте тінь. Для язика можна використати основу рота й масштабувати її, потім дублювати й натиснути кнопку об'єднати на панелі "Обробка контурів". Нарешті зробіть копію основи рота  і оберіть Перетин.

Create the Crying Emoticon

Крок 7

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

Create the Crying Emoticon

Ось обличчя сумного смайлика. Не забувайте все групувати та вирівнювати по центру.

Create the Crying Emoticon

Крок 8

Виберіть обличчя і натисніть D, щоб додати чорну лінію і білу заливку. Якщо вам необхідно відправити що-небудь на передній або задній план, просто виділіть об'єкт і виріжіть (Command-X) і виберіть об'єкт, по переду (Command-F) або позаду (Command-B) якого потрібно вставити. Вставте сльози всередину основи нашого смайлика за допомогою панелі "Обробка контурів" і вирівняйте все по центру. Тепер ми почнемо додавати кольори.

Create the Crying Emoticon

Крок 9

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

Create the Crying Emoticon

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

Create the Crying Emoticon

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

Create the Crying Emoticon

3. Як створити сердитого смайлика

Крок 1

Тепер сердитий смайлик, а почнемо ми його з кіл для очей.

Create the Angry Emoticon

Крок 2

Намалюйте очі, спочатку використайте інструмент "Гумка" (Shift-Е) натиснувши Alt і потягніть, щоб розділити коло навпіл. Потім продублюйте вашу фігуру, перетягніть її й використайте мінус перед на панелі "Обробка контурів", щоб отримати повіку. Нарешті скопіюйте вашу форму ока  та зітріть потягнувши, щоб зробити тінь.

Create the Angry Emoticon

Крок 3

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

Create the Angry Emoticon

Крок 4

Щоб зробити роги, намалюйте коло і потім захопіть верхній вузол і перетягніть його, як на зображенні. Тоді змініть опорну точку інструментом "Перетворення опорної точки" (Shift-К). За допомогою цього інструменту можна додавати та вилучати точки. Нарешті поверніть ріг, як показано на зображенні.

Create the Angry Emoticon

Крок 5

Рот, ми починаємо з трикутника, і потім видаліть вузли з допомогою інструменту "Ножиці" (C). Просто натисніть на вузли і видаліть сегмент. Інший спосіб це зробити, вибравти їх та на панелі опцій, натиснути на іконку з ножицями. Розріз буде саме в точках які ви обрали. Потім, після видалення вузлів, додати кілька точок на лінії та переторити обведення в контур (Об'єкт > Шлях > Обведення в контур) і, нарешті, стертиза допомогою "Гумки" і у нас є рот.

Create the Angry Emoticon

Наш сердитий смайлик буде виглядати щось на зразок цього.

Create the Angry Emoticon

Крок 6

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

Create the Angry Emoticon

Крок 7

Спочатку ми пофарбуємо роги нашими жовто-червоним градієнтом та брови коричневим кольором.

Create the Angry Emoticon

Для очей і рота використайте червоний, на тіні очей коричневий градієнт, а також жовто-червоний градієнт для повік. Наш сердитий смайлик майже готовий.

Create the Angry Emoticon

Додайте кілька деталей, як от блиск на роги білим градієнтом й тіні під ними червоним градієнтом, не забудьте використати "Обробка контурів", щоб обрізати ці об'єкти. Наш сердитий смайлик готовий.

Create the Angry Emoticon

4. Як створити здивованого смайлика

Крок 1

Для здивованого смайлика ми почнемо з округлених прямокутників для очей.

Create the Surprised Emoticon

Крок 2

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

Create the Surprised Emoticon

Крок 3

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

Create the Surprised Emoticon

Крок 4

Скопіюйте зуби, натисніть мінус перед на панелі "Обробка контурів", щоб створити тіні. Додайте два кола і нажміть об'єднати, а потім обріжте з допомогою основи рота та отримаєте язик.

Create the Surprised Emoticon

Крок 5

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

Create the Surprised Emoticon

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

Create the Surprised Emoticon

Крок 6

Вирівняйте здивоване обличчя на основі смайлика й почнемо додавати кольори.

Create the Surprised Emoticon

Крок 7

Для очей ми використаємо коричневий колір, для блиску очей жовто-білий градієнт і для деталей в очах жовто-червоний градієнт.

Create the Surprised Emoticon

Щоки ми пофарбуємо в червоний колір, для зубів, біло-синій градієнт та для тіні коричнево-синій.

Create the Surprised Emoticon

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

Create the Surprised Emoticon

5. Як створити щасливого смайлика

Крок 1

Ми можемо почати малювати щасливого смайлика  з кола, яке стане його посмішкою.

Create the Happy Emoticon

Крок 2

Спершу зітріть половину кола інструментом "Гумка".

Create the Happy Emoticon

Крок 3

Щоб створити зуби, спочатку намалюйте округлений багатокутник та скопіюйте його кілька разів, як на зображенні. Потім використайте інструмент "Гумка" і нарешті дублювати їх за допомогою інструменту "Віддзеркалення" (O).

Create the Happy Emoticon

Крок 4

Вирівняйте зуби на фігурі рота та потім видаліть один з них.

Create the Happy Emoticon

Крок 5

Для язика і горла ми можемо використати ті ж самі кольори, що й для здивованого обличчя — просто обріжте деталі по формі рота.

Create the Happy Emoticon

Крок 6

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

Create the Happy Emoticon

Наше щасливе обличчя зроблено, і тепер можна його розфарбувати.

Create the Happy Emoticon

Крок 7

Вирівняйте обличчя по центру, як і попередній смайлик, та перейдемо до кольорів.

Create the Happy Emoticon

Для очей ми використовуємо градієнти жовтого і коричневого кольору  а також червоний колір для щік.

Create the Happy Emoticon

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

Create the Happy Emoticon

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

Create the Happy Emoticon

6. Як створити закоханого смайлика

Крок 1

Нарешті останній смайлик. Як і всі попередні смайлики, вирівняйте основу по центру і почніть малювати.

Create the Love Emoticon

Крок 2

Щоб намалювати серце, намалюйте два кола. Застосувати кнопку Об'єднати на панелі "Обробка контурів" і перетягніть точку по середині, як показано на малюнку.

Create the Love Emoticon

Крок 3

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

Create the Love Emoticon

Крок 4

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

Create the Love Emoticon

Наш закоханий смайлик готовий.

Create the Love Emoticon

Крок 5

Вирівняйте обличчя смайлика до основи.

Create the Love Emoticon

Для серця ми використаємо червоно-коричневий градієнт, а світло - білим градієнтом.

Create the Love Emoticon

Для рота і щік, ми використаємо червоний колір і все, наша закоханий смайлик готовий.

Create the Love Emoticon

Хороша робота!

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

Adobe Illustrator Emoticon Tutorial by Beto Garza

Преміум набори смайликів на GraphicRiver

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

16 не растеризованих наборів смайликів + Бонус

З цим дивовижним набором ви отримаєте 16 смайликів, що відображають улюблені емоції. Добре організовані ,100% векторні фігури, а також два PSD і 32 PNG файли для зручності використання.

16 Non-Rasterized Emoticons Pack Bonus
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.