СОЗДАЁМ WEB-ГАЛЕРЕЮ

Маша РЫЖИКОВА

Думаю, никто не будет спорить с очевидным фактом: несмотря на современные возможности видеосъемки ритуал коллективного просмотра фотографий из отпуска (с вечеринки, дачи, детского утренника) остается столь же любимым, как и раньше. К такому ответственному действу можно подходить по-разному. Можно отпечатать в минилабе «все хорошие» фотографии, купить под этот фотоархив альбом, возить его в гости в течение полугода, каждый раз проговаривая заученный текст про то, как называлась вон та башня, на фоне которой вы уже не помните с кем стоите. Можно рассылать фотографии друзьям по электронной почте. А можно проявить так сказать «инженерный подход», создать небольшую HTML-страничку и разместить в интернете. И пусть теперь гости ходят к вам виртуально, любуются вашим фототворчеством и заодно восхищаются вашим умом и сообразительностью, а также прочими приятными для самолюбия качествами.


Создать HTML-страничку можно разными способами, даже Word это умеет, не говоря уже о Front Page и других более продвинутых средствах. Но если вы захотите получить что-то более интересное, чем унылая лента идущих друг за дружкой картинок, вам придется потратить достаточно много времени на программирование. Удобная навигация, подписи, лента превью, возможность смотреть слайд-шоу, - увы, ничего этого вышеперечисленные программы быстро сделать не могут. А вот Photoshop может!

Создаем Web-галерею

Собственно почти всё, что от вас требуется – вдумчиво отобрать из гигабайтов отснятого материала фотографии, которые не стыдно показать широкой интернет-аудитории, скопировать все пять штук в одну директорию, и создать пустую директорию (итоговую), куда Photoshop запишет HTML-код будущей странички. Теперь осталось только открыть Adobe Photoshop и выбрать пункт меню File > Automate > Web Photo Gallery (Файл > Автоматизация > Web Photo Gallery). Сразу отмечу, что в различных версиях Photoshop процесс создания фотогалереи выглядит несколько по-разному, поэтому мы будем считать, что у нас Photoshop CS, а достойные упоминания отличия будем описывать отдельно.

1 . Выбор общего стиля вашей странички достаточно широк: одиннадцать вариантов для Photoshop 7 и CS и целых двадцать – для CS2. Справа можно видеть некое подобие превью для каждого варианта.
2. Кнопки Browse… и Destination… позволяют выбрать, соответственно, папку-источник и папку, куда умный Photoshop поместит HTML-код странички. Заданные параметры сохраняются при последующих запусках программы.
3. На десерт – настройка параметров. Их достаточно много и они сгруппированы в шесть групп (в Photoshop 7 таких групп пять): General (отсутствует в седьмой версии), Banner, Large Images, Thumbnails, Custom Colors и Security. Давайте посмотрим, насколько широкое поле для творчества нам оставил Photoshop.
Вкладка General задает общие свойства вашей странички, в частности расширения создаваемых файлов. Закладки Banner и Custom Colors позволяют нам выбрать цвета фона, текста, поразмышлять над названием, которое не стыдно дать нашей будущей фотогалерее и прочих приятных вещах. Large Images и Thumbnails определяют, в каком виде в галерее будут показываться полноразмерные изображения и их превьюшки. Наконец, вкладка Security призвана создать иллюзию защиты ваших шедевров от воровства. Защита делается примитивно: путем размещения в самых неподходящих местах изображений надписей придуманного вами же содержания.
4. Закончили с определением параметров? Нажимайте кнопку OK и радуйтесь результату.

Как правило, наши фотографии, снятые чем-то отличным от мобильного телефона, изначально плохо приспособлены для просмотра в интернете из-за своего размера. Поэтому просто необходимо привести их в состояние, когда они, во-первых, целиком помещаются на экране компьютера и, во-вторых, не заставляют зрителя слишком долго ждать окончания загрузки. Для этого при создании вэб-странички предусмотрена целая группа параметров Large Images, позволяющая сгенерировать такие изображения автоматически.

1. Если отметка не будет проставлена, в вашу фотогалерею попадут исходные изображения, и в окне просмотра будут присутствовать полосы прокрутки.
2. Значения Small, Medium и Large соответствуют значениям 250, 350 и 450 пикселов, при вводе любого другого числа автоматически выбирается элемент списка Custom, так что не очень понятно, почему именно к этим трем числам Photoshop проявил такое почтение.
3. Параметр Constrain определяет, чем считать указанное выше число: требуемой шириной или высотой картинки. Если выбрано значение Both, программа будет считать это число шириной для горизонтальной ориентации фотографии и высотой для вертикальной.
4. Определение качества сжатия. Тут все просто. Хотим – бегунок двигаем, хотим – из списка выбираем качество, или указываем число от 0 до 12.
5. Отдельно стоит упомянуть о коллективе «галочек» внизу окна. Если выбранный вами шаблон позволяет их устанавливать, то показ каждой картинки будет сопровождаться информацией, хранящейся в её файле. И если с галочкой Filename нам все понятно, ведь имя у файла есть всегда, то откуда там появится, к примеру, его описание Description (в Photoshop 7 это параметр Caption)? Конечно, было бы здорово снабдить каждую фотографию ее кратким описанием, давайте посмотрим, как это можно сделать. Для этого нужно всего лишь открыть файл в Photoshop, выбрать пункт меню File > File Info (Файл > Файл Инфо…), а затем записать наше примечание в соответствующее поле.

При изменении размеров картинок для вэб-галереи Photoshop использует алгоритм, заданный в основных настройках редактора. По умолчанию устанавливается значение Bicubic (в версии CS это значение даже сопровождается подсказкой better, т.е. «лучшее» в скобках). Однако в нашем случае разработчики Adobe рекомендуют установить заначение Bicubic Sharper. Для изменения этой настройки нажмите Ctrl+K и выберите нужные алгоритм из списка.

Все бы хорошо, да только при автоматическом изменении размеров изображений в Photoshop, как правило теряется качество картинок, поэтому, возможно, созданная за полминуты фотогалерея всё равно не вполне вас удовлетворит. Но можем ли мы как-то повлиять на результат в случае, когда фотоизображения для Web-галереи создаются автоматически? Ответ – да! Можем. И не только это, но и многое другое. Давайте посмотрим, как именно.

А что у него внутри?

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

Для версии CS:..\Program Files\Adobe\Photoshop CS\Presets\Web Photo Gallery

Для версии CS2:..\Program Files\Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery

Для версии 7:..\Program Files\Adobe\Photoshop 7.0\Presets\ WebContactSheet.

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

Готовые web-странички тоже имеют примерно одинаковую структуру. Как правило присутствует стартовый index.htm, код для отображения ленты превью ThumbnailFrame.htm и три подкаталога: images для полноразмерных изображений, фонов, кнопок и прочих украшений, pages с кодом для отображения каждой полноразмерной картинки и thumbnails, содержащая картинки-превью.

Вот все, что вам необходимо знать (конечно, помимо начальных сведений о языке HTML) для того, чтобы пойти дальше Photoshop и создать на основе его заготовок нечто новое, полностью соответствующее вашим несомненным дизайнерским способностям.

При создании Web-галереи Photoshop строит из «кирпичиков» страничку примерно по следующей схеме. В качестве примера мы выбрали шаблон Horizontal Slideshow. Пояснения на белом фоне указывают, в каких файлах находится код странички, а на желтом – из каких файлов шаблона в свою очередь был получен этот код.

Проявляем интеллект

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

Например, если вам кажется что ваши фотографии слишком сильно потеряли в качестве при подготовке фотогалереи, нужно уменьшить картинки самостоятельно, проводя при этом увеличение резкости изображения и, при необходимости, другие действия. Важно, чтобы вы не изменяли имен файлов-картинок. Затем откройте подкаталог images каталога, указанного вами при создании веб-галереи в качестве итогового, и замените исходные файлы новыми.

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

Шаг1. Выбираем «рыбу». В качестве исходного материала выберем простой шаблон, поддерживающий функцию слайд-шоу: Horizontal Slideshow. Открываем директорию, содержащую шаблоны и делаем копию каталога Horizontal Slideshow. Назовем новорожденный каталог и, соответственно, наш будущий шаблон MySlideShow. Загружаем Photoshop и выбираем пункты меню File > Automate > Web Photo Gallery. Убеждаемся, что в списке Styles появился наш новый MySlideShow, а затем создаем фотогалерею на его основе.

Шаг2. Обновляем интервал. Фотографии из только что созданной нами фотогалереи обновляются каждые 5 секунд. Давайте дадим нашим потенциальным зрителям возможность подольше полюбоваться каждым фотошедевром и увеличим интервал до 10 секунд. Для этого откроем каталог с новым шаблоном и поизучаем HTML-коды наших файлов-«кирпичиков». При внимательном рассмотрении IndexPage.htm мы найдем там следующие строчки кода.

//1000 = 1 sec, 5000 = 5 secs, adjust as desired
var delay = 5000;

Вдаваться в подробности нам не нужно, быть вэб-дизайнером – тоже. Нам все объяснили в комментарии и мы смело делаем «adjust» до 10 000 (интервал указан в миллисекундах). Итак, пишем

var delay = 10000;

Сохраняем код и делаем следующий шаг.

Для того, чтобы увидеть код HTML-файла нужно щелкнуть на нем правой кнопкой мыши из появившегося меню выбрать Open With > Notepad (Открыть с помощью > Блокнот). Также можно открыть файл в Internet Explorer, как обычно и из меню выбрать View > Source (Вид>Просмотр HTML-кода). Если у вас есть Windows Commander или Total Commander, достаточно нажать F4, а если у вас установлен Far или Volkov Commander, вы вообще зря читали эту сноску, поскольку, очевидно, вы очень продвинутый пользователь, а значит, и так все знаете.

Шаг3. Смотрим результат. Создаем страничку на основе нашего нового шаблона и убеждаемся, что все вышло так, как мы хотели и фотографии меняются через 10 секунд, а не 5, как раньше.

Разумеется, этот пример демонстрирует лишь немногое из того, что мы можем сделать. Пространство для нашего творчества ограничено только возможностями HTML, то есть практически не ограничено вовсе!

Шаг4. Помещаем в интернет.

Теперь, когда мы сохранили нашу страничку в формате HTML, мы можем поместить её на всеобщее обозрение в Интернет. Если у вас пока что нет собственного сайта, то для начала можно воспользоваться услугами бесплатных хостинг-провайдеров, позволяющих размещать персональные сайты на своих серверах. Для этого наберите в окне своего интернет-браузера адрес http://narod.yandex.ru/ или http://boom.mail.ru/ и действуйте по инструкциям, указанным на этих страницах.

На этой оптимистической ноте можно закончить разговор о возможностях, которые дает Photoshop в такой, казалось бы, несвойственной ему области. Удачных вам снимков!

2006 © Маша Рыжикова, neprosto_masha@mail.ru
Фото автора

Что ещё можно сделать:
Обсудить статью на Форуме >>>