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

  • Чтобы создать веб-страницы и элементы их интерфейса, можно воспользоваться слоями или фрагментами. (См. главу Слои и раздел Разбиение веб-страниц на фрагменты.)

  • С помощью композиций слоев можно экспериментировать с различным расположением страниц или экспортировать варианты страницы. (См. раздел Композиции слоев.)

  • Создайте ролловер-изображения текста или кнопки для импорта в 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. Выберите «Параметры панели» в меню панели. Для первой или второй цветовой модели в меню «Режим» выберите «Цвета Web» и нажмите кнопку «ОК».
  3. Укажите курсором цвет, шестнадцатеричное значение которого необходимо показать.

Копирование шестнадцатеричного значения цвета

Photoshop копирует цвет либо как атрибут HTML COLOR, содержащий шестнадцатеричное значение (color=#xxyyzz), либо просто как шестнадцатеричное значение.

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

    • С помощью панели «Цвет», «Образцы» или палитры цветов установите основной цвет. В меню панели «Цвет» выберите «Скопировать цвет как HTML» или «Копировать шестнадцатеричный код цвета».

    • В диалоговом окне «Сохранить для Web» щелкните образец цвета или выберите «Подложка» > «Другое». В палитре цветов Adobe щелкните правой кнопкой мыши шестнадцатеричное значение и выберите «Копировать».

  2. Откройте необходимый файл в приложении редактирования HTML и выберите «Редактирование» > «Вставить».

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет