Создание веб-галереи фотографий в Adobe Photoshop CS5

wpid-AdobePhotoshopCS5forAll_image880-min-vs.jpg

Для создания наиболее эффективных веб-галерей используйте модуль Adobe Output Module в Adobe Bridge. Для получения дополнительной информации используйте спрочный материал Bridge Help о "выводном модуле фотогалереи". Инсталлируйте опанные здесь плагины только в том случае, если этого требует ваш рабочий процесс.

О веб-галерее фотографий

Веб-галерея фотографий является веб-сайтом, который имеет страницу с миатюрами изображений и страницы изображений полного размера. Каждая страница содержит ссылки, позволяющие посетителям сайта выполнять навигию по сайту. Например, когда посетитель сайта нажимает на миниатюру изражения на главной странице, связанное с миниатюрой полное изображение зружается в галерею. Команда Web Photo Gallery (Веб-галерея фотографий) используется для автоматического создания веб-галереи фотографий из набора изображений (рис. 21.4).

Рис. 21.4. Домашняя страничка веб-галереи фотографий

Photoshop предоставляет разнообразные стили для фотогалереи, которые моо выбрать с помощью команды Web Photo Gallery (Веб-галерея фотографий). Каждый шаблон для галереи стилей поставляется с различными опциями. При иользовании стилей по шаблону некоторые опции могут быть скрыты или совсем недоступны в некоторых стилях.

Создание веб-галереи

1.                       Выберите файл или папку для использования в Adobe Bridge. Ваши изображия будут представлены в том порядке, в котором они отображаются в Bridge. Если необходимо использовать другой порядок, следует изменить порядок в Bridge.

2.                       Выполните одно из следующих действий:

◆   для  Photoshop:  выберите  команду  File |  Automate |  Web  Photo  Gallery

(Файл | Автоматизация | Веб-галерея фотографий);

◆   для Bridge: выберите команду Tools | Photoshop | Web Photo Gallery (Ин-

струменты | Photoshop  | Веб-галерея фотографий).

3.                       Выберите стиль для галереи из всплывающего меню Styles (Стили). Предварельный просмотр домашней страницы для выбранного стиля появится в диоговом окне.

4.                       Для галереи введите адрес электронной почты в качестве контактной информации.

5.                       Выберите исходный файл для вашей галереи из пользовательского меню Use

(Пользовательский).

◆   Selected Images From Bridge (Изображения, выбранные из Bridge). Иользование изображений, выбранных перед открытием диалогового окна Web Photo Gallery (Веб-галерея фотографий).

◆   Folder (Папка). Использование изображений из папок, которые выбраны с помощью кнопок Browse (для Windows) или Choose (для Mac OS). Выбите опцию Include All Subfolders (Включить все вложенные папки), чтобы включить все изображения из любой внутренней подпапки в выбранной папке.

Щелкните по кнопке Destination (Назначения), а затем выберите папку для хрения изображений и HTML-страниц для галереи. Затем нажмите кнопку OK (для Windows) или Choose (Выбор) (для Mac OS).

6.                       Выберите  параметры  форматирования  для  веб-галереи.  Выберите  из  меню

Options (Настройки) опции для отображения каждого набора функций.

7.                       Нажмите кнопку ОК. Photoshop размещает HTML- и JPEG-файлы в соответсующие папки:

◆   домашняя страничка галереи обычно именуется index.htm или index.html, в зависимости от выбора опции Extension (Расширение). Откройте этот файл в любом веб-браузере для предварительного просмотра веб-галереи;

◆   JPEG-изображения размещаются внутри подпапки с изображениями;

◆   HTML-страницы размещаются внутри подпапки с веб-страницами;

◆   миниатюры JPEG-изображений размещаются внутри подпапки с миниатами.

Проверка цветовой гаммы

При работе с фотографиями в широкой цветовой гамме, например, в таких рочих пространствах, как ProPhoto RGB или Adobe RGB, цвета изображений могут быть изменены при просмотре веб-галереи из-за того, что браузер не читает встрнных цветовых профилей. Если это произойдет, попробуйте конвертировать приль изображения в sRGB (которые по умолчанию использует большинство браеров) до их оптимизации или включить их в Web Photo Gallery (Веб-галерея фотографий).

Конвертирование в sRGB возможно одним из следующих способов. При этом рекомендуется работать с копией изображения.

© Для конвертирования одного изображения следует выбрать команду Edit | Convert To Profile (Редактирование | Конвертирование в профиль), а затем врать sRGB.

© Для конвертирования папки изображений используйте Image Processor (Прессор изображений). Выберите команду File | Scripts | Image Processor (Файл | Сценарии | Процессор изображений).

Если используется команда Image Processor (Процессор изображений), то можно сохранять файлы непосредственно в формате JPEG желаемого размера. При волнении этого убедитесь в том, что опция Resize Images (Пересчет размера изражения) выключена в настройках Large Image (Большое изображение).

Опции веб-галереи фотографий

©  General (Основные). Основные опции расширений файлов, кодирования и маданных.

©  Extension (Расширение). Использует в качестве расширения файла либо htm,

либо html.

©  Use UTF 8 Encoding For URL (Использование для URL кодировки КОИ-8).

©  Add Width And Height Attributes For Images (Добавление атрибутов ширины и высоты для изображений). Задание размерности, сокращения времени загрузки.

©  Preserve All Metadata. (Сохранение всех метаданных). Содержание информии о метаданных.

Banner (Баннер). Текстовые опции для баннера, который появляется на каждой странице галереи. Введите значение для каждой из них.

©  Site Name (Название сайта). Название галереи.

©  Photographer (Фотограф). Имя лица или организации, получающих кредит на фото в галерее.

©  Contact Info (Контактная информация). Контактная информация для галереи

(например, номер телефона или адрес офиса).

©  Date  (Дата).  Дата  появляется  на  каждой  странице  галереи.  По  умолчанию

Photoshop использует текущую дату.

©  Font and Font Size (Шрифт и размер шрифта). Опции текста баннеров (доступ-

но для некоторых стилей сайта).

Large Images (Большие фото). Опции для основных изображений, которые пвляются на каждой странице галереи.

Add numeric links (Добавить числовые ссылки). Размещает числовую последательность (начиная с 1 и заканчивая общим числом страниц в галерее), проходую по горизонтали в верхней части каждой страницы галереи. Каждый номер яяется ссылкой на соответствующую страницу (доступно для некоторых стилей сайта):

© Resize Images (Изменение размера фотографий). Изменяет размер исходного изображения для размещения на страницах галереи. Выбор размера осущестяется во всплывающем меню или вводом размера в пикселах. Для опции Constrain (Ограничить) выберите размерность, в которой будет определяться

размер изображения. Для JPEG Quality (Качество JPEG) выберите опцию из всплывающего меню, введите значение от 0 до 12 или перетащите ползунок. Чем выше значение, тем лучше качество изображения и тем больше размер файла.

Программа Photoshop по умолчанию использует метод интерполяции изображений, уановленный в настройках. Для получения наилучших результатов при сокращении раеров изображения воспользуйтесь установленным по умолчанию методом Bicubic Sharper (Бикубический резкий).

©  Border Size (Размер границ). Определяет ширину бордюра вокруг изображения в пикселах.

© Titles Use (Использование названий). Определяет опции отображения подписи под каждым изображением. Выберите Filename (Имя файла) для отображения имени файла или выберите Description (Описание), Credits (Кредиты), Title (Название) и Copyright (Авторское право) для отображения текстового описа-

ния из диалогового окна File Info (Информация о файле). (Доступно для некорых стилей сайта.)

©  Font and Font Size (Шрифт и размер шрифта). Задает шрифт и размер надписи

(Доступно для некоторых стилей сайта).

Thumbnails (Миниатюры). Опции галереи домашней страницы, включая раер миниатюр изображений.

© Size (Размер). Определяет размер миниатюр. Выберите из всплывающего меню или введите значение в пикселах ширины каждой миниатюры.

© Columns and Rows (Столбцы и строки). Указывает число столбцов и строк, в которых отображаются миниатюры на домашней странице. Эта опция не преняется к галерее, когда используются опции Horizontal Frame Style (Стиль

фрейма по горизонтали) или Vertical Frame Style (Стиль фрейма по вертикали).

©  Border Size (Размер границ). Определяет ширину бордюра вокруг изображения в пикселах.

© Titles Use (Использование названий). Определяет опции отображения подписи под каждым изображением. Выберите Filename (Имя файла) для отображения имени файла или выберите Description (Описание), Credits (Кредиты), Title (Название) и Copyright (Авторское право) для отображения текстового описия из диалогового окна File Info (Информация о файле).

©  Font and Font Size (Шрифт и размер шрифта). Задает шрифт и размер надписи. Custom Colors (Пользовательские цвета). Опции цветовых элементов в галерее. Чтобы изменить цвет элемента, выберите его в палитре Swatches (Каталог), а затем выберите новый цвет из Adobe Color Picker (Палитра цветов Adobe). Можно измить  цвет  фона  на  каждой  странице  (опции  Background)  и  на  баннере  (опции

Banner).

Security (Безопасность). Отображение текста над каждым изображением в кестве сдерживающего фактора хищений.

© Content (Содержание). Определяет текст, который будет отображаться. Выбите опцию Custom Text (Пользовательский текст) для ввода произвольного текста. Выберите Filename (Имя файла) для отображения имени файла или вы-

берите Description (Описание), Credits (Кредиты), Title (Название) и Copyright (Авторское право) для отображения текстового описания из диалогового окна File Info (Информация о файле).

©  Font, Color, and Position (Шрифт, цвет и позиция). Указывает шрифт, цвет и позицию заголовка.

©  Rotate (Поворот). Размещает текст на изображении под углом.

Стили веб-галереи фотографий

Программа Photoshop предоставляет разнообразные стили для веб-фоталереи. Если вы опытный пользователь, который знает HTML, вы можете создать новый стиль или настроить имеющийся стиль, изменив набор HTML-шаблонов. Стили веб-фотогалереи, представленные программой Photoshop, хранятся в оельных папках в следующих местах:

©  для Windows: Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery;

©  для Mac OS: Adobe Photoshop CS5/Presets/Web Photo Gallery.

Название каждой папки в этом месте появится как опция в меню Styles (Стили) в диалоговом окне Web Photo Gallery (Веб-галерея фотографий). Каждая папка содержит следующие файлы HTML-шаблонов, которые использует Photoshop для создания галереи:

©  Caption.htm — определяет расположение надписи, которая появляется под каой миниатюрой на домашней странице;

©  Frameset.htm — определяет формат кадра для отображения страниц;

©  IndexPage.htm — определяет расположение домашней страницы;

©  SubPage.htm — определяет расположение страниц галереи с полным размером изображений;

©  Thumbnail.htm — определяет формат миниатюр, которые появляются на глаой странице.

Каждый файл-шаблон содержит HTML-код и ссылки. Ссылка представляет сой текстовую строку, которая заменяется в Photoshop, если устанавливается сооетствующая опция в диалоговом окне Web Photo Gallery (Веб-галерея фотогрий). Например, файл шаблона может содержать следующий элемент TITLE, который использует ссылку в качестве своего прилагаемого текста:

<TITLE>% TITLE% </ TITLE>

Когда Photoshop генерирует галерею, используя этот шаблон, он заменяет сиолическую ссылку % TITLE% текстом, который вводится в поле Site Name (Нвание сайта) в диалоговом окне Web Photo Gallery (Веб-галерея фотографий).

Чтобы лучше понять существующий стиль, можно открыть и изучить его HTML-файл шаблона, используя HTML-редактор. Так как только стандартные ASCII-символы используются для создания HTML-документов, то можно открать, редактировать и создавать эти документы с помощью обычных текстовых ракторов, таких как Notepad (Блокнот) (для Windows) или TextEdit (для Mac OS).

О настройке стилей веб-галереи фотографий

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

© папка стилей должна содержать файлы шаблонов: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm и Frameset.htm;

©  можно переименовывать папку стилей, но не файлы HTML-шаблонов в папке;

© можно иметь пустой файл Caption.htm и разместить HTML-код и ссылки, опреляющие расположение заголовка в файле Thumbnail.htm;

© можно заменить ссылку в файле шаблона с соответствующим текстом или HTML-кодом так, чтобы выбор был установлен через файл шаблона, а не через диалоговое окно Web Photo Gallery (Веб-галерея фотографий);

© файл шаблона может содержать элемент BODY со следующим атрибутом цвета фона, который использует ссылку как его значение: Bgcolor = % BGCOLOR %;

©  чтобы  установить  цвет  фона  страницы  красной,  можно  заменить  символ

%BGCOLOR % на "FF0000";

© можно добавлять HTML-код и символы к файлам шаблона. Все ссылки должны быть записаны в верхнем регистре и операторные скобки begin и end должны начинаться с символа процента (%).

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

По теме:

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

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