Копирование дизайна — процесс не сложный. Но создание иконки в Sketch или оригинального дизайна, перевод идеи из головы в пиксели на экране могут представлять определенные трудности.

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

Также можете почитать о создании эффектной иконки в виде капли воды в Sketch и Подробный урок по созданию IOS иконки в Sketch 3

Вот над чем мы будем трудиться следующие 10 минут.

иконки Google Docs в Sketch 3

Если вы предпочитаете обучаться по видео, перейдите на видео-версию урока.

Давайте сделаем это!

Перед тем, как запачкать руки работой, давайте разберем наш дизайн на запчасти.

иконки Google Docs в Sketch 3

Синий фон. Это простая, базовая фигура, которую легко воссоздать, используя прямоугольник.

иконки Google Docs в Sketch 3

Четыре линии посередине, с разными размерами. Такое можно воссоздать, используя несколько прямоугольников, с изменением размера последнего.

иконки Google Docs в Sketch 3

Наконец, у нас есть два треугольника в верхнем правом углу, которые выглядят как загиб бумаги с падающей тенью.

Единственная проблема в этом дизайне может возникнуть с поиском элегантного способа создания эффекта загиба бумаги вверху иконки. Мы справимся с этим относительно легко, используя векторные инструменты для изменения синего фона. Вот как должен выглядеть прямоугольник, когда мы закончим:

иконки Google Docs в Sketch 3

Если вам больше нравится учиться по видео, вот ссылка на видеоурок.

Шаг 1 — Создайте фон

Создайте простой прямоугольник, нажав клавишу “R”. Создайте прямоугольник в 107px ширину и 136px в высоту. Вы можете настроить размер в панели Инспектора справа.

иконки Google Docs в Sketch 3

Чуть ниже в панели инспектора отыщите опцию “Borders” (границы) и отключите ее.

иконки Google Docs в Sketch 3

Найдите опцию “Fills” (заливка), расположенную прямо над Borders. Кликните на селектор цвета и измените значение hex на #3982FD.

иконки Google Docs в Sketch 3

Выберите слой Rectangle в панели слоев Layers (слои) слева. Дважды кликните на слой в панели и переименуйте его на Background (Фон).

иконки Google Docs в Sketch 3

Очень важно сохранять правильную организацию в проекте по мере роста его сложности.

Шаг 2 — Создаем линии

С помощью инструмента прямоугольник, нажав “R” на клавиатуре снова, создайте прямоугольник 58px в ширину и 6px в высоту.

иконки Google Docs в Sketch 3

Удалите границы так же, как мы сделали это в предыдущем шаге.

иконки Google Docs в Sketch 3

Используя опцию Fills, измените фон цвета на #FFFFFF.

иконки Google Docs в Sketch 3

Снова измените имя слоя на Line (Линия).

иконки Google Docs в Sketch 3

Убедитесь, что слой Line выделен. Нажав кнопки Command+D, продублируйте Line трижды. Затем можете перетащить линии так, чтобы они были на расстоянии 7 пикселей друг от друга.

Вот как в итоге все должно выглядеть.

иконки Google Docs в Sketch 3

Выберите четвертый слой Line (последний созданный вами элемент), и измените ширину на 34px в панели инспектора справа.

Выделите все слои Line и сгруппируйте их, используя кнопки Command+G. Переименуйте полученную группу в Lines.

Вот как на данном этапе будут обстоять дела:

иконки Google Docs в Sketch 3

Шаг 3 — Создайте загиб и падающую тень

Тут и начинается веселье. Займемся векторными точками.

Начните с выбора фигуры  “Triangle” (треугольник) из меню “Insert” (вставка) в верхнем левом углу Sketch.

иконки Google Docs в Sketch 3

Кликните и тяните до тех пор, пока не получится треугольник размером 24px на 24px. Как и раньше, удалите границы в панели инспектора и измените 16-ричное значение цвета заливки на #A0C4FF

иконки Google Docs в Sketch 3

иконки Google Docs в Sketch 3

Выделите только что созданный треугольник в панели слоев слева и переименуйте его на Fold.

В панели слоев выделите одновременно слои Background и Fold. Вы можете сделать это, удерживая кнопку Command.

иконки Google Docs в Sketch 3

Нам надо убедиться, что слои Fold и Background идеально выровнены. Когда оба эти слоя выделены, перейдите в панель инспектора вверху справа, и кликните на опции “Align Right” (выровнять по правому краю) и “Align Top” (выровнять по верхнему краю).

иконки Google Docs в Sketch 3

Вернитесь в панель слоев слева и выделите ТОЛЬКО слой Fold. Для создания равнобедренного треугольника мы воспользуемся классным векторным инструментом :-).

Нажмите кнопку Return на клавиатуре, чтобы включить векторный режим. Вот как это будет выглядеть:

иконки Google Docs в Sketch 3

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

иконки Google Docs в Sketch 3

 

Примечание: Убедитесь, что значение Y такое же, как и до перемещения векторной точки.

Нажмите Enter, чтобы подтвердить действие. Вот что должно получиться.

иконки Google Docs в Sketch 3

Когда закончите, убедитесь, что слой Fold выделен. Продублируйте этот слой. *Помните горячую клавишу?*

Как только вы продублировали слой, переместите только что созданный слой под слой Fold так, чтобы он касался верхним левым пикселем предыдущего треугольника.

иконки Google Docs в Sketch 3

Переименуйте новый слой в Dropshadow (Падающая тень) и сгруппируйте его с Fold.

иконки Google Docs в Sketch 3

В панели инспектора мы воспользуемся кнопками “Flip” (зеркальное отображение), чтобы отобразить падающую тень по вертикали и по горизонтали (Vertically и Horizontally).

иконки Google Docs в Sketch 3

Как и раньше, используя опции “Fills”, измените 16-ричный цвет заливки на #1F53B3.

иконки Google Docs в Sketch 3

Дизайн почти завершен. Остался всего один шаг.

иконки Google Docs в Sketch 3

Шаг 5 — сделайте загиб

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

Когда слой Background выделен, нажмите Enter на клавиатуре, чтобы включить векторный режим. Тут вам бы не помешал масштаб, я думаю, в районе 64000%.

Вы хотите найти верхний правый угол слоя Fold и создать новую векторную точку, следующую за ним в слое Background.

иконки Google Docs в Sketch 3

В панели инспектора справа измените режим кривых на “Straight”.

иконки Google Docs в Sketch 3

Это поможет создать ровную линию между этой точкой и любыми другими точками в слое Background.

Теперь можно уменьшить масштаб (где-то до 1500%), найдите верхнюю правую векторную точку. Вы хотите перетянуть эту точку влево, пока она не станет в линию с верхним углом слоя Fold.

Вот как  все должно выглядеть:

иконки Google Docs в Sketch 3

Нажмите enter на клавиатуре, чтобы подтвердить изменения. Уменьшите масштаб до 100%, используя горячую клавишу Command+0.

Отличная работа! Вы закончили. Ну… почти!

иконки Google Docs в Sketch 3

Группа Lines отцентрирована не идеально. Вместо подсказок, я оставлю эту загадку вам.

В ближайшем будущем я буду создавать подобные уроки и публиковать их в блоге. Будут разные проекты — от базовых иконок до полноценных приложений. Будет весело!

Вот небольшой дайджест на следующий месяц.

иконки Google Docs в Sketch 3