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

После заливки градиентом шапки и футера можно вставлять картинки в шапку шаблона. Перед поиском картинок необходимо определиться с тематикой сайта. Для примера я покажу как может выглядеть шапка сайта на тему о заработке в интернете.

Добавим картинки в шапку сайта

Я примерно нашел и хочу вставить вот таки картинки:

Приступаем к работе. Картинки будем устанавливать по очереди. Начнём с первой. Сделаем из неё далёкое фоновое изображение на шапке. Открываем фотошоп, проходим вменю «файл — открыть». Находим в папке выбранную картинку, нажимаем «открыть». Картинка откроется сверху рабочей области шаблона. Картинка оказалась очень большой, но это не страшно. Выделяем её инструментом «прямоугольная область». Заходим в меню «редактирование — скопировать» и копируем изображение. Поскольку в фотошопе стало два окошка ( одно с картинкой, второе с шаблоном), то теперь на передний план выводим окно с шаблоном, сделав клик по окну с шаблоном. Дальше опять заходим в меню «редактирование — вставить» и на шаблоне появится эта картинка.

Картинка оказалась большого размера. Она больше, чем сам шаблон, её надо подогнать под размер шапки. Заходим в меню «редактирование — трансформирование — масштабирование» и уменьшаем размер картинки до размера шапки…

…и вставляем в саму шапку. Это будет фоном, в котором надо подкорректировать цветовую гамму. На данном этапе шапка шаблона будет выглядеть так:

Градиент на шапке был синего цвета, вот теперь корректируем до такого цвета. Описывать сам процесс не буду, только основное, а дальше только Ваша фантазия. Заходите в меню «изображение — коррекция» и уже в открывшемся меню надо пройтись по всем подменюшкам где можно изменять цветность, баланс цвета…в общем подгонять цвет картинки — фона до нужной кондиции. Последним штрихом будет ослабление непрозрачности. Попробуйте этот инструмент и Вы поймёте для чего он нужен.

После всех манипуляций с цветом, у меня получился вот такой фон шапки:

Теперь переходим ко второй картинке. Открываем файл картинки. Картинка оказалась с белым фоном. Ели просто вставить картинку, то придётся её закрашивать, т. к. белый фон не смотрится на этой шапке. Второй способ — это убрать вообще белый фон. Делается это следующим образом. После открытия файла картинки надо зайти в меню «слои — создать дубликат слоя». Сделав дубликат слоя, отключите основной слой. Теперь в панели инструментов выберите инструмент «волшебная палочка» и сделайте клик по белому фону картинки. Произойдёт выделение и нажмите клавишу Backspace (<==), весь белый фон исчезнет.

Картинка готова, теперь по вышеописанной схеме выделяем, копируем, вставляем, масштабируем и устанавливаем. У меня получилось так:

Действия с третьим рисунком описывать не буду, т. к всё по той же схеме. Просто напишу, что третий рисунок я копировал три раза, уменьшая каждый раз масштаб картинки. И вот что получилось:

Теперь остаётся поработать с текстом. Напишем название сайт, к примеру — Заработок в интернете. Тут можно пойти двумя путями. Первый — это сделать красиво оформленное название отдельно в фотошопе и вставить его как картинку. Второй — пишем прямо на шапке. Разберём второй способ

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