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:


  • А как нарезать в фотошопе картинку, расположенную не горизонтально, а, например, уголком вверх?

  • Chaika

    любая картинка (по размерах) - это прямоугольник или квадрат, других вариантов не бывает! Всё остальное делается путём создания прозрачного фона.
    Суть дела такова: надо вырезать прямоугольник, сохранить как прозрачный GIF или PNG,  потом с помощью ластика в фотошопе сделать ненужную часть прозрачной и вы получите картинку уголком вверх!!

  • Если нужное изображение часть другого изображения, то нормальный дизайнер всегда сделает дизайн слоями и наше изображение будет 1 слоем. Убираем не нужные слоя и оставляем нужный Далее кадрируем до нужного размера и вся любовь. 😉 

  • Профессиональная HTML верстка (WordPress, Joomla)

    http://danil-html.ru - отзывы, примеры.

  • july2010

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

  • Play8

    Как оптимизировать сайт под мобильные устройства читайте здесь: http://rozum.no/mobile-friendly/mobile-guide.html

Я в Google Plus

Блоггеру

Рекомендую

Мануалы

Опрос

Нужны ли работнику сети изделия Apple?

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

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

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

SEO Powered by Platinum SEO from Techblissonline