Unlimited WordPress themes, 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 LoveK (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
  • Растрові ефекти: Освітлення (72 ppi)
  • Режим попереднього перегляду: за замовчуванням
setting up a new document

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

2. Як налаштувати сітку користувача

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

Крок 1

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

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

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

Крок 2

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

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

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

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

Як сказано, відкрийте панель Шарів і створіть чотири шари, які назвемо наступним чином: 

  • шар 1: координатні сітки
  • шар-2: частування
  • шар 3: подарунки
  • шар 4: декорації
setting up the layers

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

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

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

У нашому випадку ми збираємося створити набір іконок одного розміру, а точніше 128 х 128 px, що відповідає великому розміру.

Крок 1

Заблокуйте всі шари, крім шару з координатною сіткою, візьміть Прямокутник (М) і створіть оранжевий квадрат 128 х 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

Інструментом Перо (Р) створіть відрізок лінії шириною 102 px з обведенням товщиною 4 px і заокругленими кінцями, пофарбуйте в колір #332828 і помістіть на першу активну область малювання, вирівнявши по нижньому лівому кутку.

creating and positioning the first line segment for the treats icons background

Крок 2

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

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

creating and positioning the second line segment for the treats icons background

Крок 3

Створіть основну фігуру склянки з прямокутника 52 х 116 px, пофарбуйте його в колір #83DBEA і розташуйте на відстані 18 px від лівого краю активної області малюванняі 2 px - від верхнього краю.

creating and positioning the main shape for the glasss body

Крок 4

Встановіть Радіус нижніх кутів фігури на 12 px, перейшовши в Властивості прямокутника на панелі Трансформувати.

adjusting the bottom corners of the glasss body

Крок 5

Додайте область молока, створивши маленький прямокутник 52 х 88 px (#EFEFEF), встановіть Радіус його нижніх кутів на 12 px і потім розмістіть його на блакитну фігуру, вирівнявши по центру нижнього краю.

creating and positioning the milk section onto the glasss body

Крок 6

Додайте основний контур склянки за допомогою методу Обведення, створивши копію (Control-C> Control-F) основної фігури (блакитний), пофарбувавши її в колір #332828 і помінявши заливку з обведенням місцями (Shift-X), та встановивши Товщину 4 px.

adding the outline to the glasss main body

Крок 7

За допомогою Пера (Р) намалюйте горизонтальний контур, що відокремлює вміст склянки, по верхньому краю білої області, взявши Обведення товщиною 4 px з кольором #332828.

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

adding the outline to the glasss milk section

Крок 8

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

creating and positioning the main shape for the cookies body

Крок 9

Додайте контур печива, виконавши ті ж кроки, що і при створенні основної фігури склянки, встановивши Товщину Обведення на 4 px і колір на #332828.

adding the outline to the cookies body

Крок 10

Почніть додавати деталі на печиво, намалювавши кілька маленьких горіхових крихт Пером (Р), та пофарбуйте їх в колір #F7D6B5 і створіть контур товщиною 4 px (#332828) з Заокругленим стиком.

Окремо згрупуйте (Control-G) кожнуфігуру заливки з контуром, а потім згрупуйте (Control-G) все три крихти.

adding the little hazelnut crumbs to the cookies body

Крок 11

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

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

adding the chocolate chips to the cookies body

Крок 12

Почніть роботу над маленькою подячною запискою та створіть прямокутник 40 х 30 px (#E0694C). Створіть контур товщиною 4 px (#332828), згрупуйте (Control-G) і розташуйте дві фігури на лівій стороні печива на відстані 32 px від лівого краю активної області малювання.

creating and positioning the main shapes for the treats icons thank you note

Крок 13

Cтворіть внутрішню вставку з прямокутника 30 х 20 px (#332828), поміняйте місцями (Shift-X) заливку з обведенням товщиною 2 px, а потім вирівняйте її по червоній фігурі.

adding the inner detail line insertion to the treats icons thank you card

Крок 14

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

Коли буде готово, не забудьте згрупувати всю іконку, щоб не зіткнутися з «зникаючими» елементами.

treats icon finished

6. Створимо іконку з подарунками

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

Крок 1

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

creating and positioning the line background segment onto the second reference grid

Крок 2

Створіть основну фігуру для круглої подарункової коробки з кола 92 х 92 px, пофарбуйте її в колір #33AFBC і розмістіть на верхньому правому куті активної області малювання, залишивши круговий проміжок товщиною 2 px для контуру.

creating and positioning the main shape for the second icons circular present box

Крок 3

Додайте маленькі горизонтальні кольорові смужки з 22 вертикально розташованих прямокутників 92 х 2 px (#179AA0), розташованих на відстані 2 px один від одного, а потім згрупуйте (Control-G) і вирівняйте по центру фігури, створеної в попередньому кроці.

adding the horizontal color stripes to the circular present box

Крок 4

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

masking the circular present boxs color stripes

Крок 5

Створіть основну фігуру для золотистої обгортки з прямокутника 18 х 92 px, пофарбуйте в колір #E5BA5A і вирівняйте вертикально по центру кола, розташувавши на відстані 16 px від правого краю активної області малювання.

creating and positioning the main shape for the circular present boxs golden wrap

Крок 6

Інструментом Еліпс (L) додайте пару кіл різних розмірів (#D1A246) на поверхні золотистої обгортки, згрупуйте (Control-G) і замаскуйте їх (клацнути правою кнопкою> Створити відсічну маску), взявши при необхідності копію прямокутника.

adding details to the circular present boxs golden wrap

Крок 7

Створіть контур золотистого прямокутника товщиною 4 px (#332828), згрупуйте (Control-G) і замаскуйте всі складові фігури, використавши нижнє коло як відсічну маску (клацнути правою кнопкою> Створити відсічну маску).

masking the golden wrap to the surface of the circular present boxs body

Крок 8

Створіть маленьке коло 8 х 8 px (#E5BA5A) з контуром 4 px (#332828), згрупуйте (Control-G) і вирівняйте по центру великого кола.

adding the center handle to the circular presents boxs body

Крок 9

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

adding the outline to the circular present box

Крок 10

Cтворіть основну фігуру прямокутної коробки з прямокутника 64 х 48 px (#E0694C) з контуром товщиною 4 px (#332828), згрупуйте (Control-G) і вирівняйте по низу активної області малювання, розташувавши на відстані 8 px від її лівого краю.

creating and positioning the main shapes for the rectangular present boxs body

Крок 11

Додайте обгортку передній фігурі з прямокутника 12 х 48 px (#71B769) з контуром товщиною 4 px (#332828), згрупуйте (Control-G) і вирівняйте по центру червоного прямокутника. 

creating and positioning the front wrap onto the rectangular present boxs body

Крок 12

Cтворіть маленький ярлик з прямокутника 8 х 12 px (#E5BA5A) з контуром товщиною 4 px (#332828), згрупуйте (Control-G) і вирівняйте по центру правої половини коробки, розташувавши на відстані 12 px від її контуру.

creating and positioning the main shapes for the rectangular present boxs card

Крок 13

Інструментом Перо (Р) намалюйте маленьку мотузку, що утримує ярлик, взявши обведення товщиною 4 px з кольором #332828, після чого згрупуйте (Control-G) обидві фігури.

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

adding the string section to the rectangular present boxs card

Крок 14

Створіть кришку коробки з прямокутника 72 х 12 px (#E0694C) з контуром товщиною 4 px (#332828), згрупуйте (Control-G)та розмістіть на нижній фігурі, вирівнявши обидві фігури по центру.

creating and positioning the main shapes for the rectangular present boxs lid

Крок 15

Додайте стрічку обгортки кришки з прямокутника 16 х 12 px (#71B769) з контуром 4 px (#332828), згрупуйте (Control-G) і вирівняйте по центру фігури, створеної в попередньому кроці.

adding the front wrap to the rectangular present boxs lid

Крок 16

Створіть центральну частину стрічки з прямокутника 16 х 10 px (#59934E) і встановіть Радіус верхніх кутів на 4 px. Створіть контур товщиною 4 px (#332828), згрупуйте (Control-G) і розмістіть обидві фігури на кришці, вирівнявши їх по її центру.

creating and positioning the center section of the rectangular present boxs ribbon

Крок 17

Створіть ліву половину бантика з прямокутника 14 х 8 px (#59934E), встановіть Радіус верхнього лівого кута на 4 px і поекспериментуйте з його вигином. Створіть контур 4 px (#332828), згрупуйте (Control-G) і розмістіть дві фігури на лівій стороні фігури з попереднього кроку.

creating and positioning the left half of the rectangular present boxs ribbon

Крок 18

Створіть праву половину стрічки з копії (Control-C> Control-F) лівої половини, яку потрібно відобразити по вертикалі (клацнути правою кнопкою> Трансформувати> Дзеркальне відображення> Вертикально) і розмістіть на протилежному боці центральної частини.

Коли буде готово, згрупуйте всі складові частини стрічки, натиснувши Control-G, після чого згрупуйте кришку і всю коробку.

creating and positioning the right half of the rectangular present boxs ribbon

Крок 19

Створіть основну фігуру маленької подарункової коробки з прямокутника 20 х 16 px, пофарбуйте його в колір #59934E і створіть контур 4 px (#332828). Вирівняйте дві фігури по нижньому краю активної області малювання, розташувавши їх на правій стороні прямокутної коробки.

creating and positioning the main shapes for the smaller present boxs body

Крок 20

Інструментом Перо (Р) додайте чотири діагональні лінії товщиною 2 px (#332828), згрупуйте (Control-G) і вирівняйте по центру зеленого прямокутника, створеного в попередньому кроці. Коли буде готово, виділіть всі складові фігури маленького подарунка і згрупуйте (Control-G) їх.

adding the diagonal detail lines to the smaller present boxs main body

Крок 21

Завершіть створення маленької коробки і самої іконки, додавши кришку. Створимо її за допомогою прямокутника 24 х 8 px (#D1553D) з контуром товщиною 4 px (#332828), після чого згрупуйте (Control-G) і розмістіть її на основній фігурі, вирівнявши по лівій стороні.

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

creating and positioning the lid onto the smaller present boxs body

7. Створимо іконку з декораціями

Переходимо до третьої і останньої іконки, тому збільште координатну сітку, щоб можна було почати.

Крок 1

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

creating and positioning the line segment background onto the third reference grid

Крок 2

Почніть роботу над тарілкою під свічкою для неї створіть прямокутник 48 х 6 px, пофарбуйте його в колір #D1553D і помістіть на нижню лінію, розташувавши на відстані 26 px від правого краю активної області малювання.

creating and positioning the main shape for the candle plates base

Крок 3

Окремо виділіть і посуньте нижні опорні точки до центру на 2 px за допомогою Перемістити (клацнути правою кнопкою> Трансформувати> Перемістити> По горизонталі> +/- 2 px в залежності від точки, з якої починаєте). Коли все буде готове, створіть контур товщиною 4 px (#332828) і згрупуйте фігури разом(Control-G).

adding the outline to the candle plates base

Крок 4

Створіть верхню частину тарілки з прямокутника 60 х 6 px (#E0694C) з контуром товщиною 4 px (#332828), потім згрупуйте (Control-G) і вирівняйте по центру основи, після чого згрупуйте дві частини разом (Control-G).

adding the upper section of the candles plate

Крок 5

Створіть нижню металеву частину свічки з прямокутника 48 х 12 px (#A3A8AA) з контуром товщиною 4 px (#332828), поверх якого додамо групу з п'яти кіл 4 х 4 px (#332828), розташованих на відстані 4 px один від одного. Згрупуйте (Control-G) всі фігури поточної частини і вирівняйте їх по центру тарілки, створеної в попередніх кроках.

creating and positioning the candles metal section onto the plate

Крок 6

Створіть підсвічник з прямокутника 40 х 80 px (#F2D2B1) з контуром товщиною 4 px (#332828), поверх якого додамо пару діагональних ліній товщиною 4 px (#332828).

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

creating and positioning the candle stick onto the metal stand

Крок 7

На завершення створіть маленьку мотузку з прямокутника 6 х 12 px (#6D5858) з контуром товщиною 4 px (#332828), які потрібно згрупувати та вирівняти їх по центру угорі. Коли буде готове, виділіть і згрупуйте всі складові частини свічки, натиснувши Control-G.

adding the string section onto the candle sticks body

Крок 8

Для різдвяної кулі створіть коло 62 х 62 px, пофарбуйте його в колір #83DBEA і розташуйте на лівій стороні активної області малювання на відстані 2 px від лівого краю і 14 px - від нижнього краю.

creating and positioning the main shape for the christmas globes body

Крок 9

Створіть область снігу на кулі з прямокутника 62 х 20 px (#EFEFEF), потім вигніть вниз його верхній край, додавши нову опорну точку в центрі і рухаючи її покажчики. Створіть контур товщиною 4 px (#332828) з Заокругленим стиком, потім згрупуйте (Control-G) і вирівняйте обидві фігури по центру низу кола.

adding the snow section to the christmas globes body

Крок 10

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

masking the christmas globes snow section

Крок 11

За допомогою іншої копії блакитного кола (Control-C> Control-F) створіть контур кулі з Обведенням товщиною 4 px, встановивши колір #332828.

adding the outline to the christmas globes main body

Крок 12

Для стовбура різдвяної ялинки створіть прямокутник 6 х 8 px (#8E5C57) з контуром товщиною 4 px (#332828), згрупуйте (Control-G) і вирівняйте по центру кулі, розташувавши їх таким чином, щоб вони перекривали контур снігу.

creating and positioning the main shapes for the christmas trees trunk

Крок 13

Створіть нижню частину дерева з прямокутника 22 х 10 px (#59934E), окремо виділіть і посуньте його верхні опорні точки до центру на 6 px (клацнути правою кнопкою> Трансформувати> Переміщення> По горизонталі> +/- 2 px, в залежності від опорної точки, з якої починаєте). Створіть контур товщиною 4 px (#332828) з Заокругленим стиком, потім згрупуйте (Control-G) і розмістіть дві фігури на стовбурі, вирівнявши їх по його центру.

creating and positioning the main shapes for the christmas trees lower section

Крок 14

Створіть верхню частину дерева з прямокутника 18 х 16 px (#71B769), перетворіть його в трикутник, додавши нову опорну точку в центрі верхнього краю за допомогою Додати опорну точку (+), а потім видаліть бічні точки Вилучити опорну точку (-). Створіть контур товщиною 4 px (#332828), згрупуйте (Control-G) і вирівняйте їх по центру нижньої фігури дерева, згрупувавши (Control-G) всі складові фігури.

creating and positioning the main shapes for the christmas trees upper section

Крок 15

Інструментом Еліпс (L) додайте маленькі сніжинки з пари кіл 2 х 2 px (#EFEFEF) і згрупуйте їх, натиснувши Control-G.

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

adding the snow flakes to the christmas globes main body

Крок 16

Для заснування кулі створіть верхню частину з округленими прямокутника 46 х 8 px (#93524C) з контуром товщиною 4 px (#332828), потім згрупуйте (Control-G) і помістіть на кулі, вирівнявши їх по центру її нижньої частини. 

creating and positioning the upper section of the christmas globes base

Крок 17

Створіть нижню частину підставки з заокругленого прямокутника 54 х 12 px (#AF655B) з Радіусом кута 6 px і контуром товщиною 4 px (#332828), а потім вирівняйте обидві фігури по центру області з попереднього кроку.

creating and positioning the lower section of the christmas globes base

Крок 18

Додайте кілька деталей на підставі кулі, додавши лінію шириною 12 px (#332828) з заокругленими кінцями в центрі, а потім коло 4 х 4 px (#332828) на відстані 2 px від кожної зі сторін.

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

adding details to the lower section of the christmas globes base

Хо-хо-хо, готово!

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

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.