Разрезание изображений WEB в Adobe Photoshop CS5

wpid-AdobePhotoshopCS5forAll_image733.jpg

На веб-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различные гипертетовые ссылки. Наиболее очевидным путем реализации такого элемента навигации является разрезание изображения на отдельные фрагменты (slice). После того как изображение разрезано, его можно собрать на странице, используя таблицы HTML. Выполнение такой работы вручную весьма длительная и нетворческая работа. Photoshop может выполнить самую трудную ее часть за вас!

Определение фрагментов

Инструмент Slice (Фрагмент) предназначен для разрезания изображений на прямоугольные фрагменты (рис. 15.18, а), а Select Slice (Выделение фрагмента) — для выделения таких фрагментов (рис. 15.18, б).

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

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

 а  б Рис. 15.18. Палитры инструментов Slice (а) и Select Slice (б)

Когда вы работаете со слайками, все время помните:

± вы можете создать слайк, используя инструмент Slice (Фрагмент);

± после того как вы создали фрагмент, вы можете выбрать его, передвигать, мять размеры, выравнивать по отношению к другим размерам, используя инсумент Slice Select (Выделение фрагмента);

± вы можете устанавливать опции для каждого слайка в соответствии с его сержанием — текстовым, именем или URL в диалоге на палитре опций.

Режим отображения границ фрагментов, на которые разрезано изображение, регулируется командой View | Show | Slices (Вид | Показать | Фрагменты).

Если выбрать инструмент Slice (Фрагмент) или Select Slice (Выделение фрагмента), режим показа фрагментов включается автоматически, если включен режим отображения фрагментов командой View | Show | Slices (Вид | Показать | Фрагменты).

1.                       Откройте изображение КОВЕР.jpg и сохраните под именем КОВЕР_sliced. jpg в вашей рабочей папке.

    Рис. 15.19. Рамка фрагмента

2.                       Выберите инструмент Slice (Фрагмент) или Slice Select (Выделение фрагмеа). Как видите, даже если изображение не разрезано, Photoshop считает его разрезанным, правда, на единственный "кусок" и если включен режим отобрения фрагментов командой View | Show | Slices (Вид | Показать | Фрагменты).

Об этом говорит окаймляющая его рамка с порядковым номером фрагмента и специальной пиктограммой фрагмента (рис. 15.19).

3.                       Выберите инструмент Slice (Фрагмент) на палитре инструментов. Работа с ним похожа на работу с инструментом Crop (Кадрирование): сначала вы строите рамку, а затем уточняете ее размеры и положение с помощью манипуляторов.

4.                       Поместите курсор инструмента Slice (Фрагмент) в левый верхний угол изобрения. Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется часть узора ковра. Затем отпустите кнопку мыши (рис. 15.20, а). Автоматически появятся два других прямоуголых фрагмента (рис. 15.20, б).

а                                                                   б

Рис. 15.20. Разрезание изображения

Типы слайков

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

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

Рис. 15.21. Типы слайков: содержащий

а            б        изображение (а); связанный слайк (б)

Экспорт и масштабирование

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

меру JPEG-файла. Photoshop экспортирует изображения в JPEG- и HTML-файлы, которые могут загружаться с веб-сервера.

1.                       Выберите File | Export | Zoomify (Файл | Экспорт | Масштабирование) и задае параметры экспорта:

® Template Sets (Установки шаблоны) — позволяют выбрать фон страницы и способ навигации изображения, просматриваемого в браузере;

® Output Location (Выходная локация) — определяют местоположение и нвание файла;

® Image Tile Options Specifies (Спецификации плитки изображения) — опреляют качество изображения;

® Browser Options Sets (Опции браузера) — устанавливают ширину и высоту изображения в пикселах для просмотра основного изображения в браузере.

2.                       Загрузите HTML-файлы и файлы изображения в ваш веб-сервер.

Источник: Комолова, Н. В., Adobe Photoshop CS5 для всех / Н. В. Комолова, Е. С. Яковлева. — СПб.: БХВ-Петербург, 2011. — 624 с.: ил. + CD-ROM — (В подлиннике)

По теме:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Оставить комментарий