Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет

Автор: Владимир

Источник: Вебсовет

По многочисленным заявкам зачинаю цикл постов по теме «Как прикрутить к WordPress свой дизайн?» Так как тема довольно обширная по причине обещанного мною раскрытия всевозможных подробностей и полезностей этого увлекательнейшего занятия, то постов будет именно цикл, и появляться они будут постепенно по ходу дела. А начнем мы сегодня с самого творческого шага — рисования макета в Фотошопе.

Перед тем как начать непосредственно творить, скажу пару слов о предварительном наброске и вообще о разметке будущего блога. Во-первых, мы не станем придумывать велосипеды и ваять экстра-неординарный шаблон. Все уже придумано до нас и утвердилось в умах как некий стандарт. Отходить от него имеет смысл лишь в редких исключениях, когда вы на шаблонах съели не одну порцию собак. Это я о том, что вариаций макетов может быть три: в одну колонку, в две и в три. 4-х колоночный вариант рассматривать не будем, хотя видел и такие шаблоны.

Во-вторых, я все-таки очень рекомендую перед началом работы в Фотошопе нарисовать от руки будущий макет на листке бумаги. Пусть вы даже рисуете хуже Кисы Воробьянинова. Просто поверьте на слово — это полезно! Очень часто бывает так, что вроде вот идея есть, где-то в голове вертится, а открываешь прогу, смотришь в пустое поле, и все идеи как-то мигом улетучивается. У художников это называется «страхом чистого листа». То есть, надо начать, а никак. Поэтому просто берете клочок бумажки и рисуете обычный прямоугольник. Все. Начало положено. Дальше уже можно прикидывать, где и что будет.

Как я уже упомянул, вариантов разметки в основном три:

Вариантов разметки макетов в ВордПресс

Одноколоночный вариант больше подходит обычным дневникам, когда нет множества рубрик (категорий), блогролла (списка ссылок) и т.п. Хотя и в этом варианте можно использовать дополнительные блоки, но расположены они будут в самом низу (обычно в подвале). Чаще всего используют 2-х и 3-х колоночную разметку. Две колонки — это оптимальный вариант для небольшого блога, когда не требуется размещение рекламных блоков, и сам блог по характеру ближе к обычным дневникам. Три колонки — это уже профессиональный уровень, который позволяет достаточно комфортно разместить массу материалов как навигационного, так и рекламного характера.

В любом случае, какой бы вариант вы не выбрали, старайтесь придерживаться устоявшихся пропорций. Очень рекомендую ознакомиться с ними на сайте 960 Grid System и скачать себе PDF файл с примерами разметок (всего 180 кБ). В двух словах: ширина блога должна выбираться исходя из следующих размеров — 960, 880, 800, 720 пикселей (меньше нет смысла). Первые два подходят для трехколоночной верстки, вторые два — для двухколоночной.

В данном цикле мы будем собирать двухколоночный шаблон для блога на Вордпресс. Схематично шаблон состоит всего из 4 блоков: шапка, основной контент, сайдбар (колонка навигации) и подвал. Сайдбар может располагаться как справа, так и слева. Спорить о юзабилити сейчас не станем. Каждый выбирает местоположение этого блока исходя из собственных предпочтений. Мы приладим его справа. Вот такую картину маслом я набросал на обычном листке А4 и вам рекомендую сделать то же самое.

Макет шаблона для WordPress

Затем открываем Фотошоп и создаем новый документ размерами 800х800 пикселей с белым фоном. Если у вас до сих пор еще не включено отображение линеек в Фотошопе, то рекомендую сделать это немедля — View – Rulers (установить флажок). В настройках линеек нужно выставить пикселы — Edit – Preferences – Units & Rulers в окошке Rulers выбрать слово pixels. Теперь у вас в рабочем окне программы сверху и слева появились линейки с делениями в пикселах. Заметьте, что верхний левый угол документа расположен точно напротив нулевых отметок линеек.

Теперь наводим мышку на левую вертикальную линейку, нажимаем левую клавишу и «вытягиваем» тонкую цветную вертикальную полоску, перемещая ее на наш документ. При этом смотрим, чтобы эта полоска на верхней горизонтальной линейке совместилась с отметкой в 10 пикселей. Готово! Одну линейку мы установили. Точно так же поступаем и с другими (этих полосок из линеек можно вытянуть до бесконечности много).

Что у нас в результате должно получиться? Если смотреть на макет слева направо, то разметка должна быть такая: 10px, 540px, 20px, 220px, 10px. То есть, по краям макета будут отступы в 10 пикселей, основной блок будет шириной в 540, сайдбар — 220, а между основным содержимым и сайдбаром, соответственно, 20 пикселей.

Что касается размеров по высоте, то тут все на ваш собственный вкус. Шапка может быть как 100 пикселей по высоте, так и все 300. Подвал тоже. Руководствуйтесь здравым смыслом и таким соображением: шапка — это «лицо» блога, поэтому должно все-таки быть заметнее, нежели подвал. Хотя возможно вы захотите сделать все наоборот. Дерзайте!

Для нашего макета я взял размер шапки по высоте в 150 пикселей, размер подвала — 50. Высота основного блока и сайдбара будет нефиксированной и зависит от количества содержимого, что вы туда поместите. Говоря иначе — она будет растягиваться по мере наполнения материалами.

Вот такая «картинка» у меня получилась. Кто еще не осознал: линейки на макете существуют лишь для удобства работы и в готовом рисунке не отображаются

Макет шаблона для WordPress в Фотошопе

Теперь, руководствуясь бумажным наброском, наваяем простенький дизайн.

Готовый шаблон для WordPress

Совет 1. Каждую новую деталь рисуйте на новом же слое. Так вам будет удобнее ее корректировать.

Совет 2. Фон всегда (!) оставляйте отдельным слоем. Не нужно на нем ничего рисовать. Возможно, вы в процессе работы захотите изменить цвет или заливку фона. И если у вас на нем будет какая-то деталь, то вы ее просто потеряете.

Совет 3. Каждый слой не ленитесь именовать. Не оставляйте кучу Layer 1,2,3… и т.д. Иначе сами потом запутаетесь.

В заключении этой части несколько полезных замечаний:

1. Название блога в шапке может быть как рисованным (в том числе и текстовым, если вы используете необычный или нестандартный шрифт), так и шрифтовым. Если используете просто шрифт, то подбирайте из стандартной поставки Виндовза, иначе он будет отображаться у пользователей совсем не так, как вы задумали. Если же шрифт будет картинкой, то вы также сможете применить к ней тэг H1 и задать в свойстве alt=”Блог Кисы”. Если же вас все-таки сильно беспокоит поисковое продвижение блога, то можете оставить картинку и без тэга H1, а применить его к текстовой строке «Блог Кисы», но спрятать от глаз посетителя при помощи хитрого правила в CSS (об этом я расскажу по ходу дела).

2. В сайдбаре обычно расположен некий усредненный стандартный набор блоков: Рубрики (иначе — Категории), Ссылки, Страницы (хотя они же часто дублируются в горизонтальном меню в районе шапки), Свежие записи, Свежие комментарии и т.п. Поэтому в макете имеет смысл сразу же прикидывать расположение этих блоков, размер и шрифт заголовков. Возможно, вам захочется использовать иконки в качестве пунктов списка. Их тоже нужно сразу рисовать на макете и прикидывать самое оптимальное местоположение. Тем более, если вы собираетесь использовать вложенные списки (так называемые родительские и дочерние).

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

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

Один комментарий к “Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет”

  1. […] доктипа страницы и пр. Но сначала мы вернемся к первой части и подготовим наш макет, нарисованный в Фотошоп, с тем, […]

Оставьте свой комментарий

Страница 1 из 11