Adobe imageready совместная работа с фотошоп
Фирма 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).
На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.34).
Теперь у нас есть два кадра (рис.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 с.: илл.
Оптимизация - процесс выбора такого формата файла, его размера и цветовых параметров, которые позволяют в максимально возможной степени сохранить качество изображения, но при этом обеспечить высокую скорость загрузки его по сети. В принципе, можно оптимизировать изображение и в программе Photoshop с помощью диалогового окна, вызываемого командой File > Save for Web (Файл > Сохранить для Web), однако лучше перейти в программу ImageReady и воспользоваться там специальными палитрами оптимизации, содержащими более широкий набор опций.
Если вы освоите программу ImageReady, вам не составит труда пользоваться диалоговым окном Save for Web программы Photoshop, так как их опции практически идентичны. Диалоговое окно Save for Web рассматривается в конце главы.
Рис. 23.30. Панель опций инструмента Rectangle shape
Рис. 23.31. Панель опций инструмента Туре
Рис. 23.32. Свернутая панель опций инструмента Туре
Программа ImageReady предлагает множество различных опций оптимизации. В этом разделе вы познакомитесь с основными операциями. Никогда не забывайте, что ваша основная цель - уменьшить размер файла, не допуская заметного ухудшения качества изображения.
GIF и JPEG - два формата, обычно используемых для графики в сети. Рекомендуем применять формат GIF в случае, когда изображение содержит элементы с четкими границами, например однотонные области, штриховой рисунок и текст. Формат PNG-8, похожий на GIF, использует те же параметры палитры Optimize (Оптимизация), что и GIF, и результаты оптимизации практически идентичны. Оптимизированный файл в формате GIF или PNG-8 может содержать до 256 цветов.
Вы можете воспользоваться командой Save а Сору (Сохранить копию) программы Photoshop, чтобы сохранить копии файла в формате GIF или JPEG, но мы считаем, что программа ImageReady предлагает лучшие способы сохранения файла в этих форматах за счет более широкого набора средств оптимизации и предварительного просмотра. Поэтому основное внимание уделено оптимизации файлов формата GIF и JPEG именно в программе ImageReady.
Четыре цветовые палитры формата GIF
То, что Web-дизайнеры обычно называют «цветовые палитры», в программе ImageReady получило название «алгоритмы сокращения, количества цветов (color reduction algorithms)»
Существует четыре алгоритма сокращения количества цветов в формате GIF:
- Perceptual (Учитывающий восприятие) - создает таблицу на основе текущих цветов изображения. При этом особое внимание уделяется тому, как человек воспринимает цвета. Преимущество данной таблицы заключается в сохранений целостности цвета;
- Selective (Селективный) - создает таблицу цветов на основе текущих цветов изображения. Опции Perceptual и Selective похожи, но последняя в большей степени нацелена на сохранение цветов однотонных элементов изображения, а также Web-цветов;
- Adaptive (Адаптивный) - создает таблицу на основе части цветового спектра, где представлено большинство оттенков изображения. Эта опция формирует оптимизированный файл немного большего размера;
При переключении опций Perceptual, Selective, Adaptive сохраняются все Web-цвета, входящие в таблицу цветов изображения.
Web - создает таблицу цветов, подгоняя цвета изображения к тем, которые имеются в стандартной палитре Web. Данная опция формирует наименьшее количество цветов и, соответственно, наименьший по размеру файл, но качество изображения может быть хуже, чем при выборе других опций.
Ху из, 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), при открытом в приложении документе, которое, для данного примера, вы видите выше рамки.
Хотите улучшить свои проекты Photoshop? Узнайте, как перенести в XD монтажные области и ресурсы Photoshop, чтобы создать качественные прототипы.
Adobe XD дает возможность связать ваши проекты Photoshop и монтажные области, чтобы превратить их в интерактивные приложения или прототипы. Если вы хотите реализовать весь потенциал файлов .psd или просто выполняете копирование, интеграция XD и Photoshop позволит легко сделать это.
-2.jpg.img.jpg)
Хотя некоторые функции Photoshop имеют аналоги в XD, есть некоторые функции, для которых нет однозначного соответствия. Для начала рассмотрим некоторые функции Photoshop и XD, которые не имеют прямого соответствия.
- Некоторые элементы Photoshop нельзя растрировать и перенести в проект XD. Информацию о поддерживаемых элементах Photoshop см. в разделе Элементы Photoshop, поддерживаемые в XD.
- Вы не можете экспортировать файлы XD в Photoshop как файлы .psd. Тем не менее с помощью меню «Файл» > «Открыть в XD» вы можете открыть изображения Photoshop, которые являются частью вашего проекта XD, чтобы использовать богатые возможности редактирования фотографий в Photoshop.
- Если вы открыли файл .psd в XD, вы не сможете сохранить этот материал обратно в виде файла .psd.
.jpg){kind=icon}
Чтобы работа с XD и Photoshop была максимально эффективной, мы вносим улучшения в технологические процессы взаимодействия. Если у вас уже есть какие-либо предложения или отзывы, делитесь ими на UserVoice.
Когда ваш проект будет готов в Photoshop, вот несколько способов перенести их в XD.
Импортируйте и открывайте проекты Photoshop
Подробнее
Копируйте и вставляйте ресурсы из Photoshop
Подробнее
Используйте ресурсы из библиотек Creative Cloud Libraries
Подробнее
После импорта проектов Photoshop в XD попробуем создать прототип.
Когда вы работаете с Photoshop, вы можете создавать монтажные области XD, открывая монтажные области Photoshop прямо в XD. Монтажные области в Photoshop легко импортировать в формат монтажных областей XD.
Вы также можете переключаться между двумя приложениями, чтобы настраивать визуальные элементы на ходу.
Хотите улучшить свой проект XD? Воспользуйтесь эксклюзивными функциями XD, такими как повторяющиеся сетки, состояния, автоанимация, создание прототипов с помощью голоса и др.
Вы хотите предоставить общий доступ к своему прототипу?
Одним из основных преимуществ использования Adobe XD для проектирования и создания интерактивных прототипов является возможность делиться проектами и прототипами и получать обратную связь от заинтересованных сторон.
Ваши общие проекты оптимизируются без ущерба для качества, при этом отзывы заинтересованных сторон доступны в режиме реального времени, а разработчики могут скачивать общедоступные ресурсы и спецификации проекта для работы над кодом.
Используйте режим общего доступа в XD, чтобы поделиться своими проектами и интерактивными прототипами с заинтересованными сторонами, которые смогут легко предлагать идеи и вносить изменения в проекты. Версии вашего документа автоматически сохраняются через заданные промежутки времени, что позволяет вам восстановить изменения из предыдущей версии.
Хотите знать, изменится ли разрешение ваших прототипов после того, как вы поделитесь ими в XD? Нет.
Откройте файл Photoshop в XD и в режиме Прототип выберите следующие параметры в инспекторе прототипа.
- Триггер: выберите Нажатие.
- Действие: выберите Переход.
- Место назначения: выберите целевую монтажную область, если она еще не выбрана.
- Анимация: выберите Сместить влево.
- Смягчение: выберите этот параметр, чтобы создать эффект смягчения. Например, выберите Замедление в конце, чтобы анимация в прототипе постепенно замедлялась.
- Длительность: задайте значение 0,2 секунды.
Скачайте образцы файлов и попробуйте выполнить это самостоятельно либо просмотрите это видео, чтобы получить больше информации.
Время просмотра: 1 минута.
Как я могу преобразовать свои ресурсы Photoshop в компоненты и использовать их согласованно в проектах, соблюдая соглашения об именовании?
Вы можете использовать свои ресурсы Photoshop, чтобы создать повторно используемые компоненты, которые помогут вам создавать и использовать повторяющиеся элементы в разных контекстах и макетах. Вы можете создать главный компонент, чтобы определить повторно используемый элемент, например кнопку, и изменить любые свойства этого элемента для настройки его экземпляров. Изменения, которые вы вносите в отдельный экземпляр, относятся к этому элементу, но изменения, которые вы вносите в главный компонент, распространяются на все остальные экземпляры.
Как создать образец цвета с помощью файла изображения?
В XD нельзя создавать цветовые образцы или импортировать их из Photoshop. Можно использовать такое обходное решение: перетащить эти цвета из панели цветовых образцов в Photoshop на панель библиотек, открыть CC Libraries в XD, использовать их для объекта и добавить цвет в панель ресурсов.
Мы поговорили о том, с чего начать работу над ресурсами проекта из Photoshop. Теперь рассмотрим, как создавать интерактивные прототипы и открывать к ним доступ дизайнерам и заинтересованным сторонам, чтобы получать от них отзывы.
Читайте также: