Весьма интересный плагин для Photoshop, который предназначен для автоматической верстки PSD-файла в HTML-страничку. От «верстальщика» требуется всего лишь нажать на кнопку, подождать пару минут и получить на выходе готовый CSS-шаблон.

Для начала дословные обещания разработчиков:

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

Требования:

Photoshop 6 and up (including Photoshop CS3 & CS4)

Photoshop Elements 3, 4, 5 or 6

Немного о самом плагине:

Закладок, как и настроек, в плагине не очень много, поэтому разобраться с ними не составит особого труда. Наибольший интерес для работы представляют закладки Pages и Compression. На первой можно выбрать выравнивание макета на странице, прописать title, а также выбрать фоновые цвета. На второй же выбрать сжатие и формат для сохраняемых изображений при нарезке. После всех манипуляций можно нажать кнопочку Build и полюбоваться полученным результатом. Исходный XHTML и CSS-код соответствует требованиям W3C.

Каждый слой в PSD-файле преобразуется в отдельный div (название слоя станет названием CSS-идентификатора или класса), который располагается относительно других с помощью абсолютного позиционирования. Тут уже задача для дизайнера - заранее склеить все слои, которые должны выводиться в одном блоке, что, в принципе, не сложно, если есть способность «видеть» как должен выглядеть макет в HTML.

Дизайн должен быть заранее подготовлен к верстке. Тоесть в соответствии с документацией, слоям должны быть прописаны определенные названия.

Все слои с текстом преобразуются в текст на странице (кодировка UTF-8), но с кириллицей как всегда проблема - все русские буквы почему-то прописываются HTML-сущностями. Так, что, с редактированием статичного текста впоследствии могут быть проблемы. Лучше его заранее поменять на «нормальный». Свойства текста полностью копируются из исходника, поэтому лучше сразу подумать об иерархии, читабельности и цветах.

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

Все изображения вставляются на страницу с помощью свойства background-image.

Он идеально подходит для создания сайтов-визиток и страниц-заставок, так как на выходе получится именно то, что нарисовано в дизайне без лишних усилий и затрат времени. Профессионалам пригодится в хозяйстве для того, чтобы просто «выключать мозг» на некоторых проектах, а дизайнерам, которые понятия не имеют о XHTML и CSS-верстке - для собственных небольших сайтов.

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

Перед использованием плагина обязательно прочитайте требования к исходному файлу .PSD, иначе он не сможет создать html-страничку.

Название: SiteGrinder

Версия: 2.1.1

Разработчик: www.medialab.com

Интерфейс: английский

Операционная система: Widows XP/Vista

Размер файла: 43.7mb

Скачать