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

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

Photoshop повторно складає розділені на фрагменти зображення на веб-сторінках за допомогою таблиць HTML або шарів CSS.Коли ви експортуєте розділене на фрагменти зображення за допомогою команди Файл > Експорт > Зберегти для Інтернету, Photoshop зберігає кожен фрагмент як окремий файл.Він також створює код HTML або CSS, потрібний для відображення зображення як єдиної композиції в браузері.

Як працюють фрагменти

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

Цей підхід має кілька практичних переваг:

• Призначайте різні URL-посилання для створення клікабельних елементів навігації
• Застосовуйте різні параметри стиснення, щоб збалансувати якість і розмір файлу в різних областях
• Оновлюйте окремі розділи без повторного експортування всієї композиції

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

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

• Користувацькі фрагменти: розділи, які ви визначаєте вручну за допомогою інструмента Фрагмент .Ви маєте повний контроль над їх розміром, положенням і властивостями, і вони залишаються на місці, доки ви не перемістите або не зміните їх.
• Фрагменти на основі шарів: фрагменти містять усі пікселі шару.Їхні межі автоматично оновлюються під час переміщення або редагування шару.Вони добре підходять для вмісту, який часто змінюється, але забезпечують менший контроль над точним розташуванням порівняно з фрагментами користувача.
• Автоматичні фрагменти: фрагменти, які заповнюють простір зображення, не охоплений фрагментами користувача або фрагментами на основі шарів.Photoshop генерує їх автоматично й повторно генерує щоразу, коли ви додаєте, видаляєте або змінюєте інші фрагменти. Усі автофрагменти в зображенні мають однакові параметри покращення.
• Підфрагменти: Спеціалізований тип автофрагмента, який з’являється, коли фрагменти перекриваються. Підфрагменти показують, як Photoshop поділить перекриті області, коли ви зберігаєте покращений файл. Не можна вибирати або редагувати підфрагменти незалежно від базових фрагментів.

Тип фрагмента за вмістом

Фрагменти також класифікуються за типом вмісту, який вони містять.

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

Візуальні підказки фрагментів

Photoshop використовує візуальні підказки, щоб легше розрізняти типи фрагментів під час роботи.

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

Розуміння цих візуальних відмінностей допомагає швидко визначати типи фрагментів і працювати ефективніше зі складними макетами фрагментів, коли ви розрізаєте інтернет-сторінки.