Exill все записи автора SiteGrinder 2 заменит HTML-кодеров? Обзор плагина для Photoshop

Хочу рассказать о своем знакомстве с весьма интересным плагином для автоматической верстки PSD-файла в HTML-страничку (а если точнее — в формат XHTML 1.1). От «верстальщика» требуется всего лишь нажать на кнопку, подождать пару минут и получить на выходе готовый CSS-шаблон!
Для начала обещания от разработчиков (дословно):
SiteGrinder может делать почти все, что Вы хотите. Он может не только верстать странички, но и создавать целые сайты. Он поддерживает стилизацию текста с помощью CSS, создание гиперссылок, выпадающих меню, галерей изображений, всплывающих окон, строит контактные формы, вставляет на сайт Flash, слайд-шоу и многое другое.
Заинтриговали? Тогда качаем бесплатную демо-версию (17,2 MB) и начинаем разбираться.

Установка и настройка плагина
В скачанном архиве находится exe-файл, поэтому особых проблем с установкой возникнуть не должно (он автоматически определит где находятся плагины для Photoshop на Вашем компьютере). Я инсталлировал в CS2 и CS3 — плагин нормально работал в обеих версиях.

После установки открываем Photoshop, открываем свой макет сайта (вообще-то он должен быть подготовлен к обработке плагином, но об этом ниже) и запускаем плагин (File -> Automate -> SiteGrinder 2). Произойдет проверка макета и Вам выведут предупреждение об ошибках, если таковые имеются, со ссылками на документацию, как их устранить.



Также, на закладке Report, есть примеры «типичной» подготовки макета к автоматической верстке.

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

Ах да, не удивляйтесь, но бесплатно порадоваться успехам нам не позволят — весь CSS-макет будет покрыт водяными знаками :(

Как это работает?
Из примерно 15–20 моих тестовых попыток, половина показала более-менее приемлемые результаты (возможно из-за того, что я особо не занимался подготовкой макетов к верстке и не следовал некоторым рекомендациям). Во всех случаях XHTML и CSS-код соответствовали требованиям W3C.

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

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

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

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

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

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

Вывод
Мне не с чем сравнить SiteGrinder 2, потому что ничего подобного я раньше не видел, а сравнивать с WISYWIG-редакторами не стану. Так как тут процесс полностью автоматизирован. Лично мне, плагин понравился, несмотря на то, что в глаза сразу бросаются многие его недостатки. Надеюсь в последующих версиях он станет только лучше.

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

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

Немного о грустном
На данный момент существует две версии SiteGrinder 2: Basic и Pro (отличаются функционалом). И приобрести их можно на официальном сайте medialab.com за $129 и $349 соответственно. Быстрая пробежка по торрентам в поиске взломанной свободной версии не дала никаких результатов. По сети гуляют только демоверсии…

Информация с сайта http://www.medialab.com