Автоматическая генерация тени в Flat иконке (и пара слов о дизайне иконок)

Плоская иконка разговор

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

1. Реалистичные стиль или скеоморф (стилистика реализма, перенесение в цифровой формат реальных вещей, например фотореалистичные иконки в старых девайсах фирмы Apple).

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

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

2. Минимализм, куда я включаю стили "метро"(Metro), "флет"(Flat) и нынешний тренд гугла - "материальный дизайн" (material design).  Каждое направление имеет свои особенности использования и уникальные черты характера, но основное у них одно - избавление от лишних деталей и фокусировка на информации.

Чем этот стиль хорош? По моему мнению, он банально, более подходит при нынешних потоках информации. Если раньше мы могли наслаждаться деталями каждой иконки\кнопочки, то сейчас мы отдаем дань юзабилити (удобству использования) доступа к информации.

3. Арт иконки - пусть тут будут иконки, которые выполнены по совершенно непонятным принципам и стилям. И сделаны красиво, а не страшный "Франкенштейн" мира дизайна.

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

 

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

Работая над одним заказом, мне нужно было делать иконки с объектами заказчика. По техническому заданию направление стиля иконок было "Flat" с тенью, которая реалистично отбрасывается на внутренний фон иконки, постепенно затухая.

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

Файл был сделан на основе "смарт объектов", его можно скачать в конце статьи.

 

Теперь о внутреннем содержании и описании как редактировать иконку.

Открываем файл и видим структуру слоев:

Все подписано нормально, проблем не должно возникнуть.

В слое "фон" - находится фоновая подложка нашего документа, для удобства тестирования иконки на черном\белом фоне.

В слое "иконка" находится внутренний фон иконки, открываем смарт объект двойным кликом и видим:

Тут фон с градиентным блоком, разделяющим иконку на половины.

Возвращаемся назад к основному файлу:

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

И теперь самое главное - слой "объект для правки". Это смарт слой для нашего внутреннего изображения которое будет отбрасывать тень, открываем его:

Тут видим наш объект, с эффектом внутренней тени, но можете делать с ним что хотите, исходя из вашей задачи.

Сюда вставляем нужный объект и сохраняем изменения - ждем, у нас будет обновляться основной файл. И перейдя к основному файлу мы увидим изменения.

Все очень просто, автоматика работает за вас! Если конечно она вас устраивает исходя из ваших требований.

Вот видеозапись редактирования:

В видео я сделал иконку с сердцем, всем добра и качественных иконок (разработку которых можете заказать у меня :)  :

Плоская иконка сердце

Скачать файл генерациитени в Flat иконке

 

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

С уважением Чубаров Н.

 

 

 <= поделись статьей с друзьями ;3

К списку блогов

© 2013–2018 Чубаров Н.С.

Плоская иконка сердце
Плоская иконка сердце
Плоская иконка сердце