Photoshop 7 и webдизайн

       

Photoshop 7 и webдизайн

Введение
Форматы исходных и промежуточных изображений
Формат PSD
Формат TIFF
Окно сохранения TIFFфайла в расширенном режиме
Формат BMP
Окно сохранения файла в формате BMP
Формат TGA
Формат JPEG

Photoshop 7 и webдизайн

Форматы webграфики
Формат GIF
Над оформлением первых webстраниц никто голову не ломал
В формате GIF сохранены простая
Увеличенный фрагмент изображения
Изображение с прозрачным фоном
Загрузка нормального и чересстрочного изображений

Формат JPEG
Выделение низкочастотной составляющей
Изображение до сохранения в формате JPEG
Увеличенные фрагменты изображения
Формат PNG
Результат наложения изображения
Наложение на фон изображения с
Отображение страницы с рисунками
Тестовые изображения для сравнения
Таблица 2 1 Размеры файлов полученных

Photoshop 7 и webдизайн

Цветовые режимы и модели
Дополнительная информация в заголовке окна документа
Меню выбора цветового режима
Таблица цветов ) Эта команда позволяет

Окно настройки преобразования
Окно выбора красителей для дуплексного
Панель Channels при работе в режимах
Окно выбора цвета (по умолчанию
Окно выбора цвета в режиме просмотра
Меню настройки панели Colors
Панель Color в режимах RGB Sliders
Панель Swatches

Photoshop 7 и webдизайн

Сканирование и коррекция изображений
Окно настройки команды Brightness/Contrast
Изображение до коррекции яркости
Окно управления командой Hue/Saturation
Настройка команды Hue/Saturation
Окно управления Levels ...
Изображение имеет низкую контрастность

Примерный вид окна настройки команды
Окно настройки после задания уровней
Изображение до (слева) и после (справа) коррекции уровней
Окно настройки параметров команды Curves ...
Примеры кривых команды Curves ...
Пример художественной обработки
Окно настройки параметров команды Color Balance
Окно настройки команды Variations ...
Окно настройки параметров команды
Окно настройки фильтра Unsharp Mask

Палитра Info
Окно настройки параметров палитры Info

Photoshop 7 и webдизайн

Выделение фрагментов изображения
Кнопки вызова инструментов работы
Меню выбора инструментов используемых
Вид панели настройки при работе
Меню выбора инструментов для работы

Окно настройки команды Color Range ...
Окно документа до перехода в режим
Окно настройки параметров режима Quick Mask
Окно документа до (слева) и после
Пример создания выделения сложной
Трансформирование выделенной области
Изменение формы выделения
Окно команды Save Selection ...
Выделенная область сохраненная в виде маски слоя 1
Окно команды Load Selection ...

Пример выделения объекта из окружающего фона
Окно настройки команды Extract ...

Photoshop 7 и webдизайн

Подготовка графических элементов webстраниц
Так могли выглядеть первые webстраницы
Первые шаги дизайнеров по просторам
Страницы похожие на эту легко
Дизайнеры набираются опыта меняется
Для ускорения загрузки фотогалерей
На сайтах часто можно встретить
Пример использования нарисованного
В оформлении сайта могут использоваться
При помощи инструмента Туре можно

Таблица 6 1 Возможности настройки
Палитры управления вводом текста
Таблица 6 2 Некоторые элементы
Меню панели Character
Окно задания параметров искажения текста
Окно настройки наложения слоев
Окно настройки слоевого эффекта
Эффекты отображаются на палитре Layers
Контекстное меню слояэффекта
Окно настройки команды Image Size

Окно настройки команды Canvas Size

Photoshop 7 и webдизайн

Подготовка макета webстраницы в Adobe PhotoShop
Можно копировать слои при помощи мыши
Направляющие линии образуются при помощи линеек
Команды меню View позволяют управлять
При помощи направляющих линий
В меню Layer содержатся команды
Для выполнения некоторых операций

Исходное изображение (вверху)
Команды меню Layer > Distribute
Пример использования команды выравнивания
Порядок расположения слоев можно изменять при помощи мыши
С помощью команд меню Layer >
Пример разметки макета

Photoshop 7 и webдизайн

Сохранение файлов в форматах GIF и JPEG
Сохранение в формате GIF
Таблица LUT (lookup table) — таблица
Таблица поиска цвета) где можно
Вид изображения с применением

Сохранение в формате JPEG
Вид диалогового окна при сохранении
Сохранение с помощью команды Save
Таблица цветов)
Диалоговое окно команды Save For Web ...
Меню выбора режима предварительного просмотра
Вид и расположение меню параметров
Диалоговое окно команды Optimize To File Size ...
Слева изображены настройки для GIF справа — для JPEG
Таблица поиска цветов) и Image

Таблица поиска цветов) (Рисунок
Вид и расположение меню управления
Внешний вид диалогового окна для настройки HTML
Внешний вид диалогового окна для настройки фона
Внешний вид диалогового окна для настройки сохранения файлов
Внешний вид диалогового окна для
Экспорт файлов GIF для Web
Экспорт контуров в Adobe Illustrator
В диалоговом окне команды Export
Мастер экспорта прозрачных изображений

Окно мастера экспорта прозрачных

Photoshop 7 и webдизайн

Подготовка и оптимизация изображений
Отличия инструментов и команд PhotoShop и ImageReady
Таблица 9 1 Отличия функций инструментов
В PhotoShop (а) и ImageReady (6)
Внешний вид меню File для PhotoShop
Работа с цветом

Внешний вид панели цвета и соответствующего
А Внешний вид диалогового окна
Б Внешний вид диалогового окна
Оптимизация изображений
Внешний вид меню панели оптимизации
Панель оптимизации для форматов GIF (слева) и JPEG (справа)
Внешний вид диалогового окна Modify
Внешний вид диалогового окна Modify
Панель оптимизации для форматов
Автоматическая оптимизация настроек

Диалоговое окно Save optimized

Photoshop 7 и webдизайн

Создание анимированных изображений
Внешний вид панели анимации (а) и соответствующее меню (б)
Работа с кадрами
Диалоговое окно команды Paste Frames ...
Диалоговое окно команды Tween ...
Диалоговое окно Set Loop Count

Меню установки времени задержки
Использование слоев для редактирования кадров
Внешний вид панели слоев (а) и соответствующее меню (б)
Метод удаления фона
Набор кадров с прозрачным фоном
Оптимизация анимированных изображений
Диалоговое окно команды Optimize
Сохранение анимированных изображений

Photoshop 7 и webдизайн

Картыизображения в ImageReady
Таблица 11 1 Различия при задании
Создание картизображений
Панель настроек инструмента позволяет
Панель картыизображения управляющая
Панель анимированных графических
Вид панели картыизображения основанной на слое
Конвертирование картизображений
Просмотр картизображений

Диалоговое окно команды Edit
Выбор типа картыизображения
Внешний вид диалогового окна команды

Photoshop 7 и webдизайн

Подготовка анимированных кнопок
Панель анимированных кнопок (а) и соответствующее меню (б)
Состояния анимированных кнопок
Таблица 12 1 Состояния анимированных

Таблица 12 2 Состояния анимированных
Диалоговое окно команды Rollover State Options ...
Работа со слоями
Диалоговое окно команды Style Options ...

Photoshop 7 и webдизайн

Экспорт изображений
Диалоговое окно команды File Export Original ...
Диалоговое окно команды File

Диалоговое окно команды File Update HTML ...

Photoshop 7 и webдизайн

Дополнительные возможности ImageReady
Просмотр изображений в браузере
Диалоговое окно команды File Preview In Other ...

Окно браузера при просмотре изображения
Переход в другие приложения
Диалоговое окно команды File
Создание текстур
Образцы текстуры с видимыми швами
Результат работы фильтра при следующих
Исходный образец серого цвета
Краткий обзор возможностей HTML
Фрагмент HTMLкода webстраницы

Та же страница открытая в Internet Explorer
Отображение домашней страницы
Отображение той же страницы в Netscape Navigator
Структура HTMLдокумента и форматирование текста
Пример отображения webстраницы браузером
Заголовки различных уровней
Таблица 16 1 Теги физического
Пример использования тегов форматирования текста

Таблица 16 2 Допустимые значения

Photoshop 7 и webдизайн

Использование списков и таблиц
Использование маркированных и нумерованных списков
Таблица 17 1 Значения параметра TYPE тега UL
Пример использования маркированного списка
Таблица 17 2 Допустимые значения

Нумерованные списки с разными типами нумерации
Отображение списка определений в браузере Internet Explorer
Вложенные списки позволяют легко
Использование таблиц
Простая таблица отображаемая в окне браузера
Пример видоизменения таблицы при
Содержимое ячеек таблицы может
Различные варианты объединения ячеек таблицы

Photoshop 7 и webдизайн

Использование изображений
Вы можете задать фоновое изображение
Таблица 18 1 Допустимые значения
Использование различных режимов
Отображение альтернативного текста
Картаизображение может работать
Если в тексте страницы не указаны

При необходимости можно попытаться
Ресурсы Интернета и ссылки на них
Ссылки связывают между собой страницы Всемирной паутины
Окно браузера с webстраницей содержащей
Использование фреймов
Сайт информационного портала ИНТЕРТЭК
Страница с тремя фреймами в исходном

Та же страница Левый нижний фрейм
Документ с фреймами загруженный в браузер
Применение фреймов
Некоторые рекламные баннеры включаются

Photoshop 7 и webдизайн

Размещение webстраниц в Интернете и их реклама
Главная страница сайта Narod ru
Фрагмент регистрационной формы

Если вы уже зарегистрированы в
Страница с несколькими баннерами
Заглавная страница сайта системы обмена баннерами RLE

Содержание раздела