Imageready где найти в фотошопе

Обновлено: 04.07.2024

Фирма Adobe включила в Photoshop с версии 5.5 программу ImageReady, которая позволяет создавать анимационные изображения с помощью этого графического пакета. Данный урок рассчитан на тех, кто имеет практические навыки работы со слоями и инструментами выделения в программе PhotoShop.

Цели урока

Обучающая: в рамках данного урока учащемуся необходимо освоить приемы создания анимации из заранее подготовленных файлов с фазами движения, создание промежуточных кадров анимации, сохранение GIF-файла для Web-страницы.

Развивающая: умение оперировать новой терминологией, умение сравнивать и обобщать.

Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.

Тип урока: урок изучения нового материала.

Вид урока: практическая работа.

Методы: объяснительно-иллюстративный, репродуктивный.

Используемые материалы:

класс, оборудованный ПК;

PhotoShop не ниже версии 5.5;

Ход урока

Проще всего в программе ImageReady, реализуется анимация из заранее подготовленных файлов с фазами движения.

Запустите Photoshop и создайте новый файл размером 100 x 100 пикселей. Залейте фон зеленым цветом. Вставьте в этот файл, на отдельный слой изображение бабочки (рис.1).

Включите границы отображения документа (рис.2), отобразятся линейки, выбрав инструмент перемещения, перетащите направляющую, как показано на рисунке (рис.3).

Рис. 2

Продублируйте слой 1 (рис.4).

Сожмем изображение бабочки по горизонтали. Edit (Редактирование) > Free Transform (Произвольная трансформация). Изменим размер изображения по ширине, заменив величину W=100% на 80% (рис.5)

Отключить (рис.6) (показывает видимость слоя) в слое 1, для того чтобы увидеть, что получилось в слое 2 (рис.7).

Повторите шаги для 3-х предыдущих действий, выполнив произвольную трансформацию по ширине на 60%, 40% и 20% используя направляющую, как ось симметрии. Получим 6 слоев (рис.8).

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.9).

Откроется приложение ImageReady и файл загрузится автоматически.

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать панель анимации) (рис.10).

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.11).

Теперь у нас есть шесть кадров (рис.12).

Теперь можно нажать кнопку play (рис.13) и проиграть анимацию (рис.14) . Выполняя команду File (Файл) – Save (Сохранить), сохраняем файл в формате Photoshop для продолжения работы со слоями изображения. Если работа завершена и не требуется

сохранения слоев, то по команде File (Файл) - Save Optimized (Сохранить оптимизированное как…) сохраняем GIF-файл для Web-страницы, при этом используются параметры оптимизации по умолчанию. Оценить результат оптимизации можно с помощью вида 2-Up, который показывает исходное и оптимизированное изображения.

Возможность автоматического создания промежуточных кадров анимации (tweening) является очень полезной и может быть применена как к графическим, так и текстовым изображениям.

Запустите Photoshop и создайте новый файл размером 300 X 150 пикселей. Залейте фон черным цветом. В нижней части панели слоев кликните на иконке New Layer (Новый слой) (рис.15).

Выберите цвет для текста и возьмите инструмент Type Tool (Набор текста) (рис.16).

Наберите первую букву. Теперь повторите этот шаг так, чтобы каждая буква слова оказалась на отдельном слое (рис.17).

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.18).

Откроется приложение ImageReady и файл загрузится автоматически. Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать Animation).

В нижней части этой панели, кликните на кнопке New Frame (Новый кадр), чтобы сделать копию текущего кадра (рис.19).

Получим два одинаковых кадра на панели анимации (рис.20).

На панели слоев кликните на слое, с буквой Ш (рис.21).

Выберите инструмент Перемещения и используя стрелки на клавиатуре переместите букву так, чтобы она была левее (или правее, выше, ниже) видимого изображения

(рис.22) , (рис.23).

Повторите шаги для остальных букв. В палитре анимации, (первый кадр должен быть просто черным) поменяйте кадры местами, для этого надо перенести первый кадр на второй кадр. 2- й кадр теперь черный (рис.24).

Кликните на кнопке Tween (рис.25) (генерация промежуточных кадров), которая расположена в нижней части панели анимации. Откроется окно параметров. Введите следующие значения:

Tween With: Proveons Frame Frames to: 5

Layers: All Layers Parametrs: все галочки

Панель анимации теперь должна содержать 7 кадров (6 с текстом +1 черный) (рис.26).

Установите небольшую паузу (2 секунды) для первого кадра, чтобы текст можно было прочитать (рис.27).

Теперь можно нажать кнопку play и проиграть анимацию (рис.28).

Морфинг - это процесс, при котором один объект плавно меняется (претекает) в другой.

Загрузите ImageReady. С помощью меню File (файл) > New (новый) создайте новый файл с нужными размерами и вставьте в этот файл, на отдельный слой изображение лягушки (рис.29).

На другой слой вставьте изображение замка, которое будет постепенно появляться (рис.30).

Рис. 30 Сейчас панель слоев выглядит так (рис.31).

Удалите первый слой в корзину, панель слоев выглядит так (рис.32).

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (окно) > Show Animation (показать панель анимации) (рис.33).

Теперь у нас есть два кадра (рис.35).

На панели анимации есть треугольная кнопка справа вверху. Кликните на этой кнопке и выберите в меню пункт Tween. или кликните на кнопке (генерация промежуточных кадров). Откроется окно параметров (рис.36).

Нажмите OK, и программа сама добавит новые кадры (рис.37).

Теперь можно нажать кнопку play и проиграть анимацию (рис.38).

Литература

Панкратова Т. Photoshop 6. Учебный курс — СПб.: Издательство "Питер", 2001.

Эффективная работа с Photoshop 5.5 — СПб.: Издательство "Питер", 2000.

Бурлаков М. Photoshop 6, ImageReady 3. Справочник. — СПб. Издательство "Питер", 2001.

Стразницкас М. Photoshop 5.5 для подготовки Web-графики. Учебный курс — СПб.: Издательство "Питер", 2000. — 480 с.: илл.

ImageReady - компонента известного графического редактора фирмы Adobe - Photoshop. Возможности этой компоненты следующие:

Главное окно программы ImageReady очень похоже на окно Photoshop, но имеет ряд особенностей. Это и несколько специальных инструментов на панели инструментов и дополнительные палитры:

Разрезание готового макета

Предположим, вы создали макет вашего сайта в программе Photoshop и сохранили его в формате .psd. Для того, чтобы перенести его в HTML, вам понадобится разрезать ваш макет на отдельные фрагменты. Сделать это аккуратно и поможет ImageReady.

Откройте ваш подготовленный макет в программе ImageReady:

В данном случае требуется разрезать макет по направляющим на 7 фрагментов. Для этого на панели инструментов возьмем инструмент ножик (Slice Tool):

Теперь подведем курсор мыши в верхний левый угол нашего макета, нажмем на левую клавишу мыши (курсор примет вид ножика) и, не отпуская, растянем рамочку до нижнего правого угла первого фрагмента:

Теперь таким же образом выделим и остальные фрагменты:

Теперь нужно настроить параметры оптимизации, для этого выберем вкладку 2-Up. Это позволит нам одновременно видеть оригинал и оптимизированное изображение.

Внизу каждого окна мы можем видеть размер файла и время его загрузки. Параметры оптимизации рассмотрим чуть ниже, а пока выберем оптимизированный вариант (щелкнем по окошечку) и сохраним его с помощью команды меню Save Optimized As.

В открывшемся окне, кроме места куда сохранить, нужно указать также:

имя файла - имя для фрагментов. Например, если задать имя img, то фрагменты будут называться img_01.jpg, img_02.jpg и т.д.
тип файла - если выбрать Images Only (*.jpg), то сохранятся только фрагменты. Если выбрать HTML and Images (*.html), то кроме картинок будет создан html-файл c автоматически сгенерированной таблицей для фрагментов (т.е. уже готовая страница).

Жмем сохранить. Готово. ImageReady создал папку images с набором заданных фрагментов.

По сути, оптимизация - это компромисс между размером файла и качеством изображения. При этом происходит сокращение размера файла без уменьшения самого изображения.

Параметры оптимизации можно настроить в палитре Optimize (Оптимизация).После выбора формата файла вид панели меняется и становятся доступны параметры оптимизации под конкретный формат.

Параметры сохранения GIF:

Color table - таблица цветов:
- Reduction - способ выбора цветов из изображения в палитру (perceptual - цвета, к которым наиболее восприимчив человеческий глаз, selective - предпочтение отдается цветам, которые чаще всего встречаются в оригинале, adaptive - только те цвета, которые превалируют в оригинале).
- Colors - количество цветов, которое будет выбрано.
- Method - указывает как будут замещаться цвета изображения, не попавшие в таблицу цветов (diffusion - диффузия, наиболее приближен к оригиналу; pattern - узор, отсутствующие цвета заменяются "узором" пикселов, имеющихся в таблице цветов; noise - шум, узор пикселов менее заметен).
- Amount - степень сглаживания. Чем сильнее сглаживание, тем больший диапазон цветов может передать изображение (оптимально - 75%).
- Установите флажок, если нужно сохранить прозрачность.
- Matte - позволяет выбрать цвет фона, если он был прозрачным.
- Quality - качество. Доступны качественные значения (low - низкое, medium - среднее, hight - высокое) и количественные.
- Transparency - прозрачность.
- Options- режимы.
1. Открываете любое изображение в ImageReady.

2. Выбираете подходящий режим просмотра (например, 2-Up или 4-Up), чтобы сразу видеть результат ваших действий.

3. Настраиваете параметры оптимизации.

4. Когда размер файла и качество вас устраивают, сохраняете его с помощью команды меню Save Optimized As.

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

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.

Ху из, mr. ImageReady?
Карасев Алексей

Статья ориентирована на пользователей 7 версии Фотошопа для Win9x, W2000, XP
Введение.
Сегодня многие серьёзные графические программы, в силу объёмов и многофункциональности, переходят к "пакетному" режиму существования. Это значит, что некоторые важные и сложные функции, ранее выполнявшиеся дополнительными программами, зачастую разрабатывавшимися сторонними разработчиками, начинают входить в стандартный комплект (пакет) основной программы. Пользователь может при установке программы выбрать необходимые компоненты в зависимости от своих индивидуальных потребностей. Adobe тоже не осталась в стороне от прогресса и снабдила своё детище небольшим, но очень полезным придатком - ImageReady. Эта "программа в программе" входит в стандартный пакет Фотошопа уже несколько версий программы, но, к сожалению, часть пользователей просто не знает об этом, а часть пребывает в абсолютном неведении относительно её возможностей и предназначения, счастливо заблуждаясь, считая, что использует Фотошоп максимально полно и эффективно. Вынужден огорчить, но без ImageReady вы теряете массу уникальных инструментов и перспектив, реализовать которые силами одного только Фотошопа просто нереально. С тех пор как программа перестала существовать автономно и стала частью Фотошопа, она несколько "поправилась" в плане своих функциональных возможностей, что естественно не могло не отразится на объёме этой статьи и, следовательно, на моём желании приступать к её написанию. Но, тем не менее, наступив на горло своей беззаботной песне, попрощавшись с девочками с известных вам сайтов и выполнив ряд других важнейших дел, я таки взялся за неё, ибо умолчать о такой необходимой в хозяйстве штуке было бы преступлением против человечества и. И вообще выше моих сил. Но, коль уж так сложилось, что описание всех многочисленных плюсов этого ценнейшего инструмента, практически выходит за границы человеческих возможностей, а данная статья не претендует на звание "Полного мануала", то большую часть "познания непознанного" я, как человек ленивый, взвалю на ваши хрупкие плечи. И, как говорит один мой знакомый джедай: ДА ПРЕБУДЕТ С ВАМИ СИЛА!
Предназначение.
У-упс, я сделал это эгейн. Дабы не отпугнуть робкого читателя, я несколько приврал. На самом деле ImageReady не единый инструмент, а скорее совокупность многих инструментов, объединённых под шапкой приложения, с целью облегчения работы по решению некоторых специфических задач. Задачи эти, в массе своей, связаны с созданием особых типов Web-графики. Например, особых "хитрых" фонов, gif-анимации или создания с помощью JavaScript управляющих элементов, реагирующих на указание мышью. "Фи" - скажете вы - "Я не делаю для Веба" и будете безусловно не правы. Помимо указанного, программа, в качестве составляющей, умеет при крайне незначительном изменении качества, существенно уменьшать объём изначального изображения. И это его основной, но далеко не единственный, плюс для того, кто не занят непосредственно Web-графикой. Проблема нехватки жизненного пространства: его всегда не хватает. Возможно вам попадались огромные изображения с хорошим качеством и до смешного маленьким объёмом? Это заслуга ImageReady и повод освоить его хотя бы на начальном уровне, благо "горячие" клавиши и интерфейсы обеих программ почти что идентичны.
Интерфейс ImageReady
Интерфейсы Фотошопа и ImageReady схожи как братья-близнецы и можно легко подумать, что вы находитесь в одном и том же приложении. Согласитесь, стандарты сильно облегчают жизнь. Если вы уже освоились в Фотошопе - это новое приложение не доставит особых трудностей. Конечно при ближайшем рассмотрении выявится наличие пары-тройки новых палитр (Animation, Rollovers - а кому сейчас легко), но общего ощущения это не испортит и мы можем легко перейти к следующему шагу.
Запуск ImageReady
Осуществляться сия процедура может несколькими путями.
1. Запуск непосредственно из рабочего каталога программы, исполняемого файла ImageReady.exe, если запуск самого Фотошопа не требуется.
2. Запуск из Фотошопа через меню File / Jump To / Adobe ImageReady.
3. Запуск из Фотошопа с помощью кнопки, расположенной в самом низу основной инструментальной панели.

Кнопка Перейти к (Jump To), расположенная в самом низу основной инструментальной панели.
4. Самый быстрый - при запущенном Фотошопе нажать Shift+Ctrl+M.
Остаётся добавить, что все эти пункты действуют и в обратном направлении, т.е. из ImageReady к Фотошопу.
Особенности взаимодействия ImageReady и Фотошопа
К таковым следует отнести обновление, открытого в любом из приложений, изображения в реальном времени. Например, создали документ - перескочили к ImageReady (при "перепрыгивании" из приложения в приложение, по умолчанию открывается активный, на момент запуска, в другом приложении документ) - внесли в изображение изменения - перешли обратно к Фотошопу - изображение обновилось и тут тоже. В старых версиях требовалось ещё ваше согласие на обновление. Запомните эту особенность.
Некоторые уникальные возможности ImageReady
Учитывая ярковыраженную сетевую направленность приложения, нет ничего удивительного в том, что часть команд и параметров по умолчанию, изначально призваны облегчать работу по созданию именно Web-ресурсов. Это проявляется уже на стадии создания нового документа. Размеры документа в соответствующем окне уже содержат несколько общепринятых размеров для изготовления баннеров, этого жуткого порождения тёмной стороны глобальной паутины. Та же тенденция прослеживается и в других функциях программы, например, команда Фильтр / Другие / Создать плитку (Filter / Other / Tile Maker) позволит создать размытие по краям изображения, которое вы хотите использовать для плиточного фона Web-страницы, и без применения которой при заливке фона будут видны стыковые швы. Аналогов данной команде в Фотошопе нет, хотя альтернативных решений хватает, а её ценность, с точки зрения скорости загрузки страницы с подобным дизайном, весьма сомнительна.
Практическую ценность следующей уникальной функции пусть каждый определяет для себя сам, но то, что функция интересная и в определённых случаях позволяет сохранить массу времени и сил - спорить не приходится. Заключается она в автоматизированной разбивке изображения на части и создании кода HTML для последующей его сборки на странице. К плюсам этой методики можно отнести ускорение загрузки страницы и возможность сохранения разных фрагментов изображения в разных форматах, что очень экономит место при неоднородности изображения. В чём-то похожа на фотошоповский Crop (Кадрирование). Выполняется это так: Откройте первоначальное изображение в ImageReady. Включите линейку (Ctrl+R) и поместите с помощью команды Вид / Создать направляющие (View / Create Guides) направляющие по линиям будущего разреза. В отличие от Фотошопа, в ImageReady не предполагается создание очень уж сложных разметок и новые направляющие можно создать все сразу. Напомню, что редактирование направляющих осуществляется с помощью инструмента "Перемещение" (Move) или (V), курсор которого в этом режиме, при наведении на направляющую, приобретает специфический вид двунаправленной стрелки. Теперь с помощью команды Разбить / Разбить по направляющим (Slices / Create Slices From Guides) выполним означенную команду и сохраним полученное через Сохранить оптимизированное как (Save Optimized As) или (Shift+Ctrl+Alt+S), выбрав при этом режим Сохранить как HTML файл (Save HTML File). Таким несложным и быстрым способом мы получили непосредственно HTML-файл с нужным кодом и папочку "images" с исходящими, оптимизированными по цвету и объёму, фрагментами изображения. Исходный HTML-код можно просмотреть и изменить в стандартном броузере ОС семейства Windows - Internet Explorer, командой Вид / Просмотр HTML-кода. Нужна ли вам данная технология - решать вам, а мавр сделал своё грязное дело и проследовал к следующей остановке.
То, что вы видите ниже, не является ошибкой отображения страницы. Это пример того, что вы можете увидеть в своём броузере при нажатии на кнопку со значком IE, внизу основной инструментальной панели ImageReady, или (Ctrl+Alt+P), при открытом в приложении документе, которое, для данного примера, вы видите выше рамки.

Читайте также: