Как рисовать перекрашиваемые иконки
Что такое перекрашиваемая иконка? Это такая картинка, которой легко поменять цвет, то есть её перекрасить. Есть несколько способов этого добиться. Я расскажу о простой технологии, которую мы использовали когда делали проект Иконза (по такой же технологии сделаны машинки для Автокадабры). По сути, это веб-приложение, которое позволяет пользователю менять цвет иконок, а потом генерирует необходимые графические файлы.Например, мы хотим нарисовать перекрашиваемую иконку фолдера. Берем любимый векторный редактор и рисуем.
Как сделать так, чтобы эту картинку можно было перекрашивать? Секрет в том, что картинка состоит из двух растровых файлов — полупрозрачные блики/тени сверху и цветная подложка снизу. Получается, что цветная основа «просвечивает» через полупрозрачную маску. Вот как должна выглядеть маска:
Но как нарисовать такую маску? Очень просто. Нужно взять цветную основу, а потом нарисовать сверху блики и тени.
Засветляющая маска (показана на черном фоне для наглядности), затемняющая маска, цветная подложка
В засветляющей маске используется только белый цвет с разной прозрачностью, а в затемняющей маске — только черный. Цвет подложки значения не имеет — выбирайте любой, он все-равно будет меняться. Если вы рисуете несколько иконок, то лучше выбирать единый «тестовый» цвет.
Зачем нужны и засветляющий и затемняющий слои одновременно? Мы не знаем какой цвет выберет пользователь, а иконка должна всегда выглядеть хорошо. Вот, например, нарисовали мы только засветляющий слой, а пользователь взял и выбрал белый цвет для подложки. Катастрофа! Получится плоская абсолютно белая иконка. Такая же история, но наоборот, с черным цветом. А если есть темный и светлый слои, то результат неплохой:
Иконки с абсолютно белой и черной подложками
Лучше, конечно, выбирать почти белый (светло-серый) и почти черный (темно-серый) — тогда иконка будет более объемной и симпатичной. Но и при крайних значениях получается неплохо.
Так как затемняющий и засветляющий слои находятся в одном файле, то есть опасность, что ваша иконка будет выглядеть грязной — белый накладывается на черный и получается серый, который не пропускает «цветной» цвет подложки. Это нужно учитывать при рисовании и не допускать множественного перекрытия слоев. Вот порядок слоев иконки для Иконзы:
- Тень от половинки папки. В светлых слоях через маски сделана «дырка» по форме этой тени. (Цвет черный, непрозрачность 10%)
- Нижний затемняющий объемный слой. Он должен быть обязательно выше обводки и перекрывать её. Тогда обводка становится темнее к низу. (Черный, 40%)
- Блик на половине папки. (Белый, 40%)
- Засветляющий объемный слой. Размытие краев (feather 3 pt). (Белый, 65%)
- Обводка иконки. Очень важная штука которая гарантирует, что у любого цвета будет обводка. (Серый, 50%)
- Светлая обводка по периметру. Делает иконку более четкой и живой. (Белый, 25%)
- Верхний засветляющий объемный слой. В паре с затемняющим обозначают «освещение» иконки сверху. (Белый, 40%)
- Тень от иконки (Черный, 25%)
- Цветная подложка. (Любой цвет, 100%)
Если вам мало этой занудной схемы, то можно скачать исходник в формате AI.
Далее нужно убрать из иконки подложку (поместить её рядом) и растрировать векторный файл в фотошопе. Мы получили те самые волшебные картинки, которые секретный механизм Иконзы склеивает в единый файл простым сложением.
комментарии (45)
В чем именно состоит сложность нарисовать НОРМАЛЬНУЮ иконку? Она получается нечеткой? Трудно подобрать метафору? Какие-то другие сложности?
Вот тут есть 18 статей на тему «как нарисовать» иконку. Я не понимаю — что непонятного в моем комменте?
Я как лучше хотел, есличо.
Мечта: заработать 30 млн $ и после этого начать рисовать пиксельные иконки, просто так, для себя… :)
30 000 000$ * 4% (гарантированные золотом Швейцарских банков) = 1.200.000$ год = 100.000$ — месяц… Вполне хватит для покрытия потребностей семьи, ну и как следствие, возможность учиться рисовать иконки… :)
швейцарские банки, по-моему, крупнее ставки дают, если суммы тоже крупные =)
Пример: нужна красная иконка на черный фон.
Кстати, даже если иконка нужна такого же цвета, как и фон. То я рекомендую выбирать «почти такой же цвет», но более яркий. Тогда получится выразительнее.
Получите все цвета радуги. Правда файлов там два, а не один — для того чтобы решить проблему с фоном.
В иконзе — генерится иконка из бликом и цвета подложки иконки, вы предлагаете создать картинку с окном в котором виден другой цвет.
Оба варианта верны и не один не может быть лучше, они разные :)
По сути с небольшими доработками все это можно запихать в один экшн фотошопа который делал бы это автоматически.
Берем иконку (эта первая попавшаяся из того что было под рукой):
Чтобы получить базовый цвет — переводим из RGB в Lab. Канал Light заливаем 50% серым.
Как видно, иконка состоит из 2х цветов — основной голубой вверху и фиолетовый внизу. Так как голубого больше — берем пипеткой этот цвет и его используем как базовый.
Делаем наложение базового цвета на нашу иконку с режимами darken и lighten (слева и справа соответственно).
Переводим в ЧБ — desaturate
Автоуровни:
Инвертируем результат darken
По полученым яркостям делам маски прозрачности (darken для черного и для lighten белого)
белую маску не видно на светлом фоне.
Подкладываем наш базовый цвет и видим что все получилось.
Теперь совмещаем полученые результаты. Сначала кладем черный слой, потом белый.
Вот мы и получили клон нашей иконки.
И теперь мы можем подкладывать абсолютно любой цвет.
Спасибо за внимание.
если второе — то что то не клеится…
наверное, я слишком русскоязычен :)
меня коробит, когда вместо нормального и недлинного русского слова «папка» используют слово «фолдер». благо, встречаюсь с этим впервые.
www.adobe.com/products/kuler/
www.simplebits.com/notebook/2003/07/24/magic_icons_for_lazy_people_like_me.html