В помощь фотожоперу – рисуем иконки

веб-дизайнер, August 2, 2008

На выходных я решил внести в блог немного креатива. Одним баннером в шапку блога решено было не ограничиваться, и продолжить беснования дальше. Сегодня у нас – туториал по отрисовке иконки электрической почты для сайта.

Вот такой:

Для начала – создадим новый файл, размером 128*128 пикселей. С помощью направляющих (направляющую можно “стащить” с боковой, или верхней линейки документа с помощью зажатой левой кнопки мыши) расчертим квадрат:

Затем, нарисуем по направляющим путь (Path1):

С помощью Edit->Transform->Perspective построим нужную нам перспективу отображения конверта:

Нарисуем новый путь, который будет отвечать за внутреннюю часть конверта (Path2):

Преобразуем пути в выделения и зальем нужными цветами:

Скопируем слой, и, полностью залив его черным, немного сдвинем относительно основного, чтобы придать заготовке конверта объем:

Преобразуем Path2 в выделение (как это сделать, рассказано тут) и наложим в режиме Multiple небольшой градиент. А также, нарисуем линию сгиба:

Нарисуем тень от самого конверта внутри (на ней установлен крестик курсора):

Как это можно сделать, я предлагаю вам догадаться самим :-)

Сейчас мы будем придавать объем самому конверту. Нарисуем новый путь:

Конвертируем его в выделение и зальем градиентом:

Проделаем ту же операцию для нижней части конверта:

Дорисуем линии склейки:

Теперь приступим к рисованию печати. Для этого нарисуем круглое выделение, и зальем его цветом:

Нанесем на печать блики и тени:

Добавим еще один градиент в режиме Multiply на верхний уголок конверта:

Поставим на печать значок электрической почты. И немного подкорректируем его перспективу:

Зальем фон изображения цветом бэкграунда сайта. Затем, склеим все слои (Ctrl+Shift+E). Скопируем изображение, и, с помощью команды Edit->Transform->Flip Vertical зеркально отобразим по вертикали. Подгоним края двух конвертов:

На слой с перевернутым конвертом наожим маску (иконка наложения маски на картинке подчеркнута красным), и зальем маску градиентом:

Все, иконка готова.
Надеюсь, всем понравилось.

Хостинг изображений – imageshack.us

В тему:

0комментариев
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: