Есть ли такая технология — получить из PSD автоматом нарезанный и сверстанный сайт?

Question

[globuzer]

Всем привет.
Индустрия веб-разработки шагает грамадными шагами вперед. Создается куча сервисов и приложений.
Делая дизайн макета сайта в PSD, возник вопрос: нельзя ли с помощью какого-то инструмента, "скормив" ему на вход свой PSD-файл, получить на выходе уже сверстанный готовый сайт (страницу, проект)? Конечно же дизайн сайта должен быть создан по определенным правилам. Если такое это возможно, то с помощью каких приложений или сервисов возможно такое сделать? И если возможно сделать, то какие правила должны быть учтены при создании дизайна. Особенно заинтересовали следующие вещи:
readymag.com
froont.com
ahoba.co
webflow.com
nethouse.ru
muse.adobe.com
avocode.com
Есть ли нечто подобное в них или в других инструментах? Может быть даже есть плагин для Photoshop (если дизайн разрабатывался в нем), Illustrator (если дизайн разрабатывался в нем), InDesign (если дизайн разрабатывался в нем) для реализации такой функции?
Получается если такая технология осуществима, то функция верстальщика уже не так важна. Хотя вряд ли качество верстки после результата выполнения приложения будет оставлять лучшего. Но... прогресс неумолим, возможно я и ошибаюсь, и уже сервисы-роботы умеют делать качественно-сверстанный проект сайта со всеми вытекающими от сюда приятными последствиями в хорошем смысле слова.

Comments

[Руслан Галиев]

Делайте дизайн в Webflow или Macaw.co и и будет вам код.

[Арсен]

Руслан Галиев: Я так понимаю за Webflow надо платить, если хочешь вытянуть от-туда код. Macaw есть крякнутый. Вы пробовали на нем работать? Можно чистенький сайт потом куда-то на сервер залить?

[Руслан Галиев]

Арсен: Macaw на днях стал бесплатным. :) Да, в Macaw можно делать вполне себе полноценно сверстанные страницы.

[globuzer]

Руслан Галиев: наверное чистота кода зависит от сложности сайта? прямопропорциональная зависимость

Answer 1

[timfcsm]

при любых раскладах на выходе будет говно, которое в итоге руками разгребать придется

Comments

[Нерон Лордов]

это во все времена не все понимали, а сейчас еще меньше понимают, с популяризацией конструкторов и сервисов, упомянутых в этом треде.

[copal]

Ну вот пока css программисты пузыри носом надувают говоря что такое невозможно, придет тот день, когда они поймут, что заработать они больше не в состоянии. Для современных технологий завтрашнего дня уже начали использовать, как приоритет, инлайн стили и уже начали делать первые редакторы. С adobe flash прекрасно у людей получалось создавать супер интерактивные интерфейсы и js не исключение. Ещё совсем чуть-чуть и верстка руками будет делаться только на максимум десяти процентах проектов, на которые Вам точно попасть с таким умом не судьба. А вот все остальные быстрее и дешевле будет собрать в редакоре и цена и скорость будут выше чем одна сотая секунды скорости добавленная кровью и потом при ручной верстке. Вы очень завышаете свои возможности по сравнению с прогарммистами, которые уже для Вас создали все то, что сейчас Вы видите в том числе и сам css!

[sim3x]

copal:
свежо придание про 5GL

[Snitch]

copal: Слышу это дерьмо еще с 2004 года, а как был всегда человек делающий клиентскую часть, так он и есть. Вся ваша стена текста опровергается одним предложением: "В редакторе никогда нельзя будет сделать все так, как можно бы было верстая руками".

[copal]

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

[Snitch]

copal: Лично я не использую фреймворки. Только gulp-ом собираю и минифицирую разметку, стили и скрипты.

[timfcsm]

copal: вы что-то путаете... по вашему я сделаю стул с помощью инструментов, это тоже будет не ручная работа? в таком случае в разработке вообще никто ничего руками не делает

[copal]

timfcsm:
- Вы написали bs3-button.dange-button[i'm bs3 button]
- программа написала bs3-button.dange-button[i'm bs3 button]
в чем разница? Чем Ваша строка лучше программной? И да, сейчас почти никто ничего не делает, это называется автоматизация процесса, которую делают не для того чтобы Вы больше отдыхали и больше денег зарабатывали, а для того что полностью Вас исключить из процесса. Вы думаете все эти фраймворки и прочие "помошники" делают просто так добрые люди? Нет, им за это платят корпорации только для того, что это экономически выгодно. Сегодня Вас научили как дебилов развивать опенсорс, за который они деньги получают проводя всяки уроки и прочие, а завтра вообще Вас от дела отстранят. Они создадут скоро редактор который за Вас будет писать код, а тумы уже Вы будите за бесценок им отдавать на всяких стоках. И после завтра я лучше сам в редакторе по быстрому накидаю, чем платить Вам. Программисту легче воспользоваться редакотором, чем верстальщику становится программистом. Вы должны перестать быть наивными.

[copal]

Snitch: Вы нет и делаете дольше, потому что создать с нуля медленнее чем писать на bootstrap делая сразу под все разрешения и платформы. Вы можете дать гарантию что Вас код будет работать на все-всех платформах и устройствах, а bootstrap может? И я не удивлюсь, что завтра я обращусь к дешевому новичку, так как буду знать что он сделает качественнее и после него другой дешевый новичок с легкостью сможет этот код модифицировать . А Вы все чаще станете оставаться в стороне.

[timfcsm]

copal: разница в том что программа не знает, когда надо написать одно, а когда другое... если вам это не понятно , сидите ждите чудесную программу, которая за вас всё сделает, я не против

[copal]

timfcsm: скажите, а откуда фотошоп знает когда нужно вырезать, а когда кисти применить?

[ihorgorobets]

copal: считайте что фреймворки это и есть ваш конструтор, но с повышеной гибкостю и возможностю сразу генерировать результат, а верстальщик это челевек который работает в вашей програме чудо-конструкторе, который еще может подпиливать что-то если конструтор кривой.

[Snitch]

copal: Но ведь если делать все на bootstrap, получится неподдерживаемя хyNта с лишними компонентами. А по поводу гарантии работы на разных устройствах - это уже как в требованиях написано, так и верстается.

[copal]

Snitch: так ведь в конечном коде окажется только то что Вы используете, лишних не будет. Код пишут люди которые не новички и покрывается тестами на все устройства. Они сделали базовый набор их которых собрать можно все что угодно. Дофига тем готовых за копейки. единственный недостаток, если Вы на нем пишите свои стили, то легче реально новую тему написать чем "доделать немного". Есть версии для всех популярных js фраймворков. Я раньше тоже на него ругался, пока не понял всю его прелесть и теперь считаю, что возможно, это реально хороший способ делать качественно, быстро и самое главное, что после меня с кодом смогут любые работать, а не ломать голову в том что я написал.
И у Вас реально есть все устройства?

Answer 2

[Игорь Воронов]

"Есть ли такая технология — получить из вспаханой грядки автоматом спелую морковь?" :D

Это, конечно, все веселье, возможно, есть какие-то корявые (да-да, корявые-корявые) сервисы, но ничего серьезного Вы не найдете. Есть такой проверенный вариант: перестать искать халяву всюду и начать работать.

Answer 3

[Иван]

Да, такая технология есть - называется "нанять фрилансера".
Еще можно заставить верстать дизайнера сразу в дрививере :D

функция верстальщика уже не так важна

Ага, JS прикрутит тоже фотошоп. И кучу плагинов и библиотек тоже.

Comments

[globuzer]

фрилансеру нужно платить.
дривер это dreamweaver? это же уже сгинувшая в ад технология?
верстальщик не нужен? а что, инструмент выдаст качественный продукт на выходе?
то что прикручивать куча - ерунда, главное результат.... а возможно ли такое?

[Сергей delphinpro]

globuzer: сгинувшая говорите? так на смену ему Muse пришел :)))

Answer 4

[Kozlovskiy]

Если вы имеете ввиду именно процесс превращения, то они есть. Но это будет фактически не поддерживаемый, одноразовый страничка-сайтик или их совокупность. Если вам нужен какой-нибудь лэндинг пейдж, то возможно смысл и есть, но проще воспользоваться конструкторами для этого варианта. А рассуждать о том, что верстальщики не нужны-бессмысленно. Технологии развиваются параллельно, и сам веб становится гибче, сложнее, интерактивнее. Варианты есть всегда, но скупой платит дважды точно.

Answer 5

[Алекс]

Ручками все,ручками) Это как сравнивать ручную сборку ламборджини с конвеерным тазом

Comments

[Юрий]

смотря для чего вам транспорт нужен ехать или вы%?@ся

[AlikDex]

Юрий: Хотите сказать, что ламбо не едет? ;D

[Алекс]

Юрий: Поточнее выражусь красивый новый ручной сборки ламбо=это результат старательной работы верстальщика,скурпулезно нарезанный из фотошопа,убитая в хлам бу пятнашка-результат работы сервисов с их кучей гавнокода,и машина вроде едет-но никогда не знаешь где она сломается и сколько понадобиться времени ее починить)

[Юрий]

Алекс: ответил "ответом"

[Юрий]

AlikDex: ответил "ответом"

Answer 6

[Николай Турнавиотов]

Интересно, когда уже появится реализация "захотел - получил?" Чтобы рраз - и ламборджини под домом. Рраз и вместо квартиры в старой хрущовке шикарный дом на берегу океана, рраз и красивая умная любимая и любящая жена с 6м размером груди....

Answer 7

[Пётр Попов]

Даже если такой инструмент и есть, то адаптивность он точно не прикрутит на сайт - в этом деле человек нужен.

Возможно есть смысл просто оказаться от фотошопа в пользу подобного рода программ: pinegrow.com/. Но создать действительно уникальный дизайн, думаю, в них не получится.

Answer 8

[Сергей]

Нет нету. Без ручного труда никуда, иначе сотни верстальщиков сейчас шли грузить вагоны

Comments

[globuzer]

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

[Сергей]

globuzer: Adobe Muse есть. Посмотрите его. Лучших перспектив нет

[Нерон Лордов]

Сергей: а чем он так хорош?

[Сергей]

Liquidos: делать сайты можно без программиста и верстальщика

[Сергей]

Сайты кстати получается ничего такие, лучше чем в вусувиге какомнить клипать

[Ириней Калачёв]

Сергей: >> Лучших перспектив нет.
В перспективе есть Macaw Scarlet — scarlet.macaw.co
Обещают что-то с чем-то. Только вот когда выйдет — неизвестно.

[globuzer]

Ириней Калачёв: а авакод?

[Сергей]

globuzer: он же просто дает css, не?

[Нерон Лордов]

Ириней Калачёв: Блин, и снова под макось. Скетч - под макось. Адобовский Project Comet - под макось. И скарлет туда же. Чем же винда-то так не угодила производителям софта для дизайнеров(

[Сергей]

Liquidos: Тем, что дизайнеры мало работают под виндой

[Нерон Лордов]

Сергей: да ну? С каких это пор? насколько мне известно, винда - до сих пор самая распространненая ОСь в мире.

[Ириней Калачёв]

Liquidos: Скарлет запустят на макоси, а через пару месяцев выпустят для винды. Так было с первым Macaw. Терпение:)

[Сергей]

Liquidos: Сколько знаю дизайнеров, а знаю я их много, либо у них маки, либо хотят мак. плюс у всех айфоны. то, что винда самая распространненая еще ни о чем не говорит.

[Нерон Лордов]

Сергей: ну, мак для тяжеловесного дизайна (работа над частями макета в стеке программ параллельно, редактирование тяжелого вектора и везде view performance=max) - если только Mac Pro какой-нибудь, за 250 тысяч. Сомнительная трата денег. Лучше 150 ухлопать на железо, которое будет в 3 раза быстрее, а на сотку сдачи купить офигенный монитор)

[Oleg Krasnov]

Liquidos: Не волнуйтесь, Comet будет кроссплатформенным.

Answer 9

[Нерон Лордов]

brackets.io возможно?

Comments

[globuzer]

нунадожпопробоватьс

Answer 10

[shurupkirov]

Есть вот такой вот плагин
exportkit.com/plugin/environments/html5/convert-a-...

И вот такие уроки от Линды
www.lynda.com/Photoshop-tutorials/Exporting-HTML-f...

Answer 11

[Umid]

На сколько я помню был какой то плагин для фотошоп который сам возвращал html файл но он строил сайт по табличной вёрстке.

Comments

[Антон Швец]

не плагин. Инструмент Slice, нарезаешь макет как нужно, а потом есть варианты сохранения как хмтл или просто набор картинок. Имеет смысл если сайт состоит из картинок целиком.

Answer 12

[redakoc]

В PSD все будет точно попиксельно?
Даже если и будет, то такое позволит только одинаково резать.
Скучно.

Comments

[globuzer]

всмысле резать автоматически? или ручками? если ручками, то это ничем не отличается от резки верстальщиком из макета в фотошопе...

[redakoc]

globuzer: в смысле, чтобы нарезать нужно сначала составить картинку попиксельно. оно тебе надо.

[Антон Нагаец]

/sarcasm-mode on: Зато Perfect-pixel выйдет

Answer 13

[Юрий]

тойота тоже на конвеере штампуется (и еще 99% современных авто), но конвеерный продукт вполне едет.

в вебе все тоже к этому идет. правда пока через конструкторы.

естественно конвеер предполгает минимум кастомизации, включают все максимально универсальное и востребованные. но со временем готовых функций все больше.

уже сейчас многие выбирают конструкторы, потому что это быстрее, дешевле, и порой даже качественней чем если ктото "наверстает"

естественно профессия версальщик никуда не исчезнет полностью, конечно всегда будут вещи которые конструкторы не делают.

low-end верстка со временем умрет. для мелких заказчиков удобнее конструкторы и готовые ПРО темы.
hi-end естественно останется и станет еще сложнее.

конкретно по psd.
вряд ли развитие пойдет в сторону psd. скорее будут специфические конструкторы.

Comments

[Юрий]

sashabeep: с psd все хорошо, он просто для других целей сделан, больше для художества и полиграфии, а не как иде для верстки. и я думаю что он обязан остаться таким.
для разработки дизайнов сайтов можно придумать более удобные/подходящие средства.

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

[globuzer]

sashabeep: Юрий: вот! PSD именно был создан еще до развития веба, давненько. когда была полиграфия и типография... все эти промежуточные контейнеры для переброски прототипов и макетов от дизайнера до верстальщика или программиста изменяются со временем и зависят от моды, даже скорее от приложений используемых при работе.
например моя знакомая очень хорошо знает иллюстратор. сделала несколько проектов дизайна сайтов в нем. ну и что? думаете так много верстальщиков работающих с иллюстратором?
а ведь даже на хабре была статья, типа "рисует интерфейс в иллюстраторе", где приводились все плюсы этого.
и веб идет в векторную сторону, свг и все дела.

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

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

вот и получается это все вопрос вкусов и эволюционных привычек большинства людей, осваивающих и уже освоивших эту профессию

[Юрий]

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

но современный веб динамичный, это и анимация и адаптивность. для этого уже статичная кратинка плохо подходит. для генерации html css из картинки это тоже основная проблема. не думаю что сгенерить статичную картинку сложно, просто position absolute лепишь везде и получается как оригинал в фотожопе. когда то это было норма (экспортируешь таблицей и все, картинки сам в нужные ячейки подставит).

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

Answer 14

[Алексей Сегодин]

То, что вы ищете — это Edge Reflow — разработка Adobe, которая уже много лет находится в бета-тесте.
Программа как раз и работает так, чтобы генерировать адаптивную вёрстку на основе PSD макета. Вы не получите прям-таки готовый HTML, но получите файл проекта (чем-то похожий на Adobe Muse), который можно поправить и компилировать в HTML.

В Edge Reflow можно работать с нуля, а можно импортировать готовый макет PSD. При этом, если у вас в Фотошопе стоит нужный плагин, то Edge Reflow автоматически заметит любой открытый в данный момент в Фотошопе файл и предложит импортировать его. Выглядит это так:



А вот здесь показано как это всё работает: https://helpx.adobe.com/edge-reflow/how-to/edge-re...

Если рассматривать Edge Reflow как инструмент для создания полноценного законченного сайта, то есть плюсы и минусы:

Плюсы:
+ импорт любого макета из фотошоп;
+ адаптивная верстка с красивым HTML/CSS кодом;
+ если называть слои фотошопа соответствующими именами (например header.jpg200%), то автоматически будет генерироваться соответствующий контент. Если это картинка, то для неё можно задавать имя, размер,качество сжатия и даже задавать несколько версий одной картинки.

Минусы:
– это всё-таки инструмент для верстки, а не для создания законченного сайта как в Adobe Muse;
– нету никакого Джавасрипта, только голый HTML и CSS. То есть можно вставить на страницу поля типа input field для формы обратной связи, но они не будут работать. PHP и JS надо делать вручную;
– нету никаких классов в CSS — всё экспортируется с id. Немного не удобно. Но при определенных обстоятельствах можно забить, если сайт статичный и не сложный.

Answer 15

[Кадырхан Утин]

Я сам познакомившись с редактором brackets, посматриваю на функционал в этом редакторе в работе с PSD
Ниже я привел ссылку на урок, где автор рассказывает о работе c файлами PSD при подготовка на ее основе шаблона сайта. Возможно изучение данного функционала Вам поможет.
https://youtu.be/RxSyHFoYw-c?t=5m22s
Таких уроков по брекетсу много, я лишь привел первый из попавшихся уроков.