Project Parfait от Adobe – незаменимый онлайн-инструмент верстальщика?

« Предыдущая запись
 
  Следующая запись »
 

Project Parfait Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?Многие, наверное, слышали об этой штука, некоторые даже пробовали, но что-то мне подсказывает, что ещё достаточное число людей не слышали о ней. Посему, сегодня я расскажу вам об этом сервисе – что это такое и с чем его едят.

Верстка сайта – работа не из легких. Пытаясь облегчить рабочий процесс, верстальщики до сего времени использовали различные приложения и плагины, но хотя верстка и протекала в более-менее нормальном режиме, хотелось найти оптимальное решение для ее максимального упрощения. И вот этот день настал – появился новый продукт Adobe, который, как мне кажется, просто необходим каждому веб-мастеру.

Итак, Adobe презентует новый сервис Project Parfait – инструмент верстальщика для работы с psd файлами. Теперь не обязательно тратить свои кровные на дорогой Photoshop, время на установку спираченного Фотошопа, или на поиск аналогов типа GIMP. С помощью Adobe Parfait можно открыть файл psd онлайн и извлечь из него всю нужную информацию. А для этого всего лишь требуется загрузить файл на сайт. Да, сервис находится в Вашем распоряжении после использования логина в виде Adobe-ID. Регистрация, разумеется, бесплатная и быстрая. Собственно, вот ссылка – projectparfait.adobe.com.

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

Project Parfait Interface thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?

Итак, в левой части вы видите свой макет, каждый элемент которого вы можете выделить. Справа панель, содержащая три вкладки:

  1. Styles. Здесь вся информация по стилям в макете, разделённая по блокам.
    • CSS. Для выделенного элемента доступен блок CSS, включающий шрифты, цвета, оформление и пр.
    • Fonts. Все использующиеся шрифты в макете с указанием всех использующихся размеров (для выделяемого текстового элемента использующийся шрифт выделяется отдельно).
    • colors thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?Colors. Использующиеся цвета, кликнув на который можно получить информацию о цвете в формате RGB, HEX или HSL. Подобно шрифтам, для выделенного элемента использующийся цвет будет выделен обводкой.
    • Gradients. Подобно цветам, но градиенты. Инфа о них в виде CSS3, которую можно скопировать всего лишь кликнув на кнопку Copy.
      gradients thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?
  2. Layers. Думаю, можно не говорить, что тут представлены слои документа из PSD файла. Их можно скрыть, отобразить, увидеть иерархию слоёв, если она раскидана по папкам, а также сохранить слой в файл. На выбор png8, png32, jpg с возможностью выбора качества и svg.
    project parfait layers thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?
  3. Assets. В этот раздел попадают все изображения, которые вы сохраняете (как, например, в предыдущем шаге), уже откуда их можно сохранить на компьютер.
    parfait assets thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?

project parfait size thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?При клике на объект в центральной части, тут же появляется панель с размерами объекта, положением, и возможностью скопировать текст, css или сохранить объект картинкой в Assets. Можно выделить несколько объектов с зажатым CTRL, но их уже можно будет только сохранить в Assets.

Обратите внимание на вот какую штуку! В макете есть несколько наложенных друг на друга кругов. На скриншоте выше видно, что я сохранил отдельно синий круг, а также три сразу. Однако каждый отдельный круг я могу сохранить и в чистом CSS, который для большого круга выглядел следующим образом:

border-radius: 50%;
background: -webkit-linear-gradient(90deg, #299eff 0%, #64b9ff 100%);
background: -moz-linear-gradient(90deg, #299eff 0%, #64b9ff 100%);
background: -o-linear-gradient(90deg, #299eff 0%, #64b9ff 100%);
background: -ms-linear-gradient(90deg, #299eff 0%, #64b9ff 100%);
background: linear-gradient(0deg, #299eff 0%, #64b9ff 100%);
box-shadow: 0px 3px 9px 0.00px rgba(0, 0, 0, 0.15);
width: 430px;
height: 430px;

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

 

Пока что это бесплатная beta-версия и остается надеяться, что после приобретения стабильности продукт не приобретет цену. Разумеется, Project Parfait не предусматривает «абсолютную власть» над PSD, но для детализации информации у вас всегда под рукой может быть Photoshop или GIMP.

С 8 сентября 2014 года Парфэ стал неотъемлемой частью Adobe Creative Cloud - в его интерфейсе появилась возможность “разбирать” psd-макеты подобно тому, как это делается в Parfait. Из самого парфэ загруженные psd можно будет скачать до 15 декабря 2014. По интерфейсу он ничем не отличается от Парфэ (кроме наличия русификации), однако Creative Cloud более слоупочный в плане подгрузки списка файлов и директорий. К слову, всё сохранённое в папку Assets можно найти рядом с файлом макета в одноименной папке. А если вы скачаете приложение Creative Cloud, то вся нарезка автоматом будет падать к вам на компьютер. А это прекрасно.

Adobe Creative Cloud thumb Project Parfait от Adobe – незаменимый онлайн инструмент верстальщика?

Ну, а для тех, кто не хочет отказываться от Photoshop, тоже есть отличный и очень перспективный проект в версии private beta – Avocode от компании Source. У новинки куча полезных особенностей, но в общем итоге все сводится к одному – к вышеупомянутому облегчению работы верстальщика. Единственное условие для работы с этим приложением – наличие установленного плагина Avocode в Photoshop, который открывает макету прямую дорогу от дизайнера к мастеру верстки. Более подробную информацию можно найти на сайте хабра по ссылке – там первый взгляд на продукт.

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 1, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов нет на запись

"Project Parfait от Adobe – незаменимый онлайн-инструмент верстальщика?"

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии