17 Сен, 2010
Категории: Wordpress, Верстка
Автор: Вовка

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

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

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

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

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

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

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

Рисунок 4:

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

Рисунок 5:

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

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

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

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

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

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

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

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

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

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

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

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

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

Фон футера:

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

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

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

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

ОФФпост:

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

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

Похожие записи в блоге:

   

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.

Комментирование Facebook:


Блоггеру

  • Gogettop - уникальный сервис продвижения вечными ссылками с максимальной эффективностью и рассрочкой платежа на 12 месяцев. Эффективность естественных вечных ссылок очень высокая. Продвижение становится еще доступнее.

Опрос

Какая из социальных кнопок дает, по вашему мнению, больше пользы сайту?

Просмотреть результаты

Загрузка ... Загрузка ...

Вовкин блог на Facebook