Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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


Шапка сайта


Шаг 1
Создайте новый документ размером 540х350 пикселей. Установите цвет заливки - #372819 и залейте фон (Alt+Backspace).


Шапка сайта


Шаг 2
Создайте новый слой (Create New Layer) и назовите его “Header Background”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста высотой 185 пикселей.


Шапка сайта


Шаг 3
Установите цвета по умолчанию (D) и залейте выделение чёрным цветом (Alt+Backspace). Потом уберите выделение (Ctrl+D).


Шапка сайта


Шаг 4
Теперь нам понадобится узор для оформления шапки (можете скачать его здесь).

Перейдите в меню стиля Наложение узора (Layer Style - Pattern Overlay) и загрузите нужный узор:


Шапка сайта


Шаг 5
Установите Режим – Свечение


Шапка сайта


Шаг 6
Параметры наложения – понизьте Заливку до 0%.


Шапка сайта


Шаг 7
Стиль Внутреннее свечение (Режим – Затемнение основы, Метод - Мягкий):


Шапка сайта


Вы заметите, что на слое появилась иконка стилей:


Шапка сайта


Шаг 8
Создайте новый слой “Red Bar” и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста высотой 45 пикселей. Залейте его цветом #88160F и снимите выделение (Ctrl+D).


Шапка сайта


Шаг 9
Примените следующие стили к слою с красным прямоугольником:

Наложение узора (Режим – Затемнение основы, Узор – “Sparse Basic Noise” из набора “Texture Fill 2”):


Шапка сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Шапка сайта


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Шапка сайта


У меня на картинке двойная обводка. Её я создал при помощи инструмента Горизонтальная строка (Single Row Marquee Tool).

Шаг 10
Сделайте копию слоя “Red Bar” и инструментом Перемещение (Move Tool) переместите полоску в верхнюю часть холста.


Шапка сайта


Шаг 11
Добавим тень под нижнюю красную полоску. Создайте новый слой “Red Bar Shadow” над слоем “Header Background”. Выберите инструмент Градиент (Gradient Tool) и настройте, как показано ниже. Сделайте короткую заливку от нижней полоски линии вниз.


Шапка сайта


Шаг 12
Создайте такую же тень под верхней красной полоской. Можете просто скопировать слой с тенью. Потом установите Заливку (Fill) обоих слоёв тени – 80%.


Шапка сайта


Шаг 13
Теперь при помощи градиентной заливки создадим свечение. Создайте новый слой над слоем “Header Background” и назовите его “Header Glow”. Настройте градиент, как показано ниже:


Шапка сайта


Шаг 14
Выполните заливку, как показано ниже, и не переживайте если градиент выходит за границы шапки.


Шапка сайта


Шаг 15
Сделайте выделение слоя “Header Background” и к слою “Header Glow” добавьте слой-маску (Layer Mask).


Шапка сайта


Шаг 16
Понизьте Заливку (Fill) слоя с градиентом до 30%.


Шапка сайта


Финальный результат:


Шапка сайта



PSD файл можете скачать здесь.



Во второй части урока мы будем рисовать старую бумагу на фоне этой шапки сайта.



Ссылка на источник урока

написал : anamart

нет ссылки на узор - ошибку пишет

---------------


написал : positive11

поправили ссылку.
спасибоsmile

---------------


написал : anamart

да теперь узор скачивается, но как его добавить в фотошоп - как кисть он не закачивается - у меня правда старый Фотошоп третий еще, как использовать узор подскажите?

---------------


написал : positive11

не важно какая версия. там же на картинке где стиль Наложение узора показано как его выбрать (импортировать). Load Patterns (Загрузить узор).

---------------


написал : borz

не работает ссылка на скачивание PSD файла sad

---------------


написал : positive11

borz
всё исправили.

---------------


написал : gleb

сайт обалденый!!! love

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: