DeVul

Создаем шаблоны. Часть 1-рисуем макет.

Небольшое вступление:  написать такой цикл статей желание было давно, да вот до непосредственно работы дело не доходило..
Продвинутые спросят: зачем нужны такие стать? вед все можно найти в интернете?
Да все очень просто – если вы знаете что и как и где искать то да.. большой проблемы вам не составит получить инфу по желаемой теме.. а вот что делать новичкам, которые не очень могут ддаже сформулировать запрос в поисковой системе?
Общаясь на форумах то и дело встречаю записи людей которые только начинают постигать тайны веб разработки и в большинстве случаев их посылают читать фак, гуглить гугл и так далее.. думаю каждый может вспомнить такую ситуацию когда наши старички «гуру» со злобой и даже с ненавистью отписываются в сторону новеньких) типа непонимаешь – не суйся..
Вот именно такую ситуацию я и хочу исправить в своих статьях. Надеюсь что вы меня поддержите.

Ну все.. лирическое вступление окончено пора бы и к делу перейти)

Как нарисовать макет сайта и что это такое.

Макет – это картинка, изображение будущего сайта, рисуется эта радость в графическом редакторе – каком? ну это вам выбирать. Я же покажу на примере фотошопа.

1. Придумываем и рисуем дизайн в photoshop.

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

Стоит определится в начале работ какой будет наш шаблон – с фиксированной или плавающей шириной.

Я выбрал с фиксированной шириной – 800px.

Поражазить вас красотой дизайна я не смогу, да и не преследую такой цели. Главное ведь понять.

Вот как выглядит наш новый шаблон нарисованный мною.

Теперь рассмотрим процесс превращения  pds макета в шаблон html.

Очень поможет нам такой инструмент фотошопа как «линейки» или rulers.

Включаем View–rules

Видим что появились линейки сверху и слева. Жмем правой кнопкой на одной из линеек и выбираем «пиксели».

Теперь разметим наш макет для последующего перевода в html код.

Для этого нкжо перетащить линеечки на макет.. вот как это выглядит у меня

Это поможет нам узнать размеры будущих блоков.

Теперь внимательно посмотрим на наш макет.

В моей теме всего 2 графических элемента – это rss иконка и логотип.

Все остальное мы сможем задать с помощью CSS.

Тогда вырежем сразу эти 2 элемента.

Вырезать можно с помощью crop

и сохраняем через опцию save for web.

Следует помнить – полупрозрачные сохраняем как png, обычные картинки – gif или jpg. Конечно же стремимся чтобы наша картиночка весила как можно меньше.

Ну вот, я сохранил оба графических элементаи можно приступать к следующей части работы – верстка html макета.