На главную страницу
PHOTOSHOP ДЛЯ ФОТОЛЮБИТЕЛЯ
Оглавление

Часть 2. Инструменты
Фотоальбом в Photoshop

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

Часть 1. Фотоальбом «по умолчанию»

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

Конечно, виртуальный альбом идеальный для пользователя может быть создан только вручную этим самым пользователем. Это как любой механизм ручной сборки – все выверено и приспособлено для конкретных нужд. Однако, проблема состоит в том, что такой пользователь должен быть ко всему ещё неплохой программист и веб-дизайнер, чем, к сожалению, далеко не каждый может похвастаться. Но даже если в ком-то все  такое сольется воедино, останется ещё вопрос наполнения фотоальбома.

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

Если нужно добавить одну фотографию – такое еще можно вытерпеть. А если десять-пятнадцать? Да каждую неделю? А одной страницы не хватит и придется делать в альбоме другие с переходами между ними? Этим можно с успехом заниматься вместо работы или домашнего отдыха без надежды получить соответствующий гонорар: если таким способом создавать фотоальбом на заказ из нескольких сотен снимков, то возможная оплата покажется просто смешной по сравнению с затраченным временем. Есть ли выход?

Конечно. В виде вышеупомянутых утилит. Однако, то ли в погоне за ненужными «наворотами», то ли от неграмотности создателей, многие из них страдают перегруженностью интерфейса и генерируемого кода, а большинство вообще не идут дальше табличной структуры альбома. В общем-то, примитивной. А кому не хочется, чтобы было оригинально, красиво и удобно? И нетрудозатратно для обновления содержания.

Вот тут-то самое время обратить внимание на Photoshop. Он предлагает на выбор семь видов фотоальбома, в каждом из которых от одного до четырех подвидов. Генератор альбомов вызывается из Главного меню > File (Файл) > Automate (Автомат) > Web Photo Gallery (Веб Фото Галерея) – рис. 1.

Подробности:
1 – Предпросмотр будущего сайта. Просто картинка, которая позволяется примерно представить внешний вид готового альбома.
2 – Style (Стиль): выпадающее меню, которое позволяет выбирать вид и тип будущего альбома. E-mail: указанный здесь адрес электронной почты будет показан на сайте.
3 – В этом блоке выпадающего меню и кнопок задаются: исходная папка с изображениями или файлы из Adobe Bridge (Use:), папка, в которой будет создан фотоальбом (Destination…), и нужно ли учитывать при его создании подпапки с исходниками (Include All Subfolder).
4 – В выпадающем меню Option: (Опции:) содержатся пункты различных настроек будущего сайта. В опции General (Главное) нас может интересовать выбор расширения для файлов сайта (htm или html) и галочка в пункте Add Width and Height Attributes for Images (Добавить высоту и ширину для изображений). Пока только обратим на нее внимание – при создании сайта по шаблонам Photoshop она особого значения не имеет.    

Option: Banner (Баннер) – рис. 2. Здесь тоже все достаточно просто – Site Name (Имя сайта), Photographer (Автор фотографий), Contact Info (Контактная информация), Date (Дата). Дата по умолчанию ставится текущая. Доступность пунктов в этой области зависит от выбранного шаблона – так, в данном случае, недоступны пункты шрифта Font и Font Size. Некоторые шаблоны вообще не поддерживают зону Banner и тогда под картинкой образца сайта появляется соответствующее предупреждение.

Option: Large Image (Большая картинка) – рис. 3. Предоставляется возможность задать размер основных изображений на сайте Resize Images: они могут быть Small (Маленькое), Medium (Среднее), Large (Большое) и Custom (Пользовательское). Забавно, что в любом случае размер в пикселах можно выставлять произвольно. Стоит только учесть, что это задается размер, учитываемый меню Constrain (Ограничить): по горизонтали – Width, по вертикали – Height или одновременно оба – Both. Кроме того, можно задать качество генерируемых картинок – File Size, размер рамки – Border Size и несколько других малонужных характеристик.

Option: Thumbnails (Превью) – рис. 4 – опции, отвечающие за создание превьюшек. Неплохим можно считать размер Size равный 75 pixels. Для табличного шаблона задается количество колонок Columns и строк Rows. По желанию превьюхи можно снабдить рамкой заданного размера Border Size.

Option: Custom Colors (Пользовательские цвета) – рис 5. – по определению задают цветовое оформление сайта, но все пункты бывают доступны далеко не для всех шаблонов.

Совет
Изменяя цвета, помните, что во Всемирной сети существуют определенные традиции. Так, например, ссылки принято выделять синим цветом. Конечно, если такую ссылку расположить на черном фоне, она может быть плохо заметна. Тогда используйте другой оттенок синего – более светлый. От цветового решения вашего сайта зависит его восприятие зрителем. Фотоальбом лучше располагать на темных или нейтральных фонах. И вряд ли зрителям понравятся яркие, кричащие цвета.

Option: Security (Безопасность) – рис. 6. По желанию можно каждое изображение защитить любым текстом, например, рассказом о том, что следует делать с ворами чужих фотографий.

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

Есть и положительные стороны. Во-первых, быстрота генерации и вообще легкость создания: главное – разобраться с настройками, которых не так уж и много.

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

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

В- четвертых… интересный момент: некоторые шаблоны, например, Horizontal Gray (Горизонтальный серый) создают сайт такой конструкции, что он позволяет прокручивать на странице панорамы любой длины. Приятная возможность, не правда ли?

Итак, что мы имеем в сухом остатке? Несомненный приоритет достоинств над недостатками. Впрочем, если для кого-то минусы этого генератора затмевают все его хорошие стороны (а именно так и случилось со мной), то остается только один путь – пойти на минусы врукопашную!

 

Часть 2. Фотоальбом индивидуальный.

Внимание! Читающим дальше понадобится хотя бы поверхностное знание языка гипертекстовой разметки HTML.

Есть два пути. Первый – непродуктивный. Структура готового сайта (будем говорить о шаблоне Horizontal Gray и его производном) имеет в основе фреймы, один из который демонстрирует превью, а другой htm-страницы: для каждого снимка – свою. Также существую программы, которые позволяют часть текста в группе файлов заменять на другой текст. Идея, я думаю, понятна: выясняем, что нас не устраивает в готовых страницах сайта, и меняем соответствующие фрагменты кода на код, который все сделает по-нашему. А в случае новых генераций такую замену придется повторять каждый раз, что весьма безрадостно, потому что нудно.

Второй путь. Вот тут надо не полениться и заглянуть в папку, расположенную в компьютере по адресу
[Диск:] \Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery\Horizontal Gray\
Там мы обнаружим преинтереснейшие файлы, самый лучший из которых – SubPage.htm. Нетрудно догадаться, что он, как и его товарищи, представляет из себя заготовку, которую использует Photoshop для генерирования страниц сайта. А конкретно SubPage.htm отвечает за страницы с большими картинками. Очевидно, что если изменить этот шаблон, то каждая генерация будет создавать именно тот облик страницы сайта, который нас устраивает в полной мере.

Логично начать с того, что нас не устраивает. Для этого снова обратимся к последней иллюстрации. Размещение информации рядом с рисунком мне не понравилось ни по месту расположения, ни по содержанию, ни по оформлению. В шаблоне за этот фрагмент отвечает текст с 54 по 76 строку:

<td bgcolor="#FFFFFF" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor=%BANNERCOLOR%><img src="../images/innerTL.gif" width="4" height="4"></td>
<td width="100%" bgcolor=%BANNERCOLOR%><img src="../images/spacer.gif" width="4" height="4"></td>
<td rowspan="3"><img src="../images/spacer.gif" width="4" height="4"></td>
</tr>
<tr>
<td bgcolor=%BANNERCOLOR%><img src="../images/spacer.gif" width="4" height="4"></td>
<td bgcolor=%BANNERCOLOR%><span class="banner"><span class="title">%HEADER%</span><br>
%PHOTOGRAPHER% <br>
%DATE% <br>
<a href="mailto:%EMAIL%">%EMAIL%</a></span></td>
</tr>
<tr>
<td bgcolor=%BANNERCOLOR%><img src="../images/innerBL.gif" width="4" height="4"></td>
<td bgcolor=%BANNERCOLOR%><img src="../images/spacer.gif" width="4" height="4"></td>
</tr>
</table>
<div id="content"><span class="header">FILE: </span>%FILENAME%</div>
<div id="content"><span class="header">DESCRIPTION: </span>%FILEINFO%</div>
<div id="content"><span class="header">CREDITS: </span>%CREDITS%</div>
<div id="content"><span class="header">TITLE: </span>%CAPTIONTITLE%</div>
<div id="contentLast"><span class="header">COPYRIGHT: </span>%COPYRIGHT%</div>
</td>

Этот фрагмент мы просто удалим, но прежде возьмем из него то ценное, что он содержит – это коды, ограниченные символом «%», вместо которых Photoshop подставляет соответствующие значения из формы ввода (см. иллюcтрацию > ). Более других нам интересны:
%HEADER% – заголовок
%PHOTOGRAPHER% – имя фотографа
%DATE% – дата, которая может быть и датой событий в альбоме
%EMAIL% – адрес электронной почты фотографа, как средства связи

Теперь расправимся с рамкой вокруг фотографии. За ее верхнюю часть отвечает код в строках 43-45:
<td><img src="../images/roundTL.gif" width="4" height="4"></td>
<td colspan="2" bgcolor="#FFFFFF"><img src="../images/spacer.gif" width="4" height="4"></td>
<td><img src="../images/roundTR.gif" width="4" height="4"></td>
Вместо него подставим всего одну строку – код, который будет показывать большие изображения:
<td align="center" valign="middle"><img src="%IMAGESRC%" border=1 alt="%ALT%"></td>
Нижняя часть рамки описывается кодом на строках  81-83:
<td><img src="../images/roundBL.gif" width="4" height="4"></td>
<td colspan="2" bgcolor="#FFFFFF"><img src="../images/spacer.gif" width="4" height="4"></td>
<td><img src="../images/roundBR.gif" width="4" height="4"></td>
Стираем эти три строки, и на их место помещаем заготовку для комментариев к снимкам:
<td %IMAGE_WIDTH% align="left"><span class="banner">Комментарии</span></td>

В этой строке есть некоторая хитрость. В таком виде слово «Комментарии» после генерации альбома появится под каждой картинкой. Автору останется только заменить его на нужный текст. Код %IMAGE_WIDTH% в готовом альбоме автоматически заменяется кодом горизонтального размера изображения – это необходимо для форматирования комментариев по ширине картинки.

Опустимся чуть ниже и в строке 88 код

<table width="100" border="0" cellspacing="0" cellpadding="0">

заменим на
<table width="100" border="0" align="left" cellspacing="0" cellpadding="0">

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

Ранее мы уничтожили заголовок альбома и упоминание об авторе. Пришла пора восстановить информацию, но теперь расположим эти данные вверху каждой страницы. Для этого строки 38 и 39
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" background="../images/pattern01.gif" onLoad="preloadImages();">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

заменим на такой блок кода:
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onLoad="preloadImages();">
<img src="../images/spacer.gif" width="20" height="5">
<span class="banner"><span class="title">%HEADER%  </span>
%PHOTOGRAPHER%  %DATE%  <a href="https://www.compartstudio.com/ullmanphoto/">https://www.compartstudio.com/ullmanphoto/</a> </span>
<table width="100%" height="90%" border="0" cellpadding="0" cellspacing="0">

Здесь присутствуют заголовок, имя автора, дата и ссылка на авторский ресурс. Этот набор каждый может дополнить по своему вкусу.

Теперь займемся стилем HTML-страницы. Но это только для тех, кому не понравится цвет и вид шрифта по-умолчанию. Сначала между строками 36 и 37, соответственно, между тэгами </script> и </head>, вставляем такой блок кода:

<style type="text/css">
<!--
body {
background-color: #333333;
}
.style1 {color: #FFFFFF}
-->
</style>

На этом редактирование файла SubPage.htm заканчивается, и мы открываем в текстовом редакторе файл galleryStyle.css, который находится в папке
[Диск:] \Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery\Gray Thumbnails\images\

В нем производим следующие замены:
– цвет ссылок (строка 2) #FFF – синий меняем на #9999ff – лиловый, который более заметен на черном фоне;
– в строках 12, 24 и 40 шрифт «Trebuchet MS, verdana, arial» меняем на более привычный в русскоязычных сайтах «Arial, Helvetica, sans-serif»;
– в строке 17 размер шрифта 13 px меняем на более крупный 18 px;
– в строках 23 и 39 заменяем 11 px на 12 px;
– в строках 32 и 46 заменяем 9 px на 10 px.

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

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

 

Пример фотоальбома, сделанного описанным в статье способом можно посмотреть здесь: https://www.compartstudio.com/ullmanphoto/cavtat/index.htm
Однако, тут может подстерегать непритяный сюрпроиз - нормально альбом будет выглядеть, например, только в IE от Microsoft - оптимизация под другие браузеры в Photoshop не предусмотрена.

© Авторские права принадлежат Игорю Ульману. При копировании ссылка на автора и сайт обязательны.
На главную страницу