Этот урок научит вас важным приемам для создания иконки в sketch. И в процессе вы создадите очень крутую иконку в форме бомбы, в мультяшном стиле.
Шаг 1
Запустите Sketch и начните с рисования зеленого прямоугольника в качестве фонового слоя. Затем кликните на слое в боковой панели и выберите опцию Lock Layer (блокировать слой), чтобы избежать случайного выделения и перемещения в ходе работы. 
Прямоугольник:
- Заливка: #95A782
- Граница: None (нет)
- Позиция: X:0 Y:0
- Размер: W:900 H:600
Шаг 2
Затем нарисуйте фиолетовый круг в районе центра фонового слоя, используя инструмент Oval (овал) и удерживая клавишу shift для сохранения пропорций круга. Круг:
- Заливка: #816F85
- Граница: None (нет)
- Положение: X:168 Y:168
- Размер: W:900 H:600
Шаг 3
Урок по созданию мультяшной иконки-бомбы в Sketch - 3 Поместите небольшой прямоугольник с закругленными углами рядом с верхушкой круга, выровняйте по горизонтальному центру круга. Прямоугольник:
- Заливка: #816F85
- Граница: None (нет)
- Радиус: 6
- Положение: X:421 Y:204
- Размер: W:38 H:30
Шаг 4
Выберите инструмент Rotate (Вращение) и передвиньте опорную точку для прямоугольника в центр круга, а затем выполните вращение на 45° по часовой стрелке. Прямоугольник:
Шаг 5
Выделите слои с кругом и прямоугольником и объедините их с помощью булевой функции Union (Объединить).
Шаг 6
Теперь добавьте немного акцентов к объединенной фигуре бомбы: Бомба:
- Заливка: #816F85
- Граница: #434343, Outside (внешняя), 6
- Внутренние тени: Черный цвет, Alpha:20, X:-12 Y:-12, Blur (размытость):0, Spread (распространение):0
Шаг 7
Используйте инструмент Pen tool (ручка), чтобы нарисовать короткую волнистую линию, идущую от центра прямоугольника примерно до половины круга. Используйте три точки, включающие начальную и конечную точки линии для придания нужной волны. Затем удалите заливку и добавьте границу: Фитиль:
- Заливка: None (нет)
- Граница: #EBCFA8, Center (по центру), 8
Шаг 8
Перейдите в меню Layer > Paths (Слои > Прямые) и выберите Vectorize Stroke (векторизировать контур), чтобы превратить границу в заливку, чтобы стилизовать фитиль, как нам нужно: Фитиль:
- Заливка: #EBCFA8
- Граница: #434343, Outside (снаружи), 6
- Внутренние тени: Black (черная), Alpha:20, X:-4 Y:-4, Blur (размытие):0, Spread (распространение):0
Шаг 9
Добавьте новый слой с текстурной заливкой над заливкой сплошным цветом и выберите текстуру с диагональными линиями (diagonal lines pattern) по умолчанию (можете использовать и другую, если найдете вариант получше). Фитиль:
- Заливка 1: Diagonal lines pattern
- Заливка 2: #EBCFA8
Шаг 10
Используйте инструмент Star, чтобы нарисовать новую фигуру, которая немного наложится на фитиль и саму бомбу. Звезда:
- Заливка: #FFFFFF
- Радиус: 68%
- Количество вершин (points): 8
Шаг 11
Добавьте 3 границы на слой со звездочкой, чтобы создать эффект искры. Разместите их в следующем порядке сверху вниз: Звезда:
- Граница 1: #434343, Outside (снаружи), 6
- Граница 2: #F2780D, Inside (изнутри), 6
- Граница 3: #F5A623, Inside (изнутри), 12
Шаг 12
Бомба сейчас выглядит слегка уплощенной, так что давайте добавим немного света для придания объема. Нарисуйте новый круг без заливки с белой границей, выровняйте по центру круга бомбы. Круг:
- Заливка: None (нет)
- Граница: #FFFFFF Center (по центру) 6
- Положение: X:372 Y:241
- Размер: W:134 H:134
Шаг 13
Кликните дважды по слою с кругом, чтобы активировать режим редактирования кривых, а затем кликните на кнопке Open Path (открыть кривую), чтобы разомкнуть контур круга.
Шаг 14
Удалите две векторные точки так, чтобы осталась только верхняя левая четверть круга.
Шаг 15
Круг: Выберите опции границы (Border) и добавьте пунктирный контур, а также уменьшите непрозрачность слоя до 20%
- Заливка: None (нет)
- Граница: #FFFFFF Center (по центру) 6
- Dashed Options (опции пунктира): Ends (края): Round (закругленные), Dash (пунктир) 80 Gap (промежуток) 15
- Opacity (непрозрачность): 20%
Шаг 16
Нарисуйте маленькую белую звезду возле верхушки бомбы. Звезда:
- Заливка: #FFFFFF
- Граница: None (нет)
- Points (точек): 5
- Радиус: 50%
- Положение: X:450 Y:205
- Размер: W:32 H:32
Шаг 17
Дважды кликните мышкой на фигуре звезды, чтобы войти в режим редактирования кривых, выделите все точки звезды и установите радиус углов ‘3’, чтобы смягчить фигуру. Звезда:
Шаг 18
Поверните звезду на 30° по часовой стрелке вокруг базовой точки по умолчанию. Звезда:
Шаг 19
Скопируйте звезду, затем передвиньте ее влево, слегка уменьшите размер и поверните на -45° против часовой стрелки Звезда:
- Rotate (поворот): -15°
- Положение: X:489.7 Y:218.6
- Размер: W:18.1 H:17.3
Шаг 20
Чтобы создать тень, нарисуйте новый овал ниже всех слоев кроме фона: Тень:
- Заливка: Black (черный), Opacity (непрозрачность) 20%
- Граница: None (нет)
- Положение: X:388 Y:385
- Размер: W:104 H:21
Шаг 21
Бомба уже выглядит довольно круто на данном этапе. Но в качестве завершающей детали давайте нарисуем дружелюбный череп и перекрещенные кости в знак опасности. Начните с рисования обычного круга для черепушки: Круг:
- Заливка: #ECD6C3
- Граница: None (нет)
- Положение: X:421 Y:278
- Размер: W:40 H:40
Шаг 22
Для челюсти надо нарисовать небольшой, закругленный прямоугольник: Прямоугольник:
- Заливка: #ECD6C3
- Граница: None (нет)
- Радиус: 6
- Положение: X:429 Y:308
- Размер: W:24 H:14
Шаг 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
Для носа используйте инструмент треугольник. Нарисуйте базовую фигуру, затем дважды кликните на треугольнике, чтобы войти в режим редактирования кривой, выберите все 3 векторные точки и установите значение углов (Corners) на 2. Нос:
- Заливка: #816F85
- Граница: None (нет)
- Corners (Углы): 2
- Положение: X:438 Y:307
- Размер: W:6 H:8
Шаг 25
Перейдем к костям. Начните с обычного прямоугольника: Прямоугольник:
- Заливка: #ECD6C3
- Граница: None (нет)
- Положение: X:412 Y:329
- Размер: W:60 H:6
Шаг 26
Нарисуйте маленький кружок, который пересекает верхнюю левую вершину прямоугольника: Круг:
- Заливка: #ECD6C3
- Граница: None (нет)
- Положение: X:407 Y:324
- Размер: W:8 H:8
Шаг 27
Продублируйте слой с кругом трижды, чтобы получилось по одному на каждый из оставшихся углов прямоугольника. Затем выделите все 4 кружка и прямоугольник, и объедините их с помощью функции Union (объединить). Круг 1:
Круг 2:
Круг 3:
Круг 4:
Шаг 28
Поверните полученную косточку на 15° по часовой стрелке. Кость:
Шаг 29
Продублируйте кость и отразите ее по горизонтали.
Шаг 30
Вот как бомба теперь должна выглядеть: Мы бы могли на этом остановиться, но у меня есть еще один финальный штрих. Можно скачать премиум-текстуру из Vector Speckle Textures. Поместите 2 понравившиеся вам текстуры на слои поверх всего рисунка: Tекстура 1:
- Заливка: White (белая)
- Opacity (непрозрачность): 20%
Текстура 2:
- Заливка: Black (черный)
- Opacity: 10%
Результат создание иконки в sketch
Так выглядит конечный результат, я думаю, вы согласитесь, что выглядит бомбезно! 
Этот урок раскрыл множество приемов, важных для дизайна нестандартных иконок, включая объединения простых фигур в более сложные слои, стилизация слоев для различных визуальных эффектов. Эти приемы универсальны в своем применении и актуальны не только для Sketch.
Перевод статьи Tony Thomas
Топ коментарі (0)