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

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

• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
        >> смотреть все статьи о jQuery

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

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

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

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

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

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

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

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

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

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

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

31.05.2010 г.

Ещё статьи по теме "Создание, оптимизация и раскрутка сайта":
• Как раскрутить сайт (серия статей)
• Создание фотогалереи на сайте
• Создание формы обратной связи на сайте
• Создание иконки для сайта
• Создание выпадающего меню
• Курсор как элемент веб-дизайна
• Создание гостевой книги на сайте
• Фон для сайта
• Вывод текущей даты на сайте
• Создание бегущей строки на сайте
• Создание "схемы проезда" на сайте
• Ключевые слова и продвижение сайта
• Оптимизация и ускорение компьютера. Обзоры программ
• Отправка файлов через форму обратной связи
• Сжатие фотографий для интернета и электронной почты