Что такое psd шаблон и как его правильно верстать?

Конечно, не обязательно знать, как сверстать шаблон из psd. Но данные знания могут пригодиться любому владельцу веб-сайта. Всякое бывает в жизни!

Что такое psd шаблоны

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

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

Разработка шаблона psd для веб-сайта должна происходить с учетом функций воссоздания его дизайна при помощи языка html и css. Вот некоторые характеристики, которыми должен обладать качественный шаблон:

  • Каждый элемент дизайна должен быть выполнен на отдельном слое – структура шаблона становится видна при его раскрытии в Фотошопе. При помощи слоев все части дизайна можно легко редактировать независимо друг от друга.

Благодаря многослойности изменение одной части шаблона никак не отразится на всех остальных его элементах.
Что такое psd шаблон и как его правильно верстать?

  • Рисунок шаблона сохраняется в формате psd(реже tiff) – только данные графические форматы поддерживают многослойную структуру картинок. Остальные являются лишь алгоритмами сжатия графических объектов;
  • Вложенность – все слои должны быть сгруппированы по принадлежности к определенному структурному элементу дизайна(подвал, шапка, меню);
  • Приоритет однородных тонов – для фона в шаблоне лучше использовать однородные повторяющиеся тона, которые можно легко без труда отобразить при помощи html и css;
  • Как можно меньше фоновых картинок – использование в виде фона полновесных рисунков сильно увеличивает объем всей страницы. А, следовательно, и время загрузки веб-сайта. Особенно критично это требование для шаблона мобильного ресурса;
  • Использование направляющих – использование направляющих при выравнивании элементов psd шаблонов для веб-сайтов будет обязательным. Это во многом облегчает процесс верстки, когда некоторые части дизайна вырезаются и используются как картинки для фона:

Что такое psd шаблон и как его правильно верстать?
Что такое psd шаблон и как его правильно верстать?

  • Приоритет стандартным шрифтам – надписи лучше наносить стандартным набором шрифтов. При использовании редкого шрифта его файл должен прилагаться к шаблону;
  • Меньше нестандартного форматирования – изменять можно лишь стандартные настройки текста(размер, семейство, интервал). Искажение текста при помощи инструментов графического редактора(выгибание и иные эффекты) приведут к тому, что надпись будет использована как фоновый рисунок. А это ведет к увеличению веса всего шаблона:
Что такое psd шаблон и как его правильно верстать?
  • Оптимальные размеры – по ширине psd шаблон для веб-сайта должен быть не менее 1000 пикселей. При этом ширина фонового рисунка не может превышать указанную величину. Иначе это может привести к искажению выведения шаблона в браузере.

Шаблоны для баннеров

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

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

Благодаря послойной структуре шаблон баннера без труда редактируется. Без нарушения общей структуры можно без труда сменить все надписи и рисунки.
Что такое psd шаблон и как его правильно верстать? Но создать шаблон баннера под силу не только профессионалу, но и обычному посетителю. Для этого можно использовать ряд специальных онлайн-сервисов. Одним из них будет веб-сайт bannerfans.com:
Что такое psd шаблон и как его правильно верстать?

Основы верстки

Рассмотрим на упрощенном примере, как происходит верстка. Для этого возьмем простой двухколоночный шаблон. В его шапке размещен логотип веб-сайта, который мы вырежем, и будем использовать как фоновое изображение. Остальные части шаблона будем верстать при помощи html, а стили и размеры установим классами css:

Что такое psd шаблон и как его правильно верстать? Вот структура веб-сайта, которую можно сверстать при помощи тегов <div>. Каждая из частей шаблона помещена в отдельный слой. Боковая панель и контент расположены внутри слоя-контейнера:

<div class="header"></div><div class="pages"><div class="content"><h2>Содержимое</h2></div><div class="sidebar"><h2>Боковая панель</h2></div><div class="foot"></div></div><div class="footer"><h2>Подвал</h2></div>

Сейчас рассмотрим стилевые параметра, заданные при помощи классов css:

.header { margin-left:auto; margin-right:auto; margin-bottom:10px; width:1000px; height:100px; border:1px solid #000000; background: #009966;background-image: url(img/1.gif); }.pages {   margin-left:auto;     margin-right:auto;     width:1000px;    }.content {    margin-right:10px;    width:806px;    height:450px;    border:1px solid #000000;    background: #999999;    float:left;    }.sidebar {    width:180px;    height:450px;    border:1px solid #000000;    background: #FF9900;    float:left;    }.foot {    clear:both;    }.footer {    margin-top:10px;    margin-left:auto;    margin-right:auto;    width:1000px;    height:50px;    border:1px solid #000000;    background: #333399;    }

Для каждого слоя в описании классов при помощи свойств width и height устанавливаются размеры. Цвет фона задается настройкою background.

Позиционирование элементов осуществляется значениями нескольких полей ввода:

  • margin-top – отступ от верхнего края окна браузера.
  • margin-left – от левого края.
  • margin-right – правого края.

Для шапки сразу же устанавливается цвет и фоновое изображение. Рисунок вырезается из шаблона psd для веб-сайта и помещается в отдельную папку. Путь к файлу указывается в поле ввода background-image через url.

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

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

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