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

30.06
2008

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

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

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

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

Вебсовет

Digg it Bookmark it Stumble it add to technorati

Комментарии

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

  1. Виталий 30.06.2008 15:52

    Здравствуйте Игорь!
    Спасибо Вам, хорошее дело делаете. Очень трудно самому, без общения со специалистом сделать свой сайт. Я прочитал Вашу книгу “Блочная верстка” в PDF-ФОРМАТЕ, хорошая книга, но не все понятно. Теперь пришел к Вам на сайт набираться опыта. С уважением Виталий Горьков, г. Никополь.

  2. Игорь Квентор 30.06.2008 16:20

    Добрый день, Виталий!
    Рад, что книжка вам пригодилась. Будут вопросы - обращайтесь смело. Чем смогу - помогу.

  3. Никита 01.07.2008 13:39

    Здравствуйте!
    Отличная статья, спасибо большое!
    Ваши статьи действительно очень сильно помогают, спасибо вам за это!
    С нетерпением жду продолжения.

  4. Виталий 01.07.2008 23:39

    Добрый вечер Игорь!Три дня назад вышел в свет мой первый сайт, который я сделал по книгам издательства “Питер”. Дизайн сайта слабый, поэтому я хотел бы с помощью Ваших уроков его изменить в лучшую сторону. Но беда в том, что я совсем плохо знаю Фотошоп; сейчас займусь изучением( две книги я уже купил).
    У меня вопрос не по теме: я пользуюсь Moz. Firefox и там моя дом.страница отображается, как я и задумывал. А вот в IE там сплошные проблемы: у меня на компе сайт вообще не открывается, а у других( они мне пишут) происходят какие-то странности. Вы пишете, что надо использовать*{}, а где её поставить, если я писал код страницы без внешней таблицы стилей. Ответьте пожалуйста, мне хотелось бы исправить свои огрехи. Спокойной ночи.

  5. Игорь Квентор 02.07.2008 14:39

    Никита, вэлкам! :) Спасибо на добром слове!

    Приветствую, Виталий!
    Правило
    *{
    border: 0;
    margin: 0;
    padding: 0;
    }
    служит лишь для обнуления указанных свойств, не давая браузерам слишком своевольничать. Так как у вас сайт на “Народе”, то все эти правила вы можете найти непосредственно в коде индексной (и других) страницы между тэгами <head></head>
    Там же и глюк исправите. В ИЕ не отображается фон. Это из-за того, что в правиле для body фон указан с ошибкой:
    background:#4682b4 url(zent.jpg)no-repeat;;
    Между закрывающей скобкой адреса и словом no-repeat должен быть пробел. И повторная точка с запятой в конце - лишняя.

  6. Виталий 02.07.2008 22:13

    Добрый вечер Игорь! Спасибо Вам огромное за совет, сейчас буду исправлять. У меня даже на душе посветлело.Будьте здоровы, до свидания.

  7. Игорь Квентор 03.07.2008 19:09

    Не за что, Виталий! :) Рад, если смог чем-то помочь.

  8. evo 04.07.2008 18:19

    Спасибо за совет. Рисунки клевые))

  9. Виталий 19.07.2008 15:28

    Добрый день Игорь!
    Поставил я пробел после скобки, проверяю, не работает. Написал код с использованием внутренних стилей, открылось и шапка, и меню, и текст. Но мне очень хочется выполнить работу с помощью внешних стилей, как у Вас в книге. Может я еще где-то ошибся, посмотрите, пожалуйста. А если надоел, проигнорируйте это письмо. С уважением Виталий.

  10. Игорь Квентор 19.07.2008 23:20

    Вышлите тогда мне в мыло оба файла - css и саму индексную страницу, я посмотрю.

  11. Илья 06.08.2008 07:36

    Здравствуйте!
    Сейчас снова берусь за работу: хочу пользуясь Вашими советами сделать для WP свой дизайн. Материал HTML и CSS по книге о блочной верстке уже есть, изображения тоже. Но не могу понять, в какой папке должен находиться весь рабочий материал для WP чтоб можно было просматривать в процессе.

    У меня одна папка с WP уже есть, там лежит та же тема, что и закинута в сеть (проба), а если надо работать над другим материалом, другой темой, это как надо делать? Регистрировать новую базу данных, входить в WP как-то по- другому, или что-то еще?
    Чувствую, что упускаю что-то важное.
    Или если работа идет только над темой (без текстового наполнения, только шаблон), то это не имеет значения. Но как просматривать?

  12. Игорь Квентор 06.08.2008 10:19

    Здравствуйте , Илья.
    Работать точно так же, как и с первой темой. В папке WP у вас есть папка wp-content в которой, в свою очередь, есть папка с темами themes. Туда и помещаете любую другую тему. Потом просто активируете ее в админпанели и работаете с ней.

  13. Илья 06.08.2008 12:45

    Помещаю тему в эту папку, активирую ее тем что меняю выбор темы? Тогда эта тема заменяет предыдущую. А есть ли возможность работать одновременно с двумя темами?
    Вот сейчас беру новую тему, закидываю ее с ту же папку с темами, активирую ее - у меня теперь другая тема, а прежняя недоступна…

  14. Илья 06.08.2008 13:10

    Наверное нужна еще одна папка с WordPres (может быть с другой версией, более новой)?

  15. Игорь Квентор 06.08.2008 19:29

    Все верно, активировать можно одновременно только одну тему. А зачем несколько? Не станете же вы одновременно редактировать две темы. А переключиться с одной на другую - дело пары кликов :)

  16. Илья 07.08.2008 05:19

    Спасибо! Удалось разобраться. А то никак не доходило, что тема - это “шкурка”, а начинка сайта - уже другое. При смене оформления содержание-то остается!
    Пишите дальше, пожалуйста, продолжение! Такого материала как у вас в сети больше нет.

  17. Игорь Квентор 07.08.2008 11:21

    :) Окей! Скоро будет продолжение.

Трэкбеки

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




Поиск

Рубрики

Пузомерки





Blog Catalog

DMOZ

Каталог дизайнерских блогов