Узнайте, как быстро преобразовать файлы PSD в веб-дизайн на основе HTML для мобильных устройств и настольных компьютеров. Извлекайте CSS, изображения, измерения, шрифты, цвета, градиенты и прочее из Photoshop напрямую в Dreamweaver.

Примечание.

Typekit теперь называется Adobe Fonts и входит в состав Creative Cloud и других подписок. Подробнее.

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

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

extract_logo
  • Прямой доступ к вашим собственным файлам PSD в Creative Cloud и файлам PSD, которым предоставлен общий доступ в совместной папке.
  • Контекстные подсказки по коду, чтобы легко задавать шрифты, цвета и градиенты в CSS.
  • Помощь при перетаскивании для создания тегов изображений из слоев PSD.
  • Вставка стилей напрямую в поле интерактивного просмотра (например, в конструктор CSS и отображение элемента).

Начало работы с Extract

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

Панель и рабочая среда Extract

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

Примечание.

Если вы случайно закрыли панель Extract, используйте сочетание клавиш Ctrl + K (для Windows), Cmd + K (для Mac) или выберите «Окно» > «Extract», чтобы снова открыть панель.

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

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

Панель Extract, на которой отображаются файлы PSD, сохраненные в Creative Cloud
Панель Extract, на которой отображаются файлы PSD, сохраненные в Creative Cloud

Примечание.

Чтобы перезапустить урок, щелкните всплывающее меню в правом верхнем углу панели и выберите «Начать урок».

Отправка файлов PSD в Creative Cloud

Вы можете отправить файл PSD в Creative Cloud, щелкнув значок «Отправить PSD» на панели Extract. Если файлы PSD разработаны другим пользователем или командой, вы можете сделать их доступными для совместного использования в Creative Cloud. Затем можно загрузить файлы и отправить их в учетную запись непосредственно на сайте Creative Cloud или через панель Extract в Dreamweaver.

Открытие файлов PSD на панели Extract

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

Чтобы увеличить изображение и рассмотреть дизайн, измените масштаб в верхней части панели Extract или используйте Alt +/-. Используйте вкладку «Слои» или раскрывающийся список «Композиция слоев», чтобы показать или скрыть элементы в файле PSD.

Теперь вы полностью готовы к переносу данных из PSD на веб-сайт. 

Настройка Extract

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

  1. Выберите «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Mac).

  2. Выберите Extract в списке категорий.

  3. (Необязательно) Измените стандартный формат, в котором должны извлекаться изображения.

    Формат извлеченного изображения в Dreamweaver CC
    Формат извлеченного изображения
  4. (Необязательно) В разделе «Extract для устройств» выберите необходимые разрешения. Эти настройки будут использованы при выборе сохранения изображения в нескольких версиях с разными разрешениями.

    • Чтобы сохранять версии с суффиксами, щелкните по соответствующей строке в столбце «Суффикс» и введите текст. 
    • Чтобы версии с разными разрешениями сохранялись в отдельных папках, щелкните по соответствующей строке в столбце «Папка» и введите относительный путь.
    Extract для устройств
    Extract для устройств
  5. (Необязательно) Нажмите кнопку «Очистить кэш», чтобы удалить кэшированные данные, связанные с использованием Extract.

  6. Нажмите кнопку «Применить», а затем закройте диалоговое окно «Настройки».

  7. Чтобы просмотреть изменения на панели Extract, перезагрузите PSD (всплывающее меню > «Перезагрузить PSD»).

    Команда «Перезагрузить PSD» на панели Extract
    Команда «Перезагрузить PSD» на панели Extract

Извлечение CSS из файлов PSD

Можно копировать все или определенные CSS-свойства элементов в файлы PSD, и вставлять стили непосредственно в конструктор CSS, в отображение элемента (в режиме интерактивного просмотра) или в код (источник CSS или HTML-документ).

Кроме того, подсказки по коду автоматически заполняются свойствами CSS элемента, выбранного в файле PSD. Если вы предпочитаете писать код, используйте эти подсказки по коду для извлечения свойств CSS в код.

  1. На панели Extract («Окно» > «Extract») щелкните необходимый файл PSD. Файл PSD развернется в виде миниатюр, что позволит ясно увидеть его структуру.

  2. В файле PSD щелкните необходимый элемент или ресурс. Появится всплывающее окно со списком свойств CSS элемента, и вы сможете выбрать и скопировать их. Можно просмотреть высоту и ширину выбранного элемента в пикселах или процентах.

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

    Команда «Копировать CSS» на панели Extract
    Команда «Копировать CSS» на панели Extract

    Чтобы скопировать CSS, выберите свойства, которые необходимо скопировать, а затем нажмите кнопку «Копировать CSS». 

  3. Вставьте CSS в документ одним из следующих способов:

    • Чтобы вставить CSS в конструктор CSS, щелкните необходимый селектор правой кнопкой мыши, а затем выберите команду «Вставить стили».
    • Чтобы вставить CSS с помощью отображения элемента, щелкните селектор правой кнопкой мыши, а затем выберите команду «Вставить стили».
    • Чтобы вставить CSS в код, поместите курсор вставки в нужное место, щелкните правой кнопкой мыши и выберите «Вставить».

Чтобы использовать подсказки по коду для извлечения CSS, выполните следующие действия.

  1. Откройте источник CSS, прикрепленный к документу, или переключитесь в представление кода HTML-документа.

  2. На панели Extract щелкните необходимый файл PSD, а затем нужный элемент в композиции.

  3. В документе поместите курсор вставки в нужное место кода. 

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

    Подсказки по коду со свойством CSS элемента в файле PSD
    Подсказки по коду со свойством CSS элемента в файле PSD
  5. Для извлечения нескольких свойств CSS выберите требуемые свойства во всплывающем окне панели Extract. После этого (в подсказках по коду) выберите команду вставки выбранного.

    Пакетная вставка свойств CSS в Dreamweaver CC
    Пакетная вставка свойств CSS

Копирование текста из файлов PSD

Текст или содержимое файлов PSD можно вставить на веб-страницу одним щелчком мыши. Чтобы скопировать текст из файла PSD на панель Extract, выберите текстовый элемент и щелкните команду «Копировать текст». Текст скопируется в буфер обмена. После этого можно вставить текст там, где это требуется.

Команда «Копировать текст» на панели Extract
Команда «Копировать текст» на панели Extract

Примечание.

После извлечения текста вы можете извлечь свойства (шрифты и цвета), которые связаны с текстом. Дополнительные сведения см. в разделе Извлечение шрифтов, цветов и градиентов из файлов PSD.

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

Можно просто перетащить любой слой PSD на панели Extract в точное место интерактивного просмотра веб-страницы. Такие визуальные подсказки интерактивного просмотра, как интерактивные направляющие и значок DOM, помогут перетащить и разместить элемент. При задержке указателя мыши на некоторое время перед окончательным перемещением элемента появится значок DOM (</>). Структура DOM отображается при наведении курсора мыши на значок </>, что дает возможность отпустить элемент внутри структуры. Если вы предпочитаете писать код, используйте контекстные подсказки по коду и извлекайте изображения. Подсказки для кода позволяют извлекать цвета и градиенты как изображения.

Примечание.

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

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

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

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

  1. На панели Extract выберите файл PSD, из которого нужно загрузить изображения.

  2. Щелкните необходимое изображение в файле PSD.

    Примечание.

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

    В правой части рабочей среды будут отображаться всплывающие подсказки по коду (в представлении «Код»). 

  3. Чтобы импортировать несколько изображений, выберите их, удерживая нажатой клавишу Shift или Command. Выбранные изображения извлекаются как единое изображение.

  4. Выполните одно из следующих действий:

    • Во всплывающем окне, которое появится при нажатии на изображение, щелкните . Укажите путь, имя файла, формат файла и коэффициент масштабирования (если необходимо). Затем выполните следующие действия.
      • Нажмите «Сохранить», чтобы сохранить изображение в полном разрешении. Чтобы масштабировать изображение, выберите «Масштаб» и укажите коэффициент масштабирования.
      • Нажмите «Сохранить несколько», чтобы сохранить несколько версий изображения с разными разрешениями. Файл PSD не обязательно должен содержать все версии. Dreamweaver может сохранить изображение в нескольких разрешениях во время извлечения.

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

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

    При перетаскивании изображения Dreamweaver отображает имя изображения. Можно редактировать не только имя изображения, но и расширение. Чтобы сохранить изображение, нажмите клавишу Enter. Изображение сохраняется в корневой папке сайта по умолчанию. Чтобы сохранить изображение в другом месте, введите путь вместе с именем файла.

    Редактирование имени файла и расширения при перетаскивании изображения из панели Extract
    Редактирование имени файла и расширения при перетаскивании изображения из панели Extract
    • При нажатии на изображение в Dreamweaver заполняются контекстные подсказки по коду. В представлении кода HTML-документа или в документе CSS установите курсор в место вставки. После ввода имени свойства фонового изображения или тега <img> имя выбранного изображения появляется в подсказках по коду. Выберите изображение, при необходимости измените имя и расширение и нажмите клавишу Enter.

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

    Извлечение изображений с помощью подсказок по коду
    Извлечение изображений с помощью подсказок по коду

Извлечение измерений из файлов PSD

С помощью панели Extract можно легко просмотреть и извлечь значение измерения между двумя элементами в файле PSD. 

  1. В файле PSD на панели Extract щелкните необходимые элементы, удерживая клавишу Shift или Command.

    На панели Extract отображается горизонтальное и вертикальное расстояние между двумя элементами.

    Измерения на панели Extract
    Измерения на панели Extract

    Примечание.

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

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

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

Извлечение шрифтов, цветов и градиентов из файлов PSD

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

  1. На панели Extract щелкните «Стили».

  2. Чтобы извлечь шрифты, выполните следующие действия в разделе «Шрифты».

    1. Разверните требуемый тип шрифта.

      Чтобы узнать больше о шрифте, щелкните значок Adobe Fonts ().

    2. Выберите формат и размер, которые нужно скопировать, и во всплывающем окне, которое появится, нажмите кнопку «Копировать CSS». Извлеките теги текстовых элементов, в которых используются выбранные вами шрифт, формат и размер.

      Примечание.

      В настройках Extract («Настройки» > «Extract») можно изменить единицу шрифта на «em» или «rem». Чтобы просмотреть изменения, щелкните «Перезагрузить PSD» во всплывающем меню в правом верхнем углу панели Extract.

      Извлечение шрифтов
      Извлечение шрифтов
    3. Вставьте CSS там, где это требуется, например в коде или конструкторе CSS.

    Чтобы извлечь цвета, выполните следующие действия в разделе «Цвета».

    1. Щелкните необходимый образец цвета. Извлеките теги элементов, в которых используется выбранный цвет.

      Примечание. С помощью палитры цветов также можно выбрать другой цвет из файла PSD.

    2. Во всплывающем окне, которое появится при нажатии на образец цвета, выберите необходимую модель цвета (RGB, шестнадцатеричная или HSL), а затем скопируйте (Ctrl+c; Cmd+c) значение цвета.

      Извлечение цветов
      Извлечение цветов
    3. Вставьте значение цвета там, где это требуется, например в коде или конструкторе CSS.

  3. Чтобы извлечь градиенты, щелкните образец градиента в разделе «Градиенты». Во всплывающем окне, которое появится, нажмите кнопку «Копировать CSS». Вставьте CSS там, где это требуется, например в коде или конструкторе CSS.

    Вместе с градиентами вставляются префиксы браузера, выбранные в настройках («Настройки» > «Стили CSS»). При извлечении радиального градиента соответствующий CSS добавляется без префикса браузера, поскольку радиальные градиенты не поддерживаются.

    Извлечение градиента
    Извлечение градиента

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

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