Как сделать шaпку для сайта или блога

Оцените материал
(1 Голосовать)

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


Будем считать, что к нам поступил заказ на изготовление шапки для сайта или блога. Заказчик прислал образец будущей шапки и пояснил: Слева на шапке хочу тематическую иконку + название сайта и слоган, справа будет 3 тематических картинки из мультфильмов и фильмов. Снизу на шапке будет горизонтальное меню (по центру).

И так, садитесь по удобнее, я начинаю свой рассказ:
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 (Внутренняя Тень).

Вот что получилось:


Осталось повторить все эти действия для второй и третьей картинки. В конечном итоге у меня получилась готовая шапка для сайта или блога. Шапка получилась простенькая, но со вкусом. Теперь шапку нужно "перевести" в интернет формат Просто повторите шаги по пунктам, и вы с легкостью научитесь делать сами такие шапки в фотошопе.

Прочитано 2028 раз Последнее изменение Воскресенье, 19 февраля 2017 16:38
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+