Adobe image ready
Adobe ImageReady называется растровый графический редактор, который входил в комплект Adobe Photoshop в течение почти десяти лет (с 1998 по 2007). Он работал в операционных системах Windows и OS X. Включить данную программу можно было только прямо во время работы в Adobe Photoshop, переключив режимы через меню «файл», а текущий документ сразу же открывался в новом окне. Главным отличием этого продукта являлось удобство работы с динамической веб-графикой, для которой он и был разработан. Простота создания GIF-изображений, добавления гиперссылок и спецэффектов, автоматической и полуавтоматической нарезки файлов, их сохранения в кодировке HTML – вот что привлекало покупателей. До этого такое многообразие функций для веб-дизайна не было реализовано в единственном редакторе с интуитивно понятным интерфейсом.
Также существовали другие особенности. С одной стороны, раскадровка анимационного движения позволяла тщательно прорабатывать каждый кадр, с другой же стороны, была возможность задать программе автоматически создавать графику в указанных интервалах времени. Осуществлялась функция добавление водяного знака на видео.
Требовалось только один раз ввести текст, после чего он добавлялся на каждый кадр. Просматривать результат можно было как прямо в редакторе, так и в окне браузера. Но вместе с тем возможности обработки изображений были существенно ограничены, поэтому потребителям приходилось дорабатывать отдельные элементы и создавать эффекты, переключаясь в основной режим Adobe Photoshop.
Последний раз программа поставлялась с Adobe Photoshop CS2. Уже в следующей версии (CS3) её интегрировали в основной пакет, объединив все функции. Также найти её можно было в другом продукте компании –Adobe Fireworks CS3.Первое время многие веб-дизайнеры были недовольны работой в расширенном Photoshop, так как часто анимация открывалась и сохранялась некорректно.
Сейчас же это происходит напрямую, что уменьшило количество ошибок. Постепенно увеличивается функциональность и скорость работы с динамической графикой, удобная временная шкала и возможность полноценного редактирования изображений прямо в этой программе привлекают новых пользователей. На сегодняшний день продукт Adobe ImageReady полностью заменен панелями «Анимация» или «Шкала времени» в графическом редакторе Adobe Photoshop.
Источник: fotoredactor.ru
ImageReady
Компания Adobe Systems известна, прежде всего, как разработчик целого созвездия профессиональных графических пакетов, предназначенных, в первую очередь, для полиграфии. В то же время, сориентировавшись в конъюнктуре рынка и правильно оценив все возрастающую роль Internet, компания решила расширить сферу влияния за счет редактора web-страниц PageMill, который, по замыслу руководства, должен был перетянуть на себя часть рыночного пирога подобных приложений.
Однако состязаться на равных с такими «грандами», как FrontPage от Microsoft и Homesite от Allaire он не смог. Поэтому в руководстве Adobe решили сконцентрироваться на своем «родном» направлении графических пакетов, и создать специализированный редактор графики под Web. Его успех был предопределен заранее, поскольку база в виде Photoshop уже существовала и от разработчиков потребовалось внести в нее лишь незначительные дополнения. В результате получился очередной хит — ImageReady, вторая версия которого из маркетинговых соображений была интегрирована в Photoshop 5.5. Таким образом, новая версия популярного пакета содержит все необходимое для создания графики, независимо от ее предназначения — будь то web или печатный станок.
Основная задача ImageReady — придание Web-страницам интерактивности при помощи разнообразных графических элементов, таких как карты изображений, анимационные последовательности и динамические кнопки.
Использование карт изображений (image map, в которых части одного изображения играют роль ссылок на различные ресурсы Internet) помогает придать разнородным ссылкам на сайте целостность восприятия. Анимация добавляет статичной картинке «живость». Такой же эффект дает использование вместо чисто текстовой ссылки красиво оформленных кнопок, видоизменяющихся при прохождении курсора над ними. Что касается пользы от применения ссылок в виде изображений, несущих смысловую нагрузку — то она очевидна. Ведь, кроме чисто эстетического удовольствия, они помогают посетителям лучше ориентироваться по сайту, особенно если он обширный.
Сходства с Photoshop.
От своего «родителя» ImageReady, кроме удобного и элегантного интерфейса, унаследовал все основные операции для работы с изображением, он поддерживает даже маски прозрачности — в общем, впечатление такое, что это — самый настоящий Photoshop. Даже формат хранения web-информации в изображении использован все тот же — универсальный PSD (в него вписываются новые тэги). Поэтому после внесения изменений в файле, отредактированном в Photoshop, ImageReady сразу же «почувствует» это и предложит его обновить, так что никаких дополнительных проблем параллельная работа в обоих редакторах не создает. Для облегчения переходов между программами предназначена специальная команда Jump to.
Единственное, чего ImageReady не поддерживает — векторные пути и корректировочные слои (adjustment layers), но при оформлении web-страниц без них спокойно можно обойтись, тем более что в пакете существует функция изменения цвета, действие которой аналогично некоторым корректировочным слоям.
. и различия
Кроме инструментов, предназначенных для реализации интерактивности на web-страницах, ImageReady, как полноценный редактор web-графики, имеет свои специфические возможности и, в этом плане, даже предпочтительнее самого «мэтра». С моей точки зрения, было бы неплохо, если бы некоторые из них появились в Photoshop, поскольку аналогичные задачи иногда приходится выполнять и для полиграфии.
 |
| Рис.1 |
К таким возможностям относятся динамические эффекты по наложению повторяющегося рисунка (pattern) или же цветовой растяжки (gradient), действие которых распространяется на всю площадь слоя. Особенно интересны возможности последнего эффекта, поскольку ничего подобного в Photoshop нет. Так, в ImageReady через
 |
| Рис.1 |
палитру Gradient в любой момент можно скорректировать параметры уже примененной растяжки (изменять существующие цвета, добавлять новые, менять плавность перехода от одного цвета к другому, поворачивать), а не экспериментировать по нескольку раз, как это происходит в Photoshop сейчас. Возможности по созданию повторяющегося рисунка ограничиваются лишь указанием изображения, которое будет клонироваться, чего во многих случаях явно недостаточно (рис. 1)
Еще одна палитра, которой нет в Photoshop — Type, служит для точного управления всеми параметрами текста (даже кернингом!), позволяя манипулировать им с такой же легкостью, как и в программах для верстки, так что форматирование больших текстовых блоков не представляет никакой сложности — достаточно выделить определенную его часть и задать ей новые параметры.
Но еще более интересна панель Styles. Ее основное предназначение — автоматизировать оформление однотипных элементов, и в этом она похожа на возможности Actions. Поскольку при оформлении web-страничек часто используются объемные кнопки, именно поэтому в новой панели собрана обширная коллекция заготовок, а также предусмотрено создание собственных заготовок.
В принципе, эту панель можно сравнить с панелью стилей текстового редактора, например, Word. Вместо параметров форматирования текста, в ImageReady стиль содержит информацию о степени применения и параметрах эффектов, существующих в программе, и проявляет себя в соответствующей палитре как обычный эффект («развернув» его, можно увидеть все настройки). Однако, в отличие от Actions, возможности стилей ограничены использованием только динамических эффектов (drop/inner shadow, inner/outer bevel, bevel and emboss, color fill, gradient/pattern), хотя, с появлением новых типов, они становятся практически неограниченными. Для того чтобы оформить выделенный объект определенным образом, следует просто перетащить иконку нужного стиля на объект. Таким образом, использование стилей позволяет значительно сократить время, затрачиваемое на оформление странички.
Что касается фильтров, то к существовавшим в Photoshop добавились еще два — DitherBox и Tile maker (меню Filter/Other). Первый позволяет управлять подмешиванием цветов при имитации сложных цветов dither при экспорте изображения в формате gif, второй — создавать фоновые заливки на основе небольших повторяющихся изображений (либо обычным способом, либо с эффектом калейдоскопа).
А теперь перейдем к возможностям ImageReady по приданию интерактивности элементам web-дизайна.
Карты изображений
Одна из основных задач ImageReady — создание карт изображений. Для этого изображение делят на отдельные фрагменты (в терминологии Photoshop — slices), которые и будут выполнять роль ссылок. При этом активной областью (которая реагирует на положение мышки) может выступать как вся площадь slice, так и некоторая его часть (hotlight).
 |
| Рис.2 |
Один из вариантов создания slices — открыть созданный в Photoshop файл со слоями и после этого преобразовать все слои во фрагменты (Create Slice From Selection, помните, что любой слой преобразуется в выделенную область по команде Select/Load selection/Layer transparency). Если же изображение слоев не имеет, его можно очень точно разметить направляющими и выполнить аналогичную операцию (Create Slices From Guides).
Еще один вариант — вручную определить фрагменты с помощью Slice tool (попросту «ножа»). В любом случае все изображение разделится на фрагменты. Информация и свойства каждого фрагмента отображаются в одноименной палитре, предоставляя полный контроль за ними, а частичная информация отображается прямо на экране, что облегчает оперативное управление (рис. 2).
Однако с русскими буквами программа не дружит — наверняка это связано с кодировкой символов по умолчанию, программа-то англоязычная. При изменении размеров некоторых фрагментов программа автоматически пересчитывает их для всех остальных. При необходимости, фрагменты можно дробить на более мелкие части, или же наоборот, укрупнять — при этом нужно помнить, что все изображение будет состоять из файлов, равных по количеству фрагментам.
Что касается hotlight, то они предназначены для очень точного задания границ активных зон, поскольку могут иметь любую форму (slices — только прямоугольную). Для использования hotlight достаточно выделить нужную часть изображения, перейти в палитру слоев, выбрать Create New Layer (создать новый слой) и включить Use layer as Image Map. ImageReady поддерживает несколько стандартов для описания границ активных областей: CERN и NCSA, допускает генерирование кода Java-script для его обработки как на клиентской, так и на серверной стороне, а также для совместимости с GoLive.
Динамические кнопки
Без сомнения, «живые» web-страницы имеют явное преимущество перед статичными. Именно поэтому для их создания ImageReady предлагает на выбор несколько способов. Один из них — сформировать изображение, которое бы меняло свой вид при задержке курсора поверх него (чаще всего этот прием используется при создании динамических кнопок).
Для этого сначала создают на отдельных слоях столько изображений кнопки, сколько планируют использовать ее состояний. Лучше всего пользоваться для этого настроечными слоями и эффектами — в большинстве случаев для разных состояний меняются только цвет кнопки и/или размер фаски (состояние нормальное/вдавленное). В первом случае можно наложить эффект Color Fill (он перекрашивает весь слой в другой цвет), а во втором — Inner/Outer bevel.
 |
| Рис.3 |
И хотя для создания динамических кнопок знание java-script не понадобится, тем не менее, без понимания основных состояний, используемых для смены изображений, не обойтись. Over соответствует расположению мышки поверх кнопки, Down — во время нажатия, Click — после нажатия, Up — при отпускании кнопки, Out — при выходе за пределы активной зоны. (рис. 3). При выделении любого фрагмента изображения его образ автоматически заносится в состояние Normal (мышка вне кнопки) на панели Rollover. Для получения других состояний сначала создают новое, указывают его тип и затем, путем включения/выключения видимости слоев получают новое изображение фрагмента.
Естественно, ролловеры можно использовать в комбинации с картами изображений, причем программа позволяет осуществить и достаточно сложные эффекты: например, мышка может проходить над одной частью картинки, а изображение будет меняться в другой или же нескольких частях сразу.
Анимация
 |
| Рис.4 |
Расширяет возможности программы создание анимационных роликов. Для их формирования служит палитра Animation, в которую заносятся отдельные «снимки» всего изображения в виде последовательности кадров (рис. 4). Программа может сама создать промежуточные изображения на основе начального и конечного кадров (режим Tween) и позволяет сократить объем файла анимации, исключая из него информацию о статичных областях изображения (Optimize Animation). Тут же, не покидая палитры, получившуюся последовательность можно просмотреть и по ходу внести в нее требуемые изменения (длительность отображения каждого кадра, цикличность).
ImageReady поддерживает различные форматы сжатия графических данных: GIF, JPEG, PNG8 и PNG-24. Для тех, кто не хочет вдаваться в премудрости настроек (а их тут великое множество), предусмотрена опция Optimize to file size (уложиться в заданный размер), и программа автоматически подберет необходимые параметры компрессии. Для большей гибкости каждому фрагменту изображения отдельно можно задавать свой тип компрессии, указывать разные параметры, что позволяет добиться оптимального соотношения качество/размер для всего изображения целиком.
Для размещения в Internet программа создает HTML-файл (Save Optimized), а все картинки собирает в отдельном каталоге. При обновлении этого файла (Update HTML) ImageReady вносит изменения только в свою часть и не затрагивает остального содержимого, внесенного другим редактором (например, FrontPage).
Таким образом, ImageReady будет незаменим для тех, кто знаком с Photoshop и хочет украсить сайт за счет использования карт изображений, анимации и динамических кнопок. Работать с программой приятно, а мощные функции управления превратят вашу работу в легкое занятие.
ImageReady
Рейтинг: *****
Требования: РС: Pentium, 64 Мбайт оперативной памяти, 125 Мбайт дискового пространства; Macintosh: PowerPC, 64 Мбайт оперативной памяти, 125 Мбайт дискового пространства
Заключение: Еще один потенциальный хит от известного производителя. Имеет все необходимое для создания интерактивных web-страничек при помощи карт изображений, динамических кнопок и анимации.
Производитель: Adobe Systems
Источник: www.publish.ru
Создание анимации с помощью Adobe ImageReady
Создание анимации в программе базируется на использовании слоев. Каждый элемент анимации помещается на собственный слой. Это позволяет изменять положение и вид элемента в серии кадров, используя команды и параметры палитры Слои. Совместно с данной палитрой используется палитра Анимация. С ее помощью можно назначать каждому кадру время задержки, создавать новые кадры, автоматически генерировать промежуточные состояния и т.д.
«Оживим» баннер, сохраненный в файле Banner.psd.
Запустите программу ImageReady. Отобразите панель Анимация (Окно>Анимация). Откройте файл Banner.psd.
Самый простой вид анимации — это сменяющаяся последовательность кадров. Создадим эффект анимации баннера таким образом, чтобы надписи Ищите канцтовары недорого? и Заходите СЮДА! последовательно сменяли друг друга через определенные промежутки времени и чтобы рисунок открытой двери появлялся после надписи Заходите СЮДА!
Прежде всего необходимо определить изображение для первого кадра анимации. Это можно сделать, включив отображение нужных слоев и выключив отображение ненужных. Для первого кадра нужно выключить отображение слоя Заходите СЮДА! и слоя Дверь. Остальные слои оставьте включенными.
Теперь, когда создан первый кадр анимации, создадим второй кадр.
Нажмите кнопку Создать дубликат текущего кадра в нижней части панели Анимация. В ней появится и будет выделен темной рамкой второй кадр. Темное выделение указывает на то, что теперь этот кадр активный, и к нему будут относиться все операции редактирования.
Изображение на втором кадре полностью совпадает с первым, так как был создан дубликат кадра. И теперь это изображение надо изменить. Для текущего кадра выключим видимость слоя Ищите канцтовары недорого? и включим изображение слоя с надписью Заходите СЮДА!
Добавим еще один кадр анимации. В палитре Анимация появится и станет активным третий кадр, для которого включим дополнительно отображение двери.
Действуя описанным способом можно создавать для анимации любое количество кадров и для каждого из них с помощью палитры Слои определять графическое содержимое.
Время задержки для каждого кадра анимации по умолчанию равно 0 секунд. Это время отображается в палитре Анимация под миниатюрой каждого кадра. Если воспроизводить анимацию с такой задержкой, кадры будут сменять друг друга слишком быстро. Это время можно легко изменить. Предварительно кадры анимации нужно выделить, удерживая клавишу Ctrl.
Щелкните мышью в палитре Анимация на миниатюрном значке треугольнике справа от надписи 0с под миниатюрой первого кадра. На экране появится меню времени задержки.
Выберите 1.0 (1 секунда). Это значение отобразится в палитре Анимация под миниатюрами всех трех кадров.
Просмотрим полученный результат.
Нажмите кнопку (Воспроизводит/останавливает анимацию) в нижней части палитры. Начнется проигрывание эффекта. Изображение кнопки изменится на. В окне документа вы увидите, как периодически сменяются надписи Ищите канцтовары недорого? и Заходите СЮДА!
Причем после появления последней надписи появляется также рисунок открытой двери.
Adobe ImageReady позволяет автоматически сгенерировать последовательность кадров между двумя указанными и отличающимися друг от друга кадрами, которые в совокупности создадут плавный переход от первого кадра к последнему.
Изменим анимацию таким образом, чтобы надпись Заходите СЮДА! конкретизируя приглашение, двигалась в направлении постепенно появляющейся открытой двери и «заходила» в нее. Измените время задержки второго и третьего кадра на 0.2 секунды. Теперь для третьего кадра анимации следует изменить положение надписи так, чтобы ее правый край «заходил» в открытую дверь.
Сделайте активным третий кадр. Используя инструмент Перемещение расположите надпись как показано на рисунке.
Выделите второй и третий кадр, чтобы сгенерировать между ними последовательность кадров, которые создадут эффект анимации. Нажмите кнопку Создать промежуточные кадры в нижней части палитры Анимация. На экране появится диалог Создание промежуточных кадров. Заполните его как показано на рисунке.
Переключатели Слои позволяют указать, должны ли присутствовать в добавленных кадрах все видимые слои или только активный слой.
Группа элементов управления Атрибуты слоя позволяет определить, какие атрибуты слоев будут изменяться в добавляемых кадрах — Положение, Непрозрачность, Эффекты.
Закройте диалог. В палитре Анимация между вторым и третьим кадром будет добавлено еще 10 кадров, и таким образом, создан плавный переход изображения.
Проиграйте анимацию. Вы увидите, что после исчезновения надписи Ищите канцтовары недорого? возникает надпись Заходите СЮДА! которая движется в направлении постепенно появляющейся открытой двери и «заходит» в нее. Анимация готова.
Теперь ее нужно оптимизировать и сохранить в формате Gif.
Оптимизация нужна для обеспечения наименьшего размера файла при минимальных потерях качества.
Нажмите кнопку в правом верхнем углу палитры Анимация и в появившемся меню выберите команду Оптимизировать анимацию. На экране появится одноименный диалог.
При установленном флажке Ограничительная рамка Adobe ImageReady в каждом кадре удаляет те фрагменты изображения, которые присутствовали в предыдущем кадре, и сохраняет только измененные, по сравнению с предыдущим кадром, области.
При установленном флажке Удаление лишних пикселов удаляются все пикселы каждого кадра, которые не изменены по сравнению с предыдущим кадром. При установке обоих флажков подбираются наилучшие параметры оптимизации анимации. Закройте диалог.
Теперь нужно оптимизировать изображение. Настройте палитру Оптимизация как показано на рисунке.
Просмотрите созданную анимацию в браузере с помощью кнопки на панели инструментов. Должно получиться что-то в этом роде:
Чтобы в дальнейшем иметь возможность редактировать созданную анимацию, документ следует сохранить в формате psd с помощью команды Файл>Сохранить. Сохраненный таким образом файл можно будет открыть для редактирования изображения в программе Adobe PhotoShop, но в этой программе невозможно будет проигрывать анимацию и редактировать ее кадры. Такую возможность предоставляет только программа ImageReady.
Последний шаг — сохранение оптимизированного изображения для Web в формате Gif с помощью команды Файл>Сохранить оптимизированный. Сохраните полученную анимацию в своей папке на Server.
Источник: vuzlit.com
ImageReady и Photoshop
Photoshop был программой выбора для большинства художников, которые хотят создавать высококачественные изображения для печатных СМИ или для веб-сайтов. Это мощный инструмент, который может сделать что-нибудь на картинке в руках опытного художника. ImageReady можно считать младшим братом фотошопа. Легкий инструмент, который обрабатывает меньший массив наиболее используемых функций редактирования, чтобы подготовить фотографию для веб-публикации.
Photoshop широко используется для редактирования или «ретуширования» фотографий. Photoshop имеет широкий спектр эффектов и фильтров, которые при применении к картинке могут привести к результату, который лучше исходного. Также нередко можно использовать фотошоп в сращивании изображений вместе. Вы можете сделать снимок, стоящий рядом с башней Эйфеля, никогда не ступая во Францию.
Photoshop можно даже использовать, чтобы изменить внешний вид человека на фотографии, делая их выглядеть лучше или хуже, чем они выглядят на самом деле. Это вызвало некоторые серьезные инциденты, когда журналы чрезмерно отредактировали изображения на их обложке, что вызывает возмущение у широкой публики или даже у человека, фигурирующего в обложке.
ImageReady не был продан как отдельная программа, и он поставляется со всем пакетом Adobe. Его можно рассматривать как расширение возможностей Photoshop, а не как отдельную сущность. Наиболее частое использование ImageReady заключалось в работе с анимацией GIF, что Photoshop не обрабатывал сам по себе.
ImageReady также был инструментом выбора при создании срезов в изображениях для использования на веб-страницах. Ломтики позволяют производителю веб-страниц создавать по-разному поведение в каждом фрагменте; даже если каждый фрагмент связан с другой веб-страницей. Из-за этого ImageReady часто использовал тот, кто уже пользуется фотошопом. Adobe даже добавила ярлык в Photoshop, чтобы работать с изображением на ImageReady для удобства.
Photoshop — очень мощный инструмент для редактирования фотографий, который может преобразовывать фотографию во все, что желает художник. ImageReady — это еще один инструмент в арсенале Photoshop, который еще больше расширяет его возможности. С Adobe Creative Suite 3 некоторые функции ImageReady были поглощены фотошопом, а другие задачи были назначены Fireworks. Из-за этого ImageReady был прекращен в обозримом будущем. Некоторым разработчикам, которые предпочитают использовать ImageReady, рекомендуется использовать CS2.
Источник: ru.esdifferent.com