четверг, 20 мая 2010 г.

Стильный баннер для Web сайта

Стильный баннер для Web сайта


1. Создайте новый документ размером 500×300 пикселей и залейте его цветом #2d164d.

Стильный баннер для Web сайта



2. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте такую фигуру:
Стильный баннер для Web сайта


3. К слою с прямоугольником примените следующие стили в меню Стилей слоя (
Layer Style - Blending Options):
Наложение градиента:
Стильный баннер для Web сайта

Обводка:
Стильный баннер для Web сайта

Результат:
Стильный баннер для Web сайта


4. Создайте новый слой
(Create New Layer) и объедините этот слой с предыдущим. Потом к
полученному слою примните стиль Отбрасывание тени (Layer Style - Drop
Shadow):
Стильный баннер для Web сайта

Вы получите такой результат:
Стильный баннер для Web сайта


5. Выберите инструмент
Затемнитель (Burn Tool): размер - 130 пикселей, диапазон - средние тона
(midtones), экспозиция - 25%. Создайте такое затемнение по бокам:
Стильный баннер для Web сайта


6. Теперь сделайте выделение слоя с прямоугольником (Ctrl+Click). Создайте новый слой
(Create New Layer), инструментом Градиент (Gradient Tool) залейте
выделенную область, цвет - от белого к прозрачному. Сделайте заливку
сверху и внизу слоя.
Стильный баннер для Web сайта

Стильный баннер для Web сайта


7. Снимите выделение (Ctrl+D) и измените Режим наложения на Наложение
(Blending Mode – Overlay):

Стильный баннер для Web сайта


8. Добавим свечение.
Сделайте выделение слоя с прямоугольником ещё раз (Ctrl+Click).
Выберите инструмент Овальная область (Elliptical Marque Tool),
удерживая Alt, вырежьте часть области, чтобы получить такой результат:
Стильный баннер для Web сайта


9. Выберите инструмент Градиент (Gradient Tool) и залейте им выделение цветом то белого к прозрачному в новом слое:
Стильный баннер для Web сайта


10. Снимите выделение (Ctrl+D) и измените Режим наложения на Наложение
(Blending Mode – Overlay). Потом примените стиль Отбрасывание тени (Layer Style - Drop Shadow) к текущему слою:
Стильный баннер для Web сайта

Результат:
Стильный баннер для Web сайта


11. Сделайте выделение прямоугольника (

Ctrl+Click), создайте новый слой (Create New Layer) и обрисуйте выделение немного:
Стильный баннер для Web сайта


12. Снимите выделение (Ctrl+D) и измените Режим наложения на Наложение (

Blending Mode – Overlay), установите Непрозрачность (Opacity) - 30%.
Стильный баннер для Web сайта


13. Выберите инструмент
Резкость (Sharpen Tool): размер - 200 пикселей, режим - нормальный,
интенсивность - 50%. Обрисуйте слой немного:

Стильный баннер для Web сайта


14. Отройте это изображение цветком
Стильный баннер для Web сайта


Инструментом Многоугольное лассо
(Polygonal Lasso Tool) вырежьте цветок из фона и вставьте его в наш
документ. Уменьшите цветок в размере инструментом Свободное
трансформирование (Free Transform) и разместите так:

Стильный баннер для Web сайта


15. Потом к слою с цветком примените стиль Внешнее свечение (Layer Style - Outer Glow):
Стильный баннер для Web сайта

Результат:
Стильный баннер для Web сайта


16. Создайте новый слой
(Create New Layer) и объедините его с предыдущим (Ctrl+E). Теперь
сделайте выделение слоя с прямоугольником (Ctrl+Click), сделайте
Инверсию выделения
(Select - Inverse). Нажмите Delete:
Стильный баннер для Web сайта


17. Снимите выделение
(Ctrl+D). Инструментом Горизонтальный текст (Horizontal Type Tool)
напишите текст ‘New Spa Saloon’ белым цветом. Я использовал шрифт Avant
Garde Gothic. Он не бесплатный, поэтому можете использовать любой
другой шрифт.
Стильный баннер для Web сайта


18. К слою с текстом примените стиль Отбрасывание тени (Layer Style - Drop Shadow):
Стильный баннер для Web сайта

Результат:
Стильный баннер для Web сайта


19. Потом напишите внизу ‘Click here to enter’ цветом #80bb00. Примените тот же стиль слоя.
Стильный баннер для Web сайта


20. Теперь напишите слово ‘AQUA’ белым цветом.
Стильный баннер для Web сайта


21. В слое ‘AQUA’ перейдите в меню Стилей слоя (Layer Style - Blending Options) и примените эти стили:
Отбрасывание тени:
Стильный баннер для Web сайта

Внешнее свечение:
Стильный баннер для Web сайта

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