На людскую память нельзя полагаться;
на беспамятство, к сожалению, тоже.
Станислав Ежи Лец

Цифровой мир захватывает нас все больше и больше. И сейчас разработка фотогалереи и PDF-документов может стать такой же тривиальной задачей в жизни каждого пользователя, как и подготовка отчета в MS Word. Здесь будет рассказано о том, как с помощью программы Photoshop можно буквально за десять минут создать веб-фотогалерею для размещения в Сети или презентацию. Причем это легко сделает даже тот, кто никогда не работал с Photoshop. Просто нужно следовать приведенным в этом материале советам и указаниям.

Веб-фотогалереи — для кого, для чего?

Уже никого не удивишь цифровым фотоаппаратом, ставшим популярным среди самых широких слоев населения. Численность пользователей Интернета на постсоветских просторах также растет просто в геометрической прогрессии. Посему все чаще мы отправляем знакомым и родственникам по электронной почте фотоснимки, снабженные поясняющим текстом. Для тех, кто ленится организовывать мощную интернет-рассылку по длинному списку родственников и друзей, существует множество сайтов, предлагающих разместить снимки на своих страницах. Тем же, кому не нравится «висеть» рядом с незнакомыми Васями, Олями или Светами, стоит задуматься над созданием собственного сайта. На это можно резонно заметить, что катастрофически не хватает времени не только на разработку дизайна веб-галереи и его программную реализацию, но и на элементарную обработку фото, которые требуется привести к желаемому размеру.

Так вот, есть выход — в Photoshop появилось очень быстрое и удобное средство автоматизации создания веб-галерей с помощью опции Web Photo Gallery (Фотогалерея Веб). А теперь давайте научимся организовывать собственную фотогалерею, применив Adobe Photoshop, и выставим ее в Сети на всеобщее обозрение. Так что же привлекает в этой программе?

  • Быстрота создания - всего за несколько минут удается собрать набор веб-страниц с оптимизированными рисунками и удобным интерфейсом для их просмотра.
  • Широкие возможности управления дизайном - легко настроить многие параметры внешнего вида галереи.
  • Использование метаданных Photoshop - если метаданные уже прописаны с помощью Adobe Bridge, то не придется повторно описывать изображение на фотографиях.
  • Быстрая настройка качества и формата изображений - автоматизированная функция оптимизации фотографий.
  • Авторство - больше возможностей сохранить "свое лицо" в отличие от простого размещения снимков на сайтах Интернета.

Рассмотрим подробнее процесс создания веб-фотогалереи.

Объявляется розыск, или Поиск изображений для веб-галереи

В меню File (Файл) выберите команду Automate • Web Photo Gallery (Автоматизация • Фотогалерея веб). После этого появится диалоговое окно настроек Web Photo Gallery (рис. 1).

Рис. 1. Диалоговое окно настроек Web Photo Gallery

Прежде чем настраивать внешний вид галереи, определите, что поместите в нее. Сделать это можно двумя способами.

1. Через мост — с помощью Adobe Bridge.

Удобнее всего, конечно, начать работу с так называемого «адобовского моста». Если вы хотите разместить в галерее не всю папку, а только выбранные фото, которые сначала требуется отсортировать, то без программы Adobe Bridge не обойтись. Итак, проделайте перечисленные ниже действия.

1. Откройте Adobe Bridge, отыщите и выделите нужные фотографии (см. о возможностях Adobe Bridge в «Мире ПК», №1/06, с. 134).

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

2. После того как пометите снимки, в главном меню программы выберите пункт Tools • Photoshop • Web Photo Gallery (Инструменты • Photoshop • Фотогалерея Веб). В результате загрузятся программа Photoshop и диалоговое окно Web Photo Gallery.

3. Убедитесь, что в разделе Source Images (Исходные изображения) диалогового окна Web Photo Gallery отмечен пункт Selected Images from Bridge (Выбранные рисунки из Bridge).

2. В диалоговом окне Web Photo Gallery.

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

1. В диалоговом окне Web Photo Gallery выберите в разделе Source Images (Источник изображения) пункт Folder (Папка).

2. Нажмите кнопку Browse (Обзор) и с помощью Browse for Folder (Обзор папки) отметьте папку, содержащую те снимки, которые хотите поместить в веб-фотогалерею.

После того как источник для галереи будет определен, укажите, куда программа должна генерировать результат своих действий. Нажав на кнопку Destination (Место назначения) в раскрывшемся диалоговом окне Browse for folder (Обзор папки), задайте, где будет размещена созданная галерея, и нажмите OK.

Теперь рассмотрим подробнее основные параметры настройки фотогалереи.

Стиль по Web Photo Gallery, или Выбор стиля для фотогалереи

В верхней части диалогового окна Web Photo Gallery располагается раскрывающийся список Styles (Стили), где можно выбрать определенный стиль для галереи. Внешний вид каждого из стилей приводится в правой части панели. На рис. 2 представлены основные типы стилей веб-галерей, а ниже даны характеристики этих стилей.

Рис. 2. Основные типы стилей для Web Photo Gallery

  • Centered Frame (Центральный показ слайдов) - этот стиль включает группу шаблонов. Большое изображение располагается по центру, а слева от него разворачивается весь перечень значков со ссылками на другие фотографии (рис. 2, а).
  • Flash-Gallery (Flash-галерея) - наиболее интересный стиль, использующий преимущества Flash-анимации, хотя возможностей настройки у него меньше, чем у других шаблонов. Для просмотра галереи нужно лишь одно - в интернет-браузере должен быть установлен Macromedia SWF-Player. В этот стиль добавлены эффекты появления и исчезновения изображения, увеличение значка рисунка после наведения на него мыши, возможность интеграции звука (рис. 2, b).
  • Horizontal (Горизонтальный показ слайдов) - шаблоны данной группы похожи на шаблоны Centered Frame, только уменьшенные изображения снимков размещаются под большой фотографией, а не слева от нее (рис. 2, c).
  • Table (Таблица) - главная страница галереи, содержащая перечень помещенных в таблицу маленьких изображений, с которых вы стартуете на большие снимки (рис. 2, d).

Выберите для галереи один из стилей, например Horizontal Neutral, а в поле E-mail укажите свой электронный адрес (см. рис. 1).

Настройка опции General (Основные)

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

Начните с раздела General (Основные) и проделайте такие действия.

  1. Выберите для файлов расширение .htm или .html.
  2. Установите флажок Add Width and Height Attributes for images (Добавить атрибуты ширины и длины для изображений), чтобы увеличить скорость загрузки изображений.
  3. Выберите флажок Preserve All Metadata (Включать все метаданные), и тогда в браузере будет появляться определенная вами ранее информация о фотографии.

Примечание. Метаданные прописываются в программе Adobe Bridge в разделе Metadata • IPTC Core. Туда же можно внести как подробную информацию об авторе, так и описание файла (см. «Мир ПК», №1/06, с. 135). Советую вам не лениться и заполнять эти поля после того, как перепишете снимки с фотоаппарата на компьютер, так как потом просматривать фотографии, снабженные надписями, будет гораздо проще и увлекательнее.

В результате диалоговое окно примет вид, представленный на рис. 1.

Настройка опции Banner (Баннер)

Теперь во вкладку Banner (Баннер) внесем информацию о галерее. На сайте эти строки будут играть роль заголовка и располагаться на каждой странице. Выполните следующее (рис. 3).

Рис. 3. Настройка параметров Banner

1. В поле Site Name (Имя сайта) впишите название вашего сайта, например «Моя фотогалерея».

Примечание. Использовать кириллицу надо очень осторожно, поскольку не все стили ее понимают, например, Flash Gallery вместо кириллицы выведет пустые строки.

2. Введите имя создателя веб-фотогалереи в поле Photographer (Фотограф).

3. В поле Contact Info (Контактная информация) оставьте данные, по которым можно будет с вами связаться.

4. Установите дату создания фотогалереи в поле Date (Дата). По умолчанию здесь будет стоять текущая дата работы с документом.

Настройка опции Large Images (Большие изображения)

Пора определить и внешний вид больших фотографий галереи. Для настройки страниц галереи Large Images нужно поступить так (рис. 4).

Рис. 4. Настройка параметров Large Images

1. Включите флажок в поле Resize Images (Изменить размер), чтобы активизировать возможность настройки размера изображений. Иначе доступны будут только строго заданные три размера с максимальным значением 450 пикселов.

2. Чтобы просматриваемое фото было достаточно большим, выберите опцию Custom (Заказная) и введите значение, равное 600 пикселам.

Примечание. Не все стили позволят задавать такой большой размер. В стилях семейства Centered максимальный размер составляет 450 пикселов.

3. Обратитесь к следующему раскрывающемуся списку — Constrain (Ограничение). Он поможет указать, к чему будет относиться заданный выше размер (600 пикселов), т.е. будет ли это максимальным значением для ширины (Width), для высоты (Height) или обеих сторон (Both). В поле Constrain (Ограничение) выберите Both (Оба), чтобы при изменении размера рисунка ширина и высота не превышали указанные ранее 600 пикселов.

4. Укажите степень сжатия изображения, что определит его качество. Для поля JPEG Quality (Качество JPEG) установите алгоритм сжатия High (Высокое) со значением, равным 9.

5. Если вы выбрали стиль, использующий рамки, как Horizontal Neutral, то в поле Border Size (Размер рамки) введите значение 2 пиксела.

6. Включите все флажки в части Titles Use (Использовать названия):

  • Filename (Имя файла) - выводит имя файла;
  • Description (Описание) - отображает описание файла;
  • Credits (Заглавные титры) - показывает начальные титры;
  • Title (Название) - включает название рисунка в описание файла;
  • Copyright - помещает на изображение текстовый блок, определенный вами как знак авторского права.

Примечание. Не у каждого стиля все пункты будут активными. Так, Horizontal Neutral может вывести только Filename (Имя файла) и Title (Название).

Настройка опции Thumbnails (Пиктограммы)

Чтобы определить, как будут выглядеть и располагаться маленькие изображения объектов галереи, являющиеся ссылками на большие фотографии, надо выбрать опцию Thumbnails (Пиктограммы) и выполнить такие действия.

  1. В поле размера пиктограммы Size (Размер) введите значение 100 пикселов - не будем делать значки слишком маленькими.
  2. Поле Columns (Колонки) и Rows (Ряды) активно только для некоторых стилей, например для Horizontal Frame Style. Данная опция позволяет определять число рядов и колонок для отображения значков.
  3. Определим размер рамки маленьких фото, введя значение 1 пиксел в поле Border Size (Размер рамки).
  4. Включим все флажки в части Titles Use (Использовать названия). Это возможно также не во всех стилях, в частности недоступно в используемом нами Horizontal Neutral.

Настройка опции Custom Colors (Заказные цвета)

Для определения цветов фона и ссылок предназначен раздел Custom Colors (Заказные цвета). Он поможет сделать следующие настройки.

  1. Задайте цвет фона, щелкнув дважды мышью на базовом цвете напротив пункта Background (Фон).
  2. Определите цвет для основного текста, ссылок, активных и посещенных ссылок, используя одноименные пункты Text (Текст), Link (Ссылка), Banner (Баннер), Active Link (Активная ссылка), Visited Link (Посещенная ссылка).

Настройка опции Security (Безопасность)

Ни для кого не секрет, что на интернет-просторах активно действуют люди, промышляющие плагиатом. Обилие самой разнообразной и доступной информации вызывает у них непреодолимое искушение нарушить авторское право. Однако вы можете немного затруднить их «работу» и с помощью Photoshop сделать повторное использование ваших фотографий не таким уж приятным занятием. Для этого воспользуйтесь опцией Security (Безопасность) и поступите так (рис. 5).

Рис. 5. Настройка параметров Security

  1. В поле Content (Содержание) выберите пункт Custom text (Заказной текст). Если вы не хотите вводить свой текст, то остановите выбор на соседних пунктах - Filename (Название файла), Copyright (Знак копирайта), Description (Описание) и т. д.
  2. Определите в поле Custom text (Заказной текст) текст надписи, которой желаете снабдить все изображения.
  3. Установите гарнитуру, размер и цвет шрифта, используя пункты Font (Шрифт), Font Size (Размер шрифта), Color (Цвет). Используя движок Opacity (Прозрачность), задайте степень прозрачности текста.
  4. Определите положение надписи на рисунке, применив опцию Position (Положение), выберите Bottom Left (Вверху слева), а затем откажитесь от поворота надписи с использованием опции Rotate (Поворот), выбрав пункт None (Нет).

Помещение изображений в веб-фотогалерею

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

Рис. 6. Веб-фотогалерея в интернет-браузере

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

Сквозь Photoshop к PDF, или Преобразование в PDF-формат

В меню Automate (Автоматизация) не менее пристального внимания, чем команда Web Photo Gallery, заслуживает и возможность автоматической конвертации документа в PDF-формат. Воспользуйтесь меню File (Файл) и выберите команду Automate • PDF Presentation (Автоматизация • PDF-презентация). В ответ появится диалоговое окно настроек PDF Presentation (PDF-презентация), представленное на рис. 7.

Рис. 7. Диалоговое окно настроек PDF Presentation

Давайте рассмотрим процесс создания PDF-презентации.

  1. же как и в случае с галереей, сначала выберите файл-источник - Source File (Исходный файл). Это могут быть как уже открытые документы, и тогда нужно установить флажок в поле Add Open Files (Добавить открытые файлы), так и любые другие, добавленные при использовании Browse (Обзор). Кнопка Duplicate (Дубликат) поможет продублировать файл, Remove (Удалить) - избавиться от выделенного файла в списке.
  2. Определите тип создаваемого документа Output Options (Параметры вывода). Сохраните файл либо как многостраничный PDF-документ (Multi-Page Document), либо как файл-презентацию (Presentation).
  3. Если вы остановились на втором варианте, то стали активны настройки в нижней части диалогового окна - Presentation Option (Параметры презентации). Настройте их.
  • Advance Every... 5 second (Смена кадра каждые ... 5 с) - определяет, через какой промежуток времени будет происходить смена кадров.
  • Loop After Last Page (Повтор после последней страницы) - включенный флажок позволит по завершении презентации автоматически запустить ее снова.
  • Transition (Переход) - поможет выбрать один из приведенных в раскрывающемся списке эффектов появления и исчезновения слайдов.

Настройки сохранения PDF-презентации

Когда вы нажмете кнопку Save (Сохранить) и укажете место расположения презентации, то появится диалоговое окно Save Adobe PDF (Сохранить Adobe PDF), показанное на рис. 8. Используйте установленный по умолчанию режим High Quality Print. Пусть вас не смущает, что после сделанных настроек рядом с этим названием появится слово Modified (С изменениями). Из раскрывающегося списка Compatibly (Совместимость) установите совместимость с более ранними версиями Adobe Acrobat.

Кроме того, в левой части окна имеются различные вкладки — настройки сохранения документа.

  1. General (Основные) - располагает группой базовых настроек, помогающих сохранить возможность редактирования в Photoshop, встроить миниатюры страниц, оптимизировать их для быстрого просмотра в Web, показать PDF-файл после сохранения. Из этого перечня наиболее интересен пункт Optimize for Fast Web Preview (Оптимизировать для быстрого просмотра в Web), напротив него и установите флажок.
  2. Compression (Сжатие) - в этой вкладке определяются алгоритм сжатия и качество изображения, первое зададим как JPEG, а второе - как высокое, High.
  3. Output (Вывод) - здесь находятся настройки параметров вывода презентации. Если выбрать пункт Convert to Destination (Преобразовать в целевое пространство) из раскрывающегося списка Color Conversion (Преобразование цветов), то станут доступны настройки Profile Inclusion Policy (Целевой профиль), и можно более точно установить стандарт устройства вывода для монитора или печати устройства.
  4. Security (Система защиты) - система безопасности в PDF-презентации более совершенна, чем в фотогалерее. Не стоит забывать о безопасности (см. рис. 8).
    • В поле Document Open Password укажите пароль для открытия документа, предварительно поставив галочку в пункте Require password to open document (Запрашивать пароль для открытия документа).
    • Разграничьте права доступа. В разделе Permissions (Права доступа) отметьте флажком пункт Use a password to restrict printing, editing and other tasks (Ограничить с помощью пароля печать, редактирование и другие задачи).
    • Используйте пароль, разрешив только печать с низким разрешением. Для этого в разделе Printing Allowed (Разрешить печать) выберите пункт Low Resolution 150 dpi (С низким разрешением 150 тнд).
    • Запретите любое редактирование, установив None (Нет) в разделе Changes Allowed (Разрешенные изменения).
    • Можете снять запрет на копирование информации, отметив флажок в пункте Enable copying of text, images and other content (Разрешить копирование текста, изображений и другого содержимого).
  5. Summary (Сводка) - в данном разделе выводятся сведения обо всех свойствах документа с учетом только что внесенных вами изменений.

Рис. 8. Диалоговое окно Save Adobe PDF (Сохранить Adobe PDF)

Теперь, после того как вы нажмете Save PDF (Сохранить PDF), программа начнет генерировать PDF-презентацию.

* * *

Вот так быстро и просто вы научились делать в Photoshop то, что достигается довольно продолжительным трудом с использованием нескольких программ. Конечно, в автоматизированной работе есть много минусов, но когда на первый план выступает скорость получения результата, то о них забываешь. Несомненно, созданием веб-фотогалерей и PDF-презентаций не исчерпывается весь арсенал автоматизированных возможностей Adobe Photoshop. Кроме того, вы сами сможете создавать сценарии автоматического выполнения последовательности действий, но это мы рассмотрим в следующих статьях.

ОБ АВТОРЕ
Ксения Свиридова — менеджер и дизайнер Координационного центра программы ECDL на Украине (Европейский стандарт компьютерной грамотности), e-mail: ksenijas@yandex.ru.

Продолжение. Начало см. в №3, 4, 7—10/06.