Как нарисовать иконку apple

Как сделать форму иконок для iOS

Те, кто создавал программы для IOS, рано или поздно сталкивались с тем, что нужно рисовать иконки для IPhone. Кто-то копирует дизайн интерфейсов IPhone. И тем, и тем первое, что нужно делать в этом деле — это нарисовать форму для иконки.

С чего началось

В интернете я случайно наткнулся на материал ребят из Droider. Их материал. Так как я знаю про IPhone с 2006 года (год появления первого IPhone), то мне было интересно как происходят иконки современных iOS. Так как я увлекаюсь и занимаюсь программированием, то создание приложений для IPhone возможно был бы вопросом времени. Касательно иконок iOS, они не просто рассказывали как происходят суперэллипсы, они показали формулу рисования иконок iOS.

Инструмент для рисования суперэллипсов

После этого я искал инструменты, которые рисуют суперэллипсы по формуле, введенной пользователем. Я вбил этот запрос в Google. По первой попавшейся ссылке я нашел нужный инструмент. Плюс этого инструмента заключается в том, что нарисованный по формуле суперэллипс можно экспортировать в векторный файл SVG, что облегчает дизайнерам иконок iOS-приложений задачу в рисовании формы. Значения A и B — 60. Степень N равна 5.

Получился суперэллипс аля иконки iOS. Инструмент

Что дальше?

Скаченный SVG-файл можно открыть в любом редакторе векторной графики. Я проверял на CorelDRAW и Inkscape. В вышеперечисленных программах возможно поработать с суперэллипсом для иконки. Но в CorelDRAW список слоёв полностью видит все слои, а в списке слоёв Inkscape слоёв как будто нет слоёв.

Если вы собираетесь писать приложение для iOS, то этот способ сделать форму иконок для IPhone будет простым и соответственно экономит вам время.

Источник

Как создать иконку приложения для iOS?

Иконка приложения — особенности и правила. Итак, у вас возникла необходимость в приложении — вы заходите в App Store и в строке поиска вводите ваш поисковый запрос, формируя тем самым поисковую выдачу релевантных приложений. В случае, если вы не ищите конкретное приложение (когда вы точно знаете его название или бренд), ваш выбор упадет на приложение с наиболее привлекательными визуальными составляющими.

Иконка и ее влияние на скачивание приложения iOS

Иконка — причина, почему происходит открытие страницы приложения в сторе. Это чрезвычайно важный визуальный элемент в App Store. Давайте еще вспомним, что визуальные образы быстрее обрабатываются нашим мозгом, чем текстовая информация. Именно поэтому, текстовая оптимизация — для App Store, визуальная оптимизация — для пользователя.

Иконка — это логотип?

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

Как часто бывает, особенно если мы говорим об играх, логотипом будет изображение бренда компании-разработчика, а иконка будет содержать игровые элементы, часть процесса или игрового персонажа. Например, всем известная компания EA Games и ее логотип. И ряд ее игр-приложений представленный в App Store:

Как видно, лишь малая часть приложений содержит логотип компании на иконке игры.

Конечно, если вы — прилично зарекомендовавший себя известный бренд, не стесняйтесь добавлять свой логотип к значку приложения каким-либо образом, но не сосредотачивайтесь только на нем.

Как создать иконку: технические требования к иконкам приложений в App Store

Технические требования полностью предоставлены в информации для разработчиков от App Store.

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

Как сделать иконку приложения максимально привлекательной для пользователя?

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

• Придерживайтесь цветовых характеристик или цветовой схемы вашего бренда

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

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

Рекомендуем использовать границы в значке. Границы выделяют иконку и помогают сделать ее более заметной для пользователя при поиске и просмотре магазинов.

• Темная или светлая тема смартфона

Адаптируйте свою иконку, для корректного отображения, как на светлой, так и на темной теме телефона.

• Не используйте текст— оставьте слова для текстовой оптимизации

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

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

Если мы говорим о тематических приложениях, есть типичные элементы и цветовые схемы, характерные именно для этого сегмента. Например, приложение — сонник или медитация обычно имеет цвета визуального оформления от синего к фиолетовому. Приложения пресетов выполнены в темных тонах и иконки имеют соответствующий вид:

В таком случае рекомендуем сделать иконку для IOS приложений в такой же цветовой палитре.

• А/В тестирование — обязательно к использованию!

Иконка нравится вам — конечно, ведь на ее разработку было потрачено немало усилий. Иконка нравится команде — ведь они точно знают, о чем приложение и какие его основные преимущества. Чтобы получить однозначный ответ — какое именно визуальное оформление понравится вашим пользователям, опираясь на показатели конверсии, используйте А/В тесты.

• Работа с сезонностью и праздниками

Отличной практикой является обновление иконки в связи с праздничными событиями или сменой сезонов. Добавляйте ассоциативные элементы — в новогодние праздники можно добавить сугробы, снежинки и прочие атрибуты. Под Хэллоуин легко сделать иконку, добавив тыквы, паутины или устрашающие детали. Это покажет пользователям, что вы продолжаете работу с приложением и может повысить показатели конверсии.

• Две основные стратегии — очень похоже на конкурентов, или же совсем не похоже

Имейте в виду, очень похожая иконка приложения на основных конкурентов, позволит вам соблюсти правила ниши и основные тенденции, но не выделит вас на их фоне. А совсем отличающаяся иконка может вызвать непонимание у пользователей.

Приложение-напоминалка про прием лекарств — практически все графические элементы на иконках содержат изображение капсул-таблеток. Но цветовые схемы и дизайн могут заметно отличаться друг от друга.

• Иконка отлично выглядит при любом масштабе

Думайте масштабно, но учтите размеры иконки. Иконка должна быть понятна и читаема при любом масштабе отображения.

• Учитывайте особенности платформыприложений

Перед тем как сделать иконку, тщательно изучайте технические требования платформы под IOS. Не полагайтесь на универсальность. Изучайте иконки конкурентов в App Store и Play Market. Часто иконки в магазинах разные. Учтите это создайте различные иконки под каждый магазин приложений.

• Не забывайте про обновление значка

Пробуйте новое, отслеживайте изменения в магазинах и их основные направления. Не оставляйте работу по обновлению и улучшению иконки приложения iOS.

Каждый из магазинов приложений имеет довольно обширную техническую документацию, не пренебрегайте ею. Например, App Store не рекомендует использовать прозрачность в иконке, и мы также следуем этим рекомендациям.

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

Источник

Подробный урок по созданию IOS иконки в Sketch 3

Цветной выключатель

Спустя чуть более, чем месяц использования Sketch , я уже чувствую себя достаточно уверенно, чтобы поделиться частью своей работы в виде урока. Я покажу, как нарисовать бесплатную цветную иконку-выключатель, которую создал сам, и в которой используется множество интересных возможностей Sketch. К тому же, эта работа не слишком долгая и рутинная.

Я хочу сделать самое простое, но самое подробное описание. Этот урок разработан для новичков, так что, возможно, многие вещи, описанные здесь, будут вам уже знакомы. Вот результат IOS иконки в Sketch 3, который мы получим:

Примечание: Я не всезнайка, и уж точно не являюсь уникальным владельцем единственно правильного способа создания тех или иных вещей, поэтому если у вас есть комментарии или дополнения, не стесняйтесь оставлять их под этим постом. Мне всегда интересно учиться, и такие обсуждения будут полезны каждому читателю.

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

Установка Sketch

Это непростой шаг☺. Если у вас еще нет лицензии, вы можете скачать бесплатную триал-версию или купить лицензионную версию на App Store . Установите и запустите приложение.

Когда увидите окно приглашения, не открывайте никакой шаблон, а просто нажмите “ok”, чтобы создать новый документ. Вы увидите следующее:

Создание артборда

Артборды – это “рабочие области”, они могут быть и маленькие, как иконки, и такие большие, как вам нравится. Если вы раньше пользовались Illustrator, принцип артбордов такой же.

Нажмите “A” на клавиатуре или нажмите кнопку “Insert” вверху слева и выберите artboard(1). Как вы видите, в правой колонке доступно множество удобных размеров. Мы не будем их использовать. Просто нарисуйте артборд любого размера на холсте. Затем в панели справа в разделе “size”, введите 400×300 (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” (форма иконки) в артборде “[email protected]” (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 создал крутое видео-таймлапс этого урока, действительно здорово сделано.

Я всегда рад вашим комментариям и отзывам, так что если у вас есть мысли, или я что-то забыл, пишите:

Ждем ваших выполненных работ в комментариях! Удачи

Источник