www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

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

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

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

В Photoshop для вызова команды создания фотогалереи необходимо выбрать в меню File - Automate - Web Photo Gallery... (Файл - Автоматизация - Web фотогалерея...) - рис.1:

Создание фотогалереи в Photoshop
Рис.1. Окно создания фотогалереи в Photoshop

Начинаем с выбора оформления фотогалереи - Styles (Стили). Миниатюрное изображение каждого варианта будущей фотогалереи показывается в правой части окна. Варианты предлагаются самые разнообразные, в том числе два вида с элементами Flash.

В поле E-mail можно указать свой адрес электронной почты и он будет впечатан в информацию о фотографиях фотогалереи. Далее задаем адрес папки, где находятся исходные фото Sourse Images - Browse... (Источник изображений - Обзор...). Конечно, весьма желательно исходники предварительно немного облагородить, то есть подкорректировать цвета, уровни и т.п. Затем указываем папку, куда будут загружаться файлы будущей фотогалереи - Destination (Назначение).

Осталось установить некоторые опции проекта и параметры изображений фотогалереи - Options. В выпадающем списке последовательно щелкаем по пунктам, при этом раскрывается окно с элементами управления:

  • Banners (Баннеры) - здесь можно задать заголовок, имя автора фотографий, контактную информацию и дату создания фотогалереи
  • Large Images (Большие изображения) - настраиваются размеры, качество больших изображений. Здесь же можно установить и показ границ вокруг них.
  • Thumbnails (Миниатюры) - аналогично предыдущему пункту устанавливаются параметры уменьшенных изображений, выводимых на странице фотогалереи.
  • Custom Colors (Настройка цветов) - выбирается цвет фона, баннеров и ссылок.
  • Security (Защита) - можно задать надпись, которая будет наноситься на фотографии, чтобы немного усложнить их воровство с вашего сайта. Обычно, это адрес сайта или ваш ник. Доступны следующие установки для надписей - размер, цвет и вид шрифта, расположение надписи в кадре и её прозрачность. Имейте в виду, что если в фотогалереи будут снимки вертикальной и горизонтальной ориентации, то некоторые надписи наносятся некорректно и их придется изменить вручную.
В разделе Extension (Расширение) указываем необходимое значение этого параметра для имен файлов на сайте - .htm или .html.

После задания всех параметров жмём кнопку ОК и через некоторое время получаем в заданной папке файлы фотогалереи. Естественно, для её запуска надо открыть файл index, или указать гиперссылкой путь к нему, если вы размещаете фотогалерею на сайте.

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

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

31.05.2010 г.

Задать вопрос автору






Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: разработка, сопровождение и раскрутка сайта, фотогалерея, создание фотогалерей