В июне 2014 года была написана статья, посвященная прекрасному инструменту для извлечения кода из PSD-макета - проекту компании Adobe под названием Project Parfait. Это был бесплатный online-инструмент, цель которого состояла в создании процесса преобразования PSD-макетов в код для команд разработчиков, использующих Photoshop как основной инструмент при создании различных дизайнов.

Компания Adobe произвела реинкарнацию проекта Project Parfait, добавив в него поддержку бесплатного дискового пространства и сервиса обмена Creative Cloud Assets, а также переименовав его в Extract:

Проект Extract сохранил всю существующую функциональность Project Parfait, а интеграция с CC Files наряду с новой возможностью обмена файлами позволила улучшить и ускорить взаимодействие между веб-дизайнерами и веб-разработчиками.

Ниже представлен пример работы в Extract.

Загрузка или синхронизация файлов

Использование Extract начинается с загрузки или синхронизации PSD-файлов в личном дисковом online-пространстве Creative Cloud, размер которого составляет как минимум 2GB и бесплатно предоставляется любому пользователю, зарегистрированному в Creative Cloud.

Загрузить файлы на сервер можно двумя способами. Первый способ заключается в использовании web-интерфейса, доступного через любой web-браузер. Второй способ основан на использовании специального desktop-приложения, с помощью которого можно автоматически синхронизировать файлы на локальном компьютере с файлами в облачном сервисе Creative Cloud:

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

Первым делом, необходимо скачать приложение и установить его в системе, а затем авторизоваться в нем с помощью личного Adobe ID. Открыв приложение, необходимо в нем перейти на вкладку Assets, а внутри этой вкладки перейти в еще одну вкладку Files. Должно получиться примерно следующее:

В этом окне опускаемся вниз и нажимаем кнопку Open Folder, что приведет к автоматическому открытию папки Creative Cloud Files на локальном компьютере. Находясь внутри этой папки, необходимо скопировать PSD-файл из другого источника сюда, что автоматически запустит синхронизацию с облачным пространством Creative Cloud.

Когда операция загрузки на сервер Creative Cloud будет успешно завершена, на миниатюре PSD-файла появиться маленькая зеленая галочка, как в данном случае:

Если теперь снова вернуться назад, в web-интерфейс Creative Cloud, то обнаружим там миниатюру только что загруженного PSD-файла, готового для открытия в Extract:

Работа в Extract

Для того, чтобы открыть загруженный в Creative Cloud файл Photoshop, нужно щелкнуть мышью по миниатюре этого файла, затем снова щелкнуть мышью на этот раз по вкладке Extract (на изображении ниже она помечена как Preview). PSD-файл тотчас же отобразится в окне приложения Extract, готовый для извлечения из него CSS-кода:

Процесс извлечения кода из PSD-файла в Extract остался неизменным, каким он был в приложении Project Parfait, о чем было подробно описано в предыдущей статье “Конвертирование файлов Photoshop с помощью Project Parfait”. Однако, с того момента в Extract были добавлены несколько новых возможностей, которые будут рассмотрены ниже.

Новые возможности Extract

Некоторые из новых возможностей приложения Extract были унаследованы им от Project Parfait спустя некоторое время после опубликования ранее упоминавшейся статьи-обзора “Конвертирование файлов Photoshop с помощью Project Parfait”. Другие же новшества появились в Extract благодаря его интеграции с сервисом Creative Cloud.

Прозрачность тени

Ранее тени на CSS генерировались без поддержки прозрачности, значениями в формате HEX. Теперь имеется поддержка прозрачности теней в сгенерированном CSS-коде, значениями в формате RGBA:

Настройки шрифта

Теперь нет необходимости работать только с пикселями (px) в качестве размера шрифтов в сгенерированном CSS-коде. В Extract добавлена поддержка единиц измерения

1

em

1

rem

Также добавлена возможность установки базового шрифта для всей страницы в целом. Размеры шрифтов всех остальных элементов страницы будут расчитываться на основе этого базового размера, в тех единицах измерения (

1

em

1

rem

Препроцессоры и миксины

В Extract была добавлена поддержка препроцессоров Sass(SCSS) и LESS совместно с библиотеками миксинов для этих препроцессоров. Таким образом, теперь можно выбрать - генерировать код не в чистом CSS, а в SCSS + Bourbon или LESS + LESSHat. Такая возможность дает большие преимущества для тех веб-разработчиков, которые используют какой-либо из этих препроцессоров:

Я надеюсь, что в дальнейшем в Extract будет добавлена поддержка препроцессора Stylus (поклонником которого являюсь), совместно с библиотеками миксинов под этот препроцессор - Nib и Kuoto Swiss. Этого было бы более чем достаточно в плане поддержки препроцессоров в Extract.

Примечание переводчика: на момент перевода данной статьи в Extract добавлена поддержка препроцессора Stylus и его библиотеки миксинов Nib; поддержка библиотеки Kuoto Swiss отсутствует; помимо этого, добавлена поддержка супер-популярной библиотеки Compass под препроцессор Sass.

Действия

В результате интеграции сервиса Creative Cloud в Extract добавилось новое меню Actions, в котором можно выбрать действия над редактируемым PSD-файлом: скачать файл, переименовать файл, архивировать файл или переместить файл:

Общий доступ

Также благодаря интеграции Creative Cloud в Extract появилась возможность предоставления общего доступа к файлам с помощью меню Share, откуда можно выложить выполненную работу прямо в своем портфолио на Behance.

Наиболее привлекательной возможностью меню Share является его опция Send Link. С помощью которой можно отправить ссылку на файл-наработку веб-разработчику. При переходе по этой ссылке файл автоматически загрузиться и откроется для редактирования в Extract, у этого веб-разработчика.

Веб-разработчику даже нет необходимости иметь учетную запись в Creative Cloud для того, чтобы пользоваться инструментом Extract. Это означает, что любой из членов команды разработчиков, который специализируется на создании кода, теперь совсем не обязан иметь дело с такими программами для рисования графики, как Photoshop:

Timeline

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

У вас нет никакой необходимости быть платным подписчиком, чтобы иметь возможность использовать приложение Extract; поэтому, даже если вы являетесь платным подписчиком программы Photoshop, вы можете свободно отправлять свои дизайнерские наработки другим веб-разработчикам для кодинга. С другой стороны, веб-разработчик, который получил от вас ссылку на вашу наработку, совсем необязательно должен быть платным подписчиком, чтобы открыть эту ссылку. И даже больше - этот разработчик может вообще не иметь учетной записи в Creative Cloud, чтобы пользоваться приложением Extract.

Я приглашаю всех читателей этой статьи воспользоваться сервисом Adobe Extract и высказать свои пожелания по поводу использования этого ресурса.

Вступление переводчика: приложения Project Parfait на момент перевода данной статьи уже не существует. Продолжателем и правоприемником этого проекта является приложение Adobe Extract. Зачем же была переведена данная статья? Все просто - здесь подробно описан процесс извлечения CSS-кода, текста и изображений точно так, как это обстоит в приложении Extract. Другими словами, читая данную статью о Project Parfait, вы учитесь работать в Extract.

Project Parfait - это новый продукт компании Adobe, на данный момент имеющий версию beta. С помощью него можно открыть в браузере любой файл формата PSD для того, чтобы извлечь из него такие составляющие, как текст, изображения или наборы CSS-правил. На момент написания статьи Project Parfait работает только в браузере Chrome, но компания Adobe планирует расширить его кросс-браузерную совместимость со всеми остальными браузерами по мере продвижения разработки Project Parfait.

Загрузка PSD в Project Parfait

Задача открыть PSD файл в Project Parfait чрезвычайно проста. Для этого достаточно перейти по ссылке “https://projectparfait.adobe.com/” и кликнуть мышью на большой синей кнопке Upload Your Own PSD, которая размещается в правом верхнем углу страницы:

Затем нужно войти под своей учетной записью Adobe ID и перетащить (drag’n’drop) PSD-файл на пустую панель, после чего загрузка файла начнется автоматически:

После того, как загрузка PSD-файла на сервер будет закончена, достаточно кликнуть мышью на миниатюре загруженного файла для того, чтобы он открылся в Project Parfait:

Извлечение CSS правил

Для того, чтобы сгенерировать набор CSS-правил, определяющих любой элемент дизайна страницы, достаточно выбрать этот элемент щелчком мыши. Соответствующий CSS-код автоматически отобразится в правой боковой панели, в поле CSS Inspector. Из этой панели можно скопировать часть сгенерированного кода; или же весь код целиком, нажав кнопку Copy All:

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

Извлечение текста

Синее всплывающее окно, о котором говорилось выше, может послужить еще одной задаче - извлечения текста из PSD-макета. Для этого нужно воспользоваться ссылкой Copy Text внутри этого окна:

Извлечение изображений

Извлечение картинок из PSD-макета с помощью Project Parfait также очень просто. Для начала нужно выбрать на макете изображение, которое будет экспортировано. Если изображение состоит из нескольких слоев, то необходимо нажать и удерживать клавишу Shift для того, чтобы выбрать все нужные слои. Затем щелчком мыши активируем большую подчеркнутую стрелочку в всплывающем окне. Отобразится диалоговое окно Save As, в котором можно задать имя для экспортируемого изображения, формат файла и качество изображения:

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

Недоработки Project Parfait

Проект Project Parfait совсем свежий - на момент написания статьи ему исполнился только месяц, поэтому в вопросе генерации CSS правил существуют некоторые недоработки и ряд CSS-свойств, которые этот продукт не может сгенерировать. Однако, число сторонников проекта Project Parfait на его форуме растет; как растет и колличество обновлений для этого продукта. Поэтому я уверен, что команда Adobe активно работает в этом направлении и в скором времени стоит ожидать значительных улучшений Project Parfait.

Ниже представлен список недоработок Project Parfait.

• значения прозрачности, которые задаются для всего слоя в целом, как правило устанавливаются с помощью соответствующего значения фонового цвета слоя, в RGBA формате; альфа-канал фонового цвета используется для задания прозрачности; при экспортировании всего элемента целиком, вместе с границами, тенями и так далее, это значение прозрачности будет применено к ним вместо того отдельного значения, которое было установлено в макете для каждой из составляющих данного элемента
• невозможно определить наличие множественных теней у элемента макета; если выбран элемент, у которого есть внешние и внутренние тени одновременно, то в Project Parfait они будут проигнорированы
• не поддерживается прозрачность теней для элемента дизайна; вместо значений в RGBA формате Project Parfait выдает тень с непрозрачными цветами в HEX-формате
• нет никакого способа извлечь изображение в качестве pattern’а, которое является фоновым изображением для макета; нет даже возможности определить границы этого pattern’а, чтобы экспортировать его как простое изображение
• границы, размещенные внутри слоя, не определяются Project Parfait; однако, границы, заданные через Live Shape Properties, могут быть легко экспортированы
• градиенты, сгенерированные не через CSS-свойство

  1	background-color

  , необходимо дополнять fallback’ом для браузеров, которые не поддерживают CSS-градиенты

Что сейчас доступно в Project Parfait

Работа с текстом

В Project Parfait прекрасно реализована работа с текстом PSD-макета.

Задача определения и генерирования целочисленных значений, таких как 100, 300, 900 для определения насыщенности шрифтов, отлично работает. Это означает, что если в PSD-макете, созданном в Photoshop, для обозначения насыщенности шрифтов были применены такие специальные слова, как “Thin”, “Light”, “Black” и так далее, то при генерации CSS-правил в Project Parfait эти обозначения будут заменены на более правильные целочисленные значения.

В Project Parfait также прекрасно реализована работа с интерлиньяжем (line height), значение которого вычисляется как относительная величина на основе размера шрифта выбранного элемента макета.

В дополнение к вышесказанному, если в строке текста имеются фрагменты, отличающиеся от основного теста, то Project Parfait прекрасно их распознает и для каждого из таких фрагментов сформирует дополнительный набор CSS-правил, со специальным комментарием

1

/* Inline Style */

Работа со слоями

Иногда случается так, что слои макета организованы таким образом, что расположены один над другим; или же расположены так близко друг у другу, что становится трудно выбрать один из них для дальнейшей работы с ним. В Project Parfait все слои макета вынесены в отдельную вкладку Layers, где можно легко и удобно работать с ними:

Цветовая палитра макета

Как только PSD-макет загружается на сервер, Project Parfait производит его анализ и определяется все цвета, которые использовались дизайнером в его работе. Цвета группируются в цветовую палитру, которая помещается в разделе Colors правой панели инструментов. Помимо этого, при выборе любого элемента на макете, если хотя бы один цвет из созданной Project Parfait цветовой палитры использовался в этом элементе, то данный цвет автоматически подсвечивается в разделе Colors:

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

Работа с градиентами

Точно также, как Project Parfait может определять обычные цвета на макете, имеется возможность определения градиентов. Сгенерированные для них правила можно скопировать из правой панели инструментов и использовать в кодинге. И точно также, как и с простыми цветами, любой элемент на макете, в котором использованы градиенты, при его выделении автоматически подсвечивает набор CSS-правил, которые размещены в правой панели инструментов и использовались при стилизации этого элемента:

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

Общая информация о шрифтах

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

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

Общая информация о разметке

Когда при разработке дизайна работа выполняется непосредственно в программе Photoshop, то получение информации о ширине, высоте, дистанции, положении каждого из элементов дизайна - задача не и легких. По другому дело обстоит в Project Parfait.

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

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

Project Parfait бесплатен

На данный момент проект Project Parfait является бесплатным для использования. Достаточно войти в систему под своим личным Adobe ID и все готово!

Если вы являетесь дизайнером, который ищет улучшений для своего рабочего процесса; или вы разработчик, который стремится как можно проще и быстрее преобразовать PSD-макет с код, в обоих случая Project Parfait может послужить образцом нового подхода к веб-разработке.

В библиотеке jQuery имется возможность использования области применения селекторов, с помощью контекста.

Что такое контекст в jQuery? Давайте рассмотрим “стандартную” запись кода на JavaScript(jQuery):

$('li').addClass('someClass');

Видим в этом коде, что функции

1

$()

1

li

1

$()

Однако это не является правилом. И функции

1

$()

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

То есть, запись вида:

$('li').addClass('someClass');

… говорит - найти все элементы

1

li

А вот запись вида:

$('li','#primo').addClass('block__item--first');

… говорит, что нужно найти все селекторы

1

li

1

#primo

1

#primo

1

li

Можно слегка усложнить область видимости селекторов - указать не одну область, а две области:

$('li','#primo,#tetro').addClass('block__item--first');

… в этом случае будут возвращены только те элементы

1

li

1

#primo

1

#tetro

1

li

В качестве второго аргумента (контекста) функции

1

$()

Контекстом может быть результат работы другой функции! То есть, можно одной функции выборки передавать результат выборки другой функции!

Например, таким гипотетическим образом:

$('a',$('#primo > li')).addClass('block__link--decor');

На этом все.

Достаточно интересный (для меня) метод выборки элементов из коллекции - метод

1

.slice()

Просто этот метод позволяет установить диапазон (область), по которому (внутри которой) будут выбираться элементы.

Синтаксис метода

1

.slice()

.slice(start,[end])

Возвращает элементы с индексами от

1

start

1

end

1

end

Элементы с индексом

1

start

1

end

1

.slice(3,5)

Кроме этого, параметры могут быть заданы в форме отрицательных чисел, в таком случае, отсчет элементов идет с конца набора:

1

-1

1

-2

Примеры использования:

1

$("div").slice(3)

1

$("div").slice(3, 5)

1

$("div").slice(-4, -2)

1

$("div").slice(-2)

Приведу пример HTML-разметки:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Такой javascript-код:

$(function(){
  var list = $('.test');
  list.find('li').slice(2,10).addClass('test__link--sliced');
});

… выполнит следующее:

• создаст переменную

  1

  list

  и поместит в нее результат выборки -

  1	$('.test')

• найдет в переменной

  1

  list

  все элементы

  1

  li

  -

  1	.find('li')

• в найденной коллекции определит диапазон элементов

  1

  li

  с индексами с 2-го по 10-й -

  1	.slice(2,10)

• добавит к элементам

  1

  li

  этого диапазона класс -

  1	.addClass('test__link--sliced')

• но не добавит класс

  1	.test__link--sliced

  к элементу

  1

  li

  с индексом 10!

Результатом выполнения показанного выше js-кода будет такая HTML-разметка:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Обратите внимание, что нумерация элементов начинается с

1

0

Еще один пример, более краткий и наглядный.

Начальный HTML-код:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

JavaScript-код:

$(function(){
  var bad = $('.bad');
  bad.find('li').slice(2,4).addClass('bad__item--sliced');
});

Результат:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

На этом все. Материал частично основан на ресурсе jquery.page2page и не претендует на оригинальность.

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

Приведу пример HTML-разметки, над которой буду тренироваться:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

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

1

.nth-child()

nth-child(even) и nth-child(odd)

Такой пример javascript-кода:

$(function(){
  var list = $('.test');
  list.find('li:nth-child(even)').addClass('test__item--right');
  list.find('li:nth-child(odd)').addClass('test__item--left');
});

… этот javascript-код читается так:

• создать переменную

  1

  list

  и поместить в нее результат выборки

  1	$('.test')

• в переменной

  1

  list

  найти все четные (even) элементы

  1

  li

  -

  1	.find('li:nth-child(even)')

• и присвоить этим элементам

  1

  li

  класс -

  1	.addClass('test__item--right')

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
</ul>

… затем:

• в переменной

  1

  list

  найти все нечетные (odd) элементы

  1

  li

  -

  1	.find('li:nth-child(odd)')

• и присвоить этим элементам

  1

  li

  класс -

  1	.addClass('test__item--left')

<ul class="test">
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
</ul>

Как видим, все просто и в точности также, как это обстоит в CSS с его селектором

1

nth-child

nth-child(pattern)

Такой пример javascript-кода:

$(function(){
  var list = $('.test');
  list.find('li:nth-child(2)').addClass('test__link--capitalize');
  list.find('li:nth-child(11)').addClass('test__link--uppercase');
});

• найдет второй элемент

  1

  li

  из коллекции -

  1	.find('li:nth-child(2)')

• и присвоить ему класс -

  1	.addClass('test__link--capitalize')

• найдет 11-й элемент

  1

  li

  из коллекции -

  1	.find('li:nth-child(11)')

• и присвоить ему класс -

  1	.addClass('test__link--uppercase')

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item test__link--capitalize"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--uppercase"></li>
  <li class="test__item"></li>
</ul>

Заключение

Вот и все, что можно сказать о методе

1

nth-child

Но чуть не забыл упомянуть такой важный момент! Как уже можно было заметить, нумерация при использовании метода

1

nth-child

Впрочем, точно также обстоят дела и с селектором

1

nth-child

На этом все.