Посібник користувача Скасувати

Поділ веб-сторінок на фрагменти

Фрагменти ділять зображення на менші зображення, що знову збираються на веб-сторінці за допомогою 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. Натисніть кнопку «Просунути» на панелі параметрів.

Перегляд фрагментів і параметрів фрагмента

Можна переглядати фрагменти у Photoshop та в діалоговому вікні Зберегти для Web. Наведені нижче характеристики можуть допомогти ідентифікувати й розрізняти фрагменти:

Лінії меж фрагментів

Визначення межі фрагмента. Суцільні лінії позначають, що фрагмент є користувацьким фрагментом або фрагментом на основі шару; крапкові пунктири позначають, що фрагмент є автофрагментом.

Кольори фрагмента

Відрізняйте користувацькі фрагменти та фрагменти на основі шару від автофрагментів. Типово користувацькі фрагменти та фрагменти на основі шару мають сині символи, а автофрагменти – сірі.

Крім того, діалогове вікно Зберегти для Web використовує коригування кольору для затемнення невиділених фрагментів. Ці коригування служать лише для показу і не впливають на колір кінцевого зображення. Типово коригування кольору для автофрагментів в два рази більше за коригування кольору для користувацьких фрагментів.

Нумерація фрагментів

Фрагменти нумеруються зліва направо та зверху донизу, починаючи з верхнього лівого кута зображення. Якщо змінити порядок усієї кількості фрагментів, нумерація фрагментів оновлюється для відображення нового порядку.

Жетони фрагментів

Наведені нижче жетони або значки вказують на певні умови.

Користувацький фрагмент має вміст «Зображення».

Користувацький фрагмент має вміст «Немає зображення».

Фрагмент на основі шару.

Показ або приховування меж фрагментів

  1. Виберіть «Перегляд» > «Показати» > «Фрагменти». Щоб приховати та показати фрагменти разом з іншими елементами, скористайтеся командою «Допоміжні елементи». Див. Показ або приховування допоміжних елементів.

Показ або приховування автофрагментів

  1. Виконайте одну з таких дій:
    • Виберіть інструмент «Виділення фрагмента»  і клацніть пункт «Показати автофрагменти» або «Сховати автофрагменти» на смужці параметрів.

    • Виберіть «Перегляд» > «Показати» > «Фрагменти». Автофрагменти з'являються з рештою фрагментів.

Показ або приховування нумерації фрагментів

  1. Виконайте одну з таких дій:
    • У Windows виберіть команду «Редагувати» > «Параметри» > «Напрямні, Сітка і Фрагменти».

    • У Mac OS виберіть «Photoshop» > «Параметри» > «Напрямні, Сітка і Фрагменти».

  2. У пункті «Фрагмент» клацніть «Показати номери фрагментів».

Зміна кольору ліній поділу

  1. У Windows виберіть «Редагувати» > «Параметри» > «Напрямні, Сітка і Фрагменти»; у Mac OS виберіть «Photoshop» > «Параметри» > «Напрямні, Сітка і Фрагменти».
  2. У пункті «Фрагменти» виберіть колір у меню «Колір лінії».

    Після зміни кольору виділені лінії поділу автоматично відображаються у контрастному кольорі.

Отримуйте допомогу швидше й простіше

Новий користувач?