Это цитата сообщения IrchaV Оригинальное сообщение
Урок фотошоп - Как сделать шапку для сайта или блога
Автор: klerik
[445x399]Дорогие друзья сегодня мы с вами рассмотрим такой актуальный вопрос – как сделать шапку для сайта или блога?
После изучения данного урока вы научитесь делать шапки для сайтов в фотошопе.
Делать мы будем вот такую шапку:
[600x114]Будем считать что к нам поступил заказ на изготовление шапки для сайта или блога.
Заказчик прислал образец будущей шапки и пояснил:
[600x114]И так, садитесь по удобнее, я начинаю свой рассказ [показать]
1. Создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп).
В окошке я указал следующие параметры:
[показать]В итоге получился новый документ:
[600x323]После этого сделаем небольшую настройку фотошопа:
Ставлю галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.
[показать]Включаем шкалу-линейку для документа:
Идем Views→Rules (Вид→Линейки или просто жмем CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.
[показать]Сразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и выбираем такие данные:
[показать]После этого я с помощью направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаю места под основные элементы шапки:
[600x160]Направляющие можно Показывать/Прятать с помощью 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) и рисуем прямоугольное выделение.
[600x114]После этого заливаем наше выделение произвольным цветом. Берем инструмент [показать] Paint Bucket Tool (Ведро, G) и кликаем по выделению (я выбрал цвет 165394).
[показать]Переходим в стили нового слоя и ставим галочки напротив следующих пунктов: Drop Shadow (Отбрасывать тень), Gradient Overlay (Градиентная заливка), Stroke (Обводка), со следующими настройками:
[показать] [показать] [показать] [показать]После этого укажем Opacity (Непрозрачность) слою в 80%.
[600x114]После того как у нас готов фон, можно приступать к созданию других элементов шапки.
4. Напишем название сайта, слоган и текст для горизонтального меню. Для этого выбираем инструмент [показать] Horizontal Type Tool (Горизонтальный текст) и щелкаем на шапке в том месте, в котором планируем написать надпись, и пишем ее.
Маленькая подсказка. Cлои очень удобно двигать или перетаскивать из документа в документ с помощью инструмента [показать]Move Tool.
Я выбрал для названия сайта надпись “Myvideo.com” и настройки текста выбрал следующие:
[показать]Для слогана выбрал надпись “только лучшее видео и фильмы” и следующие настройки текста:
[показать]Для пунктов меню я выбрал надписи “Главная”, “О сайте”, “Контакты”, “Поиск”, “Реклама на сайте”, “Блог” я выбрал следующие настройки текста:
[показать]И вот что у меня получилось.
[600x114]Для слоя с названием сайта, применил следующие настройки для стилей слоя (Drop Shadow и Bevel and Emboss).
[показать] [показать]Что бы изменить цвет текста, выбираем инструмент [показать], щелкаем прямо по тексту с названием сайта и выделяем текст для которого нужно изменить цвет (я выбрал цвет - add7fe).
[показать]5. После этого нам нужно подобрать тематическую иконку. Иконку можно легко найти на интересном сайте Iconfinder.com, просто заходим на сайт, вводим слово характеризующее нужную нам тематику (я ввел слово - Video) и нажимаем Search (Поиск). Выбираем понравившуюся иконку и сохраняем (кликаем правой кнопкой мыши по картинке и выбираем пункт Сохранить изображение…) ее на компьютер.
Я выбрал такую картинку:
[показать]Далее открываем картинку в фотошопе File→Open. Теперь нужно перенести слой с иконкой в наш документ с шапкой. Для этого выбираем инструмент [показать] Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).
[показать]В появившемся окошке указываем, какой слой, в какой документ копировать:
[показать]После проделанных манипуляций иконка должна добавиться в документ с шапкой.
Как видим, она имеет гораздо больший размер, чем нам нужен, будем ее уменьшать.
[показать]Для этого идем Edit→Free Transform (Правка→Свободная Трансформация, Ctrl+T). Вокруг картинки образовалась рамочка с маркерами. Далее для равномерного уменьшения картинки, нажмем Shift и не отпуская его делаем рамку меньше (уменьшая мышкой рамку) тем самым трансформируем картинку как нам нужно.
[показать]У меня получилось вот так:
[600x114]Как видите большую часть шапки мы уже сделали, осталось добавить тематические картинки справа и у нас получиться интересная шапка для сайта или блога.
6. Покажу, на примере как я делал первую картинку. Как видите на конечном образце шапки (картинка в самом начале этой новости), все картинки вставлены в рамочки. Нам нужно создать рамку и поместить в нее картинку с нашим изображением. Для этого создадим новый слой Shift+Ctrl+N.
Выбираем инструмент инструмент [показать] Rectangular Marque Tool (Прямоугольное выделение) и рисуем прямоугольное выделение.
Удобно делать выделение с направляющимися (если нужен точный размер), но можно и без них (на глаз).
[показать]Заливаем наше выделение любым цветом берем инструмент [показать] Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow, Color Overlay:
[показать] [показать]Тематические картинки мультфильмов и фильмов я взял с сайта Kinomania.ru.
После того как мы подобрали картинки, открываем их в фотошопе. Переносим каждую картинку в документ с нашей шапкой.
Если вы хотите что бы слой оказался выше всех слоев – выделите слой и нажмите Shift+Ctrl+].)
[600x114]Далее будем делать эффект выхода картинки из кадра. Для этого мы будем использовать маски в фотошопе.
Выбираем слой с нашей картинкой, после этого выбираем инструмент инструмент [показать] Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение поверх сделанного фона.
[показать]После этого в палитре Layers (Слой, F7), нажимаем на кнопочку [показать].
[показать]Далее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской.
После этого выбираем саму картинку.
[показать]Проделанные действия позволят нам двигать картинку внутри маски, так же внутри картинку можно трансформировать. Двигать картинку можно клавишами - Вправо, Влево, Вверх и Вниз на клавиатуре или с помощью инструмента [показать] Move Tool.
[показать]Двигая и трансформируя картинку добьемся нужного нам результата:
[600x114]Теперь нам осталось только добавить ковбою обрезанную шляпу. Для этого идем в палитру со слоями (жмем F7), выделяем наш слой с картинкой и выбираем пиктограмму с маской слоя.
[показать]Далее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).
[показать]После этого выбираем инструмент [показать] Brush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет - как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться.
[показать]Проще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает как Восстановитель (восстанавливает все то, что скрыто).
Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки).
[показать]Добавим внутреннюю тень для картинки. Добавим стиль для слоя Inner Shadow (Внутренняя Тень).
[показать]вот что получилось:
[показать]Осталось повторить все эти действия для второй и третьей картинки.
В конечном итоге у меня получилась готовая шапка для сайта или блога.
[600x114](нажмите на картику для просмотра оригинала)
Шапка получилась простенькая, но со вкусом. Теперь шапку нужно "перевести" в интернет формат - сверстать, как это сделать читайте в нашей статье - Примеры верстки «шапок» для сайтов.
Просто повторите шаги по пунктам, и вы с легкостью научитесь делать сами такие шапки в фотошопе.