Цветной выключатель
Спустя чуть более, чем месяц использования Sketch, я уже чувствую себя достаточно уверенно, чтобы поделиться частью своей работы в виде урока. Я покажу, как нарисовать бесплатную цветную иконку-выключатель, которую создал сам, и в которой используется множество интересных возможностей Sketch. К тому же, эта работа не слишком долгая и рутинная.
Я хочу сделать самое простое, но самое подробное описание. Этот урок разработан для новичков, так что, возможно, многие вещи, описанные здесь, будут вам уже знакомы. Вот результат IOS иконки в Sketch 3, который мы получим:
Примечание: Я не всезнайка, и уж точно не являюсь уникальным владельцем единственно правильного способа создания тех или иных вещей, поэтому если у вас есть комментарии или дополнения, не стесняйтесь оставлять их под этим постом. Мне всегда интересно учиться, и такие обсуждения будут полезны каждому читателю.
Если вдруг вы заблудились в шагах, или вам что-то непонятно, есть наполовину готовый файл .sketch, который можно скачать, а также есть конечный файл-источник. Ну все, давайте приступим.
Установка Sketch
Это непростой шаг☺. Если у вас еще нет лицензии, вы можете скачать бесплатную триал-версию или купить лицензионную версию на App Store. Установите и запустите приложение.
Когда увидите окно приглашения, не открывайте никакой шаблон, а просто нажмите “ok”, чтобы создать новый документ. Вы увидите следующее:
Создание артборда
Артборды - это “рабочие области”, они могут быть и маленькие, как иконки, и такие большие, как вам нравится. Если вы раньше пользовались Illustrator, принцип артбордов такой же.
Нажмите “A” на клавиатуре или нажмите кнопку “Insert” вверху слева и выберите artboard(1). Как вы видите, в правой колонке доступно множество удобных размеров. Мы не будем их использовать. Просто нарисуйте артборд любого размера на холсте. Затем в панели справа в разделе “size”, введите 400x300 (2).
В панели артборда/слоя (слева) дважды щелкните мышкой на “Artboard 1” и переименуйте его, как вам хочется. Поколебавшись между разными вариантами, я решил назвать свой слой “Colorful switch” (цветной выключатель) (3).
Создание цветного фона
Артборд готов, настало время придать ему нужный тон. Вы всегда можете сделать это потом, но выбранный цвет фона будет влиять на отражение цвета на иконке и общую цветовую гамму.
Я потратил много времени, тестируя разные варианты, давайте сократим этот этап в уроке, и я просто выдам вам результат своих мучений.
Нажмите клавишу “R” на клавиатуре, чтобы выбрать кнопку “прямоугольник” (или выберите меню (insert>shape>rectangle ® в интерфейсе Sketch))(4).
Нарисуйте прямоугольник так, чтобы он полностью заполнил артборд. Это должно быть легко, так как прямоугольник автоматически “прилипнет” к границам артборда (5).
После этого вы увидите, как ваша панель эффектов (справа) автоматически заполнится серой заливкой и более серыми “границами” (цвет Borders) (6).
Снимите галочку с цвета Borders, а затем кликните на цвет заливки (Fill). В значении Hex введите #A846FF(7). Теперь у вас есть базовый цвет. В верхнем правом углу панели Fills кликните на иконку “+”.
Как видите, добавился новый слой Fills поверх другого.
Если еще не выбрана панель градиента, кликните на нее и нарисуйте градиент с верхнего левого угла до нижнего правого угла артборда(8).
Два квадратика прямо под выбором типа заливки - это цвета вашего градиента. Нажмите на один из них, и он станет редактируем.
Убедитесь, что верхний левый цвет имеет значение #ffffff (белый), а нижний правый - #000000 (черный). Нажмите на черный цвет в выборе цвета градиента или прямо в артборде и установите непрозрачность 0. Непрозрачность цвета градиента может быть настроена бегунком, расположенным сразу под селектором цвета или в блоке “А” справа от RGB-параметров. Затем выберите белый цвет, и установите параметр непрозрачности 60. Смотрите изображение 9.
Установите параметр Fill на значение Overlay (10) и нажмите + еще раз. В этот раз выберите третью вкладку, чтобы получить радиальный градиент. Нарисуйте этот градиент с верхнего левого угла до нижнего правого (11).
Убедитесь, что верхний левый цвет - белый, а нижний правый - черный. Установите для обоих цветов непрозрачность 50, а также сделайте слой с этой заливкой верхним. У вас получится, как на изображении 12. Супер яркий, неоново-пурпурный градиент от светлого к темному : )
В завершении, давайте сгруппируем наш слой. Выберите его в панели слева, нажмите cmd+G, чтобы сгруппировать его, кликните дважды на группе и назовите ее Background (фон). Можно позволить себе и больше вольностей в названии слоя. Смотрите изображение 13.
Основа иконки с использованием встроенного шаблона иконки iOS 7
А теперь давайте рисовать иконку.
Мы будем использовать встроенный шаблон иконки iOS, так чтобы нам не пришлось самостоятельно воссоздавать эти довольно сложные закругленные углы.
Выберите “File>New From Template> iOS App Icon”(14). Откроется новый файл. Для наших целей мы не будем создавать полный набор иконок, это для того, чтобы вы просто освоили полезную опцию шаблонов.
В панели слоев (слева) кликните на замочек слоя “Icon Shape” (форма иконки) в артборде “Icon-76@2x” (15). Когда вы выделили и разблокировали этот слой, скопируйте его (cmd+c) и вставьте в ваш оригинальный файл (16). Теперь можете закрыть окно с файлом шаблоном без сохранения изменений.
Выберите слой Icon Shape (форма иконки), который вы только что импортировали вместе со слоем, созданным ранее (у меня он называется crazy colors). Для множественного выделения используйте сочетание click+cmd(17).
Используя инструмент выравнивания, расположенный вверху правой колонки, мы будем выравнивать иконку на фоне по центру. Нажмите сначала кнопку “align horizontally” (выровнять по горизонтали), а затем кнопку “align vertically” (выровнять по вертикали), это 4-ая и 7-ая кнопки соответственно(18). В итоге у вас получится, как на изображении 19.
Давайте приведем в порядок слои, чтобы не пришлось останавливаться на этом в дальнейшем.
Нажмите “cmd+G” на слое с формой Icon, чтобы создать группу. Подтяните группу наверх и переименуйте ее в “Icon”. Снова нажмите Cmd + G внутри группы, чтобы поместить слой на один уровень ниже в дереве групп. Переименуйте ее в “Icon Base” (20).
Базовые формы
Выберите ваш слой “Base” и измените цвет заливки на #ffffff. Добавьте вторую однотонную заливку для этого слоя, используя кнопку “+” и укажите для нее оттенок #FAC3FF.
Настройте непрозрачность для этой заливки 10%. У вас получатся параметры, показанные на изображении 21.
Теперь нажмите “O” на клавиатуре, чтобы выбрать инструмент “Овал”. Нарисуйте круг размером 124*124 по центру слоя “Base”. Вы можете использовать правую колонку, чтобы точно указать размер. Не забудьте воспользоваться инструментами выравнивания, чтобы расположить круг идеально по центру. Удалите границы и вы получите следующее (22).
В слое “Oval 1", выберите заливку “Linear Gradient” (линейный градиент) и задайте направление градиента по диагонали. Укажите верхний левый цвет #E500E7, а нижний правый - #00D7FF. Не изменяйте режимы Alpha и перехода.(23)
Назовите этот слой “Super colorful base” (супер-разноцветная база) и включите его в группу “Color Base”. (24)
Очень полезная подсказка: Чтобы убедиться, что слой выровнен, удерживайте клавишу “Alt”, пока наводите на него мышкой, отобразятся смартгайды. Вы можете затем наводить мышкой на элементы, чтобы измерить расстояние между ними.
Снова используя инструмент овал, мы нарисуем основу для круглой ручки переключателя.
Добавьте вертикальный линейный градиент на новый слой, указав верхний цвет #FFDBFF и нижний #FCF2FC (25)
Сгруппируйте этот слой (cmd+G) и назовите группу “Knob base” (основание ручки переключателя). (26)
Как видите, мы просто создаем базовые фигуры и зоны иконки. В основе у нас стандартная фигура iOS7, цветной круг и круглый переключатель вверху. Осталось добавить некоторые эффекты на эту плоскую фигуру.
На данном этапе у вас должно получиться именно то, что вы видите на картинке вверху. Я сделал промежуточный файл sketch, который вы можете взять здесь.
Создание фаски
Теперь мы задержимся немного на группе объектов “Color base”.
Мы сделаем “кольцевое” обрамление большого цветного круга.
Используя инструмент Овал (О), создайте круг 128*128, выровненный по центру базы. Не забудьте, вы можете воспользоваться инструментами выравнивания и проверить, положение объекта с помощью смартгайдов, используя клавишу “Alt”. У вас получится нечто вроде изображения 27.
И снова возьмите инструмент Овал, нам нужно сделать немного меньший круг, идеально отцентрированный на предыдущем. Удерживайте кнопку “shift” при рисовании и задайте размер 116*116 (28).
Убедитесь, что последний нарисованный вами слой расположен поверх остальных, выделите оба круга и на главной панели инструментов нажмите “substract” (29). У вас получится, как на изображении 30.
Вы увидите, что Oval 3 теперь в “shape group”. Если вы откроете ее, вы сможете изменять нарисованные фигуры. Переименуйте слой на “Surrounding” (окружение).
Давайте добавим линейный градиент, чтобы создать некую перспективу.
Задайте направление градиента по диагонали слева направо. Укажите верхний цвет #F698FF и нижний цвет #FFF3FF, чтобы выглядело так (31).
Теперь мы добавим дополнительны цвет в этот градиент для стимуляции отражения цвета. Когда вы наводите мышкой на линию-вектор градиента, вы увидите, что обозначение курсора меняется на “+”. Если кликнуть мышкой, в градиент добавится еще один цвет. Задайте дополнительный цвет примерно на ⅓ длины вектора от верхней точки и назначьте оттенок #BDB6FF (32).
Затем нужно усилить фаску. Она выделит центральный элемент, создаст красивый 3D-эффект. В Sketch нет инструмента тиснения слоя, как в Photoshop, поэтому мы создадим подобный эффект простым градиентом.
Нарисуйте еще один круг (клавиша “О”) размером 144*144 в слое “Super colorful base” и также идеально отцентрируйте его на базе. Удалите слой границ и добавьте вертикальный линейный градиент с верхним цветом #ffffff и нижним #DF80FF (33).
Далее нужно добавить размытость, чтобы создать нужный сглаживающий эффект. Видите, в правой колонке есть строка “Gaussian Blur” (гауссово размытие). Кликните на этот чекбокс и установите параметр amount равный 3px (34). И, наконец, задайте для всего слоя непрозрачность 44%(35).
Добавление глубины
Теперь переключатель выделен некой глубиной, настало время продублировать подобный эффект на цветной круг. Выберите слой “Super colorful base” и добавьте внутреннюю тень Inner shadow, кликнув на “+” в строке “Inner Shadows”.
Оставьте цвет #000000 , но укажите параметр альфа 64. Укажите значения параметров X и Y на 0, а blur 10.
Параметр spread должен быть 0 (36).
Добавьте еще одну такую же тень, нажав “+”.
В этот раз непрозрачность должна быть 56, X:0, Y:7 а blur равна 9 (37).
Скашивание кромок
У нас есть отличная фаска на центральном элементе. Настало время добавить такой же эффект на базовый элемент, чтобы они лучше сочетались между собой.
В папке “icon base” выберите слой “base”. Нам нужно следовать такому же направлению цвета - светлее вверху, темнее внизу, т.е. белый вверху, розовый внизу.
Начните с добавления первой тени Inner shadow с цветом #E187FF с 90% alpha, X:0, Y:-5, Blur 6 и нулевым значением spread.
Добавьте вторую такую же тень, на этот раз чисто белую (#ffffff) со 100% непрозрачностью, но вместо того, чтобы задать направление вверх, задайте направление вниз со значением Y:5 (38).
Теперь сделаем то же самое для маленькой головки переключателя. Выберите группу “knob base” на слое “oval 2". Первую внутреннюю тень задайте с цветом #8D1799 с 48% alpha, X:0 Y:-1 и blur:3.
Сделайте вторую тень #ffffff со 100% alpha и параметрами X:0, Y:2 и Blur:3, это придаст красивое сияние головке переключателя(39).
Далее необходимо слегка выточить переключатель. чтобы он выглядел более “осязаемым”, придать ему глубину. Инструментом Овал нарисуйте круг посередине переключателя размером 48*48 (40). Удалите границы и залейте черно-белым градиентом (черный вверху, белый внизу). Белому цвету задайте 0% alpha(41).
Вместо выбора цвета для этой выточки мы воспользуемся режимом наложения. Установите параметр Blending на “overlay”для всего слоя (42).
Переключатель будто перешел в другое измерение.
Затемнение
Моя любимая часть. В Sketch 3 меня удивляет, как легко он справляется с тенями. Есть несколько способов создать тень: используя инструмент Тени в панели слоя, простыми градиентами или размытыми слоями.
Мы будем использовать и инструмент тени, и размытые слои.
Начните с выбора слоя “Icon base > Base”. Мы добавим в сумме три тени, от резкой, ближе к базе, до мягкой подальше от нее. Добавьте тени с такими параметрами:
- #000000 Aльфа 42% X:0 Y:10 Blur:16 Spread:0
- #000000 Aльфа 34% X:0 Y:4 Blur:14 Spread:0
- #000000 Aльфа 24% X:0 Y:2 Blur:2 Spread:0
В итоге у у вас получится, как на изображении 43.
Последнее, что мы сделаем с базой - добавим резкую падающую тень (drop shadow).
Для этого скопируйте слой “base”. Вы можете просто кликнуть правой кнопкой мышки на слое и выбрать в меню опцию “duplicate” (дублировать). Также вы можете скопипастить слой или нажать на него и перетянуть, удерживая клавишу “alt”.
Заметьте, в скопированном слое все эффекты также дублируются.
Удалите все эффекты. Просто снимите галочки с эффектов и кликните на иконку корзины справа от названия группы эффектов (рядом со значком “+”). Нажатие на эту иконку автоматически удалит все эффекты, с которых сняты галочки (44). Установите цвет заливки #000000, и у вас получится изображение 45.
В панели слоев, переименуйте этот слой на “Big drop shadow” (большая падающая тень) и передвиньте его под слой “base”(46).
Теперь мы сместим слой на 30 пикселей вниз. Выделите слой, удерживайте shift и трижды нажмите клавишу “стрелка вниз”. “Shift + стрелка вниз” передвигает выделенный слой 10-пиксельными шагами (47).
Последний шаг для тени - установить непрозрачность для слоя 20% и гауссово размытие на 7 пикселей (48). Теперь ваша база красиво оттеняется.
Настало время добавить такие же тени на переключатель.
В группе “Knob base” выберите слой “oval 2". Скопируйте этот слой, уберите его из группы, укажите для него отдельную группу под названием “Knob shadow” (тень переключателя) и переместите эту группу под “knob base” (49).
Удалите все эффекты с этого слоя, задайте цвет заливки #000000 и передвиньте вниз на 10 пикселей (50). Затем задайте непрозрачность 10% и гауссово размытие на 4 пикселя, результат будет малозаметен (51).
Давайте сделаем тени выразительнее. Скопируйте этот слой и снова приподнимите его на 10 пикселей, чтобы выровнять его с самим переключателем. Мы изменим форму этого круга. Выделив новый слой, нажмите “enter(return)”, и вы увидите изображение 52. Теперь вы редактируете линии. Заметьте изменения в правой панели.
Если еще не выделена, выделите нижнюю опорную точку (как на изображении 52). Передвиньте ее на 10 пикселей вниз (53). Затем нажмите “finish editing” (завершить редактирование) вверху панели редактирования векторов, чтобы вернуться в обычный вид изображения.
Установите непрозрачность для слоя 20% и гауссово размытие 8 пикселей (54).
Для последней тени, скопируйте слой, над которым мы только что работали и укажите непрозрачность для нового слоя 40%. В панели справа, в разделе “size” (размер), задайте ширину слоя 68 и длину 80, отцентрируйте слой на переключателе, чтобы верхние точки совпадали (55).
Наконец, в режиме наложения ( blending mode) выберите вариант Overlay (поверх всех), чтобы получить красивую, темно-синюю тень(56).
Далее мы будем добавлять различные эффекты к теням.
Выделите базовый слой переключателя “Knob base>Oval 2". Добавьте три тени:
- #000000 60% alpha X:0, Y:1, Blur:2, spread 0. Установите blending mode на “Overlay”.
- #000000 14% alpha X:0, Y:3, Blur:4, spread 0.
- #000000 50% alpha X:0, Y:2, Blur:4, spread 0.
Получится следующее (57).
Все, с тенями покончено.
Последние штрихи
Мы добавим крошечную деталь “вкл/выкл”. В группе Knob base создайте прямоугольник с закругленными углами, используя клавишу “U” на клавиатуре или “Insert>Shape>Rounded” (58) размером 8*2 с радиусом 3 или более.
Поместите его поверх слоев переключателя и назовите “pointer thingy” (указательная штуковина), лучшего названия я не придумал.
Выровняйте его по вертикали, отступив 8 пикселей от правого края базы переключателя (59).
Удалите границы и залейте сплошным цветом #CA2DEA с непрозрачностью 40%.
Чтобы придать штуковине глубину, добавьте тень с параметрами #FFFFFF 46% alpha X:0, Y:1, Blur:0, а затем добавьте внутреннюю тень (Inner shadow) с параметрами #000000 40% alpha X:0, Y:1, Blur:0.
Эта тень должна быть в режиме “overlay” параметра blend mode, в итоге получится изображение 60.
В вашем “color base” нарисуйте круг 8*8 пикселей, поместите его на левую сторону переключателя, отцентрируйте по ширине цветной части регулятора. Назовите этот объект “OFF”(61). Удалите границу, залейте цветом #ffffff и также установите параметр blending mode на overlay (62).
Чтобы этот кружок действительно выглядел как “OFF”, нужно прорезать его середину. Создайте еще один кружок поверх слоя “OFF” На этот раз нужен размер 6*6. Удалите границу и отцентрируйте в круге “OFF” (63).
выберите оба слоя “oval 11” и “OFF”. Объедините эти слои, используя функцию “substract” (вычесть)на панели инструментов (64).У вас получится изображение 65.
Чтобы создать кружочек “ON”, просто скопируйте ваш слой “OFF”. Переименуйте его и отодвиньте на другую сторону переключателя, на ту же дистанцию (66).
Нажмите на треугольник слева на слое, чтобы развернуть векторную группу, выделите “oval 11" (67) и удалите его (68).
Поздравляю, вы закончили!
Экспорт
Последнее, что я хотел показать в этом уроке, - способ экспортирования артборда в несколько DPI сразу. Я считаю эту опцию невероятно полезной.
Допустим, вы хотите экспортировать то, что мы сделали как в 1x (текущий размер), так и в @2x.
Выделите ваш артборд “colorful switch”.
Внизу правой колонки вы увидите кнопку “Make Exportable” (сделать экспортируемым). Нажмите на нее, у вас получится, как на изображении 69.
1x означает исходный размер, тот, в котором вы изначально выполнили дизайн. Кликните на + справа от “Export”, чтобы добавить новый коэффициент для экспорта. Выберите значение @2x. Вы также можете изменить суффикс и формат. (70)
При нажатии на “Export colorful switch” (экспортировать разноцветный выключатель), программа сгенерирует вариант 1x, затем автоматически увеличит артборд до @2x и сгенерирует увеличенную копию в выбранный формат!
И напоследок
Правка (11/25/14) Если вам хочется узнать больше о Sketch, настоятельно рекомендую вам посетить этот мастер-класс, созданный Жан-Марком Дэнисом (@jm_denis) на Sketchdesign.io
Надеюсь, этот урок был вам полезен.
Вы можете скачать готовый исходник напрямую, если столкнулись с трудностями на каких-то шагах.
Правка (11/08/14)@jocelyncaronfr создал крутое видео-таймлапс этого урока, действительно здорово сделано.
Я всегда рад вашим комментариям и отзывам, так что если у вас есть мысли, или я что-то забыл, пишите:
Ждем ваших выполненных работ в комментариях! Удачи
Перевод статьи Sebastien Gabriel
Топ коментарі (0)