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

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

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

Каждый шаблон галереи стилей обладает различными параметрами. При использовании шаблона стиля некоторые параметры могут быть недоступны.

Создание фотогалереи Web

Создание фотогалерей Web при помощи Adobe Bridge

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

Использование предыдущей версии дополнительного внешнего модуля Photoshop

Проверка соответствия цветов

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

• Чтобы преобразовать одно изображение, в меню «Редактирование» выберите команду «Преобразовать в профиль», а затем выберите sRGB. См. раздел Назначение или удаление цветового профиля (Illustrator, Photoshop).

• Чтобы преобразовать все изображения в какой-либо папке, воспользуйтесь обработчиком изображений. В меню «Файл» выберите пункт «Сценарии» > «Обработчик изображений». См. Преобразование файлов с помощью обработчика изображений.

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

Параметры фотогалереи Web

Параметры для расширений файлов, кодировки и метаданных.

В качестве расширения имени файла можно использовать либо .htm, либо .html.

Используется кодировка UTF-8.

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

Сохраняет метаданные.

Параметры текста для баннера, появляющегося на каждой странице галереи. Введите текст для каждого параметра:

Название галереи.

Имя фотографа или название организации, владеющей правами на фотографии галереи.

Контактная информация галереи, например телефонный номер или адрес организации.

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

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

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

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

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

Определяет ширину границы вокруг изображения в пикселах.

Задайте параметры отображения надписей для каждого изображения (доступно для некоторых стилей сайтов). Для отображения имени файла установите флажок «Имя файла»; для отображения описания из диалогового окна «Сведения о файле» установите флажки «Описание», «Разработчики», «Заголовок» и «Авторские права».

Задайте шрифт и размер заголовка (доступно для некоторых стилей сайтов).

Параметры домашней страницы галереи, включая размер миниатюр изображений.

Определяет размер миниатюры. Выберите размер во всплывающем меню или введите ширину миниатюр в пикселах.

Укажите количество столбцов и строк миниатюр на домашней странице. Этот параметр не применяется в галереях, использующих стиль Horizontal Frame Style(Горизонтально Кадр) или Vertical Frame Style (Вертикально Кадр).

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

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

Задайте шрифт и размер заголовка (доступно для некоторых стилей сайтов).

Параметры настройки цветов элементов галереи. Чтобы изменить цвет элемента, щелкните образец цвета, а затем выберите новый цвет в палитре цветов. Можно изменить фоновый цвет каждой страницы (параметр Background (Фон)) и каждого баннера (параметр Banner (Баннер)).

Отображает текст на каждом изображении для устрашения предполагаемого вора.

Определяет отображаемый текст. Выберите Custom Text (Заказной текст) для ввода произвольного текста. Выберите Filename (Имя файла), Description (Описание), Credits (Разработчики), Title (Заголовок) или Copyright (Авторские права) для отображения соответствующего текста из диалогового окна File Info (Сведения о файле).

Определяет шрифт, цвет и расположение заголовка.

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

Web photo gallery styles (Стили фотогалереи Web)

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

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

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Adobe Photoshop CS5/Presets/Web Photo Gallery.

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

Определяет макет надписей, появляющихся под каждой миниатюрой на домашней странице.

Определяет макет набора фреймов для отображения страниц.

Определяет макет домашней страницы.

Определяет макет страниц галереи с полноразмерными изображениями.

Thumbnail.htm Определяет макет миниатюр, отображаемых на домашней странице.

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

<TITLE>%TITLE%</TITLE>.

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

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

О настройке стилей фотогалереи Web

Изменить существующие стили фотогалерей Web можно путем редактирования соответствующих HTML-файлов шаблонов. Чтобы галерея была создана правильно, при изменении стиля необходимо придерживаться следующих рекомендаций.

• Папка стиля должна содержать следующие файлы: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm и FrameSet.htm.

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

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

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

  bgcolor=%BGCOLOR%.

  Чтобы установить красный фоновый цвет страницы, маркер %BGCOLOR% необходимо заменить значением «FF0000».

• В файлы шаблонов можно добавить HTML-код и маркеры. Имена маркеров должны содержать только прописные буквы, а также начинаться и заканчивать символом процента (%).

Настройка или создание стиля фотогалереи Web

Маркеры стилей веб-фотогалереи

Маркеры используются в HTML-файлах шаблонов, чтобы определить стиль фотогалереи Web по умолчанию. Эти маркеры используются для создания галереи на основе пользовательских настроек в диалоговом окне Web Photo Gallery (Фотогалерея Web).

При настройке или создании стиля фотогалереи можно добавлять любой маркер в любой HTML-файл шаблона, за исключением маркеров %THUMBNAILS% и %THUMBNAILSROWS%, которые могут находиться только в файле IndexPage.htm. При добавлении маркера следует помнить, что для правильной работы маркера в файл также необходимо добавить HTML-код.

В HTML-файлах шаблонов можно использовать следующие маркеры.

Определяет цвет активных ссылок.

Определяет имя файла изображения.

Позволяет возвратиться к миниатюре изображения, а не к началу страницы. Это происходит при нажатии кнопки «Домой».

Определяет цвет баннера.

Определяет шрифт текста баннера.

Определяет размер шрифта текста баннера.

Определяет фоновый цвет.

Определяет шрифт надписей, появляющихся под каждой миниатюрой на домашней странице.

Определяет размер шрифта надписей.

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

Определяет кодировку каждой страницы.

Определяет контактную информацию для галереи (например, телефонный номер и местоположение).

Расширяет до «Adobe Photoshop CS5 Web Photo Gallery».

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

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

Определяет ссылку на текущую домашнюю страницу.

Находится в файле SubPage.htm и указывает на первую индексную страницу.

Определяет дату, отображающуюся на баннере.

Содержит адрес электронной почты автора галереи.

Определяет сведения о файле изображения для надписи.

Определяет имя файла изображения. Этот маркер следует использовать для метаданных, появляющихся как HTML-текст.

Определяет URL-адрес файла изображения. Этот маркер можно использовать только для файлов изображений с URL-адресом.

Определяет ссылку на первую страницу галереи, которая отображается в правом кадре набора кадров.

Определяет ссылку на домашнюю страницу, которая отображается в левом кадре набора кадров.

Задает название галереи.

Задает размер границы полноразмерных изображений на странице галереи.

Устанавливает флажок Add Width And Height Attributes For Images (Добавить атрибуты ширины и высоты изображений). Это позволяет загрузить атрибуты и таким образом сократить время загрузки.

Данный маркер заменяется числовым значением ширины изображения.

Определяет ссылку на страницу галереи.

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

Задает URL-адрес полноразмерных изображений на странице галереи.

Устанавливает флажок Add Width And Height Attributes For Images (Добавить атрибуты ширины и высоты изображений). Это позволяет загрузить атрибуты и таким образом сократить время загрузки.

Данный маркер заменяется числовым значением ширины изображения.

Определяет цвет ссылок.

Определяет ссылку на следующую страницу галереи.

Определяет ссылку из одного большого изображения на следующее большое изображение.

Определяет ссылку на следующую домашнюю страницу.

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

Указывает положение текущей страницы (например, страница 1 из 3).

Определяет имя фотографа или название организации, владеющей правами на фотографии галереи.

Определяет ссылку на предыдущую страницу галереи.

Определяет ссылку на предыдущую домашнюю страницу.

Задает название галереи.

Задает название галереи.

Определяет цвет текста.

Задает размер границ миниатюр.

Устанавливает флажок Add Width And Height Attributes For Images (Добавить атрибуты ширины и высоты изображений). Это позволяет загрузить атрибуты и таким образом сократить время загрузки.

Данный маркер заменяется числовым значением высоты миниатюры.

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

Содержит размер миниатюры в пикселах из панели Thumbnails (Миниатюры). Это помогает использовать JavaScript-код в шаблонах, так как он позволяет отображать максимальные значения высоты и ширины для всех миниатюр созданного сайта.

Определяет ссылку на миниатюру.

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

Устанавливает флажок Add Width And Height Attributes For Images (Добавить атрибуты ширины и высоты изображений). Это позволяет загрузить атрибуты и таким образом сократить время загрузки.

Данный маркер заменяется числовым значением ширины миниатюры.

Задает название галереи.

Определяет цвет посещенных ссылок.