UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Иконки в Sketch 3 — Дизайн иконки Google Docs
Редакція
Редакція

Опубліковано • Оновлено

Иконки в Sketch 3 — Дизайн иконки Google Docs

Копирование дизайна - процесс не сложный. Но создание иконки в 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


Перевод статьи Sketch Tricks

Найстарші коментарі (0)