Копирование дизайна - процесс не сложный. Но создание иконки в Sketch или оригинального дизайна, перевод идеи из головы в пиксели на экране могут представлять определенные трудности. Сегодня мы воссоздадим иконку Google Docs с нуля, используя Sketch. По большей части это будет простой урок, и он поможет вам познакомиться лучше с основами работы в Sketch. Также можете почитать о создании эффектной иконки в виде капли воды в Sketch и Подробный урок по созданию IOS иконки в Sketch 3 Вот над чем мы будем трудиться следующие 10 минут. 
Если вы предпочитаете обучаться по видео, перейдите на видео-версию урока. Давайте сделаем это! Перед тем, как запачкать руки работой, давайте разберем наш дизайн на запчасти. 
Синий фон. Это простая, базовая фигура, которую легко воссоздать, используя прямоугольник. 
Четыре линии посередине, с разными размерами. Такое можно воссоздать, используя несколько прямоугольников, с изменением размера последнего. 
Наконец, у нас есть два треугольника в верхнем правом углу, которые выглядят как загиб бумаги с падающей тенью. Единственная проблема в этом дизайне может возникнуть с поиском элегантного способа создания эффекта загиба бумаги вверху иконки. Мы справимся с этим относительно легко, используя векторные инструменты для изменения синего фона. Вот как должен выглядеть прямоугольник, когда мы закончим: 
Если вам больше нравится учиться по видео, вот ссылка на видеоурок.
Шаг 1 — Создайте фон
Создайте простой прямоугольник, нажав клавишу “R”. Создайте прямоугольник в 107px ширину и 136px в высоту. Вы можете настроить размер в панели Инспектора справа. 
Чуть ниже в панели инспектора отыщите опцию “Borders” (границы) и отключите ее. 
Найдите опцию “Fills” (заливка), расположенную прямо над Borders. Кликните на селектор цвета и измените значение hex на #3982FD. 
Выберите слой Rectangle в панели слоев Layers (слои) слева. Дважды кликните на слой в панели и переименуйте его на Background (Фон). 
Очень важно сохранять правильную организацию в проекте по мере роста его сложности.
Шаг 2 — Создаем линии
С помощью инструмента прямоугольник, нажав “R” на клавиатуре снова, создайте прямоугольник 58px в ширину и 6px в высоту. 
Удалите границы так же, как мы сделали это в предыдущем шаге. 
Используя опцию Fills, измените фон цвета на #FFFFFF. 
Снова измените имя слоя на Line (Линия). 
Убедитесь, что слой Line выделен. Нажав кнопки Command+D, продублируйте Line трижды. Затем можете перетащить линии так, чтобы они были на расстоянии 7 пикселей друг от друга. Вот как в итоге все должно выглядеть. Выберите четвертый слой Line (последний созданный вами элемент), и измените ширину на 34px в панели инспектора справа. Выделите все слои Line и сгруппируйте их, используя кнопки Command+G. Переименуйте полученную группу в Lines. Вот как на данном этапе будут обстоять дела: 
Шаг 3 — Создайте загиб и падающую тень
Тут и начинается веселье. Займемся векторными точками. Начните с выбора фигуры “Triangle” (треугольник) из меню “Insert” (вставка) в верхнем левом углу Sketch. 
Кликните и тяните до тех пор, пока не получится треугольник размером 24px на 24px. Как и раньше, удалите границы в панели инспектора и измените 16-ричное значение цвета заливки на #A0C4FF 
Выделите только что созданный треугольник в панели слоев слева и переименуйте его на Fold. В панели слоев выделите одновременно слои Background и Fold. Вы можете сделать это, удерживая кнопку Command. 
Нам надо убедиться, что слои Fold и Background идеально выровнены. Когда оба эти слоя выделены, перейдите в панель инспектора вверху справа, и кликните на опции “Align Right” (выровнять по правому краю) и “Align Top” (выровнять по верхнему краю). 
Вернитесь в панель слоев слева и выделите ТОЛЬКО слой Fold. Для создания равнобедренного треугольника мы воспользуемся классным векторным инструментом :-). Нажмите кнопку Return на клавиатуре, чтобы включить векторный режим. Вот как это будет выглядеть: 
На данный момент игнорируйте все, что происходит. Вам нужно тянуть верхнюю точку до тех пор, пока она не станет в параллель с левой векторной точкой. Что-то вроде этого: 
Примечание: Убедитесь, что значение Y такое же, как и до перемещения векторной точки.
Нажмите Enter, чтобы подтвердить действие. Вот что должно получиться. 
Когда закончите, убедитесь, что слой Fold выделен. Продублируйте этот слой. *Помните горячую клавишу?* Как только вы продублировали слой, переместите только что созданный слой под слой Fold так, чтобы он касался верхним левым пикселем предыдущего треугольника. 
Переименуйте новый слой в Dropshadow (Падающая тень) и сгруппируйте его с Fold. 
В панели инспектора мы воспользуемся кнопками “Flip” (зеркальное отображение), чтобы отобразить падающую тень по вертикали и по горизонтали (Vertically и Horizontally). 
Как и раньше, используя опции “Fills”, измените 16-ричный цвет заливки на #1F53B3. 
Дизайн почти завершен. Остался всего один шаг. 
Шаг 5 — сделайте загиб
Мы воспользуемся векторными точками, чтобы спрятать верхний угол нашего фона и создадим реалистичный эффект загиба бумаги. Когда слой Background выделен, нажмите Enter на клавиатуре, чтобы включить векторный режим. Тут вам бы не помешал масштаб, я думаю, в районе 64000%. Вы хотите найти верхний правый угол слоя Fold и создать новую векторную точку, следующую за ним в слое Background. 
В панели инспектора справа измените режим кривых на “Straight”. 
Это поможет создать ровную линию между этой точкой и любыми другими точками в слое Background. Теперь можно уменьшить масштаб (где-то до 1500%), найдите верхнюю правую векторную точку. Вы хотите перетянуть эту точку влево, пока она не станет в линию с верхним углом слоя Fold. Вот как все должно выглядеть: 
Нажмите enter на клавиатуре, чтобы подтвердить изменения. Уменьшите масштаб до 100%, используя горячую клавишу Command+0. Отличная работа! Вы закончили. Ну... почти! Группа Lines отцентрирована не идеально. Вместо подсказок, я оставлю эту загадку вам. В ближайшем будущем я буду создавать подобные уроки и публиковать их в блоге. Будут разные проекты - от базовых иконок до полноценных приложений. Будет весело! Вот небольшой дайджест на следующий месяц. 
Перевод статьи Sketch Tricks
Топ коментарі (0)