Создаем эффектную иконку в виде капли воды в Sketch 3

Что вам предстоит создать

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

Если для вас это первое знакомство со Sketch 3, есть четыре вещи об интерфейсе Sketch 3, о которых важно знать:

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

1. Добавьте артборд

Артборды - это легкий способ организовать ваши дизайны с помощью разграниченных фреймов. Sketch 3 предоставляет набор размеров артбордов по умолчанию, когда вы нажимаете клавишу А (или кликните на Insert - Artboard). Вы увидите, что по умолчанию вам предлагается размеры экранов большинства устройств Apple с правой стороны интерфейса Sketch:

Выберите iPad screens - Landscape (ландшафтная ориентация экрана iPad). Теперь слева появилась панель слоев. Если у вас выбран маленький размер экрана, не забывайте о масштабе. чтобы увидеть весь артборд, нажав Command-Hyphen (-).

Переименуйте артборд, дважды кликнув на него. Назовите его Water Icon. (водяная иконка). У вас получится что-то вроде этого:

2. Создайте фон

Итак, у нас есть артборд размером с экран iPad, то есть 1024 пикселя в ширину и 768 пикселей в высоту. Давайте начнем с добавления фона. Чтобы сделать это, нажмите клавишу R (или перейдите на Insert - Shape - Rectangle), нажмите на ваш артборд и протяните курсор мыши/палец, чтобы сделать небольшой прямоугольник. Вы можете видеть сейчас этот прямоугольник в панели слоев. Переименуйте его на Background.

Затем мы перейдем на панель справа и установим следующие параметры слоя фона (позиция по горизонтали, позиция по вертикали, ширина, высота):

• Position X = 0
• Position Y = 0
• Width = 1024
• Height = 768

Давайте немного стилизуем фон. Перейдите на опцию Borders (границы) и снимите галочку с нее. Теперь добавьте градиент, нажав на серый цвет по умолчанию в опции Fill (заливка). Выпадающее меню содержит пять опций: Flat Color (монотонная заливка), Linear Gradient (линейный градиент), Radial Gradient (радиальный градиент), Angular Gradient (угловой градиент), Pattern Fill (заливка паттерном) и Noise Fill (заливка шумом).

Слева направо : Flat Color, Linear Gradient, Radial Gradient, Angular Gradient, Pattern Fill, Noise Fill

Нажмите на опцию Radial Gradient. Вы увидите слайдер с белым цветом по центру градиента слева и черный цвет с правого края. Чтобы изменить эти цвета, нужно просто кликнуть на них на слайдере:

Давайте настроим цвета. Sketch позволяет вам выбирать значения цвета в шестнадцатеричном виде, в системе RGB или HSB. Мне ближе схема HSBA, поэтому для цвета в центре я выбираю H190, S50, B100, A100, а для второго я выбираю H210, S50, B100, A100.

3. Создайте иконку

Теперь мы создадим иконку с каплей воды. Нарисуйте новый прямоугольник. Нажмите R, кликните и протяните курсор. Переименуйте этот новый слой на icon.

Настройте параметр ширины (Width) на 515 и высоту (Height) на 515. Поместите его в центре с помощью инструмента на панели справа:

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

Установите радиус границы (Border Radius) на 144, и так же, как в случае со слоем Background, снимите галочку с опции border, а затем залейте иконку белым цветом.

Тень

Теперь мы добавим тень. Функционал опции Shadows (Тени) содержит пять параметров :X position (положение по горизонтали), the Y position (положение по вертикали), the blur (размытость), и spread (расширение). Настройте эти параметры так:

• Color: H210, S70, B80, A100
• X: 0
• Y: 24
• Blur: 55
• Spread: 0

Далее нужно добавить внутреннюю тень внизу. Внутренняя тень (Inner Shadows) по сути - то же самое, что и просто тень, только она распространяется на внутреннюю часть фигуры, а не вовне. У внутренней тени должны быть такие параметры:

• Color: H190, S30, B100, A100
• X: 0
• Y: -13
• Blur: 21
• Spread: 0

И финальный результат должен выглядеть так:

4. Создайте каплю

Теперь вы научитесь создавать иконку с каплей воды в Sketch. Сначала нужно нарисовать овал, поэтому нажмите клавишу O (или перейдите на меню Insert - Shape - Oval), и установите размер Width: 200 и Height: 200.

Затем создайте треугольник, выбрав пункт меню Insert - Shape - Triangle (для этого инструмента нет горячей клавиши). Перейдите на правую панель, поставьте галочку на опцию Equilateral (равнобокий) и укажите параметры Width=200 и Height=200.

Настало время для фокусов. Вам нужно расположить слои так:

Выберите два слоя и кликните кнопку Union (объединить), которая находится в верхней части интерфейса Sketch.

Мы добились формы капли, и сейчас добавим последние штрихи, чтобы капля выглядела более привлекательно. Мы добавим радиус к вершине капли. Выберите вашу фигуру и кликните на инструмент Edit (редактировать) в верхней панели инструментов.

К счастью, первая выделенная точка - именно та, которую нам нужно редактировать. В панели справа измените значение параметра Corners на 34.

Поздравляю! Форма идеальной капли завершена. Теперь вы можете ее сгладить (опция Flatten), нажав на иконку в верхнем меню (справа от Rotate). Выберите слой капли в панели слоев и переименуйте его на Droplet. В панели справа установите параметр Width на 266 и Height на 377. Затем отцентрируйте его с помощью инструмента в панели справа:

И последний шаг: стиль! Сначала снимите галочку с границ, а затем залейте фигуру радиальным градиентом. Центральный оттенок должен быть H190, S70, B100, A100, а нижний - H210, S70, B100, A100.

Затем мы добавим внутреннюю тень (Inner Shadow):

• H190, S100, B100, A100
• X: 0
• Y: -34
• Blur: 55
• Spread: 0

И...

Мои поздравления! Готово

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

---

Перевод статьи Arnaud Schlupp