Обзор инструмента «Раскройка»

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

Photoshop заново собирает раскроенные изображения на веб-страницах с помощью таблиц HTML или слоев CSS. Когда вы экспортируете раскроенное изображение с помощью команды Файл > Экспортировать > Сохранить для Web, Photoshop сохраняет каждый фрагмент как отдельный файл. Он также создает HTML или CSS, необходимые для отображения изображения в браузере как единой композиции.

Как работает инструмент «Раскройка»

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

У этого подхода есть несколько практических преимуществ:

• Назначайте разные URL-ссылки для создания интерактивных элементов навигации
• Применяйте разные настройки сжатия, чтобы сбалансировать качество и размер файла в разных областях
• Обновляйте отдельные разделы без повторного экспорта всей композиции

Типы фрагментов по способу создания

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

• Пользовательские фрагменты: Области, которые вы задаете вручную с помощью инструмента «Раскройка». Вы полностью управляете их размером, положением и свойствами, и они остаются на месте, пока вы их не переместите или не измените.
• Фрагменты на основе слоев: Фрагменты включают все пиксели слоя. Их границы автоматически обновляются, когда вы перемещаете или редактируете слой. Они хорошо подходят для контента, который часто меняется, но дают меньше контроля над точным размещением, чем пользовательские фрагменты.
• Автофрагменты: Фрагменты, которые заполняют оставшееся пространство изображения, не покрытое пользовательскими фрагментами или фрагментами на основе слоев. Photoshop создает их автоматически и повторно создает каждый раз, когда вы добавляете, удаляете или изменяете другие фрагменты.Все автоматические фрагменты в изображении имеют одинаковые настройки улучшения.
• Подфрагменты: Особый тип автоматического фрагмента, который появляется при пересечении фрагментов.Подфрагменты показывают, как Photoshop будет разделять области пересечения при сохранении улучшенного файла.Вы не можете выбрать или отредактировать подфрагменты отдельно от их базовых фрагментов.

Тип фрагмента по содержимому

Фрагменты также классифицируются по типу содержимого, которое они включают.

• Фрагменты изображения: Тип фрагмента по умолчанию для визуального содержимого, содержащий данные изображения из документа Photoshop.
• Фрагменты без изображения: Пустые ячейки таблицы для текста HTML или сплошного цвета.Photoshop не экспортирует их как файлы изображений, что делает их удобными для динамического текста, который можно выделить.
• Фрагменты таблицы: Фрагменты, которые определяют, как Photoshop формирует таблицу HTML, используемую для сборки разделенного на фрагменты изображения в браузере.

Визуальные обозначения фрагментов

Photoshop использует визуальные обозначения, чтобы помочь вам различать типы фрагментов в процессе работы.

• Линии фрагментов: Сплошные линии обозначают фрагменты пользователя или фрагменты на основе слоя, а пунктирные линии обозначают автоматические фрагменты.
• Цвета фрагментов: Синие символы обозначают фрагменты пользователя и фрагменты на основе слоя, а серые символы — автоматические фрагменты.
• Номера фрагментов: Номера в левом верхнем углу каждого фрагмента идут слева направо и сверху вниз и автоматически обновляются при перестановке или изменении фрагментов.
• Значки фрагментов: Небольшие значки обозначают содержимое и тип фрагмента.Например, значок изображения обозначает фрагмент пользователя с содержимым изображения, перечеркнутый значок изображения обозначает фрагмент пользователя без содержимого изображения, а значок слоя обозначает фрагмент на основе слоя.

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