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

Создание 2-х колоночного шаблона WordPress

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

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

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

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

kisa1.jpg

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

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

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

kisa2.jpg

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

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

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

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

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

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

kisa3.gif

Посмотреть рисунок в полный размер

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

kisa4.jpg

Посмотреть рисунок в полный размер

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

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

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

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

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

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

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

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

Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет
Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона
Создание 2-х колоночного шаблона для Вордпресс. Часть 3. Шапка
Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 5. Контент
Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

30.06.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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