Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

Как сделать банер для сайта в 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

Последнее изменениеЧетверг, 03 Июль 2014 17:58
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru
Другие материалы в этой категории: Создание GIF анимированного интерфейса в Adobe Photoshop »

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

Добавить комментарий


Защитный код
Обновить

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

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