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

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

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

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

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

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

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

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

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

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

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

макет сайта

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

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

Включаем View—rules

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

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

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

lineiki

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

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

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

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

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

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

crop

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

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

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

Запись опубликована в рубрике Вёрстка, Разговорчики. Добавьте в закладки постоянную ссылку.

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

  1. Vattum говорит:

    Я делаю чуть-чуть не так. Использую два графических редактора. В векторном Corel Draw (стара-страя простая версия) рисую линии и рамки. Потом коныертирую в растровую графику и дальше делаю в Adobe Photoshop (старая 6 версия — компактная и достаточная) и делаю так же как вы. Вместо Corel Draw пробовал использовать даже рисование в MS Word. Для простых дизайнов вполне годится. Такие шаблоны даже у меня скачивали и использовали. Такой шаблон можно сделать за час и даже быстрее.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *