Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Красивая шапка для сайта в Photoshop

шапка сайта

Шаг 1. Создаем новый документ (Ctrl+N) размером 766 на 418 пикселей и в нем новый слой (Ctrl+Shift+N). Выбираем Инструмент Прямоугольник (Rectangle Tool (U)) и рисуем область, как на рисунке внизу. Заливаем его цветом #5651a5.

создаем новый документ

Шаг 2. Задаем для основного цвета (foreground color) значение #de1111 и выбираем Инструмент Градиент (Gradient Tool (G)) с параметрами - "линейный", "от основного к прозрачному". Создаем новый слой (Ctrl+Shift+N) и проводим Градиентом из левого верхнего угла вниз примерно на 2-3 сантиметра (см. рисунок).

градиент

Шаг 3. Теперь, для основного цвета задаем значение #FFFFFF (белый) и, выбрав стандартную Кисть (Brush (B)) размером около 45 пикселей, рисуем (на новом слое) область, как на рисунке внизу.

рисуем кистью

Шаг 4. Размоем белое пятно, для этого идем Filter>Blur>Gaussian Blur (Фильтр>Размытие>Размытие по Гауссу) и задаем радиус размытия 28,9, вот что должно получиться:

размытие по гауссу

Шаг 5. Скачиваем отсюда фотку и вставляем её в наш файл на отдельный самый верхний слой. Для изменения размера и преноса изображения, нажимаем Ctrl+T, чтобы вызвать Инструмент Свободная Трнсформация (Free Transform).

free transform

Шаг 6. Создаем новый слой (Ctrl+Shift+N) и, выбрав Инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), рисуем черный прямоугольник, как на рисунке внизу:

rounded rectangle tool

Нажимаем Ctrl+T, чтоб вызвать Инструмент Свободная Трансформация, далее кликаем правой кнопкой мыши и в появившемся меню выбираем пункт Distort (Искажение). Меняя положение боковых маркеров фигуры, добиваемся схожести с этой:

искажение distort

Идем Filter>Blur>Gausian Blur (Фильтр>Размытие>Размытие по Гауссу), радиус размытия ставим 1.0. Для этого слоя Opacity (Непрозрачность) выставляем на 45%.

blur opacity

Шаг 7. Повторяя предыдущий шаг, рисуем еще одну фигуру:

тень

Шаг 8. Создаем новый слой и, задав основной цвет #f26521 и выбрав Инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) с радиусом скругления 20 пикселей, рисуем фигуру:

прямоугольник со скруглееными углами

Теперь, выбираем Инструмент Прямоугольное выделение (Rectangular Marquee Tool (M)), выделяем прямоугольную область (см. рисунок) и удаляем (Delete) её.

marquee

Шаг 9. Создаем новый слой. Удерживая клавишу Ctrl, кликаем по иконке предыдущего слоя (с прямоугольником) на Палитре слоев, так чтобы он выделился. Задаем для основного (foreground) цвета - #f7aa4e, фона (background) - #f26521 и, выбрав Инструмент Градиент (Gradient Tool (G)), заливаем им, чтоб получилось, как на картинке внизу:

градиент

Шаг 10. Повторяем два предыдущих шага для верхней фигуры:

фигура shape

Шаг 11. Скачайте отсюда иконки которые мы будем использовать. Создаем новый слой и помещаем в него изображение, как показано внизу, изменив, конечно, его размер и положение.

иконка на шапке

Шаг 12. Создаем еще один новый слой (Ctrl+Shift+N) и, выбрав Инструмент Rectangle Tool (Прямоугольник (U)), рисуем прямоугольник, как показано внизу. После этого идем в Layer Styles (Стили Слоя) (кликнув дважды по иконке слоя на Панели Слоев), выбираем пункт Наложение Градиента (Gradient Overlay) со следующими цветами: #cd0000 и #ff1a00.

gradient overlay

Шаг 13. Создаем новый слой. Кликаем, удерживая Ctrl, по предыдущему слою, чтобы выделить прямоугольник и заливаем его Градиентом от "Белого" к "Прозрачному" от верхней границы прямоугольнико до примерно 1/4. Выставляем Непрозрачность (Opacity) слоя на 30%. Вот, что должно у вас получиться в итоге:

градиент

Шаг 14. Создаем новый слой и, выбрав Инструмент Линия (Line Tool (U)) цвета - #942236, рисуем вертикальную линию у правой границы, фигуры сделанной ранее.

line tool

Теперь, выбираем Инструмент Прямоугольное выделение (Rectangular Marquee Tool (M)) и выделяем прямоугольник, как показано внизу. Создаем новый слой и, выбрав Инструмент Кисть (Brush Tool (B)) диаметром около 20px, рисуем тень, как на рисунке внизу.

рисуем тень

Шаг 15. Осталось только вставить ещё одну иконку из скачанных ранее.

иконка на шапке

Финальный шаг. Ну вот и все. Добавим текст и наша шапка готова.

шапка для сайта

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна.
Автор UBL Designes. Оригинал статьи на английском.

Другие уроки Photoshop >>