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

Робота з веб-графікою

Веб-інструменти 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 і виберіть команду «Редагувати» > «Вставити».

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

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