Трехмерная графика 
О чем пойдет речь
Sketch – это отменная программа, которая разработана для создания дизайна интерфейса. Я проведу урок для неопытных новичков, который станет своеобразным введением в основные принципы работы с этим софтом. Не обязательно владеть минимальными познаниями в работе с этой программой. Достаточно лишь выделить хотя бы немного свободного времени, чтобы потратить его на последующее обучение.
В этой статья я расскажу вам, как можно создать свой первый артборд, разработать формы с помощью стандартных инструментов. Вы сможете научиться заменять свойства, импортировать рисунки, а также выучите много других полезных функций доя работы с этим приложением.
1. Разработка артбордов в Sketch
Шаг 1
Если вам необходимо заняться разработкой артборда в Скетч, для начала понадобиться создать новый документ. Вы успели открыть данную программу? Это и было все, что от вас требовалось сделать. По умолчанию Скетч открывает бесконечный холст, в котором и будут производиться все ваши действия. Это весьма удобно, ведь пользователь сможет работать, не сталкиваясь с нехваткой рабочего места.
Что же, теперь мы переходим на второй этап, непосредственно к разработке нашего первого артборда. Именно они позволяют создавать фреймы необходимого вам размера на холсте в Sketch.
Итак, для того, чтобы разработать свой первый артборд, нам понадобится перейти в меню Insert > Artboard (A) . Найти его достаточно просто. Оно находится на панели инструментов или же в главном меню программы. Далее следует кликнуть на артборд и перетянуть его на свой холст. Сразу же программа переходит к отображению размерных параметров. Попробуйте создать артборд размером 600 на 800 пикселей.
Небольшой совет: вы можете разрабатывать ровно столько артбордов, сколько вам понадобится для нормальной работы. На левой стороне экрана размещен список слоев. Здесь вы сможете переименовать созданный артборд или же изменить некоторые его параметры. При необходимости артборды можно беспрепятственно удалять (выделяя его и нажимая клавишу Delete),
Попробуем поменять позицию артборда. Для этого нам следует воспользоваться инспектором и задать новые параметры. Также вы сможете попросту протянуть его по всему артборду, установить на нужную позицию.
Подсказка: При переходе в меню View > Show Grid (Вид > Показать сетку) будет активирована сетка, которая была предусмотрена на этапе разработке данной программы. С ее помощью процесс переустановки Скетч становится гораздо проще.
Шаг 2
Итак, мы создали наш первый артборд. Пришло время попытаться поменять его цвет. Это простое действие принесет вам достаточно много пользы при разработке следующих шагов. Нажмите на артборд и обратите внимание на панель инспектора. Выбирая опцию «цвет фона» вы сможете увидеть выборку цветов. Нажимаем на нужный оттенок. Какой из них вы выберете – совершенно неважно. Однако для наглядности мы продолжим работать с насыщенным серым оттенком.
Вот вы и создали свой первый артборт. Пришло время заняться макетом.
2. Дизайн основы
Шаг 1
Перейдите в меню Insert > Shape > Rectangle (R) (прямоугольник). Здесь вы сможете создать прямоугольник, размер которого будет составлять 360 на 500 пикселей. В принципе, вы сможете нарисовать абсолютно любой прямоугольник, настроив его физические параметры с помощью инспектора. Лично я стараюсь использовать сетку, чтобы настройки осуществлялись гораздо проще и быстрее.
Шаг 2
Выделяем свой прямоугольник. Теперь стоит обратить внимание на инспектор. Границы формы следует стереть путем снятия с них соответствующей галочки. Нажимаем на опцию заливки, предварительно указав белый цвет. Кроме того, пользователь сможет здесь установить округленные углы в инспекторе, путем сдвига радиуса в правую сторону (в появившееся поле ввода стоит ввести цифру 10).
Шаг 3
Размещаем фигуру круга, предварительно задав ей размер 40 на 40 пикселей. Для этого потребуется выбрать инструмент создания овала и задать все нужные параметры в инспекторе. Передвигаем созданный круг в центральную часть в верхний край нашего прямоугольника. Чтобы при необходимости увеличить полученный рисунок, пользуемся инструментом зума.
Шаг 4
Создаем второй кружок, в два раза меньше, нежели предыдущий. Выравниваем его в центральной части первого круга. При передвижении программа отобразит линии-смартгайды, позволяющие максимально точно расцентровать объекты.
Вы не уверены, что вам удалось все правильно выровнять? Есть простой способ это проверить. Нажмите на кнопку option на клавиатуре компьютера. Сразу же вы сможете получить максимально точные размеры в пикселях, которые помогут определить расстояние между всеми созданными объектами. К примеру:
Шаг 4
Хотите попробовать создать из привычного двойного кружка одинарное кольцо? Выделяем оба круга и нажимаем на опцию вычитания.
Вот у нас и получилась единая, полноценная фигура.
Теперь необходимо выделить полученный объект вместе с прямоугольником. Нажимаем на опцию «объединить», в результате чего получается, представленная ниже фигура.
Что же именно нам удалось сделать? Мы смогли самостоятельно разработать достаточно нестандартную фигуру. Конечно, мы вполне бы смогли нарисовать ее при помощи ручки, однако практика показывает, что наиболее простым путем создания нестандартных фигур является их монтирование из нескольких стандартных. Также для этого можно пользоваться булевыми операциями. Например, в Sketch предусмотрены булевы операторы: union (объединить), subtract (вычесть), intersect (пересечь) и difference (разница).
Благодаря таким инструментам пользователи смогут разрабатывать достаточно сложные фигуры.
Все эти опции без затруднений поддаются регулировке и редактированию. Когда вы создаете сложную фигуру из нескольких стандартных, не забывайте следить за списками слоев. При нажатии на стрелку раскрывающегося списка на экране появится перечень всех стандартных компонентов сложной фигуры. С правой стороны размещается список всех булевых операций, которые являются индивидуальными для каждой стандартной фигуры. С их помощью вы сможете быстро редактировать созданный компонент.
Шаг 5
Вы уже практически преуспели в разработке нашей стандартной фигуры. Теперь стоит удостовериться, что она до сих пор выделена. Переходим на панель инспектора, выбираем опцию «Тени» и задаем такие параметры: Color > R=38 G=30 B=10 Alpha=50, X=0, Y=20, Blur=20 и Spread=0. Это ни что иное, как обозначения цвета, расположения, уровня размытости и теней. В результате данной операции у вас должно получиться что-то вроде этого:
3. Элементы регистрационных форм
А вы можете представить регистрационную форму без разнообразных кнопок и полей? Что же, давайте попытаемся нарисовать несколько из них своими силами.
Совет: заблокируйте свою главную фигуру, чтобы случайно ее не передвинуть в ненужное место. Для этого выделите данный элемент и перейдите в меню «Заблокировать слой». В данном перечне вы можете заметить маленькие замочки, указывающие на заблокированные фигуры.
Шаг 1
Пользуясь инструментом прямоугольника, создайте фигуру, размер которой составляет 280 на 50 пикселей. Границу следует удалить, радиус поставить на 2, а оттенок заливки установите, вбив параметры R=239 G=87 B=46. Переместите созданный объект по принципу, который указан на представленном ниже рисунке:
Шаг 2
Разрабатываем дополнительный прямоугольник 280 на 70 пикселей. Радиус – 2. Также устанавливаем толщину границы на единицу, а ее цвет – на R=234 G=234 B=234. Передвигаем созданную фигуру немного выше оранжевой, чтобы расстояние между ними остановилось на отметке в 10 пикселей. Далее стоит провести дублирование объекта, а полученную копию сдвигаем вверх на 80 пикселей.
Шаг 3
Делаем маленький квадратик 20 на 20. Окрашиваем его белой заливкой. Радиус устанавливаем на 2, толщину обводки на 1, а ее цвет – на R=234 G=234 B=234. Сдвигаем полученный объект вниз на 10 пикселей от нашего оранжевого прямоугольника. Полученный артборд преобразится до такого вида:
Шаг 4
Справились? Пора дополнить нашу регистрационную форму разнообразными текстовыми элементами. Для этого нам понадобится выбрать инструмент «Текст» и нажать на любое место холста, чтобы разработать текстовый слой. Сразу после этого вы сможете начинать печатать. В инспекторе же произойдут характерные изменения, обозначающие актуальные для этого текста параметры.
Совет: просто кликните и слегка протяните по холсту, если вы хотите создать текстовый блок определенного размера. Если же текст будет чрезмерно большим для созданного блока, он начнет автоматически уменьшаться.
Добавляем текст «USERNAME» и производим его настройку в инспекторе. Пользуемся шрифтом Montserrat font, Weight=Regular, Size=11, Spacing=1, Color > R=204 G=204 B=204.
Теперь опять используем текстовый инструмент и впечатываем текст «Armando». Сейчас же параметры текста оказываются следующими: Montserrat font, Weight=Regular, Size=24, Spacing=0, Color > R=113 G=87 B=44. Выделяем оба текстовых кусочка и размещаем их так, как представлено на размещенном ниже скрине:
Шаг 5
Благодаря описанному ниже действию мы сможем создать разметку поля и разграничить ее от текста в первом поле. Копируем текстовые слои и перетаскиваем их на второй прямоугольник. Меняем текст на «PASSWORD» и «*******».
Шаг 6
Остается только добавить еще несколько текстовых слоев, пользуясь атрибутами на следующем скрине. Я советую использовать шрифт Open Sans font.
Вы, должно быть, заметили, что ссылка «Forgot your password» оказалась подчеркнутой. Хотите сделать так же? Просто выберите опции текста, чтобы заняться его дизайнерским оформлением. Выбираем второй эффект при выделенном текстовом слое.
А результат станет таковым:
Несколько советов по поводу грамотного создания слоев
А вот теперь обратите внимание на список слоев. Практика показывает, что достаточно много удобства пользователю приносит переименование, группировка и организация представленных здесь элементов. Объекты можно легко переименовывать благодаря двойному клику. Чтобы сгруппировать полученные слои, следует нажать на иконку «Группировать», которая размещена на панели инструментов.
Для чего это нужно? Чтобы хаотично разбросанные слои приобрели более логичный и упорядоченный вид. Постарайтесь придерживаться данного правила в своей работе и вы наверняка оцените все полученные удобства.
4. Разрабатываем логотип
Нам уже удалось создать все необходимые формы входа. Пришло время уделить должное внимание логотипу.
Шаг 1
Открываем файл logo_icon.svg (я прикрепил его во вложениях к данному руководству). Так вы сможете увидеть все этапы создания логотипа. При этом, абсолютно каждый файл можно легко отредактировать.
Шаг 2
Создаем прямоугольник с помощью соответствующего инструмента и задаем ему размер 30 на 60 пикселей. Помещаем данную фигуру так, как это показано на дальнейшем рисунке. Чтобы размещение было максимально точным, не забываем отобразить направляющую сетку.
Шаг 3
Сейчас нам нужно заглянуть в список слоев и найти там инструмент Path, который перетаскиваем в группу «Shape». Располагаем его в верхней части. Таким образом вам удалось создать новую составную фигуру.
Шаг 4
Я уже рассказывал о малюсеньких иконках в правой стороне от ваших стандартных контуров. Сейчас мы сможем выбрать индивидуальные булевы операторы для каждой созданной фигуры. Так, пробуем поменять оператора первой на Substract, а для второй — на Difference
Шаг 5
Действия из данного пункта являются не слишком уж простыми. Для начала стоит выделить созданную составную фигуру. Сразу после этого выполните такие действия: Layer > Paths > Flatten. Составной контур потерян, а вы уже не сможете отредактировать его параметры. Однако такое действие в значительной мере облегчит дальнейшие манипуляции.
Шаг 6
Выделите фигуру и перейдите на панель инструментов. Далее кликните на кнопку «Редактировать». В панели инспектора будут произведены некоторые изменения. Выделите все точки вектора и перенесите их на свой холст.
А сейчас переходим в инспектор и на его панель редактирования. Назначаем параметру углов значение 5. Выбираем заливку, кликаем на ее второй тип, которая называется линейным градиентом. Все точки соединяются меду собой в линию, которая тут же накладывается на созданный слой. Точки обозначают собой стоп-цвета планируемого градиента.
Если вы планируете изменить стоп-цвет, выберите одну из точек. Программа отобразит выборку цвета в инспекторе. Там вы сможете указать нужный цвет градиента. Так, для наглядности выбираем для одной из точек оттенок R=245 G=166 B=35 и R=239 G=87 B=46 для второй.
В результате иконка станет выглядеть примерно так:
Шаг 7
Копируем полученную фигуру и перемещаем ее в форму логина
Шаг 8
Процесс создания логотипа практически закончен. Остается добавить текст. Печатайте то, что вам приходит на ум. Например:
Процесс создания формы для входа завершен!
5. Создаем фон
Шаг 1
Sketch – это программа, которая может работать не только с векторными, но и с растровыми изображениями. Выбираем необходимую вам фотографию.
Теперь необходимо выбрать созданный артборд, который размещается в списке слоев. Переходим в пункт меню Insert > Image, Если выбранная фотография оказывается слишком большого размера, вы всегда можете ее уменьшить. Устанавливаем позицию фото фотографии X=0 Y=0. Также стоит окончательно убедиться, что картинка находится в самом низу всего списка слоев.
К слову, если вы решили заняться импортом изображений в тот момент, пока артборд находится плд выделением, оно автоматически спрячется за его размерами. Именно поэтому стоит вытащить данный слой из группы артборда. Подробнее об этом явлении рассказывают официальные документы приложения.
Шаг 2
В Sketch пользователю предоставляется отличная возможность поиграться с цветовой гаммой уже созданного изображения. Для этого разработчики создали панель настройки цветов, которая размещена в инспекторе. Попробуйте установить параметры Saturation на 0 и Contrast на 1,9.
Теперь требуется разработать прямоугольную фигуру, размер которой будет составлять 600 на 800 пикселей. Помещаем его на уровень X=0 Y=0. В перечне слоев необходимо сдвинуть слой фигуры сверху слоя с картинкой. Создайте его копию и установите прямоугольникам такие настройки: первому - Opacity=100%, Blending=Multiply, Color > R=173 G=166 B=152. Второму - Opacity=50%, Blending=Normal, Color > R=173 G=166 B=152.
А вот такой вот будет финальный вид у созданного нами объекта:
И еще несколько особенностей:
Так как сейчас вы занимаетесь ничем иным, как созданием элемента пользовательского интерфейса, можно добавить несколько полезных деталей для формы логина. Так, все описанные в этом уроке приемы позволят вам разработать дополнительные достаточно важные элементы. Например:
