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

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

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

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

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

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

Screen sizes

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

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

Art board

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

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

Background

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

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

Background properties

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

Fills

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

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

Radial fill

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

HSBA

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

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

New rectangle

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

Center

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

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

Border radius

Тень

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

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

Shadow settings

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

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

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

Both shadows

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

 

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

Circle

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

Equilateral

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

Position

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

Union

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

Edit tool

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

Corners

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

Center align

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

Radial gradient

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

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

Inner shadow

И…

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

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