Функция извлечения Creative Cloud — это новая бесплатная функция службы ресурсов Creative Cloud, позволяющая просматривать PSD-файлы напрямую в браузере, в том числе содержащиеся в них слои и композиции слоев. Она будет особенно полезной веб-дизайнерам и разработчикам, которые смогут предоставлять совместный доступ к файлам PSD, извлекать из них информацию о проекте и загружать готовые к использованию ресурсы. С помощью функции извлечения вы можете выполнять с PSD-файлом следующие действия непосредственно в браузере.

  • Скопировать текст и стили CSS
  • Извлечь информацию о цвете, градиенте и шрифте
  • Измерить расстояние между элементами
  • Сохранить оптимизированные графические ресурсы для рабочей среды

Если вы веб-дизайнер или разработчик и работаете с файлами PSD, функция извлечения Creative Cloud коренным образом упрощает процесс преобразования проекта в код, сокращая число утомительных этапов и минимизируя объем ненужной переписки между разработчиками и дизайнерами.

Примечание.

Служба Extract только считывает данные, но не позволяет редактировать файлы PSD.

Извлечение сведений о стиле

  1. Войдите в учетную запись на веб-сайте Creative Cloud.
  2. Перейдите в раздел Ресурсы в своей учетной записи Creative Cloud.
  3. Загрузите файл PSD, перетащив его в область «Файлы» или нажав «Выбрать файл». Также можно перейти к последнему загруженному файлу PSD.
  4. Щелкните на эскизе PSD-файла, чтобы открыть его на вкладке Извлечение.
Файл откроется на вкладке «Извлечение».

На вкладке «Извлечение» можно просматривать весь проект PSD внутри браузера. У вас есть возможность исследовать иерархию, просматривать различные композиции слоев, а также извлекать части файла PSD в качестве новых файлов изображений. Если щелкнуть на любой элемент в окне предварительного просмотра PSD-файла, будет выбран соответствующий слой и предоставлена информация о нем. После выбора слоя можно производить следующие действия.

Просмотр и копирование координат и размеров элементов

Если щелкнуть один элемент в файле PSD, появится панель «Инфо». На ней будут показаны ширина и высота элемента, а также координаты x и y слоя элемента в дизайне.

Координаты и размеры элемента дизайна в пикселях (px)
Координаты и размеры элемента дизайна в процентах (%)

Примечание.

Щелкните на любом значении, например W, H, X или Y, чтобы скопировать его в буфер обмена.

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

Измерения внутренних элементов отображаются относительно размеров внешнего элемента

Примечание.

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

Показ расстояния между двумя элементами

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

Расстояние между двумя элементами

Копирование CSS-кода

Если элемент выбран в PSD, скопируйте его CSS, щелкнув «Копировать CSS» на синей панели «Инфо». Вы также можете просмотреть и скопировать CSS-код из инспектора свойств CSS.

Просмотр CSS-кода

Примечание.

Служба Extract поддерживает препроцессоры. Чтобы просмотреть варианты использования препроцессоров CSS, на вкладке «Стили» нажмите (стрелка вниз) возле CSS.

Использование препроцессоров CSS

Копирование текста

Если выбранный элемент содержит текст, нажмите «Скопировать текст», чтобы скопировать текст в буфер обмена.

Копирование выбранного текста в буфер обмена

Просмотр и копирование информации о шрифте, цвете и градиенте

Вы можете просмотреть и скопировать информацию о шрифтах, цветах и градиентах, используемых в документе PSD, открыв панель «Стили». При просмотре информации щелкните образец размера шрифта, цвета или градиента, чтобы скопировать значение в буфер обмена.

Пример значения цветового градиента

Если выбрать какой-то элемент, то на панели «Стили» будут выделены соответствующие стили цвета и шрифта.

Примечание.

Благодаря интеграции с Adobe Typekit служба Extract предоставляет доступ к тысячам высококачественных шрифтов. Значок Typekit () отображается рядом со шрифтами из Typekit на панели «Стили». Если щелкнуть этот значок Typekit, Extract откроет страницу, соответствующую шрифту в Typekit.

Если вы нашли безопасный шрифт, который вы хотите использовать, добавьте его в комплект в Typekit и свяжите его с рабочим кодом.

Сведения о шрифтах и цветах для выбранного элемента

Использование инструмента «Палитра цветов»

Инструмент «Палитра цветов» () позволяет быстро узнать цвет элемента в проекте.

  • Выберите инструмент «Палитра цветов» и щелкните в любом месте проекта. Палитра обнаруживает цвет и добавляет его как образец на панель «Стили». Теперь вы можете легко просмотреть и скопировать данные CSS для цвета.
Инструмент «Палитра цветов»

Извлечение графических ресурсов

С помощью функции извлечения Creative Cloud вы можете выбрать один или несколько слоев в PSD-файле и извлечь соответствующий графический ресурс. Ресурсы можно извлечь как изображения в формате PNG (8 бит), PNG (32 бита), JPG и SVG.

Извлечение графического ресурса

На синей панели «Инфо», открывшейся для элемента, нажмите значок и выполните следующие действия.

  1. Проверьте настройки графических ресурсов. Если нужно, выберите другой поддерживаемый графический формат (PNG, JPG или SVG).
  2. Если графический ресурс создается в формате JPG, настройте его качество.
  3. При необходимости выберите масштаб. Например, выберите параметр «Масштаб 2×». Для ресурса можно выбрать масштаб от 0,1× до 5×.
  4. Нажмите «Сохранить».
  5. Найдите созданный ресурс на панели «Ресурсы». Эти ресурсы также можно найти в новой папке рядом с PSD-файлом на вкладке Ресурсы в Creative Cloud. Созданная папка имеет имя <имя_файла>-assets. Например, если файл имеет имя adventure.psd, папке с ресурсами будет присвоено имя adventure-assets.

    Если щелкнуть миниатюру изображения на панели «Ресурсы», то изображение загрузится на локальный компьютер.
Панель «Ресурсы»

Примечание.

Если вы вошли в систему и просматриваете PSD-файл на вкладке Ресурсы в Creative Cloud, вам доступны расширенные функции извлечения ресурсов. При каждой загрузке ресурса он добавляется на панель Ресурсы и в папку .psd_assets в ресурсах Creative Cloud. Чтобы загрузить ресурс локально на компьютер, щелкните миниатюру изображения на панели «Ресурсы».

Панель «Ресурсы» недоступна, когда для просмотра файла PSD вы переходите по ссылке от другого пользователя. В этом случае можно использовать службу Extract как обычно, но ресурсы будут загружаться на компьютер сразу после нажатия значка . Используйте диспетчер загрузок вашего браузера, чтобы найти ресурсы на локальном диске.

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

На панели «Слои» отображаются все слои и группы слоев проекта PSD. Так как функция извлечения Creative Cloud только считывает данные, никакие изменения слоев в файле PSD не сохраняются.

На панели «Слои» вы можете включить или отключить видимость, выбрать элементы слоя и извлечь ресурсы. 

Извлечение слоев или групп слоев как графических ресурсов

Можно извлечь слой или группу слоев в файле PSD в виде графического ресурса. Выполните следующие действия.

  1. Щелкните панель «Слои» для просмотра иерархии слоев в файле PSD.
Иерархия слоев

Примечание.

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

  1. Иерархию слоев можно исследовать и перемещаться по ней. 
    • Чтобы раскрыть группу слоев, нажмите значок папки () рядом с ней.
    • Щелкните элемент, чтобы выделить соответствующий слой или группу слоев на панели «Слои».
  2. Выберите слой (или группу слоев), который нужно извлечь в виде графического ресурса. Чтобы выделить несколько слоев, выберите их, удерживая нажатой клавишу COMMAND (Mac) или CTRL (Windows). Если выбрано несколько объектов, они будут извлечены как один ресурс, содержащий выбранные слои или группы.
  3. Нажмите значок  возле слоя или группы слоев. Если выбрано несколько слоев или групп слоев, нажмите значок возле любого из выбранных слоев.
  4. Введите имя нового графического ресурса.
  5. Выберите формат графического ресурса (PNG 8 Alpha, PNG 32, JPG или SVG).
  6. (Необязательно) Если создается графический ресурс в формате JPG, вы можете изменить его качество.
  7. Нажмите «Сохранить». 
  8. Найдите созданный ресурс на панели «Ресурсы». Эти ресурсы также можно найти в новой папке, которая находится рядом с PSD-файлом на вкладке Ресурсы в Creative Cloud.

Примечание.

Функция «Сбросить слои» позволяет восстановить исходное состояние видимости слоя в проекте.

Скрытие слоя или группы слоев

Чтобы скрыть или показать слой или группу слоев, щелкните значок глаза () рядом с ним на панели «Слои».

Работа с композициями слоев

Функция извлечения Creative Cloud позволяет просматривать различные композиции слоев Photoshop. Если для обработки функцией извлечения вы загрузите файл PSD, содержащий композиции слоев, в верхней части PSD появится всплывающее меню. Это всплывающее меню содержит все композиции слоев в файле PSD и вариант, имеющий название Последнее состояние документа. Последнее состояние документа — это последнее состояние файла в Photoshop перед его сохранением и отправкой в Creative Cloud. Это состояние может являться или не являться композицией слоев.

Работа с композициями слоев в службе Extract

Совместное использование файлов

При просмотре файла PSD на вкладке Extract можно предоставить общий доступ к нему, используя функции общего доступа Creative Cloud. Пользователи, которым предоставлен такой общий доступ к файлу, смогут извлекать ресурсы и данные измерений из них, даже если они не вошли в систему Creative Cloud.

Дополнительную информацию см. в разделе Совместное использование файлов и папок.

Оставить отзыв

Если у вас имеются вопросы, проблемы или вы хотите предоставить отзыв, это можно сделать на нашем форуме, посвященном использованию службы Extract для работы с PSD.

Часто задаваемые вопросы

Поддерживает ли служба Extract теги Photoshop Generator?

Да. При извлечении графического ресурса, насколько это возможно, по умолчанию используются настройки, соответствующие тегам Generator, указанным в соответствующем имени слоя.

Можно ли редактировать файл PSD с помощью службы Extract?

Нет. Служба Extract только считывает данные.

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

В именах файлов PSD и в именах графических ресурсов нельзя использовать символы |, ", ?, <, >, /, \, ;, * и :.

Кто имеет доступ к файлам PSD, которые я выкладываю в Creative Cloud?

Доступ к любым файлам, которые вы загружаете в службу Extract, возможен только через вашу учетную запись Creative Cloud.

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

Служба Extract работает с файлами PSD, в которых используется цветовое пространство CMYK?

Нет. Перед загрузкой в службу Extract необходимо конвертировать такие файлы PSD из цветового пространства CMYK в RGB.

Поддерживаются ли другие форматы файлов, кроме PSD?

Нет. В настоящее время поддерживаются только файлы PSD.

Есть ли ограничения на файлы PSD, с которыми может работать служба Extract?

Служба Extract предназначена для работы с файлами PSD, созданными в Photoshop. Не рекомендуется использовать службу Extract для работы с файлами PSD размером более 2 ГБ или содержащими более 1000 слоев.

Чем отличаются Extract и Adobe Generator для Photoshop CC?

Generator и Extract предназначены для упрощения процесса получения кода дизайнерами и разработчиками. Но Generator извлекает графические ресурсы в Photoshop CC, а Extract работает непосредственно в браузере как служба Creative Cloud. Для работы Extract не требуется устанавливать и запускать Photoshop.

Также в Extract можно создать единый ресурс из нескольких слоев.

Требуется ли подписка на Creative Cloud для использования Extract?

Любой пользователь с бесплатной или платной учетной записью Creative Cloud может загрузить файл PSD в службу ресурсов Creative Cloud и воспользоваться функцией извлечения.

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

Почему на панели стилей Extract нет некоторых цветов или градиентов?

В большинстве таких ситуаций цвета или градиенты — это заливки на основе пикселей, которые не поддерживаются Extract. Если файл PSD использует подобные типы заливок, определите цвета с помощью палитры цветов и добавьте цветовые образцы на панель «Стили».

Существуют ли ограничения градиентов для CSS в Extract?

Да, некоторые типы градиентов не могут быть созданы в CSS без специальных процедур. В текущий момент Extract не предоставляет точный CSS для следующих типов градиентов: «Угол», «Зеркальный», «Ромбовидный» и «Разбивка фигуры». Однако линейный и радиальный градиенты поддерживаются.

Почему при предварительном просмотре PSD в Extract проект отличается от того, что видно в Photoshop?

Проект может отображаться в представлении Extract не так, как в Photoshop. Если вы наблюдаете такие различия, сообщите нам.

Опубликуйте запись на нашем форуме с описанием проблемы. Или, что еще лучше, опубликуйте изображение с различиями, и мы попытаемся устранить проблему.

Можно ли использовать Extract на мобильных устройствах?

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

Можно ли загрузить все ресурсы одновременно?

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

Можно ли загрузить весь CSS-код проекта за один раз?

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

Если вас интересует эта функция, опубликуйте сообщение на нашем форуме с описанием вашего предложения по организации вывода CSS-кода.

Я предоставил совместный доступ к файлу PSD, однако получатель не видит вкладку Extract. Почему?

Если совместный доступ к файлу PSD был предоставлен до выпуска службы Extract в конце августа 2014 года, вкладка Extract для этого файла PSD не будет активирована. Для ее активации выполните следующие действия.

Этот вариант позволяет использовать службу Extract без изменения URL-адреса, опубликованного для совместного доступа.

  1. Откройте вкладку «Дополнительные настройки» в диалоговом окне «Отправить ссылку».
  2. Убедитесь, что параметр «Разрешить использование Extract» включен.

В чем разница между службами Project Parfait и Extract?

Project Parfait — это служба, которую компания Adobe запустила как бета-версию для ознакомления с рабочими процессами, которые теперь можно увидеть в Extract. Служба Extract имеет всю функциональность Project Parfait плюс дополнительные возможности. Теперь, после того как служба Project Parfait была официально введена в Creative Cloud, возможность использовать ее для извлечения информации и ресурсов из файла PSD будет отменена. 

Что произойдет с файлами PSD, которые были загружены в Project Parfait?

Если вы использовали службу Project Parfait и хотели бы загрузить файлы, над которыми работали, вам будет предоставлена такая возможность до конца 2014 года. 

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет