Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
Design-нинг /

Создание перекрашиваемых иконок.

  • Понедельник, 15 ноября 2011, 00:50 |
  • Автор: fiamma |
  • Просмотров: 2130 |
  • Комментарии: 1 |
  • В закладки:
Дорогие друзья. Сегодня я расскажу о создании красивых и привлекательных перекрашиваемых иконок.

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


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

Создание перекрашиваемых иконок.


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

Создание перекрашиваемых иконок.


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

Создание перекрашиваемых иконок.


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

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

Создание перекрашиваемых иконок.


Очень важно наносить слои в определенном порядке.

Создание перекрашиваемых иконок.


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

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

Интересная статья также о самых дорогих мировых брендах.
  • Пишет: Juliana (Гости) |
  • Сообщений: 0 |
  • 22 сентября, 10:09
  • #1
Smack-dab what I was loiokng for-ty!
Добавить комментарий