-
Рис. 23.1. Сайт www.Piter.com | Примечание | При выполнении упражнений этой главы вы будете постоянно переходить из программы Photoshop в ImageReady и обратно. | Примечание | Программа ImageReady имеет серьезные проблемы с отображением кириллицы.
-
Некоторые видео – и мультимедийные программы, а также компьютерные системы не способны импортировать изображение из программы Photoshop, если оно содержит более 256 цветов (цвет представлен более чем 8 битами).
-
Выполните команды Image › Mode › Color Table (Изображение › Режим › Таблица цветов). В результате откроется диалоговое окно Color Table (Таблица цветов), в котором будут показаны все цвета изображения (рис.
-
Создание специальной палитры в программе ImageReady для изображений в режиме Indexed Color. | Специальные палитры программы ImageReady гарантируют, что каждое изображение, входящее в некоторую группу, использует одну и ту же цветовую палитру.
-
Многослойный файл, созданный в программе Photoshop, может быть использован в качестве основы для создания анимации в программе LiveMotion, Web-приложении компании Adobe. Можно использовать палитру Layers (Слои) в программе Photoshop как сценарий, чтобы создать последовательность изображений.
-
Для того чтобы упростить процесс размещения Photoshop-изображения в программе LiveMotion, произведите следующие действия в первой программе: | убедитесь, что в изображении имеется непрозрачный фон (Background), а не слой с названием Layer 0. Если возможно, ничем не заполняйте фон.
-
Для того чтобы создать гладкие переходы между фигурами, программа Photoshop добавляет точки по краям объекта (этот процесс называется сглаживанием). Точки постепенно меняются от полностью непрозрачных до прозрачных.
-
Многослойное изображение, созданное в программе Photoshop, можно импортировать в программу After Effects 4.1 компании Adobe и разместить его в окне Time Layout (Расписание), чтобы создать анимационные эффекты для вывода на видео или просмотра при помощи программы QuickTime.
-
Основные шаги при создании изображения в программе Photoshop для его просмотра в режиме реального времени могут показаться простыми: | создайте изображение в режиме RGB; | сохраните его; | перейдите в программу ImageReady 7.0; | оптимизируйте файл, предназначенный для загрузки в сеть.
-
Для того чтобы рассчитать размер изображения, необходимо заранее знать размер монитора, а также скорость модема потенциального пользователя, который будет просматривать Web-страничку. В большинстве случаев следует создавать изображение размером 800x600 пикселов (обычный размер монитора) и для модема со скоростью передачи 56 Кб/с (наиболее распространенная скорость).
-
Формат GIF – это 8-битный формат файла, то есть изображение в этом формате может содержать максимум 256 цветов. Однако он считается стандартным, так как у большинства пользователей сети 8-битные мониторы, на которых может отображаться максимум 256 цветов, а не тысячи и миллионы оттенков, которые делают изображение наиболее приятным для глаз.
-
При уменьшении глубины цвета уменьшается количество цветов, используемых в изображении, что, в свою очередь, приводит к уменьшению размера файла и ускорению его загрузки по сети. С уменьшением количества цветов границы областей изображения могут стать ступенчатыми, а цвета – более скучными, но при этом получается файл меньшего размера.
-
Формат JPEG может быть лучшим вариантом для точной передачи изображений с плавным переходом цветов (то есть для изображений фотографического типа (рис. 23.23) или содержащих оттенки одного цвета), а также в ситуации, если у пользователя, просматривающего изображение, есть 24-битный монитор, который может отображать миллионы цветов.
-
Размытие (dithering) – перемешивание двух цветов из палитры для имитации третьего. | Данный метод используется, когда необходимо, чтобы изображение с ограниченным количеством цветов (256 или менее) содержало большее количество оттенков.
-
Функция сглаживания смешивает границы объекта с фоном. Смешивание достигается путем добавления вдоль границы объекта точек с постепенно уменьшающимся уровнем непрозрачности. При компоновке изображений в программе Photoshop сглаживание помогает смягчить резкие переходы от одной фигуры к другой.
-
Панель инструментов в программе ImageReady аналогична панели инструментов в программе Photoshop, но в ней есть дополнительные Web-инструменты для создания карт изображения, их просмотра, просмотра ломтиков изображений (slice), предварительного просмотра ролловеров (rollover) и перехода в Web-браузер (рис. 23.29). Щелкнув по кнопке Jump to (Перейти к), вы сможете перейти в программу Photoshop.
-
Оптимизация – процесс выбора такого формата файла, его размера и цветовых параметров, которые позволяют в максимально возможной степени сохранить качество изображения, но при этом обеспечить высокую скорость загрузки его по сети.
-
Для оптимизации изображений в формате GIF и PNG-8 выполните следующие действия. | Если вы работаете в программе Photoshop, то сохраните файл и щелкните в нижней части панели инструментов по кнопке Jump to (Перейти к) или же нажмите комбинацию клавиш CTRL + SHIFT + M.
-
Взвешенная оптимизация – возможность в программе ImageReady 7, с помощью которой можно установить верхнюю и нижнюю границы качества при сжатии изображений в формате GIF, PNG и JPEG.
-
Откройте вкладку 4-Up (4 варианта) в основном окне, чтобы иметь возможность одновременно видеть исходное изображение и еще три версии оптимизированного изображения на панели предварительного просмотра.
-
Запустите одновременно Photoshop и ImageReady, тогда вы сможете быстро редактировать один и тот же файл в любой программе. Для того чтобы переходить из одной программы в другую и обратно, воспользуйтесь командой Jump to (Перейти к), соответствующей кнопкой на панели инструментов или комбинацией клавиш CTRL + SHIFT + M. | Программы Photoshop и ImageReady работают синхронно.
-
Почему бы не предоставить возможность программе ImageReady решать все за вас? Все, что от вас требуется – это определить размер оптимизированного изображения. | Быстрая оптимизация выполняется следующим образом.
-
Дроплет – это небольшое по размеру, но мощное приложение, сохраняющее настройки оптимизации, которые действовали в момент его создания, и применяющее их к изображению по указанию пользователя. | На палитре Optimize (Оптимизация) щелкните по значку Droplet (Дроплет) – см. рис.
-
Формат JPEG – один из возможных форматов для проведения оптимизации изображений с плавными переходами цвета с дальнейшим отображением их в сети (фотографий, рисунков, градиентов или их сочетаний).
-
Скажем, у вас есть изображение, которое необходимо оптимизировать в формате GIF с использованием палитры Perceptual (Учитывающая восприятие), Selective (Селективная) или Adaptive (Адаптивная), но в изображении есть однотонные области, цвет которых не входит в палитру Web.
-
Предварительный просмотр результатов возможного размытия оптимизированного изображения в браузере. | С помощью различных методов предварительного просмотра в программе ImageReady можно получить довольно точное представление о том, как будет выглядеть оптимизированное изображение в режиме реального времени. Это поможет выбрать соответствующие настройки оптимизации.
-
Перейдя в режим предварительного просмотра оптимизированного изображения в ImageReady, воспользуйтесь командами Image › Adjustments › Gamma (Изображение › Корректировки › Гамма). | Щелкните по кнопке Windows to Macintosh (Из Windows в Macintosh), чтобы изменить установленное значение гаммы на гамму Mac OS (рис. 23.60). Изображение будет выглядеть темнее (рис. 23.61). | Можно поступить и иначе.
-
Для более точной имитации вида изображения в сети щелкните по кнопке Preview in Browser (Предварительный просмотр в браузере) в программе ImageReady. Можно выбрать любой браузер среди тех, которые установлены в вашей системе.
-
Выполните приведенную ниже последовательность действий, чтобы сохранить оптимизированный файл вместе с настройками, выбранными в палитре Optimize (Оптимизация). | Выполните команду File › Save Optimized (Файл › Сохранить с оптимизацией) или нажмите комбинацию клавиш CTRL + ALT + S.
-
Если вы отредактировали оптимизированный файл и хотите обновить соответствующий HTML-файл, то воспользуйтесь командой File › Update HTML (Файл › Обновить HTML файл), выделите HTML-файл, щелкните по кнопке Open (Открыть), затем, когда обновление будет завершено, по кнопке ОК.
-
В программе ImageReady можно создавать и редактировать текст так же, как и в Photoshop. Как и в программе Photoshop, текст в ImageReady вводится непосредственно в изображение, и его стиль допускается изменять с помощью панели опций, палитры Character (Шрифт) или Paragraph (Абзац).
-
Воспользуйтесь следующими советами при создании текста в сети: | для редактируемого и преобразованного в растровый формат текста сохраняются все атрибуты текстового слоя и опции сглаживания при переходе из программы Photoshop в ImageReady и обратно;
-
Операция разрезания изображения на ломтики (slice) состоит в том, что картинка делится на отдельные зоны, что позволяет ускорить загрузку изображения большого размера. Совокупность небольших ломтиков загружается быстрее, чем одно большое изображение.
-
Выполните команду меню Slices › Promote to User-slice (Ломтики › Преобразовать в пользовательский ломтик), а затем воспользуйтесь командой Divide Slice (Разделить ломтик). Установите флажок Preview (Предварительный просмотр).
-
С помощью инструмента Slice (Ломтик) можно вручную контролировать расположение ломтиков. Можно изменять размер пользовательских ломтиков, перемещать их и заново производить разбиение; но эти операции неприменимы к автоматически создаваемым ломтикам.
-
Создание ломтика на основе слоя | Границы ломтиков слоя автоматически обновляются при трансформации, перемещении слоя и добавлении эффектов слоя. Такие ломтики особенно удобны при создании ролловера с различными эффектами (например, с отбрасыванием тени), увеличивающими площадь слоя.
-
К ломтику можно прикрепить ссылку (URL) на какую-либо Web-страничку. Если щелкнуть по этому ломтику, то пользователь автоматически будет попадать на Web-страничку, которая имеет соответствующий URL-адрес.
-
Изменение порядка следования ломтиков | Перекрывающие друг друга ломтики отображаются и нумеруются в порядке создания. В любой момент можно изменить порядок следования пользовательских ломтиков и ломтиков, созданных на основе слоя.
-
Карта изображения (image map) содержит "кнопки" произвольной формы, каждая из которых имеет собственную URL-ссылку (рис. 23.89). Воспользуйтесь этим способом, если области, с которыми необходимо связать URL-адреса, имеют непрямоугольную форму или вы предпочитаете работать с одним файлом изображения вместо нескольких файлов для каждого ломтика.
-
Выберите один из инструментов: Rectangle Image Map (Прямоугольная карта изображения), Circle Image Map (Круглая карта изображения) или Polygon Image Map (Полигональная карта изображения), нажимая клавишу Р или комбинацию клавиш SHIFT + P.
-
Переход от карты изображения на основе слоя к карте, созданной при помощи инструмента | Активизируйте инструмент Image Map Select (Выделение карты изображения) клавиши Р (комбинации клавиш SHIFT + P) и щелкните по карте, созданной на основе слоя, которую следует преобразовать.
-
Если вы работаете с гибридным изображением, которое содержит элементы с четко определенными границами (например, текст или штриховой рисунок) и элементы с плавным переходом цвета, то постарайтесь создать отдельный ломтик для каждой зоны.
-
Копирование настроек оптимизации от одного ломтика к другому | Предлагаемый способ копирования настроек оптимизации является довольно быстрым и эффективным. | Активизируйте инструмент Slice Select (Выделение ломтика), нажав клавишу К или комбинацию клавиш SHIFT + K.
-
Для того чтобы отсоединить один ломтик от совокупности связанных ломтиков, щелкните по нему мышью, предварительно активизировав инструмент Slice Select (Выделение ломтика), которому соответствует клавиша К (сочетание клавиш SHIFT + K), и выполните команду Slices › Unlink Slice (Ломтики › Отсоединить ломтик).
-
Теперь, когда вам уже известно кое-что о ломтиках, пришло время узнать и еще об одном виде "горячей" точки – ролло-вере. Ролловер представляет собой некое событие, которое происходит при щелчке мышью или перемещении курсора над какой-либо областью Web-страницы, содержащей встроенные варианты собственных модификаций. | Рис. 23.104. Добавление эффекта Drop Shadow к изображению лампочки | Рис.
-
Откройте изображение, содержащее ломтики, и отобразите палитру Slice (Ломтик). | Активизируйте инструмент Slice Select (Выделение ломтиков) с помощью клавиши К (сочетания клавиш SHIFT + K) и щелкните по ломтику, для которого следует создать ролловер.
-
Эффекты слоя имеют одно важное преимущество: при их использовании вам не придется копировать слой, чтобы достичь видимой разницы между различными состояниями ролловера, так как разные эффекты слоя могут быть применены (или выключены) по отношению к одному и тому же слою изображения.
-
Предварительный просмотр ролловера в ImageReady | Теперь можно предварительно просмотреть ролловер в программе ImageReady. | Щелкните по кнопке Rollover Preview (Предварительный просмотр ролловера) на панели инструментов или нажмите клавишу Y.
-
При использовании вторичных ролловеров (secondary rollover), когда пользователь помещает курсор над ключевым словом, изображением или пиктограммой, появляется дополнительный текст или дополнительное изображение.
-
На палитре Rollover (Ролловер) щелкните по миниатюре состояния Normal (Нормальный). | Выберите инструмент для построения фигуры: Rectangle (Прямоугольник), Rounded Rectangle (Прямоугольник с закругленными углами) или Ellipse (Эллипс).
-
При GIF-анимации набор кадров изображения воспроизводится в порядке, определенном пользователем. Для Web-страницы можно создать различные анимационные эффекты: сделать так, чтобы текст или графика перемещались, постепенно исчезали или появлялись, либо изменялись другим способом.
-
Создадим анимационный эффект для какого-либо изображения. | Откройте или создайте изображение, содержащее фоновый слой и прозрачный слой с рисунком какого-либо предмета (рис. 23.128). Как это сделать, рассказано в разделе "Маскирование фигур с помощью команды Extract" главы 5 и разделах, посвященных различным методам стирания изображения, в конце главы 12. | Рис. 23.128.
-
Если вы хотите, чтобы картинка исчезала или появлялась с одновременным перемещением по Web-странице или без него, необходимо отрегулировать непрозрачность изображения вместе с корректировкой его расположения или без этого.
-
Из всплывающего меню, расположенного в нижнем левом углу палитры Animation (Анимация), выберите режим воспроизведения, указывающий, как будет воспроизводиться анимация: Once (Однократно) или Forever (Непрерывно в цикле) – см. рис. 23.137.
-
Далее рассмотрено, как сделать так, чтобы элемент слоя покачивался из стороны в сторону. Этот тип анимации затрагивает точки слоя и копируется во все существующие кадры. Необходимо создавать дубликат слоя для каждого этапа движения.
-
Если после создания анимации вы отредактируете пикселы слоя (например, раскрасите, откорректируете цвет и яркость или каким-либо образом преобразуете слой), то внесенные изменения автоматически будут применены ко всем кадрам анимации, в которых виден данный слой.
-
Этот раздел адресован тем читателям, кто уже создал анимационный эффект и теперь решил добавить еще один эффект для другого слоя. | Выберите или создайте слой, к которому следует применить анимационный эффект.
-
Если созданная анимация слишком велика для воспроизведения в браузере либо слишком долго загружается на Web-страничку, то можно выполнить следующие действия: уменьшить размер файла с помощью команды Image Size (Размер изображения) в меню Image (Изображение) или обрезать изображение.
-
Если при анимации изображение движется от одного края основного окна к другому, то на палитре Animation (Анимация) щелкните по кадру где-то в середине анимационной последовательности (рис. 23.148 и 23.149). Если изображение остается в центре основного окна, то щелкните по любому кадру.
-
Можно создать вторичный ролловер, который будет инициировать анимационный эффект, и тем самым сделает Web-страничку более живой и интересной. Для этого вам потребуются все ваши навыки по созданию ролловеров и анимации.
-
Новая функция искажения текста, которая позволяет применить 14 различных эффектов искажения, упрощает создание анимации текста. | Откройте или создайте изображение, содержащее фоновый слой и прозрачный слой с редактируемым текстом. | В палитре Layers (Слои) выберите текстовый слой (рис. 23.157).
-
Если выполнить команду File › Save (Файл › Сохранить), то файл анимации будет сохранен в формате Photoshop; текущие настройки формата GIF на палитре Optimize (Оптимизация) будут также сохранены вместе с файлом.
-
Программа ImageReady предлагает тот же набор эффектов слоя, что и Photoshop (см. раздел "Эффекты слоя" главы 14). Но программа Photoshop регулирует свойства слоя с помощью диалогового окна Layer Style (Стиль слоя), a ImageReady – с помощью контекстной палитры опций слоя.
-
Существуют и другие методы работы со слоями в программе ImageReady: | есть простой способ запомнить, какие команды редактирования изображения автоматически применяются к кадрам анимации, а какие нет: изменения, вносимые с помощью палитры Layers, (Слои) не затрагивают реальных точек и, таким образом, автоматически не влияют на анимационные кадры или состояния ролловера.
-
Выберите слой, затем щелкните по стилю на палитре Styles (Стили) – см. рис. 23.171. Или перетащите имя стиля или его образец на любой выделенный или не выделенный слой на палитре Layers (Слои), как показано на рис. 23.172. Или перетащите имя стиля или образец на фигуру в окне изображения. | Рис.
-
Для заполнения фона Web-страниц довольно часто используется повторяющийся рисунок, представляющий собой небольшие изображения, расположенные в шахматном порядке и похожие на черепицу. Почему же не использовать для этого большую картинку, заполняющую всю страницу целиком?
-
Откройте файл в программе ImageReady. | Удалите все ломтики. | Выполните команды File › Output Settings › Background (Файл › Настрой ки вывода › Фон). | Поставьте переключатель View As (Просмотреть как) в положение Background (Фон) – см. рис. 23.178. | Щелкните по кнопке ОК.
-
Откройте изображение. | Воспользуйтесь командами File › Output Settings › Background (Файл › Настройки вывода › Фон). | Поставьте переключатель View As (Просмотреть как) в положение Image (Изображение), если она доступна (рис. 23.179).