1. Design & Illustration
  2. Icon Design

Ням! Створюємо іконку смачного бутерброда-бублика в Адобе Ілюстратор

Scroll to top
Read Time: 10 min
This post is part of a series called Learn Adobe Illustrator.
Create a Cute Raccoon Character in Adobe Illustrator
10 Essential Tips & Tools All Adobe Illustrator Beginners Should Learn

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Дотримуйтесь цього уроку та дізнайтеся, як створити іконку бублика-бутерброду в Адобе Ілюстратор. Спочатку ми створимо дві частинки бублика, а потім виготовимо всі інгредієнти для бутерброду: шматочки салату, скибочки сиру та шинки.

Найцікавіша частина полягає в тому, щоб скласти бутерброд з бублика, адже тут ви можете креативити. Та наостанок – посипемо зверху насінням кунжуту за допомогою дискретного пензлю. Якщо ви любите уроки з продуктами харчування, так само як я, давайте почнемо розвагу!

1. Почнемо новий проект

Запустіть Ілюстратор і перейдіть до Файл > Створити, щоб відкрити пустий документ. Введіть ім'я для файлу, налаштуйте розміри а потім виберіть Пікселі як Одиниці та Колірний режим як RGB.

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

start new documentstart new documentstart new document

2. Створимо бублик

Крок 1

Оберіть Еліпс (L) та намалюйте два кола з зазначеними розмірами. З виділеними колами, натисніть Горизонтальне Вирівнювання, центр та Вертикальне вирівнювання, центр в панелі Вирівняти.

create bagel 1create bagel 1create bagel 1

Крок 2

З як і раніше обраними колами, перейдіть до Об’єкт> Складений шлях > Зробити (Ctrl-8), а потім залийте отриману форму світло-коричневим кольором. Я назву її «бублик-верх», і нам знадобляться додаткові копії цієї форми на протязі всього уроку.

create bagel 2create bagel 2create bagel 2

Крок 3

З обраною формою «бублик-верх», додайте Нову заливку в панелі Вигляд над першою. Застосуйте показаний радіальний градієнт, а потім перейдіть до Ефект> Скетч> Низький рельєф та застосуйте параметри з наступного зображення. Встановіть Режим змішування на Розсіяне світло.

apply bas relief effect to bagelapply bas relief effect to bagelapply bas relief effect to bagel

Крок 4

Додайте Нову заливку в панелі Вигляд та застосуйте коричневий колір; потім встановіть Режим змішування на Розсіяне світло.

create bagel 3create bagel 3create bagel 3

Крок 5

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

apply note paper effect to bagelapply note paper effect to bagelapply note paper effect to bagel

Крок 6

Для того, щоб позбутися від пикселізації краю, який створюється за рахунок ефекту Поштовий папір, ми створимо маску. Виберіть «бублик-верх», Скопіюйте та Вставте попереду (Ctrl-F), щоб зробити копію, а потім видаліть всі існуючі заливки. Тепер виберіть обидві фігури і перейдіть до Об’єкт> Відсічна маска> Зробити (Control-7). Назвіть отриману групу «Бублик Верх».

create mask for bagelcreate mask for bagelcreate mask for bagel

Крок 7

Давайте створимо нижню частину бублика. Зробіть ще одну копію «бублик-верх» на вашій монтажній області та застосуйте показаний радіальний градієнт, щоб залити її. Нам не потрібно додавати більше деталей, оскільки більшість із них буде покрита інгредієнтами в бутерброді.

create bagel bottomcreate bagel bottomcreate bagel bottom

3. Створимо шматок салату

Крок 1

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

create piece of lettuce 1create piece of lettuce 1create piece of lettuce 1

Крок 2

З все ще обраною формою салату, перейдіть в Об’єкт> Контур> Зсув контуру та застосуйте 1.2 px Зсув для того, щоб отримати трохи більшу форму. Залийте цю нову форму, показаним лінійним градієнтом, та переконайтеся, що вона розташована позаду першої.

create piece of lettuce 2create piece of lettuce 2create piece of lettuce 2

Крок 3

Тепер, візьміть Перо (P) і намалюйте кілька фігур на листі салату, як показано нижче. Залийте їх різними відтінками зеленого кольору (1). Щоб додати певного об’єму намалюйте декілька маленьких форм між "хвилями" салату, але переконайтеся, що ви надіслали їх назад. Застосуйте темний відтінок зеленого кольору для заливки (2).

create piece of lettuce 3create piece of lettuce 3create piece of lettuce 3

4. Створимо шматочок сиру

Крок 1

Використайте Прямокутник (M), щоб намалювати прямокутник 73 х 150 px, а також застосуйте жовтий як колір заливки. Потім, намалюйте декілька кіл за допомогою інструменту Еліпс (L) та Згрупуйте (Control-G) їх.

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

create slice of cheese 1create slice of cheese 1create slice of cheese 1

Крок 2

Тепер вам знадобиться група кіл із попереднього кроку (1). Виділіть її та застосуйте Копіювати та Вставити попереду (Control-F), щоб отримати іншу групу кіл (зелені). Перемістіть їх трохи вниз і вправо (2).

Далі, виділіть обидві групи і натисніть Виключити в панелі Обробка контурів, а потім Розгрупувати (Shift-Control-G) в меню Об’єкт (3). Видаліть усі отримані фігури з нижньої правої сторони отворів, тому що нам вони не потрібні. Якщо деякі форми виходять за край, просто оберіть Вилучити опорну точку (-) та видаліть зайві опорні точки в кінці, і зробіть невеликі корегування в разі необхідності (4). Залийте ці фігури вказаним кольором (5).

create slice of cheese 2create slice of cheese 2create slice of cheese 2

5. Створимо скибочку шинки

Крок 1

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

create slice of ham 1create slice of ham 1create slice of ham 1

Крок 2

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

create slice of ham 2create slice of ham 2create slice of ham 2

Крок 3

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

create slice of ham 3create slice of ham 3create slice of ham 3

Крок 4

Візьміть Перо (P) або Олівець (N) і намалюйте кілька випадкових фігур на шинці, щоб додати більше деталей. Заповніть їх лінійним градієнтом, показаним нижче.

create slice of ham 4create slice of ham 4create slice of ham 4

6. Скомпонуйте бублик-сендвіч

Крок 1

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

compose bagel sandwich 1compose bagel sandwich 1compose bagel sandwich 1

Крок 2

У верхній частині «бублик-низ», почніть розташовувати шматочки салату. Розмножте групу «салат» стільки разів, скільки захочете, та організувати їх, як вам завгодно. Можете тут креативити. Також додайте перший шматочок сиру.

compose bagel sandwich 2compose bagel sandwich 2compose bagel sandwich 2

Крок 3

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

За допомогою Пера (P) або Олівця (N), намалюйте два шляхи уздовж зовнішнього краю сиру, але не виходьте за край «бублик-низ». Надайте їм 2 pt Обведення, застосувавши вказаний колір а потім перейдіть до Ефект> Розмиття> Гаусове Розмиття та застосуйте Радіус 2 px. Надішліть ці два шляхи позаду групи «сир».

Доки всі шляхи обрано, натисніть Створити стиль графіки в нижній частині панелі Стилі графіки, щоб зберегти його для подальшого використання. Назвіть його Графічний стиль Коричнева тінь.

compose bagel sandwich 3compose bagel sandwich 3compose bagel sandwich 3

Крок 4

Тепер зробіть копію групи «шинка» та розташуйте її на бублику. За допомогою Пера (P) або Олівця (N), намалюйте шлях у верхньому кутку, а потім просто виберіть Графічний стиль Коричнева тінь в панелі Стилі графіки, щоб додати тінь. Перемістіть цей шлях позаду групи «шинка», але попереду групи «сир».

compose bagel sandwich 4compose bagel sandwich 4compose bagel sandwich 4

Крок 5

Намалюйте ще один шлях в нижньому куті, надайте 2 pt йому чорного Обведення, а потім застосуйте 2 рх Гаусового Розмиття. Перемістіть цей шлях позаду «шинки», але перед «салатом».

Збережіть цей стиль в панелі Стилі графіки і назвіть його Графічний стиль Чорна тінь.

compose bagel sandwich 5compose bagel sandwich 5compose bagel sandwich 5

Крок 6

Розташуйте другий шматок шинки над бубликом, намалюйте два шляхи, як в наступному зображенні, і виберіть Графічний стиль Чорна тінь в панелі Стилі графіки, щоб додати тінь. Перемістіть ці два шляхи позаду «шинки».

compose bagel sandwich 6compose bagel sandwich 6compose bagel sandwich 6

Крок 7

Покладіть третій шматок шинки та намалюйте два шляхи, як показано нижче. Для чорного шляху, виберіть Графічний стиль Коричнева тінь, а для синього шляху виберіть Графічний стиль Чорна тінь. Не забудьте відправити їх позаду «шинки», але попереду першого шматочка (1).

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

compose bagel sandwich 7compose bagel sandwich 7compose bagel sandwich 7

Крок 8

Тепер візьміть групу «Бублик Верх» та розташуйте її поверх інгредієнтів. Не ставте її безпосередньо над «бублик низ», але трохи нижче та правіше.

compose bagel sandwich 8compose bagel sandwich 8compose bagel sandwich 8

7. Додамо тінь під «бублик-верх»

Крок 1

Виберіть «бублик-верх» та далі Копіювати і Вставити в місці (Shift-Control-V). Видаліть всі наявні заливки та залийте його білим кольором; потім перейдіть до Ефект> Стилізувати> Тінь та застосуйте налаштування, показані нижче. Перемістіть цю копію позаду групи «Бублик Верх».

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

add shadow under bagel top 1add shadow under bagel top 1add shadow under bagel top 1

Крок 2

Спершу заблокуйте групу «Бублик Верх» в панелі Шари, або приховайте її на даний момент. Тепер виберіть всі інгредієнти в вашого бублика (в моєму випадку: 3 х «салат», 3 х «шинка» і 2 х «сир»), але без контурів тіні, а потім натисніть кнопку Об’єднати в панелі Обробка контурів (1). В результаті ви отримаєте складений шлях (2).

Далі, виберіть білу форму з попереднього кроку разом з цим складеним шляхом (який повинен бути попереду) та перейдіть в Об'єкт> Відсічна маска> Зробити (Control-7) (3). Ви можете побачити кінцевий результат на наступному зображенні (4).

mask the shadowmask the shadowmask the shadow

Крок 3

За допомогою Еліпсу (L), намалюйте коло 57 х 57 px, а потім розмістіть його в центрі бублика. Виберіть білий як колір заливки; потім перейдіть до Ефект> Стилізувати> Внутрішнє свічення та застосуйте налаштування, показані нижче. У панелі Вигляд, змініть Режим змішування для білої заливки на Множення, щоб зробити її прозорою. Нам потрібно, щоб лише тінь була видимою.

add inner shadowadd inner shadowadd inner shadow

8. Додайте насіння кунжуту на бублик

Крок 1

Візьміть Перо (P) і намалюйте кунжутоподібну форму, а потім меншу форму зверху. Скористайтеся вказаними кольорами, для заливки цих форм, та створіть біле та чорне зерна кунжуту. В 100% перегляді насіння дуже мале, тому візьміть цей факт до уваги.

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

create sesame seed scatter brushcreate sesame seed scatter brushcreate sesame seed scatter brush

Крок 2

Візьміть Олівець (N) та намалюйте випадковий шлях над «Бублик Верх» і обведіть його Дискретним пензлем Кунжут, збереженим раніше. Встановіть Обведення на 1 pt, колір мазка не важливий. Відкрийте вікно Обведення в панелі Вигляд та змініть налаштування для того, щоб розсіяти насіння якомога більше. Грайтеся з налаштуваннями, доки вам не сподобається кінцевий результат.

apply sesame seed scatter brush 1apply sesame seed scatter brush 1apply sesame seed scatter brush 1

Крок 3

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

apply sesame seed scatter brush 2apply sesame seed scatter brush 2apply sesame seed scatter brush 2

Крок 4

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

apply sesame seed scatter brush 3apply sesame seed scatter brush 3apply sesame seed scatter brush 3

Крок 5

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

Коли ви закінчите, вийдіть з Режиму ізоляції, натиснувши на стрілку Назад на один рівень в лівому верхньому кутку монтажної області.

clean up sesame seedsclean up sesame seedsclean up sesame seeds

Крок 6

Потім виберіть всю групу насіння кунжуту та перейдіть в Ефект> Стилізувати> Тінь. Застосуйте налаштування з зображення нижче та натисніть кнопку OK.

apply shadow to sesame seedsapply shadow to sesame seedsapply shadow to sesame seeds

9. Додамо тінь під бубликом бутербродом

Крок 1

Виберіть складений шлях, який ви зробили на початку уроку, використовуючи всі інгредієнти в бутерброді, а потім Скопіюйте та Вставте в місці (Shift-Control-V). Надішліть нову копію позаду, перейшовши в Об’єкт> Упорядкувати> На задній план (Shift-control-[) (1).

Тепер виберіть «бублик-низ», а потім Скопіювати та Вставити позаду (Control-B) (2). Поки ці дві копії обрані, натисніть Об’єднати в панелі Обробка контурів, щоб отримати новий складений шлях (3).

add shadow under the bagel 1add shadow under the bagel 1add shadow under the bagel 1

Крок 2

Виберіть «бублик-верх», Скопіюйте та Вставте в місце (Shift-Control-V). Надішліть нову копію на задній план, перейшовши в Об’єкт> Упорядкувати> На задній план (Shift-control-[) (1). Тепер виберіть складений шлях з попереднього кроку разом з копією «бублик-верх» і знову натисніть кнопку Об’єднати в панелі Обробка контурів (3).

add shadow under the bagel 2add shadow under the bagel 2add shadow under the bagel 2

Крок 3

Форма тепер готова. Виберіть чорний колір заливки, а потім перейдіть до Ефект> Стилізувати > Тінь. Застосуйте цей ефект двічі, використовуючи налаштування, показані нижче. В панелі Вигляд, встановіть Непрозорість для чорної Заливки на 0%.

add shadow under the bagel 3add shadow under the bagel 3add shadow under the bagel 3

Крок 4

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

За допомогою Еліпсу (L), намалюйте нове коло 57 х 57 px, та розташуйте його в центрі бублика. Надішліть коло позаду всього, перейшовши в Об’єкт> Упорядкувати> На задній план (Shift-control-[). Виберіть чорний колір заливки і встановіть його Режим змішування на Перекриття (2). Це трохи більш затемнить площу в центрі бублика (3).

add shadow under the bagel 4add shadow under the bagel 4add shadow under the bagel 4

Вітаю! Ви закінчили!

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

Ви зголодніли зараз?  

bagel sandwich icon finalbagel sandwich icon finalbagel sandwich icon final
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads