Как сделать шапку для сайта
 
Как сделать шапку для сайта или блога?
После изучения данного урока вы научитесь делать шапки для сайтов в фотошопе.
Делать мы будем вот такую шапку:
(нажмите на картику для просмотра оригинала)
У меня стоит Photoshop CS4 (английская версия).
Будем считать что к нам поступил заказ на изготовление шапки для сайта или блога.
Заказчик прислал образец будущей шапки и пояснил:
Слева на шапке хочу тематическую иконку + название сайта и слоган, справа будет 3 тематических картинки из мульфильмом и фильмов. Снизу на
шапке будет горизонтальное меню (по центру).
(нажмите на картику для просмотра оригинала)
И так, садитесь по удобнее, я начинаю свой рассказ :smile:
1. Создаем новый документFile>New(Файл>НовыйилиCTRL+N- в скобочках вместе с переводом буду указывать сокращения - проще говоря “горячие”
клавиши, которые позволяют экономить время в программе фотошоп).
В окошке я указал следующие параметры:
В итоге получился новый документ:
(нажмите на картику для просмотра оригинала)
После этого сделаем небольшую настройку фотошопа:
Ставлю галочкуAuto-Select(Автоматически выбрать) и в выпадающем меню выбираюLayer(Слои) - данная настройка позволяет выбрать любой слой по
клику на нем.
Включаем шкалу-линейку для документа:
ИдемViews>Rules(Вид>Линейки или просто жмемCTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.
Сразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и
выбираем такие данные:
После этого я с помощью направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаю места под основные элементы шапки:
(нажмите на картику для просмотра оригинала)
Направляющие можно Показывать/Прятать с помощьюView>Show>Guides(Вид>Показывать>Направляющие) илиCTRL+;
2. Приступим к созданию основных элементов шапки. Создадим фон для шапки. ИдемWindows>Layers(Окно>СлоиилиF7). Дважды щелкаем по
слоюBackground, тем самым преобразуем его в простой слой (название слоя я указал -fon-shapki)
Далее еще раз дважды щелкаем по слоюfon-shapkiи открывается окошко со стилями слоя, там выбираем нужный стиль для слоя, я выбрал градиентную
заливку -Gradient Overlay(Заливка градиентом) и поставил следующие настройки. Щелкаем два раза по полоске с градентом:
В следующем окошке щелкаем мышкой по левому маркеру:
В открывшемся окошке, внизу указываем цвет196ca6и жмемOK.
Далее щелкаем по правому маркеру и в открывшемся окошке указываем цвет0048a0и жмемOK.
Далее копируем наш слой с фоном. В палитреLayers(Слои,F7) выбираем наш слой мышкой, далее кликаем мышкой на слои и не отпуская кнопки мыши
переносим слой на следующую иконкуи отпускаем мышку. Создастся новый слой - копия предыдущего (можно просто нажатьCRTL+J). Не снимая
выделение со нового слоя, установим емуOpacity(Непрозрачность) в 18%.
Далее щелкаем два раза новому слою, снимаем галочку сGradient Overlay(Заливка градиентом) и ставим галочкуPattern Overlay(Заливка текстурой),
ставим следующие настройки:
Все фон для шапки у нас готов.
3. Далее сделаем фон для горизонтального меню снизу. Делаем новый слой - нажимаем по пиктограммеили просто жмемShift+Ctrl+N(у нас получился
новый прозрачный слой).
После этого выбираем инструментRectangular Marque Tool(Прямоугольное выделение, M) и рисуем прямоугольное выделение.
(нажмите на картику для просмотра оригинала)
После этого заливаем наше выделение произвольным цветом. Берем инструментPaint Bucket Tool(Ведро,G) и кликаем по выделению (я выбрал
цвет165394).
Переходим в стили нового слоя и ставим галочки напротив следующих пунктов:Drop Shadow(Отбрасывать тень),Gradient Overlay(Градиентная
заливка),Stroke(Обводка), со следующими настройками:
После этого укажемOpacity(Непрозрачность) слою в80%.
(нажмите на картику для просмотра оригинала)
После того как у нас готов фон, можно приступать к созданию других элементов шапки.
4. Напишем название сайта, слоган и текст для горизонтального меню. Для этого выбираем инструментHorizontal Type Tool(Горизонтальный текст)
и щелкаем на шапке в том месте, в котором планируем написать надпись, и пишем ее.
Маленькая подсказка. Cлои очень удобно двигать или перетаскивать из документа в документ с помощью инструментаMove Tool.
Я выбрал для названия сайта надпись “Myvideo.com” и настройки текста выбрал следующие:
Для слогана выбрал надпись “только лучшее видео и фильмы” и следующие настройки текста:
Для пунктов меню я выбрал надписи “Главная”, “О сайте”, “Контакты”, “Поиск”, “Реклама на сайте”, “Блог” я выбрал следующие настройки текста:
И вот что у меня получилось.
(нажмите на картику для просмотра оригинала)
Для слоя с названием сайта, применил следующие настройки для стилей слоя (Drop ShadowиBevel and Emboss).
Что бы изменить цвет текста, выбираем инструмент, щелкаем прямо по тексту с названием сайта и выделяем текст для которого нужно изменить
цвет (я выбрал цвет -add7fe).
5. После этого нам нужно подобрать тематическую иконку. Иконку можно легко найти на интересном сайтеIconfinder.com, просто заходим на сайт, вводим
слово характеризующее нужную нам тематику (я ввел слово -Video) и нажимаемSearch(Поиск). Выбираем понравившуюся иконку и сохраняем (кликаем
правой кнопкой мыши по картинке и выбираем пунктСохранить изображение…) ее на компьютер.
Я выбрал такую картинку:
Далее открываем картинку в фотошопеFile>Open. Теперь нужно перенести слой с иконкой в наш документ с шапкой. Для этого выбираем инструментMove Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пунктDublicate Layer(Копия слоя).
В появившемся окошке указываем, какой слой, в какой документ копировать:
После проделанных манипуляций иконка должна добавиться в документ с шапкой.
Как видим, она имеет гораздо больший размер, чем нам нужен, будем ее уменьшать.
Для этого идемEdit>Free Transform(Правка>Свободная Трансформация,Ctrl+T). Вокруг картинки образовалась рамочка с маркерами. Далее для
равномерного уменьшения картинки, нажмемShiftи не отпуская его делаем рамку меньше (уменьшая мышкой рамку) тем самым трансформируем
картинку как нам нужно.
У меня получилось вот так:
(нажмите на картику для просмотра оригинала)
Как видите большую часть шапки мы уже сделали, осталось добавить тематические картинки справа и у нас получиться интересная шапка для сайта
или блога.
6. Покажу, на примере как я делал первую картинку. Как видите на конечном образце шапки (картинка в самом начале этой новости), все картинки
вставлены в рамочки. Нам нужно создать рамку и поместить в нее картинку с нашим изображением. Для этого создадим новый слойShift+Ctrl+N.
Выбираем инструмент инструментRectangular Marque Tool(Прямоугольное выделение) и рисуем прямоугольное выделение.
Удобно делать выделение с направляющимися (если нужен точный размер), но можно и без них (на глаз).
Заливаем наше выделение любым цветом берем инструментPaint Bucket Tool(Ведро,G) или просто жмемAlt+Backspace. После этого щелкаем по слою
два раза и попадаем в стили слоя. Я выставил такие настройки дляDrop Shadow,Color Overlay:
Тематические картинки мультфильмов и фильмов я взял с сайтаKinomania.ru.
После того как мы подобрали картинки, открываем их в фотошопе. Переносим каждую картинку в документ с нашей шапкой.
(Внимание!Слой с картинкой после добавления в новый документ может оказаться ниже других слоев распложенных в этом документе. Порядок слоев в
документе можно изменять мышью. Для этого в палитреLayer(Слои,F7) выберите нужный слой, нажмите мышью на него, теперь не отпуская мышь
перетащите слой выше или ниже других слоев в документе.)
Если вы хотите что бы слой оказался выше всех слоев - выделите слой и нажмитеShift+Ctrl+].)
(нажмите на картику для просмотра оригинала)
Далее будем делать эффект выхода картинки из кадра. Для этого мы будем использовать маски в фотошопе.
Выбираем слой с нашей картинкой, после этого выбираем инструмент инструментRectangular Marque Tool(Прямоугольное выделение,M) и рисуем
прямоугольное выделение поверх сделанного фона.
После этого в палитреLayers(Слой,F7), нажимаем на кнопочку.
Далее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской.
После этого выбираем саму картинку.
Проделанные действия позволят нам двигать картинку внутри маски, так же внутри картинку можно трансформировать. Двигать картинку можно
клавишами -Вправо,Влево,ВверхиВнизна клавиатуре или с помощью инструментаMove Tool.
Двигая и трансформируя картинку добьемся нужного нам результата:
(нажмите на картику для просмотра оригинала)
Теперь нам осталось только добавить ковбою обрезанную шляпу. Для этого идем в палитру со слоями (жмемF7), выделяем наш слой с картинкой и
выбираем пиктограмму с маской слоя.
Далее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмемDна клавиатуре, так же можно изменять
цвета местами с помощью клавишиX(есть так же соответствующие кнопочки внизу панели с инструментами).
После этого выбираем инструментBrush Tool (Кисть,B). Теперь рисуя кистью когда выбранЧерный цвет- как цвет переднего плана, на картинки у нас
будет маска стираться, а когда у кисти будет стоятьБелый цвет- как цвет переднего фона, картинка у нас будет появляться.
Проще говоря, при активномЧерном цвете, кисточка работает какРезинка(т.е. стирает изображение), а при активномБелом цветекисточка работает какВосстановитель(восстанавливает все то, что скрыто).
Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки).
Добавим внутреннюю тень для картинки. Добавим стиль для слояInner Shadow(Внутренняя Тень).
вот что получилось:
Осталось повторить все эти действия для второй и третьей картинки.
В конечном итоге у меня получилась готовая шапка для сайта или блога.

(нажмите на картику для просмотра оригинала)
Шапка получилась простенькая, но со вкусом. Теперь шапку нужно "перевести" в интернет формат - сверстать, как это сделать читайте в нашей статье -Примеры верстки «шапок» для сайтов.
Просто повторите шаги по пунктам, и вы с легкостью научитесь делать сами такие шапки в фотошопе.
Если вам что то не понятно в уроке - пишите в комментариях, постараюсь помочь.
 
Hosted by uCoz