Создание шаблона для WordPress (часть 4)

шапка сайта

Как была нарисована шапка в нашем макете?

Для начала я просто перелопатил кучу сохраненных файлов с классными дизайнами буржуйских сайтов и нашел один очень подходящий градиент в темно-синих тонах. Я запустил маленькую утилитку Pixie, которой очень удобно находить код цвета просто нацелив указатель мыши на любую точку понравившегося рисунка. Так я определил два нужных оттенка для будущего градиента в шапке: #2D3F49 и #15191C.

Затем я выставил эти два цвета в палитре Фотошоп®, включил инструмент Gradient Tool, установил в нем режим Radial Gradient и провел мышкой от центра шапки к правому краю. Получился своеобразный эффект подсветки центра шапки, а края как бы ушли в тень. Затем на другом слое я обычной шейповой фигурой (Custom Shape Tool) нарисовал ярко-синий перчик, рядом сделал надпись из пары слов: ice и pepper, потом объединил все слои кроме фона и также затенил получившееся лого градиентом. Заголовок и описание набраны обычным шрифтом Arial, хотя буквы были сдвинуты ближе на -50. Список страниц справа был выделен, и на новом слое также залит светлым градиентом из нескольких пастельных цветов. Как потом реализовать эти цвета при верстке я расскажу позднее.

Затем я выключил отображение слоев с логотипом, заголовком, описанием и списком страниц, оставив только фон. Если кто не помнит как выключить слой, подсказываю: в панели слоев Layers есть иконка глаза. Кликнув по ней, мы данный слой выключаем. Соответственно, изображение данного слоя становится невидимым. Что нам и требуется. Далее при помощи инструмента Crop Tool мы выделяем всю шапку целиком, нажимаем клавишу Enter и получаем фон для шапки. Сохраняем его с именем bg-header в папку с именем images. Эта папка потом будет включена в состав шаблона.