Створення веб-фотогалерей

Веб-фотогалерея – це веб-сайт, що містить домашню сторінку з зображеннями мініатюр та сторінками галереї з повнорозмірними зображеннями. Кожна сторінка містить посилання, що дають змогу відвідувачам здійснювати навігацію по сайту. Наприклад, коли відвідувач натискає на зображення мініатюри на домашній сторінці, відповідне повнорозмірне зображення завантажується на сторінку галереї. Команду «Web Photo Gallery» (Веб-фотогалерея) можна використовувати для автоматичного створення веб-фотогалереї з набору зображень.

Photoshop надає різноманітні стилі для галереї, які можна вибрати за допомогою команди «Web Photo Gallery» (Веб-фотогалерея). Якщо ви – досвідчений користувач, обізнаний із HTML, можна створювати нові стилі або персоналізувати стиль шляхом редагування набору файлів шаблонів HTML.

Кожний шаблон для стилів галереї має різні параметри. Якщо ви використовуєте передналаштований стиль, деякі параметри можуть бути затемнені або недоступні в даному стилі.

Створення веб-фотогалереї

Створення веб-галерей із використанням програми Adobe Bridge

Програма Adobe Bridge містить оновлені функції роботи з веб-галереями. Для отримання вказівок див. розділ довідки програми Adobe Bridge Створення веб-фотогалерей або наведені нижче навчальні посібники.

Використання старішого додаткового модуля програми Photoshop

Перевірка збігу кольорів

Якщо ви працюєте з фотографіями у робочому просторі з кольором широкої гами, наприклад ProPhoto RGB або Adobe RGB, кольори зображення можуть змінюватися під час перегляду у веб-галереї в переглядачі, нездатному читати вбудовані колірні профілі. Якщо це трапляється, спробуйте перетворити профілі зображення на sRGB (що використовується типово більшістю браузерів) перед їхньою оптимізацією або включенням у веб-фотогалерею. Перетворіть їх на sRGB одним із наведених способів. Гарною ідеєю є робота з копіями зображень.

• Щоб перетворити одне зображення, виберіть команду «Правка» >Перетворити на профіль, а потім виберіть пункт sRGB. Див. Призначення або видалення колірного профілю (програми Illustrator, Photoshop).

• Для перетворення теки із зображеннями використовуйте Процесор зображень. Виберіть пункт меню «Файл» > «Сценарії» > Процесор зображень. Див. розділ Перетворення файлів за допомогою процесора зображень.

Якщо використовується процесор зображень, то можна зберігати файли безпосередньо у форматі JPEG із потрібним розміром. Якщо ви дієте таким чином, впевніться, що прапорець «Зміна розміру зображень» у параметрах «Велике зображення» не встановлено.

Параметри веб-фотогалереї

Параметри для розширення файлів, кодування та метаданих.

Використовує .htm або .html як розширення назви файлу.

Використовує кодування UTF‑8.

Установлює розміри задля скорочення часу завантаження.

Містить відомості метаданих.

Параметри тексту для банера, що з'являється на кожній сторінці у галереї. Введіть текст для кожного пункту:

Назва галереї.

Ім’я особи або назва організації, що згадується як автор/власник фотографій у галереї.

Контактна інформація для галереї, наприклад телефонний номер або робоча адреса.

Дата з'являється на кожній сторінці галереї. Типово Photoshop використовує поточну дату.

(Доступно для деяких стилів сайту) Параметри тексту банера.

Параметри головних зображень, що з’являються на кожній сторінці галереї.

(Доступно для деяких стилів сайту) Розташовує числову послідовність (починаючи з 1, закінчуючи загальною кількістю сторінок у галереї) по горизонталі у верхній частині кожної сторінки галереї. Кожне число є посиланням на відповідну сторінку.

Змінює розміри вихідних зображень для розміщення на сторінках галереї. Виберіть розмір зі спливаючого меню або введіть розмір у пікселях. У пункті «Обмеження» виберіть, які розміри зображення потрібно обмежити під час зміни розміру. Для «Якості JPEG» виберіть варіант у спливаючому меню, введіть значення від 0 до 12 або перетягніть повзунок. Що більше значення, то вища якість зображення і більший файл.

Визначає товщину межі лінії в пікселях навколо зображення.

(Доступно для деяких стилів сайту) Вказує параметри для відображення супровідних підписів під кожним зображенням. Виберіть поле «Ім’я файлу» для відображення імені файлу або виберіть поля «Опис», «Розробники», «Заголовок» і «Авторське право» для відображення описового тексту в діалоговому вікні «Інформація про файл».

(Доступно для деяких стилів сайту) Визначає шрифт і розмір супровідного підпису.

Параметри для домашньої сторінки галереї, зокрема розмір зображень мініатюр.

Задає розмір мініатюри. Виберіть зі спливаючого меню або введіть значення у пікселях для ширини кожної мініатюри.

Вкажіть кількість стовпців та рядків, у яких відображатимуться мініатюри на домашній сторінці. Цей параметр не застосовується до галерей, що використовують «Стиль горизонтального фрейму» або «Стиль вертикального фрейму».

Визначає товщину межі лінії в пікселях навколо кожної мініатюри.

(Доступно для деяких стилів сайту) Визначає параметри відображення супровідних підписів під кожною мініатюрою. Виберіть поле «Ім’я файлу» для відображення імені файлу або виберіть поля «Опис», «Розробники», «Заголовок» і «Авторське право» для відображення описового тексту в діалоговому вікні «Інформація про файл».

(Доступно для деяких стилів сайту) Визначає шрифт і розмір супровідного підпису.

Параметри кольорів елементів галереї. Щоб змінити колір елементу, клацніть зразок кольору, а потім виберіть новий колір на Палітрі кольорів Adobe. Можна змінити колір тла кожної сторінки (параметр кольору тла) і банера (параметр «Банер»).

Відображає текст над кожним зображенням для запобігання крадіжці зображень.

Визначає текст для відображення. Виберіть «Власний текст» для введення власного тексту. Виберіть поля «Назва файлу», «Опис», «Розробники», «Заголовок» або «Авторські права» для відображення описового тексту в діалоговому вікні «Відомості про файл».

Вкажіть шрифт, колір та вирівнювання супровідного підпису.

Розмістіть текст на зображенні під кутом.

Стилі веб-фотогалереї

Photoshop забезпечує різноманітність стилів для веб-фотогалереї. Якщо ви – досвідчений користувач, обізнаний із HTML, можна створювати нові стилі або персоналізувати стиль шляхом редагування набору файлів шаблонів HTML.

Стилі веб-фотогалереї, що надаються програмою Photoshop, зберігаються в окремих папках в таких місцях:

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Adobe Photoshop CS5/Presets/Web Photo Gallery.

Назва кожної папки в цьому місці з'являється як параметр у меню «Стилі» в діалоговому вікні «Web Photo Gallery» (Веб-фотогалерея). У кожній папці містяться такі файли шаблонів HTML, які Photoshop використовує для створення галереї:

Визначає макет супровідного підпису, що з’являється під кожною мініатюрою на домашній сторінці.

Визначає макет набору рамок для відображення сторінок.

Визначає макет домашньої сторінки.

Визначає макет сторінок галереї з повнорозмірними зображеннями.

Thumbnail.htm Визначає макет мініатюр, що з’являються на домашній сторінці.

Кожний файл шаблону містить HTML-код і маркери. Маркер – це текстовий рядок, що замінюється програмою Photoshop під час встановлення відповідного параметру у діалоговому вікні «Web Photo Gallery» (Веб-фотогалерея). Наприклад, файл шаблону може містити такий TITLE-елемент, що використовує маркер у якості вкладеного тексту:

<TITLE>%TITLE%</TITLE>

Коли Photoshop створює галерею за допомогою файлу шаблона, він замінює маркер %TITLE% на текст, введений у пункті «Назва сайта» у діалоговому вікні «Web Photo Gallery» (Веб-фотогалерея).

Для кращого розуміння наявного стилю можна відкрити та вивчити файли шаблонів HTML за допомогою редактора HTML Через те, що лише стандартні символи ASCII потрібні для створення HTML-документів, можна відкривати, редагувати та створювати ці документи за допомогою редактора неформатованого тексту, наприклад, Notepad (Windows) або TextEdit (Mac OS).

Про персоналізацію стилів веб-фотогалереї

Можна персоналізувати наявний стиль веб-фотогалереї шляхом редагування одного або декількох файлів шаблону HTML. Під час персоналізації стилю потрібно слідувати цим вказівкам, щоб Photoshop міг створювати галерею належним чином:

• Папка стилю повинна містити ці файли: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm та FrameSet.htm.

• Можна перейменувати папку стилю, але не файли шаблону HTML у папці.

• Файл Caption.htm може бути порожнім, а також у ньому можна розмістити HTML-код та маркери, що визначають макет супроводжувального підпису у файлі Thumbnail.htm.

• Можна замінити маркер у файлі шаблону на відповідний текст або HTML-код, щоб параметр налаштовувався через файл шаблону, а не в діалоговому вікні «Web Photo Gallery» (Веб-фотогалерея). Наприклад, файл шаблону може містити BODY-елемент з таким атрибутом кольору тла, що використовує маркер у якості значення:

  bgcolor=%BGCOLOR%

  Щоб встановити колір тла сторінки на червоний, можна замінити маркер %BGCOLOR% на «FF0000.»

• Можна додати HTML-код або маркери до файлів шаблону. Усі маркери повинні містити великі символи, а також починатися та закінчуватися символом відсотка (%).

Персоналізація та створення стилю веб-фотогалереї

Маркери стилю веб-фотогалереї

Photoshop використовує маркери у файлах шаблонів HTML для визначення типового стилю веб-фотогалереї. Photoshop використовує ці маркери для створення галереї на основі вводу користувача у діалоговому вікні «Web Photo Gallery» (Веб-фотогалерея).

Під час персоналізації або створення стилю галереї можна додавати будь-який маркер до файлу шаблону HTML за винятком %THUMBNAILS% та %THUMBNAILSROWS%, які можуть міститися лише у файлі IndexPage.htm. Під час додавання маркеру не забувайте про те, що вам може також знадобитися додати HTML-код до файлу, щоб цей маркер використовувався належними чином.

У файлах шаблонів HTML можна використовувати такі маркери:

Визначає колір активних посилань.

Визначає назву файлу зображення.

Забезпечує здатність повернення до мініатюри зображення, яку переглядає користувач, а не до початку індексу. Починає діяти, коли користувач натискає на кнопку Home.

Визначає колір банера.

Визначає шрифт тексту банера.

Визначає кегль шрифту тексту банера.

Визначає фоновий колір.

Визначає шрифт супровідного підпису під кожною мініатюрою на домашній сторінці.

Визначає розмір шрифту супровідного підпису.

Вставляє заголовок документа для супровідного підпису з файлової інформації.

Визначає набір символів, що використовується на кожній сторінці.

Визначає контактну інформацію для галереї, наприклад номер телефону й місце розміщення.

Розширюється до «Веб-фотогалереї програмиAdobe Photoshop CS5».

Вставляє інформацію про авторські права для супровідного підпису з файлової інформації.

Вставляє інформацію про розробників для супровідного підпису з файлової інформації.

Визначає посилання для поточної домашньої сторінки.

Розташований у SubPage.htm і вказує на першу сторінку індексу.

Визначає дату, що з’являється на банері.

Визначає контактну адресу електронної пошти для галереї.

Визначає інформацію файлу зображення для супроводжувального підпису.

Визначає назву файлу зображення. Використовуйте для метаданих, що з'являються як текст HTML.

Визначає назву файлу URL зображення. Використовуйте лише для назви файлу URL.

Визначає посилання для першої сторінки галереї, що з’являється в правому фреймі набору фреймів.

Визначає посилання для домашньої сторінки, що з’являється в лівому фреймі набору фреймів.

Визначає назву галереї.

Визначає розмір межі повнорозмірного зображення на сторінці галереї.

Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.

Цей маркер заміщується числовим (лише), що представляє ширину зображення.

Визначає посилання на сторінку галереї.

Якщо позначено поле «Змінити розмір зображення», цей маркер містить значення у пікселях для зображення, що використовується у панелі «Великі зображення». Якщо поле не позначено, цей маркер міститиме порожній рядок. Він підходить для JavaScript у шаблонах, тому що може показувати максимальні значення висоти та ширини для всіх зображень для створеного сайту.

Визначає URL для повнорозмірного зображення на сторінці галереї.

Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.

Цей маркер заміщується числовим (лише), що представляє ширину зображення.

Визначає колір посилань.

Визначає посилання для наступної сторінки галереї.

Встановлює посилання з попереднього перегляду великого зображення на попередній перегляд наступного великого зображення.

Визначає посилання для наступної домашньої сторінки.

Вставляє нумеровані посилання на підсторінках на попередні перегляди всіх великих зображень.

Визначає місце поточної сторінки (наприклад, 1 сторінка з 3).

Визначає ім’я особи або організації, яка згадується як автор/власник фотографій у галереї.

Визначає посилання для попередньої сторінки галереї.

Визначає посилання для попередньої домашньої сторінки.

Визначає назву галереї.

Визначає назву галереї.

Визначає колір тексту.

Визначає розмір меж мініатюр.

Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.

Цей маркер заміщується числовим (лише), що представляє висоту зображення.

Цей маркер заміщується мініатюрами за допомогою файлу Thumbnail.htm для стилів фрейму. Ви маєте ставити цей маркер окремо в одному нерозривному рядку в HTML-файлі.

Містить значення у пікселях для мініатюр у панелі «Мініатюри». Він підходить для JavaScript у шаблонах, тому що може показувати максимальні значення висоти та ширини для усіх мініатюр для створеного сайту.

Визначає посилання на мініатюри.

Цей маркер заміщується рядами мініатюр за допомогою файлу Thumbnail.htm для стилів без фреймів. Ви маєте ставити цей маркер окремо в одному нерозривному рядку в HTML-файлі.

Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.

Цей маркер заміщується числовим (лише), що представляє ширину мініатюри.

Визначає назву галереї.

Визначає колір відвіданих посилань.