В помощь фотожоперу – рисуем иконки
На выходных я решил внести в блог немного креатива. Одним баннером в шапку блога решено было не ограничиваться, и продолжить беснования дальше. Сегодня у нас – туториал по отрисовке иконки электрической почты для сайта.
Вот такой:
Для начала – создадим новый файл, размером 128*128 пикселей. С помощью направляющих (направляющую можно “стащить” с боковой, или верхней линейки документа с помощью зажатой левой кнопки мыши) расчертим квадрат:
Затем, нарисуем по направляющим путь (Path1):
С помощью Edit->Transform->Perspective построим нужную нам перспективу отображения конверта:
Нарисуем новый путь, который будет отвечать за внутреннюю часть конверта (Path2):
Преобразуем пути в выделения и зальем нужными цветами:
Скопируем слой, и, полностью залив его черным, немного сдвинем относительно основного, чтобы придать заготовке конверта объем:
Преобразуем Path2 в выделение (как это сделать, рассказано тут) и наложим в режиме Multiple небольшой градиент. А также, нарисуем линию сгиба:
Нарисуем тень от самого конверта внутри (на ней установлен крестик курсора):
Как это можно сделать, я предлагаю вам догадаться самим 🙂
Сейчас мы будем придавать объем самому конверту. Нарисуем новый путь:
Конвертируем его в выделение и зальем градиентом:
Проделаем ту же операцию для нижней части конверта:
Дорисуем линии склейки:
Теперь приступим к рисованию печати. Для этого нарисуем круглое выделение, и зальем его цветом:
Нанесем на печать блики и тени:
Добавим еще один градиент в режиме Multiply на верхний уголок конверта:
Поставим на печать значок электрической почты. И немного подкорректируем его перспективу:
Зальем фон изображения цветом бэкграунда сайта. Затем, склеим все слои (Ctrl+Shift+E). Скопируем изображение, и, с помощью команды Edit->Transform->Flip Vertical зеркально отобразим по вертикали. Подгоним края двух конвертов:
На слой с перевернутым конвертом наожим маску (иконка наложения маски на картинке подчеркнута красным), и зальем маску градиентом:
Все, иконка готова.
Надеюсь, всем понравилось.
Хостинг изображений – imageshack.us
В тему: