использует этот фон в своем портфолио, кликните для просмотра.


Иконка загрузки каталога

Обучение Автор: sementiy
Аватар

26 мая 2011





7777
5

Сегодня мы нарисуем иконку загрузки документа с сайта. Например, пользователю предлагается скачать документ в формате pdf. Понятно, что на иконке должно быть и «скачать», и «документ», и «пдф». Приступим!

 Для начала определимся с размером изображения. Я рисовал иконку размером 150 на 150 пикселов, для этого создал заведомо больший документ (250 на 250 пикселов), чтобы было пространство поиграться с тенями и выносными элементами. Фон взял серый; для того чтобы потом использовать эту иконку на белом фоне, нужно было бы просто ее слегка высветлить и тени сделать легче.

 

Начнем работу. Для начала создадим прямоугольник для основного блока каталога:

 

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

 

Со вторым слоем (верхним, обложкой) производим такие вот манипуляции. Берем инструмент добавления контрольной точки и пользуем его:

 

Двигать точки можно с помощью Direct Selection Tool, такая белая стрелочка.И в результате мы получим характерное изображение открытой странички.

Потом выбираем в гугле красивое и приятное глазу изображение иконки Акробат Ридера.

Ставим его в наш документ, и делаем обтравочной маской к слою обложки:

Его полагалось бы трансформировать по форме страницы, но сам элемент такой сложной формы, что, боюсь, деформация не поможет. Оставляем как есть (напоминаю, я ставил изначально другую картинку).

Есть один маленький секрет насчет сочетания красного и зеленого цветов (это дополнительные цвета, расположенные один против другого на цветовом круге). Вы знаете прекрасно что использовать два этих цвета нужно предельно осторожно, и если их поставить «в лоб», получится не очень:

Более утешительно будет, если цвета затемнить и ввести градиент. Этот строится на том, чтобы скрыть составляющую яркости цветов:

Еще лучше будет, если мы явно дополнительные цвета сведем к чему-то вроде недоделанной триады. Оба прямоугольника мы украсим добавлением желтого:

В этом случае получится жизнерадостное, летнее, яркое сочетание двух сочных цветовых плашек. Но это не наш вариант (красный цвет здесь уже не красный, а оранжевый, грубо говоря). Поэтому наш вариант второй, с градиентами. Будем ориентироваться на него.

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

 

Слой растрируем, размываем (лучше всего инструментом Blur, тогда размывку можно усилить там, где это нужно вам), добавляем рефлекс от красного листа обложки:

 

Рефлекс можно сделать простым мазком кистью красного цвета, но аккуратно.

Добавляем тень от листов каталога:

 

Отбили листы от основания, теперь пришло время добавить объем обложке. Она завернута, поэтому на ней должны быть области освещенные и не очень. Для начала обтравочной маской к обложке делаем полосу света. Просто белой мягкой кистью, проводим с зажатым Шифтом.

 

Вызываем свободную трансформацию (Ctrl+T), и для нее контекстное меню правой кнопкой мыши. Там выбираем деформацию:

 

Правильная полоса света получится не сразу, у меня она вышла попытки с десятой. Важно чтобы она выглядела более-менее естественной. Потом надо бы затереть аккуратно слева ластиком с прозрачностью около 40 %, чтобы была не такая резкая полоса света.

 

А потом обложке (слою с самой формой листа обложки) даем свет сверху. Зачастую это действительно удобнее сделать с помощью внутренней тени:

 

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

Делаем в бумаге дырку. На самом деле это просто прямоугольник поверх всего, с фоновым цветом заливки.

 

В прямоугольнике делаем внутреннюю тень:

 

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

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

 

Градиент может показаться странным. Но объясню: слева у него рефлекс от серого фона (если фон сделать белым, то его нужно сделать светлее), а справа розовый рефлекс от красной обложки.

 

 

Теперь эти два слоя можно связать (залинковать) и продублировать, чтобы сделать красивую и аккуратную брошюру:

 

Теперь можно выпить чаю, отдохнуть и приступить к рисованию стрелки. Это очень сложная задача, ее нужно выбрать из стандартных фигур. Их там на самом деле много, всевозможные сердечки потом можно использовать сколько угодно:

 

Дальше ее нужно развернуть и подредактировать. Редактируется очень просто, нижняя точка указателя просто двигается чуть вверх (это же форма из кривых Безье), чтобы был более человечный вид.

 

Назначаем свойства:

 

Теперь самой стрелке форму можно чуть оживить, сделав ее пунктирной, что ли. «Вырезаем» из нее прямоугольники:

 

И вспоминаем об еще одном важном свойстве любимой программы. Если на слое задано наложение градиента или цвета, то эти эффекты будут перекрывать обтравочные маски слоя. Избавиться от этого можно, расставив чекбоксы в параметрах наложения вот таким путем:

 

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

 

Заливаем область белым цветом, задаем параметр «Перекрытие» в слоях, чуть затираем:

 

 

Вот и готово.

 

Оригинал статьи читаем на lobach.com.ua )

Метки: , , ,

VN:F [1.9.10_1130]
5

Следующий пост

Смотрите так же: