Иконки для ios: Иконки «iOS 16» — скачивайте бесплатно в PNG и SVG — Независимое театральное объединение "Зрительские симпатии"

Содержание

‎App Store: Wallpapers & Background Themes

Снимки экрана (iPhone)

Описание

Стильные темы для iPhone: виджеты, иконки, статичные и живые обои!

ПОЛНОЕ ПРЕОБРАЖЕНИЕ вашего iPhone! Простая установка и регулярные обновления!

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

■ Темы 3 в 1

Хотите совместить удобство и эстетику? В Themify есть все для этого. Идеальное сочетание иконок, виджетов и обоев придаст вашему iPhone стильный и аккуратный вид.
Выберите понравившуюся тему и установите ее на экран всего в несколько нажатий.

■ Редактор тем

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

■ Огромная коллекция виджетов

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

Вы также можете создать собственный виджет – добавляйте свои фото, меняйте фон, шрифт и цвет.

■ 10,000+ иконок

Для тех, кто устал от стандартных иконок для приложений, у нас есть множество кастомных паков с иконкам. А знаете, что самое лучшее? Все иконки в паке можно быстро и легко установить за один раз, следуя простым инструкциям

■ Статичные и живые обои

В Themify есть обои на любой вкус: аниме, животные, города, природа и еще много других категорий. Оживите экран с помощью крутых живых обоев. А если вам по душе классика, то вы всегда найдете что-то интересное в нашей коллекцией статичных обоев.

ПОДПИСКА С НЕОГРАНИЧЕННЫМ ДОСТУПОМ
• Вы можете приобрести подписку для неограниченного доступа ко всем функциям приложения Themify.

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

Все личные данные защищены в соответствии с Правилами использования и Политикой конфиденциальности:
https://aiby.mobi/widget/terms/
https://aiby. mobi/widget/privacy/

17 сент. 2022 г.

Версия 1.67

Отличные новости! У нас еще одно классное обновление!

В этой версии:
– Исправлены незначительные ошибки и улучшен UI

Если вам нравится Themify, пожалуйста, оцените приложение и оставьте отзыв.

Оценки и отзывы

Оценок: 4 тыс.

☺️

Крутое приложение ! Далеко НЕ всё платно!
Только иногда виджеты становятся серыми и я не знаю, что с этим делать…
Приходится переустанавливать, тогда все ок.
Из-за этого минус одна звезда 🌟
Ответьте что с этим делать, пожалуйста

👎🏾

Ну и где ваш бесплатный контент?
Пробный период — платный, вы серьезно?!

Здравствуйте! В нашем приложении Themify есть бесплатный и платный контент. Вы можете оформить бесплатную пробную подписку, чтобы опробовать наш премиум-контент, или использовать базовую версию приложения с бесплатным контентом.

Темы

Ну не знаю насчёт огонь не огонь попытался применить хоть одну на пробу требует подписки !!!

Здравствуйте! В нашем приложении Themify есть бесплатный и платный контент. Вы можете оформить бесплатную пробную подписку, чтобы опробовать наш премиум-контент, или использовать базовую версию приложения с бесплатным контентом.

Подписки

Эксклюзивные темы для iPhone

Получите все премиум иконки, виджеты и обои!

Пробная подписка

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

Подробные сведения доступны в политике конфиденциальности разработчика.

Данные, используемые для отслеживания информации

Следующие данные могут использоваться для отслеживания информации о пользователе в приложениях и на сайтах, принадлежащих другим компаниям:

Покупки
Идентификаторы

Данные об использовании
Другие данные

Связанные с пользователем данные

Может вестись сбор следующих данных, которые связаны с личностью пользователя:

Покупки

Пользовательский контент
Идентификаторы
Данные об использовании
Диагностика

Другие данные

Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, задействованных функций или других факторов. Подробнее

Информация

Провайдер: AIBY Incorporated
Размер: 213,7 МБ
Категория: Графика и дизайн
Возраст: 4+
Copyright: © 2022 AIBY Inc
Цена: Бесплатно

Сайт разработчика
Поддержка приложения
Политика конфиденциальности

Другие приложения этого разработчика

это сквиркл? Разбор / Хабр

Давайте сыграем в игру. У нас есть два ряда знакомых всем пользователям iOS-иконок. На первый взгляд иконки сверху и снизу одинаковые. Но это не так. В одном ряду вы видите настоящие иконки, а в другом подделку.

Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?

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

Дело в том, что поддельные иконки по форме — это квадраты с закруглёнными углами, ну и прямоугольник если говорить о серой подложке.

Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!

Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.

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

Она называется суперэллипсом или кривой Ламе, в честь математика Габриеля Ламе, который в 19 веке внёс большой вклад в теорию упругости, разработал общую теорию криволинейных координат, и придумал суперэллипсы. Что же это такое?

Это геометрическая кривая, которая строится при помощи уравнения вот такого вида:

Это уравнение задаёт замкнутую кривую, ограниченную прямоугольником. При этом меняя значение n мы можем регулировать степень выпуклости каждого угла (можно поиграться тут). При n меньше единицы, мы получаем вогнутые стороны, а форма напоминает звезду.

Увеличивая значение n, форма становится всё более выпуклой. При n=2 получается ровный круг. А при n равной 4 или 5 мы получаем привычную всем форму иконки.

У такой формы даже есть своё название — сквиркл. И, нет, сквиркл — это не ваш любимый раздел на PornHub. Это производное от слов square и circle. Т.е. по русски сквиркл — это квадрокруг или квадратный круг.

Кстати, формула описывающая иконку iOS выглядит вот так:

Т.е. иконка в iOS — это и не круг и не квадрат, а математически — это что-то среднее между ними.

Кольцо и суперяйцо

Историческая справка. Популяризировал суперэллипсы и сквирклы датский ученый Пит Хейн. В 60-х годах он спроектировал транспортное кольцо в Стокгольме в виде суперэллипса со значениями n = 2.5, a/b = 6/5.

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

Кстати, трехмерные суперэллипсы — это суперэллипсоиды. А всякие неправильные суперэллипсоиды — это суперквадрики.

Непрерывность кривизны

Но вернёмся к иконкам! Чем всё-таки квадрокруг отличается от скругленного квадрата? И чем он не угодил дизайнерами Apple? Давайте посмотрим!

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

Лучше всего это можно визуализировать при помощи вот таких гребней кривизны.

Казалось бы, разница — пара пикселей. Но плавные переходы, позволяют добиться так называемой непрерывности кривизны. И это даёт потрясающий эффект — форма объекта из искусственной, как бы собранной из разных форм становится естественной и завершенной.

Именно поэтому Apple очень активно использует суперэллипсы не только в интерфейсе, но и в дизайне всех своих продуктов.

Mac Mini, Apple TV, iPhone, iPad, MacBook и конечно HomePod — своего рода всё это суперэллипсы. Даже в их новом кампусе нет ни одной прямой стены.

Плавное перетекание форм и отсутствие резких переходов делает продукты Apple не только привлекательными внешне. На этот счёт есть отличная статья Николая Геллара, которую я процитирую:

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

Например если сравнить по дизайну HomePod и Яндекс.Станцию, становится понятно в почему станция выглядит менее привлекательно, её как будто только выпустили с завода. А HomePod будто нашел в своём саду японский мастер суйсэки — искусства любования камнями.

Хотя сама Яндекс.Станция — девайс отличный. А HomePod красивый, но туповатый (русского не знает).

Примеры

Но, конечно, Apple тоже не сразу к этому пришли. Например, иконки и другие элементы интерфейса стали суперэллипсами только в начиная с iOS 7.

Такая же история с Apple Watch. В Series 4 увеличили не только дисплей, но и обновили форму. Да-да, Apple Watch с четвёртой версии это тоже — суперэллипс (как сам экран).

Другие компании

Естественно, не только Apple играется с суперэллипсами. Те же иконки в One UI на смартфонах Samsung, гораздо более явные квадрокруги, чем у Apple. Но, на мой взгляд, у Samsung выбранная форма не работает.

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

Но это не самое главное. Основная проблема в интерфейсе Samsung. Я говорю про отсутствие единства. Плавные суперэллипсы тут соседствуют с грубоватыми скруглёнными. Как внутри интерфейса так и в дизайне самих девайсов.

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

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

Подробный урок по созданию 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” (форма иконки) в артборде “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 создал крутое видео-таймлапс этого урока, действительно здорово сделано.

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

Twitter, Google+ илиFacebook.

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

Перевод статьи Sebastien Gabriel

Секрет формы иконок iOS. Это сквиркл!?! РАЗБОР

Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?

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

Это геометрическая кривая, которая строится при помощи уравнения вот такого вида:

Кстати, формула описывающая иконку iOS выглядит вот так:

Т.е. иконка в iOS — это и не круг и не квадрат, а математически — это что-то среднее между ними.