PSD to CSS: Генерация верстки сайта из дизайн-макета Photoshop
Автор: Nayjest Категория: Верстка веб-страниц
Автоматическая верстка веб-сайтов. В наши дни это стает возможным. Лично я давно мечтал о такой программе, даже подумывал о подобном стартапе, но я прекрасно понимал, что генерировать читабельные, валидные, красивые, семантичные html/css макеты (да еще и резиновые) из файлов фотошопа — это очень сложная задача и потребует много времени, а времени этого всегда ой как мало :)
Так вот, представляю вам бесплатный веб-сервис для автоматического преобразования ваших Psd макетов в сверстанные страцицы сайта: Psd 2 css online.
Для того, чтобы сгенерировать нужный нам макет веб-сайта, нужно специальным образом проименовать слои (Layers). Например если в имени слоя есть суффикс _text, то данный слой экспортируется в верстку как текст, а не как картинка. Поддерживаются такие необходимые вещи, как расширяющиеся в зависимости от размера контента блоки, подсветка (hover) кнопок и много чего еще.
Разработчики сразу же обращают внимание на то, что генерировать верстку можно из psd файлов, созданных не только с помощью Adobe Photoshop, но и другой софтиной, например достаточно популярным бесплатным графическим редактором Gimp.
На сайте есть уроки и видео-уроки, показывающие, как легко вы можете преобразовать ваш PSD дизайн-макет в сверстанный макет.
Что интересно, верстка их сайта сделана их же сайтом :)
Ну все, можете уже смотреть www.psd2cssonline.com
Конечно, появление такого веб-сервиса не значит, что верстальщики могут остаться без работы в ближайшее время, пока этот веб-сервис очень ограничен в своих возможностях, генерируемая верстка …ну вы же сами понимаете, она «генерируемая» автоматически, а значит де-факто не очень красива, о резиновых макетах (с динамической шириной) пока даже не идет речь, и есть еще много-много недостатков. Но с этим уже можно поиграться, можно пощупать, это бесплатно.
Вот если бы еще прикрутить этот сервис плагином к Phptoshop, было бы вообще замечательно.
В догонку: Divine project — автоматическое создание темы для WorPress из PSD шаблона и пост о нем же на Хабре. Реализовано как программа и плагин для Photoshop.
Такой вариант очень интересен, и должен признать, значительно удобнее, но жаль, что PSD шаблоны преобразовываются исключительно в макеты для WordPress
Движение в сторону автоматизации работы верстальщика — это очень, очень позитивно и будем надеяться, это направление будет развиваться и далее.
74 Комментариев на “PSD to CSS: Генерация верстки сайта из дизайн-макета Photoshop”
Оставить комментарий
Подписка на блог
Рубрики
- it-events (1)
- javascript (2)
- jquery (2)
- php (4)
- wordpress (1)
- веб-хостинг (4)
- Верстка веб-страниц (2)
- Доменные имена (3)
- Интересные сайты (2)
Разные штуки
Ноябрь 29th, 2009 - 19:01
PSD -> особая уличная магия -> HTML+CSS…
Thank you for submitting this cool story – Trackback from progg.ru…
Декабрь 3rd, 2009 - 09:45
Интересно, на сколько качественно осуществляется верстка? Надо будет попробовать…
Декабрь 3rd, 2009 - 20:55
Интересный сервис, но пока все же ручная верстка будет лучше чем генератор :) но если будут развивать сервис возможно, что-то получиться у них :)
Декабрь 14th, 2009 - 23:32
Гы. Представляю этот ужос еврстальщика.
Декабрь 21st, 2009 - 12:52
Попробовал. Ну что сказать, на простенькой теме все прошло, в принципе, более-менее нормально, хотя и видны места, где явно нужно допиливать, а вот из сложной сверсталось нечто совсем малоудобоваримое.
Но, в любом случае – спасибо за наводку! :)
Декабрь 26th, 2009 - 20:54
Очень полезный сервис, спасибо, возьму на заметку :)
Январь 3rd, 2010 - 19:28
Никогда не думал, что кому-то удастся скрестить psd и css – а вот поди ж ты! :)
правда, верстальщики все равно без работы не останутся. Да и я, хоть и непрофессиональный верстальщик, предпочту верстать про старинке – оно как-то надежнее и понятнее :)
А тут – само верстает, ишь до чего техника дошла! Так скоро и сайты само будет делать, и контентом наполнять, и в сапу пихать… :)))))
Январь 5th, 2010 - 22:39
Да сервис пока что не больше игрушки – запихни и посмотри что из этого получиться…чем-то напомнил пресловутые сайты по производству аватарок для соцсетей))) Так что пока юзать ее можно только школьникам – для саморазвития.
Январь 7th, 2010 - 23:32
Отдельное спасибо за наводку на плагин для PS – Divine Project – верстать я совсем не умею, а вот в фш уже могу считать себя вполне освоившимся полноценным юзером.)
Январь 10th, 2010 - 15:52
Раскрою «большоооой секрет» – такая функция сто лет есть в Adobe Photoshop (правда насчет CSS не уверен).
Но в любом случае, ничего толкового в этой затее нету. При нарезке верстке весратльщик учитывает КУЧУ ньюансов и особенностей – поддержку разных версий и браузеров, масштабирование и т.д. А затем еще программер подключает свои скрипты и надо фиксить шаблон, чтобы все не разваливалось… В общем, без человеческих рук и мозгов тут не обойтись.
Единственная сфера, где применение такой автоматизации может иметь смысл – простенькие странички, но их секретарши уже в ворде давно клепают.
Январь 10th, 2010 - 17:14
Medvedoff, тот HTML который вы получите из Photoshop — это немного не то, чего вы ожидаете. Просто нарезанные картинки внутри таблицы, это несерьезно (хотя как минимум задача нарезки картинок для верстальщика решена, но вот делать макет на основе html из фотошопа я не советовал бы).
А вот авторы PSD to CSS пытаются создать полноценный инструмент для упрощения задачи верстки. Конечно же, за вас компьютер не сделает офигенный html макет после нажатия на кнопочку «забацать», этот веб-сервис — попытка дать верстальщику возможность задать особенности html макета иным способом, чем написание html+css вручную. До переворота в мире верстки им правда пока далековато, но такая деятельность очень и очень похвальна, стоит им только пожелать удачи.
Январь 31st, 2010 - 18:16
Как по мне бесполезная штука, даже для нарезки. Кто его знает как он там себе всё покрамсает. Это всё из разряда самопишущихся программ.
Ну предположим им удастся всё сделать и ихняя прога будет делать всё как надо, то останется ли она бесплатной?
Февраль 3rd, 2010 - 18:15
Что-то я очень сомневаюсь в качестве верстки – вспомнить хотя бы дримвювер. Нет, профессия хтмл-верстальщика пока не умрет, это точно!
Февраль 5th, 2010 - 09:35
Генераторы стрёмно исользовать – sape может не пропустить)
Февраль 15th, 2010 - 23:19
Лучше не полагаться только на программу, а корректировать ручками.
Февраль 16th, 2010 - 02:06
Идёя хорошая но не верится что очень хорошо она будет работать.
Март 6th, 2010 - 15:32
Мне тоже кажется, что это всё равно что заменить профессию программиста с помощью программ в которых составляются алгоритмы. Для чего-нибудь простенького может и подойдёт, но вряд ли этот код потом получится прочитать. А картинка зачётная =) Сами нарисовали?
Март 6th, 2010 - 16:47
Ну да, сам нарисовал =)
Март 11th, 2010 - 16:33
Благодарю за статейку, все легче наруки
Март 14th, 2010 - 18:02
я бы использовал этот вариант только лишь для развлечения, думаю ничего качественного эта штука не делает
Март 15th, 2010 - 20:52
Сервису еще расти и расти чтобы им было можно полноценно пользоваться. А пока верстать будем ручками, ибо так надежнее и лучше. Хотя думаю через некоторое время сервис наберет обороты, если конечно его не забросят
Март 15th, 2010 - 21:26
Первый раз об этом слышу. Но чтобы генерировать валидный разумный код надо будет потрудиться разработчикам очень и очень… И тогда целая армия верстальщиков пойдёт мести дворы?
Март 16th, 2010 - 16:27
Надо будет попробовать данный метод, спасибо за инфу )
Март 18th, 2010 - 16:30
Да пока только поиграться, но тем не менее если люди будут с толком развивать проект, то о ужас верстальщикам.
Сегодня попробую один полегче сделать.
Март 19th, 2010 - 21:42
Самостоятельным так сказать черным ящиком, которым сможет пользовться каждый лузер (имеется в виду именно в плане верстки) этот сервис не станет… Тоесть с отдной стороны – невозможно получить из этого ящика полностью удовлетворяющий код…
Но !!! Серсис может значительно упростить работу верстальщика, по верстке простых страниц, если он (верстальщик) будет проверять и дорабатывать полученный код.
В общем сервис зачетный, будем смотреть что из него будет дальше
Март 22nd, 2010 - 01:00
psd2cssonline – тяжел конечно для понимания, но все-таки буржуям респект за сервис. divine – конечно проще, но потом как преобразовывать слои в код, по моему загвоздка возникнет в этом моменте.. но идея не плохая..
Март 24th, 2010 - 18:30
Спасибо за инфо. Как раз вовремя, особенно Divine project.
Апрель 4th, 2010 - 10:45
Верстальщикам теперь легче стало))
Апрель 4th, 2010 - 21:45
Надо попробовать divine project. А вообще, насколько я знаю, фотошоп преобразовывает не очень хорошо в html.
Апрель 4th, 2010 - 22:37
Я применяю в зависимости от сложности проекта , порой комбинированные варианты. Иногда сразу ручками , иногда комбинированный.
Апрель 6th, 2010 - 15:56
Даже не предполагал, о существование подобных проектов, а благодаря комментариям расширил свой кругозор. Век живи век учись и дураком умрешь)))
Апрель 8th, 2010 - 08:07
Допиливать по любому придется, как и на любом автогенераторе. Другое дело, что все-таки хоть как-то экономит время.
Апрель 9th, 2010 - 09:25
Удобная штука..
Апрель 10th, 2010 - 14:50
Приходится многое доделывать. Нужно смотреть, что быстрее, вручную или через программу.
Апрель 20th, 2010 - 16:19
Верстальщики всех стран, объединяйтесь против Psd 2 css online :D
Апрель 20th, 2010 - 18:59
Попробовал на достаточно простенькой темке, результат интересный, но далек от истины. Все же ручками еще долго придется верстать.
Апрель 24th, 2010 - 04:55
«Особая уличная магия» — вполне так конкретно отображает суть этого сервиса :)
Апрель 25th, 2010 - 11:07
В избранное, статья отлично помогает научиться основам вёрстки =)
Апрель 25th, 2010 - 13:04
Очень радует что вопрос автоматизации не стоит на месте.
Надо будет посмотреть как все работает :)
Апрель 25th, 2010 - 22:34
ээээээхх а я все никак верстке научится не могу, вернее все руки не доходят!
Апрель 26th, 2010 - 14:11
Divine отличная штуковина.
А вообще существует множество вариантов верстать имея минимальные знания, стоит только открыть гугл :)
Май 4th, 2010 - 22:53
Спасибо за очередную хорошую статью. Очень нравится манера написания!
Май 9th, 2010 - 19:15
Divine Free ограничена в возможностях, после кнверсии картинки не создает, говорят платная версия нормально работает!
А вот psd2cssonline.com реально спасибо, облегчили нам задачу, правда все равно придется ручками код поправлять!
А для wordpress и так существуют масса средство для верстания шаблонов даже плагин есть такой, или например программа Artisteer 2
Май 20th, 2010 - 13:26
Кто-нибудь уже реально опробовал Psd2css-online? Какие результаты? Насколько кривая получается верстка? Отпишитесь пожалуйста!
Май 24th, 2010 - 10:08
Да уж, система добавляет очень много лишнего кода, многое делает не оптимальным путём. Если не умеете вручную, конечно можно использовать, но лучше доверить вёрстку специалисту )
Июнь 2nd, 2010 - 11:40
Очеень полезный сервис, спасибо. Но все же лучше полагаться не только на программу, но и корректировать ручками.
Июнь 3rd, 2010 - 18:19
Даже не хочу проверять, чтобы не испортить настроение от качества на выходе. Уверена, верстальщики еще долго не переведутся. Человеческий фактор в верстке обязателен и неотъемлем!
Июнь 5th, 2010 - 12:36
Идея сервиса довольно интересна, хочется опробовать, но что-то у меня уже 5 минут загружается макет :(
Июнь 10th, 2010 - 11:24
Мне кажется тема подходит только для клепателей гс. Зачем автоматическая верстка для качетсвенного сайта?
Июнь 11th, 2010 - 09:37
Алексей, вы не правы. Я сама лично столкнулась с проблемой при создании сайта http://www.jlady.ru , так как я могла нарисовать дизайн в фотошопе, но не могла его превратить в сайт. Слава богу помогли ребята с фриланс.ру
Июнь 16th, 2010 - 12:41
честно говоря от такого сервиса не очень много толку :(. Ведь надо создавать хорошие сайты а не клепать пачками мусор!
Июнь 17th, 2010 - 09:06
Наверное не совсем в тему, но..
Стоит ли так усложнять себе жизнь, есть ведь уже готовые решения, или таже программа артиклес?
Июнь 23rd, 2010 - 16:17
Да, все движется в онлайн и то, что раньше казалось сверхсложной задачей, сегодня выполняет даже школьник. А теперь – уже и робот.
Ну до чего же человек ленивая скотинка! :)
Июнь 25th, 2010 - 04:04
Спасибо за интересный сервис. Правда уже как-то к блокноту привык с подсветкой синтаксиса :)
Июнь 26th, 2010 - 15:18
Спасибо за сервис.)))
Июнь 29th, 2010 - 20:51
удобно, но сложные макеты всё равно недо верстать вручную.
Июль 8th, 2010 - 21:34
Кстати, красивый код на ихнем сайте. Нужно обязательно попробовать сервис.
Июль 10th, 2010 - 09:35
Обязательно попробую когда закончу учить мат.часть.
Июль 12th, 2010 - 10:27
Я думаю скоро что-то придумают для упрощения верстки!И тогда любой сможет самостоятельно верстать без всяких знаний!Все к этому идет!
Июль 14th, 2010 - 20:00
Интересный сервис , хотя и с некоторыми недостатками
Июль 19th, 2010 - 13:04
Обязательно попробую, только вопрос, верстка будет валидной? И шаблон наверное тяжеловат будет
Июль 24th, 2010 - 15:31
Ждём развития данного сервиса, за обзор спасибо
Июль 25th, 2010 - 01:15
и слава богу, пока соберемся выучить пиашпи сайты уже и кодит начнут0
Июль 26th, 2010 - 16:39
Огромное спасибо за нужные сс-ки вот задумал менять дизайн а с чего начать ни ни
Июль 28th, 2010 - 16:37
Круто, первый раз об этом слышу :)
Август 5th, 2010 - 09:17
Немного сложновато, но. думаю, стоит попробовать. Конечно заставить себя тяжело. Ничего, главное найти свободное время :) Спасибо автору!
Август 6th, 2010 - 01:50
Подобным сервисам уже не 1 год, но я категорически против них. Нетренированному в верстке мозгу даже представить сложно, какое гно он получает на выходе, если даже выглядит визуально макет нормально. Верстку надо делать с участием человеческого интеллекта, а не сервисами.
Август 6th, 2010 - 18:53
Довольно интересная тема, но думаю что такой сервис не подойдет для работы, все таки больше доверяю когда сам делаю!
Август 12th, 2010 - 08:21
Автор. Ставлю тебе +100500! Я искал что-то подобное целую вечность, а ты одной ссылкой просто помог тысячам!)))
Август 13th, 2010 - 23:50
Если часто пользоваться, то можно забыть CSS ) Хотя как знать )
Август 19th, 2010 - 17:11
С таким запаром легче наверстать вручную.
Август 20th, 2010 - 14:25
Это точно, сверстать вручную, по моему проще и надежней, чем пользоваться генераторами.
Август 20th, 2010 - 16:21
Офигеть, классный сервис. Только код чуть-чуть подправить и норм будет.
Сентябрь 2nd, 2010 - 21:31
Вот я тут писал когда-то выше, что сервис реально путевый, а на тот момент в верстке не шарил вообще, и для меня такой сервис это просто вауу…
А теперь сам верстаю и что могу сказать, этим сервисам до настоящих живых верстальщиков огого как далеко…