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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот структура сайта, которую можно сверстать с помощью тегов <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.

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