Tags: Графика для сайта | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

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

Вот какого результата мы попробуем добиться:

Начинаем работу над шапкой с построения ленты. Она будет у нас состоять из трех частей. Создадим новый документ размером 1000*450 пикселей. Для Начала создадим конец ленты, затем ее основную часть.

При помощи инструмента Перо создадим край ленты.

Продублируем слой и раположим его с другой стороны.

Далее при помощи того же инструмента рисуем основную часть ленты.

Затем рисуем внутренние края ленты, как показано на рисунке.

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

Концам ленты  добавляем следующие стили :

У вас должно получиться что-то вроде этого:

К слою изнаночной стороны ленты добавим Наложение градиента с настройками, показанными ниже:

Вот что должно у вас получиться:

К основной части ленты добавляем Наложение градиента, используя настройки , указанные ниже: pong.uwstout.edu

Вот так должна выглядеть лента:

Для того чтобы немного красить ленту создадим простой узор. Создайте новый документ размером 4*4 пикселя, при помощи инструмента Карандаш повторите то что показано на рисунке ниже.

Когда выполните все зайдите в меню Редактирование-Определить узор. Сохраните шаблон узора и перейдите на основное рабочее окно.

Загрузите выделение края ленты, нажав по эскизу слоя в палитре, зажав клавишу Ctl.

Далее создайте новый слой, перейдите по меню Выделение- Модификация- Сжать и установите значение равное 5 пикселям. Выполните заливку содержимого выделенной области.

Далее еще раз пройдите в меню Выделение-Модификация-Сжать, и еще раз уменьшите выделенную область на 5 пикселей и нажмите кнопку удалить. Повторите это действие для каждой части ленты, вот что должно получиться в итоге:

Добавим на ленту несколько случайных отпечатков кистями в  стиле Гранж .Установите непрозрачность слоя 43% и режим наложения Мягкий свет.

Для крайних частей ленты загрузите выделение и на новом слое выполните заливку градиентом с настройками, показанными на картинке.

После этого уменьшите непрозрачность слоя до 40%. Вот что должно получиться.

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

Если вам понравился урок, подписывайтесь и читайте нас через RSS.