Веб-інструменти Photoshop полегшують побудову компонентів веб-сторінок або вивід цілих веб-сторінок у передналаштованих або персоналізованих форматах.

  • Використовуйте шари та фрагменти для оформлення веб-сторінок і елементів інтерфейсу веб-сторінки. (Див. розділи Шари та Розділення веб-сторінок на фрагменти.)

  • Використовуйте композиції шарів для експериментування з різними композиціями сторінок або для експортування варіантів сторінки. (Див. розділ Композиції шарів.)

  • Створюйте текст або кнопки-ролловери для імпорту в Dreamweaver або Flash.

  • Створюйте веб-анімацію за допомогою панелі «Анімація», потім експортуйте її як анімаційні GIF-зображення або QuickTime-файли. Див. Створення покадрової анімації.

  • Створюйте фотогалереї в мережі за допомогою Adobe Bridge, щоб швидко перетворювати пакет зображень на інтерактивний веб-сайт, використовуючи широке коло різноманітних шаблонів професійного рівня.

Про оформлення веб-сайтів за допомогою Photoshop і Dreamweaver дивіться відеоролик Доступ до Photoshop із Dreamweaver для покращення веб-зображення.

Створення зображень-ролловерів

Ролловер – це кнопка або зображення на веб-сторінці, що змінюється, коли вказівник миші знаходиться на ньому. Для створення ролловера щонайменше потрібно два зображення: перше зображення для нормального стану та друге – для зміненого.

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

  • Використовуйте шари для створення первинних та вторинних зображень. Створіть вміст на одному шарові, потім створіть дублікат шару та відредагуйте подібний вміст, підтримуючи вирівнювання між шарами. Під час створення ролловерного ефекту можна змінювати стиль шару, видимість або положення, здійснити колірні чи тональні коригування або застосувати ефекти фільтрів. Див. Дублювання шарів.

  • Можна також використовувати стилі шару для застосування до первинного шару таких ефектів, як накладання кольорів, тінь, світіння або рельєф. Для створення ролловерної пари вмикайте або вимикайте стиль шару та записуйте зображення у кожному стані. Див. Ефекти та стилі шару.

  • Використовуйте передналаштовані стилі кнопки у панелі «Стилі» для швидкого створення ролловерних кнопок у нормальному стані, стані наведення вказівника та натискання кнопки миші. Намалюйте стандартну фігуру за допомогою інструменту «Прямокутник» та застосуйте такий стиль, як «Нормальний скошений», для автоматичного перетворення прямокутника на кнопку. Потім скопіюйте шар та застосуйте інші передналаштовані стилі, наприклад, «Скошений при наведенні вказівника», для створення додаткових станів кнопки. Записуйте кожний шар як окреме зображення для створення закінченого набору ролловерних кнопок.

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

Примітка.

Зберігаючи зображення-ролловери, надавайте їм такі назви, щоб відрізняти первинне зображення (не ролловер) від вторинного (ролловер).

Після створення набору ролловерного зображення у Photoshop скористайтеся Dreamweaver для розміщення зображення на веб-сторінці та автоматичного додавання коду Javascript для ролловерної дії.

Експорт до Zoomify

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

  1. Виберіть «Файл» > «Експорт» > «Zoomify» і встановіть параметри експорту.

    Шаблон

    Встановлює тло та навігацію для зображення, що переглядається в браузері.

    Кінцеве розташування

    Визначає місце розташування та назву файлу.

    Параметри розбиття зображення на сегменти

    Визначає якість зображення.

    Параметри браузера

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

  2. Завантажте файли HTML і файли із зображеннями на веб-сервер.

Робота з шістнадцятковими значеннями кольорів

Photoshop може відображати шістнадцяткові значення кольорів зображення або копіювати шістнадцяткове значення кольору для використання в HTML-файлі.

Перегляд шістнадцяткових значень кольорів у панелі «Інформація»

  1. Виберіть «Вікно» > «Інформація» або клацніть закладку панелі «Інформація» для перегляду панелі.
  2. Виберіть «Параметри панелі» в меню панелі. У «Зчитуванні першого кольору» або «Зчитуванні другого кольору» виберіть веб-колір у меню «Режим» і натисніть кнопку «OK».
  3. Встановіть вказівник на кольорі, шістнадцяткові значення якого треба переглянути.

Копіювання кольору як шістнадцяткового значення

Photoshop копіює кольори як атрибут HTML COLOR з шістнадцятковим значенням (color=#xxyyzz), або просто як шістнадцяткове значення.

  1. Виконайте одну із зазначених нижче дій.
    • За допомогою інструмента «Піпетка» перемістіть курсор на колір, який потрібно скопіювати. Клацніть правою кнопкою миші (Windows) або клацніть утримуючи натиснутою клавішу Control (Mac OS), і виберіть «Копіювати колір як HTML» або «Копіювати шістнадцятковий код кольору».

    • Встановіть колір переднього плану, використовуючи панелі «Колір», «Зразки» або «Палітра кольорів Adobe». У меню панелі «Колір» встановіть позначку «Копіювати колір як HTML» або «Копіювати шістнадцятковий код кольору».

    • У діалоговому вікні «Зберегти для Web» клацніть зразок кольору або виберіть пункт «Матовий» > «Інше». У палітрі кольорів Adobe клацніть правою кнопкою миші шістнадцяткове значення та виберіть команду «Копіювати».

  2. Відкрийте потрібний файл у редакторі HTML і виберіть команду «Правка» > «Вставити».

Цей документ захищено ліцензією Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Публікації Twitter™ і Facebook не підпадають під умови ліцензії Creative Commons.

Юридична інформація   |   Політика мережевої конфіденційності