UXPUB

UXPUB - спільнота з 4,683 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Создание иконки в sketch. Рисуем прикольную мультяшную иллюстрацию бомбу
Редакція
Редакція

Опубліковано • Оновлено

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

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

Шаг 1

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

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

Шаг 2

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

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

Шаг 3

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

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

Шаг 4

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

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

Шаг 5

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

Шаг 6

Урок по созданию мультяшной иконки-бомбы в Sketch - 6 Теперь добавьте немного акцентов к объединенной фигуре бомбы: Бомба:

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

Шаг 7

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

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

Шаг 8

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

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

Шаг 9

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

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

Шаг 10

Урок по созданию мультяшной иконки-бомбы в Sketch - 10 Используйте инструмент Star, чтобы нарисовать новую фигуру, которая немного наложится на фитиль и саму бомбу. Звезда:

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

Шаг 11

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

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

Шаг 12

Урок по созданию мультяшной иконки-бомбы в Sketch - 12 Бомба сейчас выглядит слегка уплощенной, так что давайте добавим немного света для придания объема. Нарисуйте новый круг без заливки с белой границей, выровняйте по центру круга бомбы. Круг:

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

Шаг 13

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

Шаг 14

Урок по созданию мультяшной иконки-бомбы в Sketch - 14 Удалите две векторные точки так, чтобы осталась только верхняя левая четверть круга.

Шаг 15

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

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

Шаг 16

Урок по созданию мультяшной иконки-бомбы в Sketch - 16 Нарисуйте маленькую белую звезду возле верхушки бомбы. Звезда:

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

Шаг 17

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

  • Corners(углы): 3

Шаг 18

Урок по созданию мультяшной иконки-бомбы в Sketch - 18 Поверните звезду на 30° по часовой стрелке вокруг базовой точки по умолчанию. Звезда:

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

Шаг 19

Урок по созданию мультяшной иконки-бомбы в Sketch - 19 Скопируйте звезду, затем передвиньте ее влево, слегка уменьшите размер и поверните на -45° против часовой стрелки Звезда:

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

Шаг 20

Урок по созданию мультяшной иконки-бомбы в Sketch - 20 Чтобы создать тень, нарисуйте новый овал ниже всех слоев кроме фона: Тень:

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

Шаг 21

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

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

Шаг 22

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

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

Шаг 23

Урок по созданию мультяшной иконки-бомбы в Sketch - 23 Далее, давайте нарисуем на черепе глаза. Нарисуйте два круга (или можно нарисовать один и продублировать). Единственная разница будет в значении координаты 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

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

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

Шаг 25

Урок по созданию мультяшной иконки-бомбы в Sketch - 25 Перейдем к костям. Начните с обычного прямоугольника: Прямоугольник:

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

Шаг 26

Урок по созданию мультяшной иконки-бомбы в Sketch - 26 Нарисуйте маленький кружок, который пересекает верхнюю левую вершину прямоугольника: Круг:

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

Шаг 27

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

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

Круг 2:

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

Круг 3:

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

Круг 4:

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

Шаг 28

Урок по созданию мультяшной иконки-бомбы в Sketch - 28 Поверните полученную косточку на 15° по часовой стрелке. Кость:

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

Шаг 29

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

Шаг 30

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

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

Текстура 2:

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

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

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


Перевод статьи Tony Thomas

Обговорення (0)