Создаем шаблон для WordPress. Шаг 2: нарезка макета

Пиар: после создания своего шаблона для блога и самого блога вам будет полезна инструкция по начальной раскрутке блога.

В предыдущем посте из серии «Создаем шаблон для WordPress» мы анализировали psd-макет. Продолжим создание своего шаблона. Одним с основных этапов создания шаблона для CMS есть нарезка макета.

Для этого будем использовать программный продукт для работы с изображением «Adobe Photoshop CS3» так как мы имеем исходную картинку макета в формате *.PSD. Чтобы нарезать макет будем использовать инструмент «раскройка», который можно вызвать горячей клавишей «K» (в латинице).

Помните, что нарезка требует высокой точности.

Несколько упущенных пикселей могут создать вам большие проблемы в верстке или отнимут много времени в поиске ошибки, а в некоторых случаях вам даже придется начать нарезку с начала.

Первым элементом для нарезки идёт картинка с шапки макета. Для этого вызываем инструмент «раскройка» и тянем мышку с зажатой клавишей от края до края картинки рис. 4.

Рисунок 4:

Аналогичным способом нарезаем следующие элементы макета. При необходимости отключаем не нужные слои, чтобы убрать ненужный текст или картинку с фона. Чтобы вырезать фон для горизонтального меню нужно отключить текст «Звоните нам» и текст меню. Отключение слоев делается во вкладке слои нажатием мышки на кнопочку в виде глаза. На рисунке 5 мы отключили надпись «Звоните нам: (499)999-0135».

Рисунок 5:

Исходная картинка после выделения всех блоков имеет такой вид:

Для сохранения выделенной картинки нужно отключить все слои которые не нужные (описано выше) и проделать следующие действия:

Нажать «Файл –> Сохранить для Web».

В открывшемся окне выставляем все параметры как на рисунке выше и нажимаем кнопку «Сохранить».

В открывшемся окне выбираем путь, куда будем сохранять, и нажимаем «Сохранить».

Для создания шаблона были нарезанные такие элементы картинки:

Фон под контактным телефоном:

Фон не активных кнопок:Левый и правый фон активной кнопки:

Фон линии активной кнопки:

Вертикальная линия для разделения пунктов меню:

Фон для навигационного блока:

Фон заглавия навигационного блока:

Округление левого верхнего и левого нижнего угла информационного блока. Вырезан плашкой, чтобы округления были в браузере IE-6, а не только во всех нормальных браузерах 🙂 :

Фон футера:

Также еще была нарезана сама главная картинка, как показано выше.

Для удобства все нарезанные картинки сохраняем в отдельную папку под именем «img». После проведённого анализа макета и создания нарезки можно приступить к следующему этапу разработки шаблона для WordPress – создание HTML страницы.

Как я ее создал? Это вы узнаете в следующем посте из серии «Создаем шаблон для WordPress».

Возникли вопросы? Пишите в комментариях, на них обязательно отвечу или я или Игорь Чайка.

ОФФпост:

Вовочка спрашивает у мамы:

- Как правильно пишется? - "КакаЕшь", или "КакаИшь"?
- А тебе зачем?
- Хочу девочке записку написать.
- А что ты хочешь написать?
- Какаяшь ты красивая! 😀