Совсем недавно компания Adobe представила широкой публике проект под названием Project Parfait. Parfait — это веб-приложение, ориентированное на веб-разработчиков, которое конвертирует PSD-документ в веб-страницу с возможностью просмотра стилевых (CSS) свойств отдельных слоев. Другими словами, Parfait дает нам возможность копировать готовые стили отдельных UI-элементов.

Хоть Parfait еще находится в стадии бета-тестирования, он без проблем справился с PSD-документом размером около 60 МБ.

Что же конкретно умеет Project Parfait?

Adobe Parfait

На контрольной панели приложения три вкладки: Styles, Layers и Assets.

Вкладка «Assets» содержит список сохраненных рисунков. Стоит заметить, что Parfait дает нам возможность сохранять рисунки не только в *png или *jpeg, но и в *svg.

Во вкладке «Layers» сосредоточены все слои PSD-документа, и каждый слой можно сохранить как рисунок.

Перейдем к самому главному — вкладке «Styles». В этой вкладке — вся соль Parfait:

  • область с CSS-свойствами текущего слоя;
  • список используемых в документе шрифтов с начертаниями и размером;
  • полный перечень цветов и градиентов документа.

Пользователи Adobe Photoshop CC могут не оценить Parfait, так как у них есть возможность просматривать стили слоев, не покидая Photoshop.

Для меня удобство Parfait состоит в возможности просмотреть все используемые цвета и шрифты документа, что очень полезно при создании переменных и цветовых схем для проекта.

Так как я использую SASS (SCSS), это выглядит примерно так:

scss
Кстати, в этом примере показаны три цвета, два из которых определяются через один основной ('$_blue'). Для генерации цветовой функции в SCSS (SASS) в подобном случае можно воспользоватся этим сервисом.

Плюсы Parfait очевидны, но я еще не рассказал о его минусах, которых на самом деле я не смог найти. Но я постарался придраться и, как оказалось, Parfait не работает в IE ниже 9 версии. Но все мы знаем что это скорее плюс, нежели минус. Также нельзя объединять слои, но это тоже придирка, поскольку Parfait — приложение не для редактирования PSD.

Есть несколько плагинов для Photoshop, которые эмулируют функционал Parfait и позволяют смотреть CSS в версиях ниже СС.

CSS3Ps. Хороший и бесплатный плагин, изредка бывают проблемы с доступностью данного решения. Для его работы нужен интернет =).

CSSHat. Тоже хороший, но уже не бесплатный плагин. Лицензия стоит $35. Может сразу конвертировать стили для препроцессоров (SASS, SCSS, LESS, Stylus). Из минусов: не подхватывает некоторые стили текста (высоту строки, интервал).