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

Создаем шаблон для WordPress. Шаг 1: анализ psd-макета

Партнерская программа Vulkanpartner

Worldpress создаем шаблонИтак, сегодня я открываю серию публикаций, посвященных созданию собственного шаблона для вашего блога на платформе WordPress. В ходе изучения данной темы мы пройдем путь от рисунка до функционирующего дизайна вашего блога. Интересно? Тогда не забудьте подписаться на обновления моего блога по RSS, дабы не пропустить ничего нового.

Вы в свою очередь можете задавать свои вопросы в комментариях или присылать их на e-mail. На все вопросы я постараюсь ответить. Кроме того, на ваши вопросы ответит, а также окажет практическую помощь в верстке, приглашенный мною мой друг – Игорь Чайка, работающий в данном направлении в сети уже более 6 лет.

Создание обычного HTML шаблона или шаблона под CMS начинается с анализа PSD-макета.

PSD-макет, это отображение сайта построенное в графическом редакторе AdobePhotoshop.

Макет вы можете нарисовать в любом другом графическом редакторе, никто вас не обязывает пользоваться Photoshop’ом. В своих статьях я буду работать именно с ним.

Рисунок 1:

Первые шаги в макетировании

На рисунке 1 представлен макет для создания шаблона Wordpress. Его можно условно разбить на четыре части: шапка (1), навигационный блок (2), информационный блок (3), футер (4). (Смотрите рис. 2)

Рисунок 2:

Верстка шаблона в Wordpress

Предварительный анализ макета показал, что вёрстка будет по ширине статической, а по высоте резиновой. Макет будет находиться по ширине – в центре с белыми (FFFFFF) краями, по высоте – прикреплен к верхней части окна браузера. Минимальная ширина окна 1030 пикселей (все эти данные выясняются на начальном этапе у заказчика или дизайнера, при этом какие-то недочеты должны быть сразу обозначены и по ним разрешен вопрос).

Шапка (верхняя часть сайта) макета состоит с большой картинки, представленной на рисунке 3 и горизонтального навигационного меню.

Рисунок 3:

Создаем psd шаблон длясайта

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

Навигационное меню состоит из фонового градиента (градиент – вид заливки с заданной прозрачностью и цветом определенных ключевых точек), а также активных кнопок навигационного меню, которые при наведении на них меняют фоновую заливку. Большую сложность в реализации представляют активные кнопки, которые имеют цельную градиентную заливку вместо дублированного градиента. Реализация таких кнопок всегда требует тщательного планирования и нагромождения HTML кода с CSS стилями.

Навигационный блок (блоки сайта) состоит из трёх вертикальных навигационных меню, а также новостного блока. Реализация этой части не представляет никакой сложности. Все вертикальные меню однотипные, что дает возможность просто копировать код несколько раз созданный однажды. При этом какое-то редактирование будет минимальным. Заголовок каждого блока это скорее всего будет не изображение полностью, а фон и надпись на нем выполненная в ходе верстки.

Информационный блок (блок сайта несущий информацию пользователю) состоит из нескольких подразделов, но так как в этом блоке текст будет меняться в зависимости от страницы, то для нас самое главное прописать все стили, которые мы здесь видим: заголовок подраздела (Tahoma, 12px, #7e2b00, жирный), горизонтальная линия (1px, #8b4118), основной текст (Tahoma, 12px, #484848, нежирный), обрамление картинки шириной в 3px (#7e2b00). Основной проблемой при создании информационного блока будут смещения информационного блока на шапку и футер шаблона. Также нужно сделать левый край блока округлым. Но все это реально и дальше вы убедитесь в этом.

Футер (footer– нижняя сноска, низ шаблона) на макете имеет только фоновую заливку, созданную с градиента с лева на право, но правилом хорошего тона будет предусмотреть последующею модернизацию сайта и создать пустые блоки, которые можно будет заполнить баннером статистики или любым другим элементом.

Итак, в конце данной статьи хотелось бы обратить внимание на следующее:
- Если вы заказчик верстки, то вы должны максимально подробно изобразить и подготовить к верстке psd-макет. Данный макет может быть представлен и в 2-х вариантах:

А) Когда он в спокойном состоянии (вы не предпринимаете на сайте никаких действий);

Б) Активное состояние (вы наводите курсор мыши на разные элементы дизайна и при этом они меняют свой внешний вид).

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

- Если вы верстальщик, то максимально сконцентрируйтесь. Обращайте внимание на каждый элемент, на каждый пиксель дизайна. Если что-то вам непонятно, то уточняйте у заказчика.

Это был первый шаг к созданию своего шаблона для блога. На что еще стоило бы обратить внимание? Задавайте свои вопросы.

Как натянуть макет на Wordpress?

Информация: в сети появился электронный калькулятор. С чем он работает: корни, дискриминант, квадратное уравнение. В голове у него формула и он всегда вдает правильное решение.

ОФФпост:

Вовочка, ты кого больше слушаешь, папу или маму?
- Маму!
- А почему?
- Она говорит больше... 🙂


Робот блога считает, что это может быть вам интересно:

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

   

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

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


  • Первый же вопрос. Как скоро ждать продолжение? =)

  • Продолжение следует, как пишут в фильмах... Подряд посты на 1 тематику, я естественно, писать не буду. Тематики должны мешаться. Это проверено на постах о комментировании. 🙂
    Пока готовьте вопросы свои.

  • Первый шаг достаточно простой. Хоть я и не верстальщик, но думаю тут справится каждый. Посмотрим, что будет дальше 🙂

  • С этого начинается каждая верстка. Порой именно данный шаг в последствии приводит к проблемам или недопониманиям. Не стоит из-за кажущейся простоты списывать его со счетов. 🙂

  • Создание обычного HTML шаблона или шаблона под CMS начинается с анализа PSD-макета. - а помоему создание шаблона начинается все таки с создания PSD -макета, и начинать эту весьма интересную тему стоило все таки с этого!

  • Отличная информация! Как всегда подробный пост 🙂 Жду еще подобных статей, Вовка. У Морковина, что-то подобное сейчас идет.

  • Если честно не слышал... Будем стараться дать нужную информацию.

  • Создание дизайна - это наверняка отправная точка, только о ней я уже писал... Ищите на блоге. 🙂

  • textwriter

    а мне из статьи только офпост понравился

  • Прочитал пост с интересом. Буду ждать продолжение, так как задумался о смене шаблона на блоге.

  • Интересная серия постов 🙂 Ради неё подписался на RSS 😀 Ждем продолжения!

  • оффпост? Это уже что-то... Значит то, о чем говорилось выше вы не смогли представить.

  • Продолжение будет, поверьте!

  • Erho

    крутотень! кажеться я эту команю знаю)))

  • Будем учиться с Вовкой!!!

  • У меня есть Вопрос! Может ради эксперимента сделаешь для моего блога шапку ?

  • Очень хороший пост! Очень полезно для новичка.

  • Ради эксперимента сделаю долларов за 50-100. 

  • Сергей

    Ссылка на электронный калькулятор отправляет на 404!

  • XAnTY

    исходя из опыта, смею сделать замечания.
    a. Ширина 1000 пикс.
    б. Шапку можно было бы порезать на куски высотой по 50 пикс, горизонтально, это позволило бы её грузить в несколько потоков на медленных соединениях...
    и по вашему блогу скажу с версткой что-то не так, грузиться неправильно!

  • Александр

    Здравствуйте. У меня имеется сверстанный шаблон в html с различными привязанными к нему стилями CSS. Хотелось бы узнать: как эти 2 файла можно прикрутить к CMS (wordpress) и возможно ли это вообще?... Подскажите "без опытному" новичку. Заранее благодарен.

Я в Google Plus

Блоггеру

Рекомендую

Мануалы

Опрос

А у Вас был творческий кризис?

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

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

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

SEO Powered by Platinum SEO from Techblissonline