SiteGrinder 2 заменит HTML-кодеров? Обзор плагина для Photoshop
Понедельник, 16 июня 2008
Хочу рассказать о своем знакомстве с весьма интересным плагином для автоматической верстки 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 соответственно. Быстрая пробежка по торрентам в поиске взломанной свободной версии не дала никаких результатов. По сети гуляют только демоверсии…
* * *
Сканер блогов (ищем братьев по разуму!):
«17 июня не забудьте скачать FireFox 3!» — хотел написать у себя, но уже написала вся блогосфера, поэтому не буду повторяться. Еще об этом же тут. Расскажите о своем будущем проекте на конкурсе фрилансера Zpro, и получите бесплатный домен в подарок!
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
btjunkie.org/torrent/Site...10b3e4fbce536908
thx, но это демо :(
Прикольная штука.
А где можно скачать рабочую версию? Никто не знает случаем?
Сам ищу. Как будет рабочая, обязательно поделюсь.
Незнаю... Не понравился мне код после этого «верстальщика». position: absolute; — это не есть хорошо.
Я и не советовал использовать для всего. Перечитайте еще раз выводы. Не хочется повторяться.
В position: absolute не вижу ничего плохого, если грамотно и к месту использовать. Иногда это вообще единственный путь, чтобы добиться полного соответствия с макетом.
а все еще не нашлась таблетка для него ни у кого? я бы тоже воспользовалась программкой — в хтмл не секу ни разу...
?
ira
Мы все в поиске.
[...] В книгах, обычно, приводят абсолютно нелепые абстрактные примеры, которые у многих убивают дальнейший интерес к этой теме. Отсюда и берутся очередные мифы о том, что абсолютное позиционирование в CSS — зло, и его нужно избегать. Об этом мне пытались ненавязчиво намекнуть в комментариях тут. [...]
Нашел способ для снятия водяной сетки ;) теперь сайт готовится чистым как и планировалось. Хах ... не понять им что русские никогда не покупают ПО ;)
@Dmitriy
Мы заинтригованы :)
Взято с сайта scrache.com
Цитата Stayed:
На счет кряка, ничего хорошего не скажу , мне не попадался. Демо версия нормально работает, но на готовый шаблон накладывает свои водяные знаки. Файл(SGlogo.pat), который надо скопировать в папку C:\Documents and Settings\Administrator\SiteGrinderData эти знаки убирает, т.е. получаем вполне рабочую версию .
Ну или проще:
scrache.com/forum/index.p...p;showtopic=1693
там и взять можно и все описано, правдо сам еще не пробовал.
Берите не жалко (непродолжительный гуглинг дал результаты, одну скачал проверил, — все в комплкте (качал с рапиды)):
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
Эта версия работает, не накладывает свои водяные знаки.
Но галерию позволяет делать только 5 картинок!
Может кто имеет таблетку?
[...] Кто из блоггеров еще рассказывал о SiteGrinder’e? Вот он. [...]
вот ток вот я крякнул ))
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»)
@fred, спасибо! Если будет необходимость, обязательно попробую.
да неза что )
вы знаете rotor много чего толкового нашел на вашем сайте ) много интересных статей и решений
Ну, я постараюсь, чтобы дальше было ещё интереснее ))
Да, по описанию штука офигенная, если еще и верстку под популярные CMS добавиться — куплю без сомнений... А пока буду икать кряк, стоит все же не дешево...