Руководство пользователя Отмена

Разделение веб-страниц на фрагменты

Фрагменты разделяют изображение на изображения меньшего размера, которые собираются на веб-странице с помощью HTML-таблицы или слоев CSS. Разделив изображение, можно назначить каждому фрагменту свою URL-ссылку для создания навигации либо оптимизировать каждую часть изображения с помощью индивидуальных параметров оптимизации.

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

Разбитая на фрагменты веб-страница в Photoshop
Разбитая на фрагменты веб-страница.

При работе с фрагментами необходимо учитывать следующее.

  • Создать фрагмент можно с помощью инструмента «Фрагмент» или с помощью слоев.

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

  • Вы можете настроить параметры каждого фрагмента, например тип фрагмента, название и адрес URL в диалоговом окне «Параметры фрагмента».

  • Каждый фрагмент можно оптимизировать с помощью разных параметров оптимизации в диалоговом окне Сохранить для Web.

Типы фрагментов

Фрагменты различаются по типу содержимого (автоматический, изображение, без изображения) и по способу создания (пользовательский, слоевой, автоматический).

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

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

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

Фрагменты могут быть созданы разными способами.

  • Автоматические фрагменты создаются автоматически.

  • Пользовательские фрагменты создаются с помощью инструмента «Фрагмент».

  • Слоевые фрагменты создаются с помощью панели «Слои».

Выделение фрагментов веб-страницы

Можно нарисовать линии разделения фрагментов прямо на изображении с помощью инструмента «Фрагмент» либо создать изображение с помощью слоев и затем создать фрагменты на основе слоев.

Создание фрагмента с помощью инструмента «Фрагмент»

  1. Выберите инструмент «Фрагмент» . (Нажимайте клавишу «C», чтобы по очереди пройти инструменты входящие в группу инструмента «Рамка».)

    В окне документа автоматически появятся все существующие фрагменты.

  2. На панели параметров выберите настройки стиля.

    Обычный

    Пропорции фрагмента определяются перетаскиванием.

    Заданные пропорции

    Устанавливает соотношение высоты к ширине. Введите целые или дробные числа для задания соотношения сторон. Например, чтобы создать фрагмент, ширина которого в два раза больше высоты, введите значение 2 для ширины и 1 для высоты.

    Заданный размер

    Определяет высоту и ширину фрагмента. Введите количество пикселов в целых числах.

  3. Выделите мышью область, в которой следует создать фрагмент. Чтобы сделать фрагмент квадратным, удерживайте нажатой клавишу «Shift». Перетаскивание курсора при нажатой клавише «Alt» (Windows) или «Option» (Mac OS) позволяет нарисовать границы фрагмента от центра. Чтобы выровнять новый фрагмент по направляющей или другому фрагменту изображения в меню «Просмотр» выберите команду «Привязать к». См. Перемещение, изменение размера и привязка пользовательских фрагментов.

Создание фрагментов по направляющим

  1. Добавьте направляющие к изображению.
  2. Выберите инструмент «Фрагмент» и нажмите кнопку «Фрагменты по направляющим» на панели параметров.

    При создании фрагментов по направляющим все существующие фрагменты удаляются.

Создание фрагмента из слоя

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

Создание фрагмента из слоя в Photoshop
Слоевый фрагмент обновляется при изменении исходного слоя.

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

  1. Выберите слой на панели «Слои».
  2. Выберите «Слой» > «Новый слоевой фрагмент».
Примечание.

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

Преобразование автоматических фрагментов и слоевых фрагментов в пользовательские фрагменты

Слоевый фрагмент привязан к пиксельному содержимому слоя, поэтому единственным способом перемещения, объединения, разделения, изменения размера и выравнивания фрагмента является редактирование слоя — если только не преобразовать его в пользовательский фрагмент.

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

  1. С помощью инструмента «Выделение фрагмента»  выделите один или несколько фрагментов для преобразования.
  2. Нажмите кнопку «Преобразовать» на панели параметров.

Просмотр фрагментов и их параметров

Просмотреть фрагменты можно в диалоговом меню Сохранить для Web и в Photoshop. Следующие признаки помогают определять и различать фрагменты.

Линии границ фрагментов

Определяют границы фрагмента. Сплошные линии обозначают пользовательский или слоевый фрагмент, пунктирными линиями обозначаются автоматические фрагменты.

Цвета фрагмента

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

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

Номера фрагментов

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

Значки фрагментов

Следующие значки обозначают определенное состояние.

Пользовательский фрагмент содержит изображение.

Пользовательский фрагмент не содержит изображения.

Фрагмент является слоевым.

Отображение или скрытие границ фрагмента

  1. В меню «Просмотр» выберите пункт «Показать» > «Фрагменты». Чтобы отобразить или скрыть фрагменты при отображении других элементов, выберите команду «Вспомогательные элементы». См. Отображение или скрытие вспомогательных элементов.

Отображение или скрытие автоматических фрагментов

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

    • В меню «Просмотр» выберите пункт «Показать» > «Фрагменты». Автоматические фрагменты появятся на незаполненной фрагментами области изображения.

Отображение или скрытие номеров фрагментов

  1. Выполните одно из следующих действий.
    • В Windows в меню «Редактирование» выберите «Установки», а затем пункт «Направляющие, сетка и фрагменты».

    • В Mac OS в меню «Photoshop» выберите «Установки», а затем пункт «Направляющие, сетка и фрагменты».

  2. В разделе «Фрагменты» установите флажок «Показывать номера фрагментов».

Изменение цвета линий фрагментов

  1. В Windows выберите в меню «Редактирование» пункт «Установки» > «Направляющие, сетка, фрагменты». В Mac OS выберите «Photoshop» > «Установки» > «Направляющие, сетка и фрагменты».
  2. В разделе «Линии границ фрагментов» выберите цвет из меню «Цвет линии».

    После изменения цвета выделенные линии границ фрагментов автоматически станут контрастного цвета.

Получайте помощь быстрее и проще

Новый пользователь?