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

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

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

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

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

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

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

Рассмотрим некоторые варианты создания фотогалерей.

 1. Простой набор фотографий - рис.1.

Рис.1. Простейший вариант фотогалереи

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

 2. Фотогалерея в виде альбома, который открывается внутри страницы сайта во фрейме. При этом желательно создать красивую рамку с названием фотогалереи. Для перехода от одного изображения к другому (пролистывания) используются ссылки "Вперед", "Назад" и "В начало". Вместо кнопок можно также щелкать по стрелкам для пролистывания фотоальбома вперед или назад. В качестве фона можно использовать, например, изображение логотипа фирмы. Этот вариант при красивом оформлении выглядит вполне достойно и удобен в навигации по фотографиям. Принцип построения подобной фотогалереи показан на рис.2. Украшательств специально не добавляю, так как это уже на вкус дизайнера, а здесь показан только действующий макет.

Рис.2. Фотогалерея внутри страницы сайта

Обратите внимание, что в начале и в конце слайд-шоу стрелки перехода к предыдущему (следующему) кадру сделаны полупрозрачными и без ссылки. О том, как реализовать прозрачность рисунков на странице сайта, можно прочитать в статье "Изображения для сайта - размещение, эффекты, прозрачность".

 3. Если вам не требуется разворачивать изображения, то простую, но наглядную фотогалерею в виде слайд-шоу можно создать с помощью бегущей строки. Изменяя параметры бегущей строки, вы можете устанавливать скорость перемещения кадров, направление движения и др. - рис.3

Компания "ПУПКИН ДОМ"

Рис.3. Фотогалерея в виде слайд-шоу (карусель изображений)

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

Создание фотогалереи для сайта в программе XnView

Простой вариант создания фотогалереи предлагается в бесплатной программе XnView. Об этом замечательном просмотрщике - редакторе я уже писал в статьях "Редактирование фотографий в программе XnView", "Создание слайд-шоу в программе XnView", "Снятие скриншотов в программе XnView" и "Создание Index Print в программе XnView".

Последнюю версию программы XnView можно бесплатно скачать с сайта разработчика Pierre-e Gougellet. Лучше использовать полную версию - Complete version, загрузив ее с соответствующей страницы загрузок сайта. Программа грамотно русифицирована, размер загрузочного модуля - около 12 МБ.

Интерфейс программы традиционный - рис.4. Для выбора русского языка используйте команду Tools - Options - Interface - Language (Инструменты - Опции - Интерфейс - Язык).

Рис.4. Рабочее окно программы XnView

Для создания фотогалереи отмечаем в окне просмотра нужные изображения и выбираем в верхнем меню Создать - Web-страницу. В открывшемся окне необходимо установить требуемый вид фотогалереи и некоторые её параметры - рис.5.

Рис.5. Установка параметров фотогалереи в программе XnView

Как видим, здесь всё просто и понятно. Методом проб выбираем подходящий шаблон, которых предлагается более десятка, некоторые даже с элементами Flash. Затем вводим заголовок фотогалереи, устанавливаем максимальный размер показа изображений в окне браузера (вполне достаточно 640х480) и назначаем папку, где будет сохранен проект. Жмём Создать - и готово! Осталось только разместить фотогалерею на сайте или встроить в существующую страницу. Генерируемый программой HTML-код достаточно простой и, при желании, его легко подкорректировать под дизайн сайта.

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

28.03.2010 г.

Ещё статьи о программе XnView:
Создание слайд-шоу в программе XnView
Редактирование фотографий в программе XnView
Снятие скриншотов в программе XnView
Создание Index Print в программе XnView
Создание фотогалереи для сайта