Как сделать банер для сайта в Photoshop

Photoshop может использоваться для создания элементов дизайна веб-сайта. В сегодняшнем учебном руководстве мы будем банер для сайта в Photoshop (небольшой прайс на услуги).

Сейчас мы изучим как создать Ваш собственный банер с прайсом в Photoshop,который потом можно использовать в своем дизайне веб-сайта. Этот банер разработан для веб-сайтов, которые имеют стиль web 2.0 — это современная тенденция в последнее время использовать в GUI (graphical user interface) графическом интерфейсе пользователя на сайте.

Этот банер может подойти для хостинговых компаний, которые нуждаются в аккуратно разработанном, так назоваемом банер-прайсе. 

Приступим!

1. Создайте новый документ 500 пкс x 600 пкс. Используйте инструмент прямоугольник с закругленными углами и потяните форму как показано ниже. Дважды щелкните по слою, чтобы войти в меню стиля слоя и вставите настройки как показано ниже.

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

3. Теперь выбирете инструмент "Произвольная фигаура" и щелкните вниз. Выберите перевернутый треугольник и нанрисуйте форму на холсте. Нажмите ctrl+t, чтобы войти в режим совбодного трансформирования и поверните форму боком. Удержывайте клавишу Ctrl и щелкните по миниатюре слоя треугольника, чтобы выделить форму. Создайте новый слой под этим слоем, щелкните по новому значку слоя и заполните выделенную формучерным цветом. Затем войдите в Фильтр> Размытие> Размытие по Гауссу и вставьте значение 5.3.

4. Удержите клавишу Shift и выберите треугольник и слой с тенью скопируйте на новый слой. Затем нажмите ctrl+t и зеркально отразите его налево. Поместите слой с треугольниками с другой стороны синего баннера. Используя шрифт который вам нравится введите название. Дважды щелкните стиль слоя и выставьте настройки параметров как на картинке ниже:

5. Затем возьмите инструмент линия и от каждого конца поля (удерживая Shift) проведите прямые. Скопируйте строку удерживая клавишу Ctrl и нажмите стрелку вниз, чтобы пошагово переместить дублированную строку немного вниз. Сделайте строки таким цветом.

6. Затем используйте другой шрифт и впишите данные вашего банера. На текстовом слое дважды щелкните на стиль слоя и вставьте примерно такие настройки:

7. Затем возьмите Инструмент Эллипс инарисуйте (путем вытягивания) очень тонкий овал под синим полем, создайте новый слой под синим полем и заполните его темно-серым цветом. Затем перейдите к Фильтру> Размытие> Размытие по Гауссу и выствьте параметр 7.4.

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

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

10. Используя другой шрифт впишите цену белым цветом, затем щелкните на текстовый слой и нажмите ctrl+t, чтобы его развернуть. Дважды щелкните стиль слоя и вставьте такие параметры настройки:

11. Используйте инструмент прямоугольник с закругленными углами и нарисуйте форму для кнопки, двойной щелчок на стиль слоя и вставьте такие параметры настройки:

12. Наконец впишите любой текст шрифтом цвета # 2790bc, двойной щелчок на стиль слоя и вставьте такие параметры настройки:

Конечный результат!

Готово!

по материалу Ainsley (Melbourne, Australia) www.bloomwebdesign.net