Посібник користувача Скасувати

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

Примітка.

Докладніше про створення веб-галерей за допомогою програми Photoshop CS5 читайте в розділі Створення веб-фотогалерей у довідці програми Adobe Bridge. Щоб використовувати випущений раніше додатковий модуль веб-фотогалереї, описаний нижче, завантажте його для Windows або Mac OS.

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

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

Домашня сторінка веб-фотогалереї у Photoshop
Домашня сторінка веб-фотогалереї

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

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

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

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

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

  1. Завантажте та інсталюйте випущений раніше модуль веб-фотогалереї для Windows або Mac OS.

  2. (Додатково) Виберіть файли або папку, яку потрібно використати в Adobe Bridge.

    Ваші зображення будуть представлені в тому порядку, в якому вони відображаються у Bridge. Якщо необхідно використати інший порядок, змініть порядок у Bridge.

  3. Виконайте одну з таких дій:

    • В Adobe Bridge виберіть «Інструменти» > «Photoshop» > «Web Photo Gallery» (Веб-фотогалерея).

    • У Photoshop виберіть «Файл» > «Автоматизувати» > «Web Photo Gallery» (Веб-фотогалерея).

  4. Виберіть стиль для галереї зі спливаючого меню «Стилі». Перегляд домашньої сторінки для вибраного стилю з'являється у діалоговому вікні.

  5. (Додатково) Введіть адресу e‑mail як контактну інформацію для галереї.

  6. Виберіть початкові файли для галереї з меню «Використовувати».

    Виділені зображення з Bridge

    Використовує зображення, які вибрано перед відкриттям діалогового вікна «Web Photo Gallery» (Веб-фотогалерея).

    Тека

    Використовує зображення з тек, які ви вибрали, за допомогою кнопок «Переглянути» (Windows) або «Вибрати» (Mac OS). Виберіть команду «Включити всі вкладені папки» для включення зображень, що містяться в підпапках вибраної папки.

  7. Натисніть на «Місце призначення», а потім виберіть папку, в яку потрібно записати зображення та HTML-сторінки для галереї. Потім натисніть кнопку «OK» (Windows) або «Вибрати» (Mac OS).

  8. Виберіть параметри форматування для веб-галереї. Зробіть вибір у меню «Параметри» для показу кожного набору параметрів. Див. Параметри веб-фотогалереї.

  9. Натисніть кнопку «OK». Photoshop розташовує у папці призначенні такі HTML– та JPEG-файли:

    • Домашня сторінка для галереї з назвою index.htm або index.html залежно від параметрів «Розширення». Відкрийте цей файл у будь-якому браузері, щоб переглянути галерею.

    • JPEG-зображення всередині підтеки «images».

    • HTML-сторінки всередині підтеки «pages».

    • Зображення мініатюр JPEG всередині підтеки «thumbnails».

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

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

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

Загальний

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

Розширення

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

Використання кодування UTF 8 для URL

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

Додавання до зображень атрибути ширини й висоти

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

Зберігати всі метадані

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

Банер

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

Назва сайту

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

Фотограф

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

Контактні дані

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

Дата

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

Шрифт і кегль

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

Великі зображення

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

Додати числові посилання

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

Змінити розмір зображень

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

Примітка.

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

Розмір межі

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

Використання заголовків

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

Шрифт і кегль

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

Мініатюри

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

Розмір

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

Рядки та стовпці

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

Розмір межі

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

Використання заголовків

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

Шрифт і кегль

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

Власні кольори

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

Захист

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

Вміст

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

Шрифт, колір і розташування

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

Поворот

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

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

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

Windows

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

Mac OS

Adobe Photoshop CS5/Presets/Web Photo Gallery.

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

Caption.htm

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

FrameSet.htm

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

IndexPage.htm

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

SubPage.htm

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

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-код або маркери до файлів шаблону. Усі маркери повинні містити великі символи, а також починатися та закінчуватися символом відсотка (%).

  1. Знайдіть папку, в якій зберігаються наявні стилі веб-фотогалереї.
  2. Виконайте одну з таких дій:
    • Щоб персоналізувати стиль, створіть копію папки стилю та зберігайте її у тому самому місці, що й папки наявних стилів.

    • Щоб створити новий стиль, створіть нову папку для нового стилю та зберігайте її у тому самому місці, що й папки наявних стилів.

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

  3. Виконайте одну з таких дій за допомогою редактора HTML:
    • Персоналізуйте файл шаблону HTML.

    • Створіть потрібні файли шаблонів HTML та зберігайте їх у папці стилю.

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

    Примітка.

    Під час персоналізації або створення шаблону для стилю галереї потрібно розмістити кожний із таких маркерів в окремому рядку HTML-файлу: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% і %PREVINDEX%. Під час створення окремих сторінок галереї Photoshop пропускає рядки в шаблоні, що містить маркери, які не застосовуються до цих сторінок. Наприклад, коли Photoshop створює першу сторінку галереї, він пропускає будь-який рядок у шаблоні, що містить маркер %PREVIMAGE%, що визначає посилання на попередню сторінку галереї. Утримуючи маркер %PREVIMAGE% в окремому рядку, ви забезпечуєте, що Photoshop не ігноруватиме решту маркерів у шаблоні.

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

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

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

%ALINK%

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

%ALT%

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

%ANCHOR%

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

%BANNERCOLOR%

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

%BANNERFONT%

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

%BANNERFONTSIZE%

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

%BGCOLOR%

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

%CAPTIONFONT%

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

%CAPTIONFONTSIZE%

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

%CAPTIONTITLE%

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

%CHARSET%

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

%CONTACTINFO%

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

%CONTENT_GENRATOR%

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

%COPYRIGHT%

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

%CREDITS%

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

%CURRENTINDEX%

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

%CURRENTINDEXANCHOR%

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

%DATE%

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

%EMAIL%

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

%FILEINFO%

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

%FILENAME%

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

%FILENAME_URL%

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

%FIRSTPAGE%

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

%FRAMEINDEX%

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

%HEADER%

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

%IMAGEBORDER%

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

%IMAGE_HEIGHT%

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

%IMAGE_HEIGHT_NUMBER%

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

%IMAGEPAGE%

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

%IMAGE_SIZE%

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

%IMAGESRC%

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

%IMAGE_WIDTH%

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

%IMAGE_WIDTH_NUMBER%

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

%LINK%

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

%NEXTIMAGE%

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

%NEXTIMAGE _CIRCULAR%

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

%NEXTINDEX%

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

%NUMERICLINKS%

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

%PAGE%

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

%PHOTOGRAPHER%

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

%PREVIMAGE%

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

%PREVINDEX%

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

%SUBPAGEHEADER%

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

%SUBPAGETITLE%

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

%TEXT%

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

%THUMBBORDER%

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

%THUMBNAIL_HEIGHT%

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

%THUMBNAIL_HEIGHT_NUMBER%

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

%THUMBNAILS%

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

%THUMBNAIL_SIZE%

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

%THUMBNAILSRC%

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

%THUMBNAILSROWS%

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

%THUMBNAIL_WIDTH%

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

%THUMBNAIL_WIDTH_NUMBER%

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

%TITLE%

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

%VLINK%

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

Отримуйте допомогу швидше й простіше

Новий користувач?