Урок по созданию мультяшной иконки-бомбы в Sketch - 1

Этот урок научит вас важным приемам для создания иконки в sketch. И в процессе вы создадите очень крутую иконку в форме бомбы, в мультяшном стиле.

Шаг 1

Запустите Sketch и начните с рисования зеленого прямоугольника в качестве фонового слоя. Затем кликните на слое в боковой панели и выберите опцию Lock Layer (блокировать слой), чтобы избежать случайного выделения и перемещения в ходе работы.

1 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Прямоугольник:

  • Заливка: #95A782
  • Граница: None (нет)
  • Позиция: X:0 Y:0
  • Размер: W:900 H:600

Шаг 2

2 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Затем нарисуйте фиолетовый круг в районе центра фонового слоя, используя инструмент Oval (овал) и удерживая клавишу shift для сохранения пропорций круга.

Круг:

  • Заливка: #816F85
  • Граница: None (нет)
  • Положение: X:168 Y:168
  • Размер: W:900 H:600

Шаг 3

3 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу
Урок по созданию мультяшной иконки-бомбы в Sketch – 3

Поместите небольшой прямоугольник с закругленными углами рядом с верхушкой круга, выровняйте по горизонтальному центру круга.

Прямоугольник:

  • Заливка: #816F85
  • Граница: None (нет)
  • Радиус: 6
  • Положение: X:421 Y:204
  • Размер: W:38 H:30

Шаг 4

4 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Выберите инструмент Rotate (Вращение) и передвиньте опорную точку для прямоугольника в центр круга, а затем выполните вращение на 45° по часовой стрелке.

Прямоугольник:

  • Трансформация: 315°

Шаг 5

5 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Выделите слои с кругом и прямоугольником и объедините их с помощью булевой функции Union (Объединить).

Шаг 6

6 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Теперь добавьте немного акцентов к объединенной фигуре бомбы:

Бомба:

  • Заливка: #816F85
  • Граница: #434343, Outside (внешняя), 6
  • Внутренние тени: Черный цвет, Alpha:20, X:-12 Y:-12, Blur (размытость):0, Spread (распространение):0

Шаг 7

7 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Используйте инструмент Pen tool (ручка), чтобы нарисовать короткую волнистую линию, идущую от центра прямоугольника примерно до половины круга. Используйте три точки, включающие начальную и конечную точки линии для придания нужной волны. Затем удалите заливку и добавьте границу:

Фитиль:

  • Заливка: None (нет)
  • Граница: #EBCFA8, Center (по центру), 8

Шаг 8

8 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Перейдите в меню Layer > Paths (Слои > Прямые) и выберите Vectorize Stroke (векторизировать контур), чтобы превратить границу в заливку, чтобы стилизовать фитиль, как нам нужно:

Фитиль:

  • Заливка: #EBCFA8
  • Граница: #434343, Outside (снаружи), 6
  • Внутренние тени: Black (черная), Alpha:20, X:-4 Y:-4, Blur (размытие):0, Spread (распространение):0

Шаг 9

9 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Добавьте новый слой с текстурной заливкой над заливкой сплошным цветом и выберите текстуру с диагональными линиями (diagonal lines pattern) по умолчанию (можете использовать и другую, если найдете вариант получше).

Фитиль:

  • Заливка 1: Diagonal lines pattern
  • Заливка 2: #EBCFA8

Шаг 10

10 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Используйте инструмент Star, чтобы нарисовать новую фигуру, которая немного наложится на фитиль и саму бомбу.

Звезда:

  • Заливка: #FFFFFF
  • Радиус: 68%
  • Количество вершин (points): 8

Шаг 11

11 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Добавьте 3 границы на слой со звездочкой, чтобы создать эффект искры. Разместите их в следующем порядке сверху вниз:

Звезда:

  • Граница 1: #434343, Outside (снаружи), 6
  • Граница 2: #F2780D, Inside (изнутри), 6
  • Граница 3: #F5A623, Inside (изнутри), 12

Шаг 12

12 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Бомба сейчас выглядит слегка уплощенной, так что давайте добавим немного света для придания объема. Нарисуйте новый круг без заливки с белой границей, выровняйте по центру круга бомбы.

Круг:

  • Заливка: None (нет)
  • Граница: #FFFFFF Center (по центру) 6
  • Положение: X:372 Y:241
  • Размер: W:134 H:134

Шаг 13

13 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Кликните дважды по слою с кругом, чтобы активировать режим редактирования кривых, а затем кликните на кнопке Open Path  (открыть кривую), чтобы разомкнуть контур круга.

Шаг 14

14 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Удалите две векторные точки так, чтобы осталась только верхняя левая четверть круга.

Шаг 15

15 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Круг:

Выберите опции границы (Border) и добавьте пунктирный контур, а также уменьшите непрозрачность слоя до 20%

  • Заливка: None (нет)
  • Граница: #FFFFFF Center (по центру) 6
  • Dashed Options (опции пунктира): Ends (края): Round (закругленные), Dash (пунктир) 80 Gap (промежуток) 15
  • Opacity (непрозрачность): 20%

Шаг 16

16 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Нарисуйте маленькую белую звезду возле верхушки бомбы.

Звезда:

  • Заливка: #FFFFFF
  • Граница: None (нет)
  • Points (точек): 5
  • Радиус: 50%
  • Положение: X:450 Y:205
  • Размер: W:32 H:32

Шаг 17

17 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Дважды кликните мышкой на фигуре звезды, чтобы войти в режим редактирования кривых, выделите все точки звезды и установите радиус углов ‘3’, чтобы смягчить фигуру.

Звезда:

  • Corners(углы): 3

Шаг 18

18 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Поверните звезду на 30° по часовой стрелке вокруг базовой точки по умолчанию.

Звезда:

  • Rotate (вращение): 330°

Шаг 19

19 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Скопируйте звезду, затем передвиньте ее влево, слегка уменьшите размер и поверните на -45° против часовой стрелки

Звезда:

  • Rotate (поворот): -15°
  • Положение: X:489.7 Y:218.6
  • Размер: W:18.1 H:17.3

Шаг 20

20 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Чтобы создать тень, нарисуйте новый овал ниже всех слоев кроме фона:

Тень:

  • Заливка: Black (черный), Opacity (непрозрачность) 20%
  • Граница: None (нет)
  • Положение: X:388 Y:385
  • Размер: W:104 H:21

Шаг 21

21 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Бомба уже выглядит довольно круто на данном этапе. Но в качестве завершающей детали давайте нарисуем дружелюбный череп и перекрещенные кости в знак опасности. Начните с рисования обычного круга для черепушки:

Круг:

  • Заливка: #ECD6C3
  • Граница: None (нет)
  • Положение: X:421 Y:278
  • Размер: W:40 H:40

Шаг 22

22 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Для челюсти надо нарисовать небольшой, закругленный прямоугольник:

Прямоугольник:

  • Заливка: #ECD6C3
  • Граница: None (нет)
  • Радиус: 6
  • Положение: X:429 Y:308
  • Размер: W:24 H:14

Шаг 23

23 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Далее, давайте нарисуем на черепе глаза. Нарисуйте два круга (или можно нарисовать один и продублировать). Единственная разница будет в значении координаты X.

Глаз 1:

  • Заливка: #816F85
  • Граница: None (нет)
  • Радиус: 6
  • Положение: X:429 Y:298
  • Размер: W:10 H:10

Глаз 2:

  • Заливка: #816F85
  • Граница: None (нет)
  • Радиус: 6
  • Положение: X:443 Y:298
  • Размер: W:10 H:10

Шаг 24

24 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Для носа используйте инструмент треугольник. Нарисуйте базовую фигуру, затем дважды кликните на треугольнике, чтобы войти в режим редактирования кривой, выберите все 3 векторные точки и установите значение углов (Corners) на 2.

Нос:

  • Заливка: #816F85
  • Граница: None (нет)
  • Corners (Углы): 2
  • Положение: X:438 Y:307
  • Размер: W:6 H:8

Шаг 25

25 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Перейдем к костям. Начните с обычного прямоугольника:

Прямоугольник:

  • Заливка: #ECD6C3
  • Граница: None (нет)
  • Положение: X:412 Y:329
  • Размер: W:60 H:6

Шаг 26

26 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Нарисуйте маленький кружок, который пересекает верхнюю левую вершину прямоугольника:

Круг:

  • Заливка: #ECD6C3
  • Граница: None (нет)
  • Положение: X:407 Y:324
  • Размер: W:8 H:8

Шаг 27

27 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Продублируйте слой с кругом трижды, чтобы получилось по одному на каждый из оставшихся углов прямоугольника. Затем выделите все 4 кружка и прямоугольник, и объедините их с помощью функции Union (объединить).

Круг 1:

  • Положение: X:407 Y:324

Круг 2:

  • Положение: X:407 Y:331

Круг 3:

  • Положение: X:467 Y:324

Круг 4:

  • Положение: X:407 Y:331

Шаг 28

28 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Поверните полученную косточку на 15° по часовой стрелке.

Кость:

  • Rotate (поворот): 345°

Шаг 29

29 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Продублируйте кость и отразите ее по горизонтали.

Шаг 30

30 80x46 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Вот как бомба теперь должна выглядеть:

Мы бы могли на этом остановиться, но у меня есть еще один финальный штрих. Можно скачать премиум-текстуру из Vector Speckle Textures. Поместите 2 понравившиеся вам текстуры на слои поверх всего рисунка:

Tекстура 1:

  • Заливка: White (белая)
  • Opacity (непрозрачность): 20%

Текстура 2:

  • Заливка: Black (черный)
  • Opacity: 10%

Результат создание иконки в sketch

Так выглядит конечный результат, я думаю, вы согласитесь, что выглядит бомбезно!

1140x430 cartoon bomb icon sketch post image 1 80x30 - Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу

Этот урок раскрыл множество приемов, важных для дизайна нестандартных иконок, включая объединения простых фигур в более сложные слои, стилизация слоев для различных визуальных эффектов. Эти приемы универсальны в своем применении и актуальны не только для Sketch.

Свежие вакансии
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
Все вакансии

Оригинал: Tony Thomas

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Полное руководство по созданию интерфейсных иконок

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

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Я проиллюстрирую признаки качества иконок с помощью 7 принципов и множества реальных примеров

3 правила дизайна иконок мобильных приложений

Иконка приложения – это первое, что пользователи видят, когда они находят приложение в Apple App Store и Google Play