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

Логотип SiteGrinder2

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

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

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

Заинтриговали? Тогда качаем бесплатную демо-версию (17,2 MB) и начинаем разбираться.

Установка и настройка плагина

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

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


Окно настроек плагина 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 соответственно. Быстрая пробежка по торрентам в поиске взломанной свободной версии не дала никаких результатов. По сети гуляют только демоверсии…

* * *

Сканер блогов (ищем братьев по разуму!):

«17 июня не забудьте скачать FireFox 3!» — хотел написать у себя, но уже написала вся блогосфера, поэтому не буду повторяться. Еще об этом же тут. Расскажите о своем будущем проекте на конкурсе фрилансера Zpro, и получите бесплатный домен в подарок!

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 24

  1. rotor, 01.07.2008 в 15:36

    thx, но это демо :(

    Ответить

  2. Максим Минин, 18.07.2008 в 23:09

    Прикольная штука.

    А где можно скачать рабочую версию? Никто не знает случаем?

    Ответить

  3. rotor, 19.07.2008 в 0:00

    Сам ищу. Как будет рабочая, обязательно поделюсь.

    Ответить

  4. Алексей, 22.07.2008 в 0:37

    Незнаю... Не понравился мне код после этого «верстальщика». position: absolute; — это не есть хорошо.

    Ответить

  5. rotor, 22.07.2008 в 10:49

    Я и не советовал использовать для всего. Перечитайте еще раз выводы. Не хочется повторяться.

    В position: absolute не вижу ничего плохого, если грамотно и к месту использовать. Иногда это вообще единственный путь, чтобы добиться полного соответствия с макетом.

    Ответить

  6. ira, 10.08.2008 в 0:52

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

    ?

    Ответить

  7. rotor, 10.08.2008 в 16:14

    ira

    Мы все в поиске.

    Ответить

  8. Боязнь абсолютного позиционирования в CSS | rotorweb.ru | Проблемы и решения в Web-дизайне, 02.10.2008 в 14:20

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

    Ответить

  9. Dmitriy, 24.03.2009 в 10:04

    Нашел способ для снятия водяной сетки ;) теперь сайт готовится чистым как и планировалось. Хах ... не понять им что русские никогда не покупают ПО ;)

    Ответить

  10. rotor, 24.03.2009 в 20:30

    @Dmitriy

    Мы заинтригованы :)

    Ответить

  11. Resident, 08.04.2009 в 4:00

    Взято с сайта scrache.com

    Цитата Stayed:

    На счет кряка, ничего хорошего не скажу , мне не попадался. Демо версия нормально работает, но на готовый шаблон накладывает свои водяные знаки. Файл(SGlogo.pat), который надо скопировать в папку C:\Documents and Settings\Administrator\SiteGrinderData эти знаки убирает, т.е. получаем вполне рабочую версию .

    Ответить

  12. Resident, 08.04.2009 в 4:23

    Ну или проще:

    scrache.com/forum/index.p...p;showtopic=1693

    там и взять можно и все описано, правдо сам еще не пробовал.

    Ответить

  13. Andy, 25.05.2009 в 16:21

    Берите не жалко (непродолжительный гуглинг дал результаты, одну скачал проверил, — все в комплкте (качал с рапиды)):

    sitegrinder 2.1.1

    www.gfxworld.ws/index.php...indows_vista_xp/

    На случай если ссылко умрет, вот линки на файло-помойки:

    letitbit.net/download/58f...der-211.rar.html

    depositfiles.com/ru/files/wsdgtbg02

    depositfiles.com/files/fypom6j2a

    rapidshare.com/files/2026...nder_website.rar

    Ответить

  14. Tacitas, 25.05.2009 в 23:02

    Эта версия работает, не накладывает свои водяные знаки.

    Но галерию позволяет делать только 5 картинок!

    Может кто имеет таблетку?

    Ответить

  15. Автоматическая верстка, 30.08.2009 в 18:01

    [...] Кто из блоггеров еще рассказывал о SiteGrinder’e? Вот он. [...]

    Ответить

  16. fred, 16.09.2009 в 19:31

    вот ток вот я крякнул ))

    1. Устанавливаем «install_2-1-1.exe» (Триальная версия)

    2. Находим папку с установленным плагином:

    — XP: C:\Documents and Settings\_Активный_пользователь_\SiteGrinderData

    — Vista: C:\User\C:\Users\_Активный_пользователь_\SiteGrinderData

    3. Создаем в этой папке новую папку с именем «SGlogo.pat» — внимание: именно папку (каталог), а не файл

    Альтарнативный вариант: копируем в эту папку файл Pattern\SGlogo.pat и устанавливаем на него атрибут «только для чтения» («Read only»)

    Ответить

  17. rotor, 16.09.2009 в 21:16

    @fred, спасибо! Если будет необходимость, обязательно попробую.

    Ответить

  18. fred, 17.09.2009 в 8:21

    да неза что )

    вы знаете rotor много чего толкового нашел на вашем сайте ) много интересных статей и решений

    Ответить

  19. rotor, 17.09.2009 в 12:16

    Ну, я постараюсь, чтобы дальше было ещё интереснее ))

    Ответить

  20. dante01, 25.11.2009 в 2:30

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

    Ответить

  21. domy w górach, 21.10.2013 в 18:58

    r type o

    Ответить

  22. @ numizmatyka, 05.03.2015 в 15:45

    website beatful!

    Ответить

  23. @ kostka żywiec, 04.06.2015 в 12:16

    Włąsnie tego szukałem. Dzięki za ten wpis !

    Ответить

Есть что сказать?