Примітка.
Докладніше про створення веб-галерей за допомогою програми Photoshop CS5 читайте в розділі Створення веб-фотогалерей у довідці програми Adobe Bridge. Щоб використовувати випущений раніше додатковий модуль веб-фотогалереї, описаний нижче, завантажте його для ОС Windows або ОС Mac OS.
Веб-фотогалерея – це веб-сайт, що містить домашню сторінку з зображеннями мініатюр та сторінками галереї з повнорозмірними зображеннями. Кожна сторінка містить посилання, що дають змогу відвідувачам здійснювати навігацію по сайту. Наприклад, коли відвідувач натискає на зображення мініатюри на домашній сторінці, відповідне повнорозмірне зображення завантажується на сторінку галереї. Команду «Web Photo Gallery» (Веб-фотогалерея) можна використовувати для автоматичного створення веб-фотогалереї з набору зображень.
Photoshop надає різноманітні стилі для галереї, які можна вибрати за допомогою команди «Web Photo Gallery» (Веб-фотогалерея). Якщо ви – досвідчений користувач, обізнаний із HTML, можна створювати нові стилі або персоналізувати стиль шляхом редагування набору файлів шаблонів HTML.
Кожний шаблон для стилів галереї має різні параметри. Якщо ви використовуєте передналаштований стиль, деякі параметри можуть бути затемнені або недоступні в даному стилі.
Програма Adobe Bridge містить оновлені функції роботи з веб-галереями. Для отримання вказівок див. розділ довідки програми Adobe Bridge Створення веб-фотогалерей або наведені нижче навчальні посібники.
-
Випущений раніше модуль веб-фотогалереї можна завантажити та встановити для ОС Windows або ОС Mac OS.
-
Виберіть параметри форматування для веб-галереї. Зробіть вибір у меню «Параметри» для показу кожного набору параметрів. Див. Параметри веб-фотогалереї.
-
Домашня сторінка для галереї з назвою index.htm або index.html залежно від параметрів «Розширення». Відкрийте цей файл у будь-якому браузері, щоб переглянути галерею.
JPEG-зображення всередині підпапки «images».
HTML-сторінки всередині підпапки «pages».
Зображення мініатюр JPEG всередині підпапки «thumbnails».
Якщо ви працюєте з фотографіями у робочому просторі з кольором широкої гами, наприклад ProPhoto RGB або Adobe RGB, кольори зображення можуть змінюватися під час перегляду у веб-галереї в переглядачі, нездатному читати вбудовані колірні профілі. Якщо це трапляється, спробуйте перетворити профілі зображення на sRGB (що використовується типово більшістю браузерів) перед їхньою оптимізацією або включенням у веб-фотогалерею. Перетворіть їх на sRGB одним із наведених способів. Гарною ідеєю є робота з копіями зображень.
Щоб перетворити одне зображення, виберіть команду «Правка» > Перетворити на профіль, а потім виберіть пункт sRGB. Див. Призначення або видалення колірного профілю (програми Illustrator, Photoshop).
Для перетворення теки із зображеннями використовуйте Процесор зображень. Виберіть пункт меню «Файл» > «Сценарії» > Процесор зображень. Див. розділ Перетворення файлів за допомогою процесора зображень.
Якщо використовується процесор зображень, то можна зберігати файли безпосередньо у форматі JPEG із потрібним розміром. Якщо ви дієте таким чином, впевніться, що прапорець «Зміна розміру зображень» у параметрах «Велике зображення» не встановлено.
Банер
Параметри тексту для банера, що з'являється на кожній сторінці у галереї. Введіть текст для кожного пункту:
Змінити розмір зображень
Змінює розміри вихідних зображень для розміщення на сторінках галереї. Виберіть розмір зі спливаючого меню або введіть розмір у пікселях. У пункті «Обмеження» виберіть, які розміри зображення потрібно обмежити під час зміни розміру. Для «Якості JPEG» виберіть варіант у спливаючому меню, введіть значення від 0 до 12 або перетягніть повзунок. Що більше значення, то вища якість зображення і більший файл.
Примітка.
Photoshop використовує типовий метод інтерполяції зображення, встановлений у параметрах. Виберіть «Бікубічна, чіткіше» в якості типового для найкращих результатів під час зменшення розміру зображення.
Використання заголовків
(Доступно для деяких стилів сайту) Вказує параметри для відображення супровідних підписів під кожним зображенням. Виберіть поле «Ім’я файлу» для відображення імені файлу або виберіть поля «Опис», «Розробники», «Заголовок» і «Авторське право» для відображення описового тексту в діалоговому вікні «Інформація про файл».
Використання заголовків
(Доступно для деяких стилів сайту) Визначає параметри відображення супровідних підписів під кожною мініатюрою. Виберіть поле «Ім’я файлу» для відображення імені файлу або виберіть поля «Опис», «Розробники», «Заголовок» і «Авторське право» для відображення описового тексту в діалоговому вікні «Інформація про файл».
Власні кольори
Параметри кольорів елементів галереї. Щоб змінити колір елементу, клацніть зразок кольору, а потім виберіть новий колір на Палітрі кольорів Adobe. Можна змінити колір тла кожної сторінки (параметр кольору тла) і банера (параметр «Банер»).
Примітка.
Докладніше про створення веб-галерей за допомогою програми Photoshop CS5 читайте в розділі Створення веб-фотогалерей у довідці програми Adobe Bridge. Щоб використовувати випущений раніше додатковий модуль веб-фотогалереї, описаний нижче, спочатку завантажте та встановіть його для ОС Windows або ОС Mac OS.
Photoshop забезпечує різноманітність стилів для веб-фотогалереї. Якщо ви – досвідчений користувач, обізнаний із HTML, можна створювати нові стилі або персоналізувати стиль шляхом редагування набору файлів шаблонів HTML.
Стилі веб-фотогалереї, що надаються програмою Photoshop, зберігаються в окремих папках у таких місцях:
Mac OS
Adobe Photoshop CS5/Presets/Web Photo Gallery.
Назва кожної папки в цьому місці з'являється як параметр у меню «Стилі» в діалоговому вікні «Web Photo Gallery» (Веб-фотогалерея). У кожній папці містяться такі файли шаблонів HTML, які Photoshop використовує для створення галереї:
Caption.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-код або маркери до файлів шаблону. Усі маркери повинні містити великі символи, а також починатися та закінчуватися символом відсотка (%).
-
Персоналізуйте файл шаблону 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 можна використовувати такі маркери:
%ANCHOR%
Забезпечує здатність повернення до мініатюри зображення, яку переглядає користувач, а не до початку індексу. Починає діяти, коли користувач натискає на кнопку Home.
%CONTACTINFO%
Визначає контактну інформацію для галереї, наприклад номер телефону й місце розміщення.
%FILENAME%
Визначає назву файлу зображення. Використовуйте для метаданих, що з'являються як текст HTML.
%FIRSTPAGE%
Визначає посилання для першої сторінки галереї, що з'являється в правому фреймі набору фреймів.
%FRAMEINDEX%
Визначає посилання для домашньої сторінки, що з'являється в лівому фреймі набору фреймів.
%IMAGE_HEIGHT%
Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.
%IMAGE_SIZE%
Якщо позначено поле «Змінити розмір зображення», цей маркер містить значення у пікселях для зображення, що використовується у панелі «Великі зображення». Якщо поле не позначено, цей маркер міститиме порожній рядок. Він підходить для JavaScript у шаблонах, тому що може показувати максимальні значення висоти та ширини для всіх зображень для створеного сайту.
%IMAGE_WIDTH%
Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.
%NEXTIMAGE _CIRCULAR%
Встановлює посилання з попереднього перегляду великого зображення на попередній перегляд наступного великого зображення.
%NUMERICLINKS%
Вставляє нумеровані посилання на підсторінках на попередні перегляди всіх великих зображень.
%PHOTOGRAPHER%
Визначає ім'я особи або організації, яка згадується як автор/власник фотографій у галереї.
%THUMBNAIL_HEIGHT%
Активує поле з позначкою «Додати до зображень атрибути ширини і висоти». Це дозволяє користувачеві завантажувати атрибути, зменшуючи час завантаження.
%THUMBNAILS%
Цей маркер заміщується мініатюрами за допомогою файлу Thumbnail.htm для стилів фрейму. Ви маєте ставити цей маркер окремо в одному нерозривному рядку в HTML-файлі.
%THUMBNAIL_SIZE%
Містить значення у пікселях для мініатюр у панелі «Мініатюри». Він підходить для JavaScript у шаблонах, тому що може показувати максимальні значення висоти та ширини для усіх мініатюр для створеного сайту.
%THUMBNAILSROWS%
Цей маркер заміщується рядами мініатюр за допомогою файлу Thumbnail.htm для стилів без фреймів. Ви маєте ставити цей маркер окремо в одному нерозривному рядку в HTML-файлі.
Публікації Twitter™ і Facebook не підпадають під умови ліцензії Creative Commons.