23 Июн 2013

Адаптивный шаблон: от Photoshop до WordPress. Часть 1.

Предлагаю вашему вниманию замечательную серию уроков по созданию адаптивного шаблона для WordPress. Эти уроки созданы в 2012 году Adi Purdila, который доступно и пошагово рассказал, как создать современный адаптивный шаблон от Photoshop до WordPress. Мы узнаем, как создать современный дизайн на основе базовой сетки в Фотошоп, о работе с адаптивным дизайном, об усовершенствовании рабочего процесса кодирования для WordPress, о создании плагина и о многих полезных вещах, которые вам обязательно пригодятся.
Уроки Adi Purdila давал в видео формате. Я решила их перевести и предложить вам в текстовом формате. Видео на языке оригинала будет предложено вам в конце статьи.

Итак, приступим!

Часть 1. Начинаем с Фотошопа.

Урок 1. Структура сетки и шапка.

Окончательный наш дизайн будет выглядеть таким образом:

Adaptive-Index-s

Создаем новый документ размером 1300px х 1200px. Подключаем к документу готовую сетку, так называемую Bootstrap grid (Не правильный ID.), с 12-ю статичными колонками и с базовыми горизонтальными направляющими в 21 px.

Почему 21px? Базовые направляющие рассчитываются, исходя из размера шрифта, который вы планируете использовать. Высота должна быть приблизительно 1.4 - 1.5х основного шрифта. Т.е. если ваш шрифт будет составлять 12px, то базовые направляющие будут 18px, если шрифт 14px, то базовые направляющие соответственно 21px и т.д. В css-стилях базовые горизонтальные направляющие являются не чем иным, как высота линии (line-height). В нашем случае мы будем использовать шрифт в 14px и высоту линии в 21px.

Начинаем. Скрываем сетку и создаем фон для нашего документа цвета #F7F8F8. Называем слой «Фон». Затем, кликнув правой кнопкой мыши на этот слой, преобразовываем его в смарт-объект. Затем идем в Фильтр-Шум-Добавить шум и в открывшемся окне ставим такие настройки :

noise

Создаем новую группу для нашего фона и назовем её «Топ».

Теперь приступим к топ-меню. Внутри группы «Топ» создаем группу «Топ-меню». Теперь при помощи инструмента «Прямоугольник» создаем основу нашего меню размером 1300px на 100px. Помещаем прямоугольник на самый верх нашего документа и закрашиваем в цвет #2B3039. Следующий шаг – придаем узор нашему прямоугольнику. Идем на функции слоя – Наложение узора. Выбираем указанный на изображении узор и устанавливаем прозрачность 60%. Получаем вот такой узор. Скачать узор можно здесь.

pattern

Далее, на нашем топ-меню мы создаем текст Ссылка 1 – Ссылка2 – Ссылка3 цветом #C9C9C9, шрифт Verdana Regular размером 12px. Размещаем его таким образом, включив слой Сетка:

links

Теперь уменьшаем путем трансформирования высоту нашего топ-меню до третьей горизонтальной базовой линии и получаем вот такую картинку:

links-2

Теперь переходим к лого. Создаем в группе Топ новую группу и называем её Лого. Пишем слово Adaptive шрифтом, например, Book Antiqua размером 30px и цветом #2B3039. Размещаем его таким образом:

logo

Отключаем сетку и продолжаем. Теперь сделаем поле для рекламы справа от лого. Создаем новую группу и назовем её Топ-реклама. Для этого нам нужен инструмент Прямоугольник, размером 468px х 60px белого цвета. Придадим ему стиля (цвет #D7D7D7):

stroke

И внешнее свечение черного цвета #000000:

outerglow

Теперь размещаем наше поле для объявления следующим образом:

ad

Теперь создадим Главное меню. Создаем группу с таким названием и инструментом Линия рисуем линию размером и цветом #EBEBEB. Называем её разделитель. Размещаем таким образом, как показано ниже:

top-line

Идем далее. Создаем текстовые ссылки меню шрифтом Verdana Bold, размером 12px, цветом #2B3039 и размещаем их таким образом:

main-menu

Теперь нам надо выделить нашу шапку. Создаем новый слой в группе Топ, опустим его на самое нижнее место в группе и назовем его топ-фон. Инструментом Выделение создаем выделение, как показано на рисунке ниже и закрасим его белым цветом.

header-bg

Теперь придадим этому слою стили. Обводку, внутреннее и внешнее свечение настраиваем согласно рисункам

header-innerglowheader-oterglowheader-srtoke

Теперь мы видим внутри нашей шапка светло-серую рамку. Нам она нужна только в нижней части нашей шапки. Поэтому мы путем трансформирования просто выводим боковые рамки за пределы нашего листа.
transform

В итоге проделанных выше манипуляций у нас должна получиться вот такой результат:

header-itog

Идем далее и создадим выпадающее меню. В самом низу группы Топ создаем новую группу Выпадающее меню. Берем инструмент Прямоугольник и рисуем прямоугольник размером 170px на 120px белого цвета. Полученному прямоугольнику копируем стиль нашего поля рекламы. Создаем ссылки подменю шрифтом Verdana Regular, размером 14px, цветом #2B3039. Размещаем так, как указано на картинке ниже. Затем создаем новый слой, называем его Разделитель, используем цвет #D7D7D7 и проводим Инструментом Линия линию в пределах нашего выпадающего меню.

drop-down

В заключении, создадим еще один слой в нашей группе и назовем его hover – так будет выглядеть наше меню при наведении. Обозначим выделением кнопку Подменю2 и закрасим цветом #FAFAFA.

Вот, что получилось у нас в итоге:

urok1-itog

Видео урока 1 "Структура сетки и шапка" на английском языке

Понравилась статья? Поделись с друзьями!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.