Блог: статьи

Как рисовать перекрашиваемые иконки

Денис КортуновАвтор: Денис Кортунов
18 июня 2009

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

Например, мы хотим нарисовать перекрашиваемую папочку. Берем любимый векторный редактор и рисуем.

Перекрашиваемая папка

Как сделать так, чтобы эту картинку можно было перекрашивать? Секрет в том, что картинка состоит из двух растровых файлов — полупрозрачные блики/тени сверху и цветная подложка снизу. Получается, что цветная основа «просвечивает» через полупрозрачную маску. Вот как должна выглядеть маска:

Маска

Но как нарисовать такую маску? Очень просто. Нужно взять цветную основу, а потом нарисовать сверху блики и тени.

Компоненты перекрашиваемой иконки Засветляющая маска (показана на черном фоне для наглядности), затемняющая маска, цветная подложка

В засветляющей маске используется только белый цвет с разной прозрачностью, а в затемняющей маске — только черный. Цвет подложки значения не имеет — выбирайте любой, он все-равно будет меняться. Если вы рисуете несколько иконок, то лучше выбирать единый «тестовый» цвет.

Зачем нужны и засветляющий и затемняющий слои одновременно? Мы не знаем какой цвет выберет пользователь, а иконка должна всегда выглядеть хорошо. Вот, например, нарисовали мы только засветляющий слой, а пользователь взял и выбрал белый цвет для подложки. Катастрофа! Получится плоская абсолютно белая иконка. Такая же история, но наоборот, с черным цветом. А если есть темный и светлый слои, то результат неплохой:

Иконки с подложками Иконки с абсолютно белой и черной подложками

Лучше, конечно, выбирать почти белый (светло-серый) и почти черный (темно-серый) — тогда иконка будет более объемной и симпатичной. Но и при крайних значениях получается неплохо.

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

Порядок слоев иконки для Иконзы
  1. Тень от половинки папки. В светлых слоях через маски сделана «дырка» по форме этой тени. (Цвет черный, непрозрачность 10%)
  2. Нижний затемняющий объемный слой. Он должен быть обязательно выше обводки и перекрывать её. Тогда обводка становится темнее к низу. (Черный, 40%)
  3. Блик на половине папки. (Белый, 40%)
  4. Засветляющий объемный слой. Размытие краев (feather 3 pt). (Белый, 65%)
  5. Обводка иконки. Очень важная штука которая гарантирует, что у любого цвета будет обводка. (Серый, 50%)
  6. Светлая обводка по периметру. Делает иконку более четкой и живой. (Белый, 25%)
  7. Верхний засветляющий объемный слой. В паре с затемняющим обозначают «освещение» иконки сверху. (Белый, 40%)
  8. Тень от иконки (Черный, 25%)
  9. Цветная подложка. (Любой цвет, 100%)

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

Далее нужно убрать из иконки подложку (поместить её рядом) и растрировать векторный файл в фотошопе. Мы получили те самые волшебные картинки, которые секретный механизм Иконзы склеивает в единый файл простым сложением.

Связанные записи

Условия использования

Данные материалы можно использовать в некоммерческих целях, с обязательным указанием автора.

Комментарии

Спасибо за подробный урок, пригодится для многих проектов!

Ответить Acorn, 5 августа 2009

А я все думал как Иконза работает… Спасибо)

Ответить p1xel, 20 марта 2010

Отличный урок.
В ходе ковыряния исходника появился один вопрос.
Обводка иконки как я понимаю создается при помощи дублирования обьекта уменьшения его на 1 пиксель и потом через pathfinder внутрення часть исходного обькта обрезается. Почему то при этих действиях в верхней части вылезает полупиксель :(
В исходнике который Вы предоставили все нормально, в чем у меня проблема даже не знаю.

Ответить Max, 23 мая 2010

Все разобрался :) еще раз внимательней просмотрел Ваш исходник и понял в чем я ошибался :) еще раз спасибо за отличный урок

Ответить Max, 23 мая 2010

Напишите комментарий

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

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.

Закрыть