2 авг. 2008 г.

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

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

Вот такой:


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


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


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


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


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


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


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


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

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

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


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


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


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


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


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


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


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


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


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


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

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

Комментариев нет:

Отправить комментарий