WPTDS: дизайн хэдера

Нет комментариев 15.03.2007

Вы уже, наверное, отчаялись дождаться следующей серии WP Theme Design Show?

У меня есть некоторые оправдания. Во-первых, было много заказов на дизайн. Одни доделаю, как тут же появляются другие. Во-вторых, задумав сделать скринкаст, я все не мог найти хорошего момента сесть и сделать его. Когда наконец такой момент появился - я скринкаст таки сделал. Без голоса, 11-минутный ролик в финале завесил на 560 Мб. Плюнул, и решил делать по старинке, скриншотами с описанием. Что и представляю вашему вниманию.

Итак, приступим к дизайну хэдера.

Запускаем Photoshop и создаем новый документ (File > New). В появившемся диалоговом окне выбираем размеры - 800 на 800 пикселей.

Теперь нам нужно сделать базовую разметку. Делаем это следующим образом (рис. 1). Берем инструмент Rectangular Marquee Tool (M) [1] и рисуем от левого края “блок” шириной 75 пикселей. Эти 75 пикселей можно точно отмерить с помощью панели Info (F8) [2]. Почему 75? Ширину контентной части блога определим в 650 пикселей (в принципе, значение может быть любое, на ваш выбор). 800 (ширина документа) - 650 = 150 делим пополам (отступ справа и слева) = 75.

К полученному “блоку” в 75 пикселей из линейки сбоку (если она не видна, нажмите CTRL + R) “вытягиваем” направляющую (рулер). Рулер должен как бы “прилипнуть” в правому краю нашего “блока” [3].

По тому же принципу создаем и остальные рулеры (рис. 2). Справа - 75 пикселей. Сверху - 140 (хэдер) и 35 (меню, внутри хэдера)

Теперь зальем рабочее поле белым цветом. Идем Edit > Fill. В диалоговом окне (рис. 3) выбираем Background Color [2] (потому что у нас на данный момент черный - это foreground, а белый - background [1]). Ок (рис. 4). Если вы при создании документа выбрали белый фоновый цвет (а не transparent как это сделал я), то этот шаг можно пропустить.

Рисуем заготовку для хэдера. Немного уменьшаем масштаб, чтобы видеть все рабочее поле - CTRL + "-".

Берем инструмент Shape (U) (рис. 5) [1], выбираем прямоугольный шейп [2] и рисуем прямоугольник так, чтобы его нижний край у нас “прилип” к горизонтальному рулеру (который 140 пикселей, помните?) [3], а остальные края выходили за пределы документа [4].

Так как первый цвет у нас черный (скучный цвет, и он автоматически применился к новому шейпу), нам надо изменить цвет заливки шейпа (рис. 6). Двойной клик по иконке слоя в палитре слоев (F7) [1] и на палитре цветов выбираем цвет 2Е2Е2Е (темно-серый такой) [2].

Добавляем эффекты к нарисованному хэдеру (рис 7). Кликаем на иконку эффектов [1] и выбираем сначала Pattern Overlay [2] - добавим текстурку…

В новом диалоге (рис. 8) выбираем (кликом на стрелочку вниз) определенный паттерн [1] (я потом заманаюсь стыковать этот паттthy на кодинге) и выбираем режим смешивания Multiply [2] (для того, чтобы смешать серый цвет хэдера и паттерн). Можете с режимами поэкспериментировать. Если чекнута галочка Preview [3], все изменения вы будете сразу видеть. НЕ НАЖИМАЕМ “ОК”.

В этом же окне кликаем на Drop Shadow (рис. 9). Прозрачность тени - 45% [1], угол падения - 90° [2], расстояние 1, размер 10 [3]. НЕ НАЖИМАЕМ “ОК”.

В этом же окне кликаем на Stroke (рис. 10). Размер - 1 [1], положение - внутри блока [2], цвет - белый [3].

Вот теперь кликаем ОК и получаем рис. 11.

Приступаем к менюшке. Так же как мы рисовали большой хэдер, рисуем небольшой прямоугольный шейп с нижней стороной по рулеру в 35 пикселей. Скорее всего, фотошоп запомнит параметры предыдущего шейпа и вы нарисуете такой же темно-серый, с тенью, паттерном и границей (рис. 12). Нам этого не надо.

Поэтому, так же как мы меняли цвет шейпа выше (двойной клик по иконке) делаем белый фон шейпа (рис. 13) [1], изменяем его прозрачность до 20% [2], а эффекты удаляем, кликнув правой клавишей мыши по слою и выбрав Clear Layer Style.

Но стили (эффекты) нам понадобятся, в частности Stroke (рис. 14). Размер - 5 [1], положение - снаружи [2], цвет - серый (9С9С9С) [3]. Ок.

Теперь пишем пункты меню (рис. 15). Берем инструмент Type Tool (T) [1], выбираем шрифт Georgia [2], размером 11 pt [3], белого цвета [4], несглаженный [5] (потому что будет не картинка потом, а текст), пишем пункты меню [6]. На данном этапе на расстояние между пунктами меню можно забить, потому в стотыщраз проще “играть” этим расстоянием на кодинге (в CSS), чем сейчас барабанить по пробелу. Написав текст, жмем на кнопку на панели вверху (галка такая) или CTRL + ENTER. И делаем этот текстовый слой прозрачностью 50% [7].

Теперь нам надо выровнять меню относительно хэдера (рис. 16). Берем уже известный нам инструмент (М) [1] и “рисуем” выделение по крайним вертикальным рулерам, по верху и по низу, где у нас меню заканчивается [2-3].

Проверьте, чтобы в палитре слоев был выбран именно текстовый слой.

Теперь берем инструмент Move Tool (V) (рис. 17) [1] и помощью кнопочек [2-3] выравниваем наш текст относительно сделанного выделения (горизонтально и вертикально).

Переходим к “логотипу” (рис. 18). Берем (T) [1], выбираем шрифт [2] (в реальности выбор шрифта может занимать и полчаса и час), размер [3], межбуквенное расстояние (кернинг) [4], цвет [5], сглаживание [6]. Пишем “логотип” [7], и (так же как выше) с помощью (M) [8] и (V) [9] выравниваем логотип по центру.

Добавляем слоган (рис. 19). Тем же шрифтом, что и логотип (только размер поменьше [1] и кернинг другой [2]) пишем “ежедневно . интересно” (с точкой в качестве разделителя) [3] (слоган я сам придумал, а насчет “ежедневно” пусть Влад отдувается). И делаем прозрачность слоя 50% [4].

Теперь, взяв инструмент (V), будем двигать слоган и думать, куда его поставить. Самое лучшее место для него - ровно под надписью “Подробно”. Но нам мешают “свисающие” черточки от буквы Д.

Тогда сделаем так. Заменим Д (русскую) на D (английскую, у которой ничего не “свисает”) (рис. 20) [1] и сделаем эту D ярко-синим цветом 0095ЕА [2] (который потом можем использовать в качестве второго цвета, например для ссылок).

Кликаем на слое со словом “Подробно”, зажав CTRL (рис. 21) - это выделит все слово [1]. Выбираем в палитре слоев наш слоган и выравниваем его (уже выше было как это делается) горизонтально относительно “логотипа” [2]. Снимаем выделение - Select > Deselect (или CTRL + D) и курсорными клавишами двигаем наш слоган немного выше (курсорными точнее получится, чем мышкой).

Совсем пусто в хэдере.

Добавим небольшой нюанс (Кирсанову привет) к нашему слогану. Выбираем в палитре слоев наш “логотип” (рис. 22) [1] и ставим рулеры слева и справа от него [2-3] (так как у нас выбран слой, рулеры должны как бы “прилипнуть” к слову). Если не прилипает - View > Snap в помощь.

Увеличиваем (Z или CTRL + "+") область возле логотипа, чтобы удобнее было работать с мелкими элементами (рис. 23). Создаем новый пустой слой [2] (SHIFT + CTRL + N или иконка внизу палитры слоев [1]). Берем инструмент Pencil (B) [3] размером в 1 пиксель [4] белого цвета [5] и рисуем две тонкие полоски слева и справа от слогана [6-7]. И делаем прозрачность этому слою в 30% [8].

Все равно мало элементов.

Берем уже знакомый нам инструмент шейп (U) (рис. 24) [1], выбираем его вариант под названием Custom Shape [2] и из списка выбираем шейп, который будет на следующем скриншоте [3].

Зажав SHIFT, чтобы шейп получился пропорциональным, рисуем небольшой белого цвета шейп (рис. 25). Как было уже описано выше, выравниваем его по горизонтали относительно логотипа и поднимаем немного выше, так чтобы нижние концы поместились между буквами логотипа.

Все равно чего-то не хватает.

Дублируем этот слой (шейп) с помощью Layer > Dulicate Layer (или CTRL + J). Вызываем Edit > Free Transform (или CTRL + T). Шейп у нас окружается границей и маркерами, за которые его можно изменять (рис. 26). Поместив курсор примерно в центр шейпа (чтобы стрелочка появилась), двигаем наш шейп влево, так, чтобы он “прилип” к нижнему рулеру меню и левому общему рулеру [1]. Теперь, зажав SHIFT (для пропорциональности) за нижний правый маркер “растягиваем” шейп так, чтобы правая его граница совпала с общим правым рулером [2]. Enter - применяем изменения.

Шейп у нас закрыл все, что можно. Значит, надо его “задвинуть”.

На палитре слоев берем этот большой шейп (слой) и “тянем” вниз, чтобы поставить его ровно над слоем хэдера (темным). Теперь “вставляем” (группируем) шейп и хэдер. Layer > Group with previous (или CTRL + G) (рис. 27). В палитре слове такая группировка будет обозначена стрелочкой [1]. Мы видим, что шейп как бы “обрезался” по границам своего контейнера (темного хэдера) [2], хотя на самом деле шейп жив-здоров и ничего не потерял. Двигаем шейп немного вниз и задаем ему прозрачность в 10% [3].

Нажимаем TAB (чтобы спрятать временно все панели) и CTRL + H (чтобы спрятать рулеры) и любуемся тем, что получилось.