Статьи

Створення веб-галереї фотографій в Adobe Photoshop CS5

  1. Про веб-галереї фотографій
  2. Створення веб-галереї
  3. Перевірка колірної гами
  4. Опції веб-галереї фотографій
  5. Стилі веб-галереї фотографій
  6. Про налаштування стилів веб-галереї фотографій
  7. По темі:

Для створення найбільш ефективних веб-галерей використовуйте модуль Adobe Output Module в Adobe Bridge. Для отримання додаткової інформації використовуйте спрочний матеріал Bridge Help про "вивідному модулі фотогалереї". Інсталює опанние тут плагіни тільки в тому випадку, якщо цього вимагає ваш робочий процес.

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

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

Мал. 21.4. Домашня сторінка веб-галереї фотографій

Photoshop надає різноманітні стилі для фотогалереї, які МГО вибрати за допомогою команди Web Photo Gallery (Веб-галерея фотографій). Кожен шаблон для галереї стилів поставляється з різними можливостями. При іользованіі стилів за шаблоном деякі опції можуть бути приховані або зовсім недоступні в деяких стилях.

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

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

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

◆ для Photoshop: виберіть команду File | Automate | Web Photo Gallery

(Файл | Автоматизація | Веб-галерея фотографій);

◆ для Bridge: виберіть команду Tools | Photoshop | Web Photo Gallery (Ін-

струментом | Photoshop | Веб-галерея фотографій).

3. Виберіть стиль для галереї з спливаючого меню Styles (Стилі). Предварельний перегляд домашньої сторінки для обраного стилю з'явиться в діоговом вікні.

4. Для галереї введіть адресу електронної пошти в якості контактної інформації.

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

(Користувача).

Selected Images From Bridge (Зображення, вибрані з Bridge). Іользованіе зображень, обраних перед відкриттям діалогового вікна Web Photo Gallery (Веб-галерея фотографій).

Folder (Папка). Використання зображень з папок, які обрані за допомогою кнопок Browse (для Windows) або Choose (для Mac OS). Вибіте опцію Include All Subfolders (Включити всі вкладені папки), щоб включити всі зображення з будь-якої внутрішньої подпапки в обраній папці.

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

6. Виберіть параметри форматування для веб-галереї. Виберіть з меню

Options (Налаштування) опції для відображення кожного набору функцій.

7. Натисніть кнопку ОК. Photoshop розміщує HTML- і JPEG-файли згідно із законодавством Укра папки:

◆ домашня сторінка галереї зазвичай іменується index.htm або index.html, в залежності від вибору опції Extension (Розширення). Відкрийте цей файл у будь-якому веб-браузері для попереднього перегляду веб-галереї;

◆ JPEG-зображення розміщуються всередині папки з зображеннями;

◆ HTML-сторінки розміщуються всередині папки з веб-сторінками;

◆ мініатюри JPEG-зображень розміщуються всередині папки з мініатюрн.

Перевірка колірної гами

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

Конвертація в sRGB можливо одним з наступних способів. При цьому рекомендується працювати з копією зображення.

© Для конвертації одного зображення слід вибрати команду Edit | Convert To Profile (Редагування | Конвертація в профіль), а потім брехати sRGB.

© Для конвертації папки зображень використовуйте Image Processor (компресорів зображень). Виберіть команду File | Scripts | Image Processor (Файл | Сценарії | Процесор зображень).

Якщо використовується команда Image Processor (Процесор зображень), то можна зберігати файли безпосередньо в форматі JPEG бажаного розміру. При хвилюванні цього переконайтеся в тому, що опція Resize Images (Перерахунок розміру ізраженія) вимкнена в налаштуваннях Large Image (Велике зображення).

Опції веб-галереї фотографій

© General (Основні). Основні опції розширень файлів, кодування і Мадай.

© Extension (Розширення). Використовує в якості розширення файлу або htm,

або html.

© Use UTF 8 Encoding For URL (Використання для URL кодування КОИ-8).

© Add Width And Height Attributes For Images (Додавання атрибутів ширини і висоти для зображень). Завдання розмірності, скорочення часу завантаження.

© Preserve All Metadata. (Збереження всіх метаданих). Зміст Інформ про метаданих.

Banner (Банер). Текстові опції для банера, який з'являється на кожній сторінці галереї. Введіть значення для кожної з них.

© Site Name (Назва сайту). Назва галереї.

© Photographer (Фотограф). Ім'я особи або організації, які отримують кредит на фото в галереї.

© Contact Info (Контактна інформація). Контактна інформація для галереї

(Наприклад, номер телефону або адресу офісу).

© Date (Дата). Дата з'являється на кожній сторінці галереї. За замовчуванням

Photoshop використовує поточну дату.

© Font and Font Size (Шрифт і розмір шрифту). Опції тексту банерів (доступність

але для деяких стилів сайту).

Large Images (Великі фото). Опції для основних зображень, які пвляются на кожній сторінці галереї.

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

© Resize Images (Зміна розміру фотографій). Змінює розмір початкового зображення для розміщення на сторінках галереї. Вибір розміру осущестяется у спливаючому меню або введенням розміру в пікселях. Для опції Constrain (Обмежити) виберіть розмірність, в якій буде визначатися

розмір зображення. Для JPEG Quality (Якість JPEG) виберіть опцію у спливаючому меню, введіть значення від 0 до 12 або перетягніть повзунок. Чим вище значення, тим краще якість зображення і тим більше розмір файлу.

Програма Photoshop за замовчуванням використовує метод інтерполяції зображень, уановленний в налаштуваннях. Для отримання найкращих результатів при скороченні Раєр зображення скористайтеся встановленим за замовчуванням методом Bicubic Sharper (Бікубічеський різкий).

© Border Size (Розмір кордонів). Визначає ширину бордюру навколо зображення в пікселях.

© Titles Use (Використання назв). Визначає опції відображення підпису під кожним зображенням. Виберіть Filename (Файл) для відображення імені файлу або виберіть Description (Опис), Credits (Кредити), Title (Назва) і Copyright (Авторське право) для відображення текстового опіса-

ня з діалогового вікна File Info (Інформація про фото). (Доступно для некор стилів сайту.)

© Font and Font Size (Шрифт і розмір шрифту). Задає шрифт і розмір напису

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

Thumbnails (Мініатюри). Опції галереї домашньої сторінки, включаючи Раєр мініатюр зображень.

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

© Columns and Rows (Стовпці і рядки). Вказує число стовпців і рядків, в яких відображаються мініатюри на домашній сторінці. Ця опція не преняется до галереї, коли використовуються опції Horizontal Frame Style (Стиль

фрейма по горизонталі) або Vertical Frame Style (Стиль фрейма по вертикалі).

© Border Size (Розмір кордонів). Визначає ширину бордюру навколо зображення в пікселях.

© Titles Use (Використання назв). Визначає опції відображення підпису під кожним зображенням. Виберіть Filename (Файл) для відображення імені файлу або виберіть Description (Опис), Credits (Кредити), Title (Назва) і Copyright (Авторське право) для відображення текстового описів з діалогового вікна File Info (Інформація про фото).

© Font and Font Size (Шрифт і розмір шрифту). Задає шрифт і розмір напису. Custom Colors (Користувальницькі кольори). Опції колірних елементів в галереї. Щоб змінити колір елемента, виберіть його в палітрі Swatches (Каталог), а потім виберіть новий колір з Adobe Color Picker (Палітра кольорів Adobe). Можна ізміть колір фону на кожній сторінці (опції Background) і на банері (опції

Banner).

Security (Безпека). Відображення тексту над кожним зображенням у кестве стримуючого фактора розкрадань.

© Content (Вміст). Визначає текст, який буде відображатися. Вибіте опцію Custom Text (з власним текстом) для введення довільного тексту. Виберіть Filename (Файл) для відображення імені файлу або ви-

беріть Description (Опис), Credits (Кредити), Title (Назва) і Copyright (Авторське право) для відображення текстового опису з діалогового вікна File Info (Інформація про фото).

© Font, Color, and Position (Шрифт, колір і позиція). Вказує шрифт, колір і позицію заголовка.

© Rotate (Поворот). Розміщує текст на зображенні під кутом.

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

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

© для Windows: Program Files / Adobe / Adobe Photoshop CS5 / Presets / Web Photo Gallery;

© для Mac OS: Adobe Photoshop CS5 / Presets / Web Photo Gallery.

Назва кожної папки в цьому місці з'явиться як опція в меню Styles (Стилі) в діалоговому вікні 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% текстом, який вводиться в поле Site Name (Нваніе сайту) в діалоговому вікні 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-код і символи до файлів шаблону. Всі номери повинні бути записані у верхньому регістрі і операторні дужки begin і end повинні починатися з символу відсотка (%).

Джерело: Комолова, Н. В., Adobe Photoshop CS5 для всіх / Н. В. Комолова, Е. С. Яковлєва. - СПб .: БХВ-Петербург, 2011. - 624 с .: іл. + CD-ROM - (В оригіналі)

По темі:

Ви можете пропустити читання запису і залишити коментар. Розміщення посилань заборонено.

Новости