Как сделать анимацию в иллюстраторе

Web-графика в Adobe Illustrator

Web-страницы немыслимы без разнообразных графических Web-элементов, и хотя основное назначение программы Adobe Illustrator создание и редактирование векторных изображений, пригодится она и Web-дизайнерам.

В списке возможностей программы, ориентированных на Web-графику, решение вопросов по оптимизации изображений, создание кнопок и разнообразных графических заголовков, разработка интерактивных SVG-элементов, подготовка многослойных изображений для rollover-элементов и gif-анимации.

Оптимизация Web-графики

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

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

Параметры оптимизации задаются в окне Save for Web (Сохранение для Web), вызываемом одноименной командой из меню File (Файл). Программа предлагает использовать один из четырех режимов предварительного просмотра, но для оценки качества оптимизации наилучшим образом подходят два:

2-Up (два варианта) одновременный просмотр оригинала и оптимизированного изображения в соответствии с указанными настройками (рис. 1);
4-Up (четыре варианта) в этом режиме область просмотра делится на четыре окна (рис. 2) для отображения исходного изображения и трех версий оптимизированного: первая версия создается на основе установленных значений оптимизации, а две другие являются вариантами текущих настроек оптимизации.

Рис. 1. Окно просмотра изображения в режиме 2-Uр

Рис. 2. Окно просмотра изображения в режиме 4-Uр

Оба режима позволяют существенно экономить время на поиске лучшего варианта оптимизации, так как избавляют от необходимости сохранения изображений с разными настройками оптимизации и их последующего визуального сравнения. Кроме того, есть возможность оценить не только качество оптимизированного изображения, но и его размер и время загрузки при разных вариантах соединения. Для сравнения наиболее удобен режим 4-Up (четыре варианта), позволяющий визуально оценить влияние сжатия или уменьшения палитры на качество изображения и его размер и в конечном счете определить лучшие параметры оптимизации.

Illustrator позволяет оптимизировать Web-графику в форматах не только GIF, JPG, PNG-8 и PNG-24, но и в SWF и SVG. Индексированные изображения, имеющие небольшое количество цветов, сохраняют в формате GIF. Для сохранения полноцветных и полутоновых изображений фотографий и цветонасыщенной графики, например градиентных заливок, используется формат JPG. Для полноцветных изображений с прозрачными участками применяется формат PNG, который позволяет сохранять как индексированные, так и полноцветные изображения, при этом в формате PNG-8 максимально возможное количество цветов оптимизированного изображения равно 256, а в формате PNG-24 у изображения могут быть миллионы цветов, и потому он похож на формат JPEG. Отличие PNG-24 от JPEG заключается в том, что используемый для оптимизации изображений в формате PNG-24 метод сжатия не приводит к потере качества, но вследствие этого увеличивается размер файла. Форматы SVG и SWF объединяют графические данные, текст и интерактивные компоненты и также могут быть оптимизированы.

Рассмотрим конкретный пример оптимизации изображения. Допустим, в программе Illustrator была разработана эмблема сайта (рис. 3), изначально сохраненная в формате AI. Попытка сразу оптимизировать ее для Web ни к чему хорошему не приведет, так как в этом случае произойдет автоматическое обрезание изображения, при котором не будет учитываться истинное положение полученной в результате деформации надписи (рис. 4 и 5).

Рис. 3. Эмблема сайта

Рис. 4. Выделение объектов эмблемы, по контуру вокруг которых произойдет обрезание

Рис. 5. Окно просмотра изображения в режиме 4-Uр видно, что большая часть надписи обрезана

Поэтому попробуем экспортировать эмблему в формат PSD командой File=>Export (Файл=>Экспорт) размер созданного изображения будет составлять 143 Кбайт. Откройте полученный PSD-файл и воспользуйтесь командой File=>Save for Web (Файл=>Сохранение для Web). С учетом ограниченного числа задействованных в изображении цветов в данном случае оптимален формат GIF, с конкретными настройками которого и нужно определиться. Поэкспериментировав с настройками, можно убедиться, что лучшее качество дает выбранный программой по умолчанию алгоритм сжатия Selective (Селективный). Что же касается сглаживания, то, учитывая наличие градиентной заливки, лучше выбрать алгоритм с генерацией шума Noise (рис. 6). Размер полученного в итоге оптимизации файла составит 6,729 Кбайт (рис. 7), при этом прозрачность фона будет сохранена, в чем несложно убедиться, сохранив изображение в формате GIF вместе с HTML-файлом (рис. 8). В итоге в данном примере были получены файлы emblem.html и emblem.gif в папке Primer1.

Рис. 6. Сравнение разных вариантов оптимизации

Рис. 7. Оптимизированный файл

Рис. 8. Окно браузера с оптимизированным изображением

Кнопки

Незаменимым специфическим элементом дизайна любых Web-страниц являются графические элементы управления кнопки. Представить себе страничку без них просто невозможно. Рисование кнопок сегодня стало особым жанром, а Illustrator позволяет создавать самые замысловатые варианты. К примеру, кнопки, оформленные как сеточные объекты и (или) с наложением масок, смотрятся гораздо эффектнее обычных.

Рассмотрим вариант создания круглой выпуклой кнопки в программе Illustrator. Нарисуйте закрашенный произвольным цветом векторный объект в виде круга (рис. 9) и преобразуйте его в сеточный командой Object=>Create Gradient Mesh (Объект=>Создать градиентную сетку), указав четыре строки и четыре столбца, а в списке Appearance (Вид) выбрав вариант To Center (К центру) и установив значение Highlight (Подсветка) равным 60 (рис. 10). Выберите инструмент Direct Selection и щелкните в левом верхнем углу объекта, выделив находящиеся там узловые точки (рис. 11). Измените цвет соответствующей ячейки на белый, выбрав его в палитре Swatches (рис. 12).

Рис. 9. Исходный объект

Рис. 10. Сеточный объект с подсветкой в центре и окно Create Gradient Mesh

Рис. 11. Выделение ячейки сетки

Рис. 12. Результат изменения цвета выделенной ячейки

Возьмите инструмент Ellipse (Эллипс), установите маркер мыши в центр созданной перед этим окружности и, удерживая нажатыми клавиши Alt и Shift, растяните новую окружность поверх старой так, чтобы она оказалась больше старой на 1-2 пиксела со всех сторон. Сделайте у нее черную границу (Stroke) шириной в 1-2 пиксела и залейте радиальным градиентом в направлении от красного к белому (рис. 13). Перетащите созданный векторный объект на 1-2 пиксела вправо и вниз, затем, не снимая выделения, кликните на нем правой кнопкой мыши и из контекстного меню выберите команду Arrange=>Send To Back (Упорядочить=>Отправить назад). В итоге получится заготовка для кнопки, представленная на рис. 14.

Рис. 13. Внешний вид векторного объекта, играющего роль подложки для кнопки

Рис. 14. Заготовка для кнопки

Как правило, на любой Web-странице имеется несколько однотипных кнопок, различающихся, например, лишь направлением нарисованных на них стрелок, означающих направление перемещения по сайту. Рассмотрим самый простой случай наличия двух кнопок, одна из которых, со стрелкой вниз, будет означать перемещение на следующую страницу, а кнопка со стрелкой вверх на предыдущую. В качестве заготовки стрелки возьмем обычный треугольник, нарисованный инструментом Polygon (Многоугольник), закрашенный черным цветом и для большего эффекта также оформленный как сеточный объект. Переместим стрелку на кнопку и отрегулируем положение всех объектов друг относительно друга, воспользовавшись соответствующими кнопками палитры Align (Выравнивание). Первая из полученных кнопок представлена на рис. 15. Сделаем копию слоя с кнопкой, выбрав команду Duplicate Layer (Дублировать слой) из меню палитры Layers, в результате получим два идентичных слоя. Затем на копии слоя выделим стрелку и повернем ее на 180°, выбрав из контекстного меню команду Transform=>Rotate Трансформация=>Поворот. Получим такую же кнопку, как показана на рис. 16. Обратите внимание, что гораздо удобнее все однотипные кнопки одного проекта хранить в одном файле на разных слоях, что в данном случае и продемонстрировано.

Рис. 15. Первая кнопка (вид кнопки и палитра Layers)

Рис. 16. Вторая кнопка (вид кнопки и палитра Layers)

Теперь необходимо сохранить оптимизированные варианты каждой из кнопок. Вначале сделайте невидимым нижний слой в этом случае будет сохранена кнопка на верхнем слое. Выберите команду File=>Save for Web (Файл=>Сохранить для Web), настройте параметры оптимизации кнопки, например, как показано на рис. 17, щелкните на кнопке Save (Сохранить) и введите имя файла. Сохраненная в итоге кнопка представлена на рис. 18. Теперь верните видимость нижнему слою, а верхний сделайте невидимым и аналогичным образом сохраните вторую кнопку, указав для нее другое имя. Результат представлен на рис. 19.

Рис. 17. Настройка параметров оптимизации для первой кнопки

Рис. 18. Первая оптимизированная кнопка

Рис. 19. Вторая оптимизированная кнопка

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

Рис. 20. Кнопки на Web-странице

При желании в процессе оптимизации кнопку несложно превратить в слайс. В этом случае после выбора команды File=>Save for Web (Файл=>Сохранить для Web) и настройки параметров оптимизации следует выбрать из палитры инструментов инструмент Slice Select (Выделение слайса) и дважды щелкнуть по изображению, которое в итоге автоматически превратится в слайс с порядковым номером 1 (рис. 21). Повторный двойной щелчок мышью приведет к открытию окна Slice Options (Опции слайса), в котором необходимо будет указать ссылку и при желании изменить имя слайса (рис. 22), а затем сохранить оптимизированное изображение. Результатом в данном случае будут файлы Primer3.html (рис. 23) и Primer3.gif (папка Primer3).

Рис. 21. Превращение кнопки в слайс

Рис. 22. Определение свойств слайса

Рис. 23. Появление ссылки при наведении маркера мыши на кнопку

Интерактивные элементы

Одним из способов оживления страницы является внедрение элементов дизайна, которые изменяют свой внешний вид (или состояние) в зависимости от поведения мыши или, реже, в случае возникновения каких-либо иных ситуаций: масштабирования, скроллинга, загрузки, возникновения ошибок и пр.

Среди таких элементов наибольшую известность получили rollovers (от англ. roll over перекатываться, переворачиваться) элементы, меняющие облик под воздействием мыши. Примерами типичных ролловеров являются анимированные кнопки. Ролловеры часто используются и при создании других навигационных элементов сайта. В действительности любой ролловер представляет собой не одно, а несколько (до четырех) изображений, каждое из которых соответствует конкретному событию. Основными событиями принято считать следующие: Normal обычное состояние, Over наведение курсора мыши на элемент и Down нажатие левой кнопки мыши при наведении на нее курсора. Теоретически могут быть задействованы такие события, как Click отпускание левой кнопки мыши после нажатия, Up после отпускания кнопки, Out при выходе за пределы активной зоны. Однако на практике чаще ограничиваются изменением элемента только на первые три или даже два события.

Классические ролловеры

В классическом понимании ролловер представляет собой серию графических изображений в формате GIF и соответствующий им HTML-код, благодаря которому в зависимости от поведения мыши одно изображение сменяет другое в окне браузера.

Программа Illustrator не предназначена для непосредственного создания ролловеров в классическом их понимании, однако она может помочь при разработке исходных для них элементов. Идея в этом случае заключается в том, что нужно создать слой с изображением, соответствующим первому событию. Затем сделать копию слоя и преобразовать изображение так, чтобы оно соответствовало второму событию, и т.д. Полученное в итоге многослойное изображение экспортируется в PSD-файл с сохранением слоев, на основе которого и создается ролловер в программе Image Ready. Плюсом применения программы Illustrator, как и во многих других случаях, является ряд ее интересных возможностей, недоступных в других программных средствах, в совокупности с удобством трансформации векторной графики.

Попробуем создать ролловер в виде надписи, меняющей цвет в зависимости от поведения мыши. Откройте Illustrator и создайте форму в виде скругленного и залитого черным цветом прямоугольника (рис. 24), сделайте его копию и расположите ее в свободной части экрана. Преобразуйте первую копию прямоугольника в сеточный объект с подсветкой в центре (команда Object=>Create Gradient Mesh Объект=>Создать градиентную сетку), указав четыре строки и десять столбцов (рис. 25). Активизируйте вторую копию прямоугольника и настройте для нее градиентную заливку примерно так, как показано на рис. 26. Наложите градиентный объект поверх сеточного, уменьшите непрозрачность градиентного объекта примерно до 80%, а размер примерно на 1 пиксел, чтобы в итоге сымитировать эффект выпуклости. А затем поверх объектов напечатайте надпись. В исходном виде пусть она имеет белый цвет, который будет соответствовать состоянию Normal (рис. 27), а затем при изменении состояния ролловера цвет надписи будет меняться, например, на зеленый при наведении на нее маркера мыши (состояние Over) и на голубой при нажатии кнопки мыши (состояние Down).

Рис. 24. Исходный прямоугольник

Рис. 25. Сеточный объект с подсветкой в центре и окно Create Gradient Mesh

Рис. 26. Градиентный объект с палитрами Gradient и Web

Рис. 27. Окончательный вид ролловера при состоянии Normal с палитрой Layers

Обратите внимание на палитру Layers на данном этапе в ней имеется всего один-единственный слой. Сделайте две копии данного слоя, применив команду Duplicate Layer (Дублировать слой) из меню палитры Layers, в палитре станет три слоя (рис. 28). Затем в первой копии слоя измените цвет надписи на зеленый, а во второй на голубой (рис. 29). В итоге будет получена необходимая заготовка для ролловера.

Рис. 28. Вид палитры Layers после дублирования слоев

Рис. 29. Результат изменения цвета надписей (вид изображения и палитра Layers)

Экспортируйте созданное изображение в формат PSD с сохранением слоев, воспользовавшись командой File=>Export (Файл=>Экспорт) и выбрав цветовую модель RGB (рис. 30). Откройте созданный PSD-файл в программе ImageReady (рис. 31 и 32). Создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation. Окно Animation примет вид как на рис. 33. При этом в палитре Rollovers изначально будет создано одно-единственное состояние Normal.

Рис. 30. Выбор цветовой модели в окне Photoshop Options

Рис. 31. Вид изображения и палитра Layers

Рис. 32. Исходное состояние окна Animation

Рис. 33. Вид окна Animation после создания кадров

Затем в окне Animation выделите кадр, соответствующий наведенному состоянию, при этом в палитре Layers автоматически выделится слой Layer 1 Copy (рис. 34). Перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние) рис. 35, что приведет к появлению состояния Over State в палитре Rollovers (рис. 36). Аналогичным образом создайте состояние Down State. Активизируйте состояние Normal в палитре Rollovers и удалите в палитре Animation все кадры, кроме того, который должен соответствовать состоянию Normal. В итоге для каждого состояния ролловера в палитре Animation будет существовать всего один кадр (рис. 37, 38 и 39).

Рис. 34. Окно Animation и палитра Layers для состояния Over State

Рис. 35. Выбор команды Create Rollover state

Рис. 36. Палитра Rollovers после создания состояния Over State

Рис. 37. Вид изображения, окна Animation и палитр Layers и Rollovers для состояния Normal

Рис. 38. Вид изображения, окна Animation и палитр Layers и Rollovers для состояния Over State

Рис. 39. Вид изображения, окна Animation и палитр Layers и Rollovers для состояния Down State

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 40). После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав вариант HTML and Images (*.html). В итоге в данном примере были получены файл Primer4.html и серия графических изображений в папке images.

Рис. 40. Окно браузера с Rollover-элементом

SVG-ролловеры

Набирающий популярность формат SVG (Scalable Vector Graphics масштабируемая векторная графика), созданный на основе стандарта XML, также позволяет получать разнообразные интерактивные элементы, в частности ролловеры, только на практике это реализуется совершенно иначе. Стоит заметить, что создание интерактивных SVG-ролловеров, в отличие от классических, когда соответствующий HTML-код генерируется полностью автоматически, требует знания языка JavaScript и понимания основных принципов объектно-ориентированного программирования.

Для работы с SVG-объектами предназначена специальная палитра SVG Interactivity, которую несложно открыть при помощи команды Window=>SVG Interactivity (Окно=>SVG интерактивность) рис. 41.

Рис. 41. Исходный вид палитры SVG Interactivity

Рассмотрим данный вариант создания ролловера на примере интерактивной кнопки, цвет надписи на которой будет меняться с черного на синий при наведении мыши и вновь преобразовываться в черный при выходе мыши за пределы активной зоны.

Создайте прямоугольную кнопку со скругленными краями и подберите для нее подходящую градиентную заливку, например как показано на рис. 42. Отрегулируйте прозрачность кнопки в палитре Transparence (Прозрачность) в данном примере значение параметра Opacity (Непрозрачность) установлено равным 50%. Сделайте копию кнопки, залейте ее темно-зеленым цветом (рис. 43), а затем преобразуйте ее в сеточный объект командой Object=>Create Gradient Mesh (Объект=>Создать градиентную сетку), указав четыре строки и десять столбцов, а в списке Appearance (Вид) выбрав вариант To Center (К центру) и установив значение Highlight (Подсветка) равным 100. Уменьшите непрозрачность слоя с сеточным объектом примерно да 40% (рис. 44). Разместите сеточный объект поверх градиентного, и кнопка станет напоминать представленную на рис. 45.

Рис. 42. Вид кнопки и соответствующая ей палитра Gradient

Рис. 43. Исходный вид копии кнопки

Рис. 44. Превращение копии кнопки в сеточный объект

Рис. 45. Результат наложения исходных составляющих кнопки

Дополните кнопку предполагаемой надписью и отрегулируйте ее положение, воспользовавшись соответствующими кнопками палитры Align (Выравнивание). Полученное в итоге изображение будет содержать один слой с тремя наложенными друг на друга объектами (рис. 46). Запланированные события будут относиться к текстовому объекту, поэтому для удобства измените его имя на Text, дважды щелкнув на объекте и введя новое имя. Аналогичным образом измените имя слоя с Layer 1 на Layer (рис. 47).

Рис. 46. Кнопка с надписью

Рис. 47. Палитра Layers после изменения имен

Обработка событий предполагает использование JavaScript-процедур, поэтому необходимо подключить файл с описанием данных процедур. Он называется Events.js и сохраняется на диске в папке Sample Files\Sample Art\SVG\SVG при установке программы Adobe Illustrator. Для подключения файла Events.js воспользуйтесь командой JavaScript Files (Файлы JavaScript) из палитры SVG Interactivity (рис. 48). Далее нужно нажать кнопку Add (Добавить) и найти нужный файл на жестком диске. Когда его имя появится в поле URL (рис. 49), щелкните на кнопке Done (Выйти).

Рис. 48. Выбор команды JavaScript Files

Рис. 49. Подключение файла Events.js

После этого следует определить реакцию на события мыши для объекта Text. Выделите объект Text, в поле Event (Событие) палитры SVG Interactivity выберите событие onmouseover и в строке ниже введите текст elemColor(evt, ‘Text’, ‘#3333FF’) это будет означать, что при нахождении мыши над объектом Text его цвет изменится на синий (рис. 50). Для того чтобы после выхода мыши за пределы активной зоны цвет текста сменился на черный, потребуется создать еще одно событие onmouseout выберите его в поле Event (Событие) палитры SVG Interactivity. Затем в строке действия введите текст elemColor(evt, ‘Text’, ‘#000000’) это приведет к возврату черного цвета (рис. 51).

Рис. 50. Определение действия для события onmouseover

Рис. 51. Окончательный вид палитры SVG Interactivity для объекта Text

Сохраните созданный ролловер как SVG-файл командой File=>Save as (Файл=>Сохранить как), указав имя файла, выбрав в поле Тип файла формат SVG, а затем настроив опции сохранения SVG-файла так, как показано на рис. 52. После сохранения будет получен всего один-единственный файл с расширением SVG, а не два, как в случае классического ролловера, в данном случае был получен файл Primer5.svg (папка Primer5). Однако для того, чтобы ролловер действительно работал, необходимо дополнительно в папку с SVG-файлом скопировать файл Events.js с описанием JavaScript-процедур. После этого можно проверить работоспособность ролловера результат будет выглядеть так, как показано на рис. 53.

Рис. 52. Настройка опций сохранения SVG-файла

Рис. 53. Окно браузера с Rollover-элементом без наведения мыши на текстовый объект и с наведением на него

SVG-анимация

Формат SVG может использоваться и для передачи анимации. Попробуем создать простейший анимационный элемент (в данном случае это будет информация о компании), который будет появляться на экране при наведении мыши на соответствующий графический объект и исчезать при снятии мыши с интерактивного элемента.

Создадим примерно такую серию графических и текстовых объектов, как показано на рис. 54. Переименуем удобным образом все созданные объекты, последовательно щелкая на имени очередного объекта в палитре Layers и вводя нужное имя (рис. 55). Обратите внимание, что выделенные на рис. 56 объекты Text1, Text2, Text3 и Path1 будут видимы всегда, а все остальные только при наведении мыши на объект Text1.

Рис. 54. Исходный вид изображения

Рис. 55. Палитра Layers после переименования объектов

Рис. 56. Всегда видимые объекты с палитрой Layers

Подключите файл Events.js с описанием JavaScript-процедур, применив команду JavaScript Files (Файлы JavaScript) из палитры SVG Interactivity, нажав кнопку Add (Добавить), указав нужный файл на жестком диске и щелкнув на кнопке Done (Выйти).

Определите реакцию на события мыши для объекта Text1. Выделите объект Text, в поле Event (Событие) палитры SVG Interactivity выберите событие onmouseover и в строке ниже введите текст elemShow(evt, ‘Text4’); elemShow(evt, ‘Path2’). В итоге при нахождении мыши над объектом Text1 будут становиться видимыми объекты Text4 и Path2. Обратите внимание, что если при возникновении события должно выполниться несколько действий, то они должны быть указаны через знак «;». Затем аналогичную операцию выполните в отношении события onmouseout, введя для него текст elemHide(evt, ‘Text4’); elemHide(evt, ‘Path2’), что будет означать скрытие объектов (рис. 57).

Рис. 57. Окончательный вид палитры SVG Interactivity для объекта Text1

Сохраните результат как SVG-файл командой File=>Save as (Файл=>Сохранить как), указав имя файла, выбрав в поле Тип файла формат SVG, а затем настроив опции сохранения SVG-файла в соответствии с рис. 58. После сохранения будет получен файл Primer6.svg (папка Primer6). Не забудьте скопировать в папку с данным файлом файл Events.js. Если после этого запустить созданный файл, то вы увидите результат, представленный на рис. 59. Это почти то, что нужно. Единственное, что не входило в наши планы, это первоначальное появление объектов Text4 и Path2 при загрузке. Чтобы избавиться от этого недочета, выделите сразу оба данных объекта и создайте для них действие elemHide(evt, ‘Text4’); elemHide(evt, ‘Path2’) при событии onload (рис. 60). Вновь сохраните файл и убедитесь в том, что теперь объекты Text4 и Path2 видны лишь при наведении мыши на объект Text1.

Рис. 58. Настройка опций сохранения SVG-файла

Рис. 59. Окно браузера с SVG-анимацей

Рис. 60. Создание действия на событие onload для объектов Text4 и Path2

GIF-анимация

Любая Web-страница немыслима без Web-анимации, в том числе и без анимационных gif’ов. Один из вариантов их создания применение приложения Adobe ImageReady, позволяющего в числе прочего создавать анимацию из слоев. При этом само многослойное изображение может быть подготовлено в разных приложениях, в том числе и в Adobe Illustrator.

Очень просто создать анимацию на основе элементов из палитры Symbols (Символы), открываемой командой Window=>Symbols (Окно=>Символы) или из одной из библиотек символов, которые можно открыть, применив команду Window=>Symbol Libraries (Окно=>Библиотеки символов).

Для примера попытаемся увеличить размеры любого объекта-символа, ключевые этапы процесса увеличения объекта нужно задать на отдельных слоях. Вначале просто разместите объекты-символы один над другим, а затем увеличьте размер каждого следующего объекта, например как показано на рис. 61. В итоге в палитре Layers будет создан один слой с множеством объектов (рис. 62). Если напрямую экспортировать данное изображение в формат PSD, то это ничего не даст, так как слой один, и естественно, при открытии PSD-файла в программе ImageReady также будет лишь один слой. Поэтому предварительно необходимо разместить объекты на разных слоях. Это можно осуществить разными способами проще всего вначале выделить слой Layer 1 в палитре Layers и воспользоваться командой Release to Layer (Освободить в слои). Результатом станет перемещение каждого из объектов на свой слой, но все они окажутся вложенными в слой Layer 1. Поэтому затем придется вручную перетащить все вложенные слои в верхнюю часть палитры Layers так, чтобы они оказались над слоем Layer 1, а затем ставший пустым слой Layer 1 просто удалить (рис. 63). Экспортируйте изображение в формат PSD, применив команду File=>Export (Файл=>Экспорт) с установками как на рис. 64.

Рис. 61. Размещение объектов-символов

Рис. 62. Исходное состояние палитры Layers

Рис. 63. Палитра Layers после преобразования объектов в слои

Рис. 64. Настройка параметров экспорта в PSD

Загрузите созданный PSD-файл в программе ImageReady (рис. 65 и 66). Откройте меню палитры Animation, щелкнув на черной стрелке в правом верхнем углу палитры, и выберите команду Make Frames From Layers (Создать кадры из слоев). В итоге будут созданы пять кадров, каждый из которых будет соответствовать своему слою, а окно палитры Animation примет вид как на рис. 67.

Рис. 65. Исходное изображение и палитра Layers

Рис. 66. Начальное состояние палитры Animation

Рис. 67. Окно палитры Animation после создания кадров

После этого установите продолжительность каждого из созданных кадров в данном случае для всех кадров установлена длительность в 0,2 с. А затем сохраните анимацию с оптимизацией с помощью команды File=>Save Optimized (Файл=>Сохранить с оптимизацией). Полученный результат может напоминать рис. 68.

Рис. 68. Готовая анимация

Еще удобнее для получения заготовок, которые нетрудно превратить затем в анимацию в ImageReady, использовать функции Live Blends программы Illustrator. Такое комбинированное применение программ Illustrator и ImageReady существенно ускоряет процесс создания GIF-анимаций.

Для примера нарисуйте два произвольных разноцветных объекта, а затем свяжите их blend-связью с подходящими параметрами (рис. 69). Напрямую использовать данный файл для создания анимации невозможно, так как изображение находится на одном-единственном слое (рис. 70). Поэтому предварительно потребуется каждый элемент blend-объекта разместить на отдельном слое. Для этого в окне Layers выделите строку , активизируйте меню палитры, щелкнув на черной стрелке в ее правом верхнем углу, и выберите команду Release to Layers Sequence (Превратить в слои последовательно) (рис. 71). Удерживая клавишу Shift, выделите созданные слои и разместите их над слоем Layer 1, а затем удалите сам слой Layer 1, переместив его в корзину в итоге палитра слоев примет тот же вид, что и на рис. 72.

Рис. 69. Изображение после связывания исходных кривых

Рис. 70. Начальное состояние окна Layers

Рис. 71. Окно Layers после создания слоев

Рис. 72. Окно Layers после перемещения созданных слоев

Экспортируйте созданный файл в формат PSD командой File=>Export (Файл=>Экспорт). Откройте созданный PSD-файл в программе ImageReady (рис. 73). Обратите внимание, что в окне слоев появятся все созданные в программе Illustrator слои (рис. 74), а в окне Animation будет пока один-единственный кадр.

Рис. 73. Изображение в программе ImageReady

Рис. 74. Начальное состояние окна Layers

Активизируйте меню палитры Animation, щелкнув на черной стрелке в правом верхнем углу палитры, и выберите команду Make Frames From Layers (Создать кадры из слоев) в итоге в данном примере будет создано пять кадров, а окно палитры Animation примет вид в соответствии с рис. 75. Выделите все кадры, удерживая клавишу Shift, и установите подходящую длительность кадров в данном примере для каждого из кадров взято одинаковое время в 0,2 с. Затем сохраните файл с оптимизацией командой File=>Save Optimized (Файл=>Сохранить с оптимизацией), установив в списке Тип файла вариант Images Only (*.gif). Анимация будет напоминать рис. 76.

Рис. 75. Окно Animation после создания кадров

Рис. 76. Готовая анимация

Гораздо интереснее выглядит не перемещение, а плавное изменение размеров blend-объектов. Для примера можно воспользоваться уже созданным blend-переходом. В этом случае после создания отдельных слоев для каждого элемента blend-перехода разместите все объекты друг на друге, воспользовавшись кнопками Horizontal Align Center (Выравнивание относительно центра по горизонтали) и Vertical Align Center (Выравнивание относительно центра по вертикали) палитры Align (рис. 77).

Рис. 77. Изображение после перемещения blend-объектов

Экспортируйте созданный файл в формат PSD (File=>Export Файл=>Экспорт) и откройте созданный PSD-файл в программе ImageReady (рис. 78). Создайте на основе слоев кадры анимации (Make Frames From Layers Создать кадры из слоев) и подберите для них подходящую длительность (рис. 79). А затем, чтобы сделать анимацию более эффектной, скопируйте имеющиеся кадры, но в обратном порядке так, чтобы изображение сначала увеличивалось, а потом уменьшалось, и так по кругу (рис. 80). Затем сохраните файл с оптимизацией (File=>Save Optimized Файл=>Сохранить с оптимизацией). Полученная анимация представлена на рис. 81.

Рис. 78. Изображение в программе ImageReady

Рис. 79. Окно Animation после создания кадров из слоев и настройки длительности

Рис. 80. Состояние окна Animation после дублирования кадров

Рис. 81. Готовая анимация

ПК и комплектующие

Настольные ПК и моноблоки

Портативные ПК

Серверы

Материнские платы

Корпуса

Блоки питания

Оперативная память

Процессоры

Графические адаптеры

Жесткие диски и SSD

Оптические приводы и носители

Звуковые карты

ТВ-тюнеры

Контроллеры

Системы охлаждения ПК

Моддинг

Аксессуары для ноутбуков

Принтеры, сканеры, МФУ

Мониторы и проекторы

Устройства ввода

Внешние накопители

Акустические системы, гарнитуры, наушники

ИБП

Веб-камеры

KVM-оборудование

Сетевые медиаплееры

HTPC и мини-компьютеры

ТВ и системы домашнего кинотеатра

Технология DLNA

Средства управления домашней техникой

Планшеты

Смартфоны

Портативные накопители

Электронные ридеры

Портативные медиаплееры

GPS-навигаторы и трекеры

Носимые гаджеты

Автомобильные информационно-развлекательные системы

Зарядные устройства

Аксессуары для мобильных устройств

Цифровые фотоаппараты и оптика

Видеокамеры

Фотоаксессуары

Обработка фотографий

Монтаж видео

Операционные системы

Средства разработки

Офисные программы

Средства тестирования, мониторинга и диагностики

Полезные утилиты

Графические редакторы

Средства 3D-моделирования

Веб-браузеры

Поисковые системы

Социальные сети

«Облачные» сервисы

Сервисы для обмена сообщениями и конференц-связи

Разработка веб-сайтов

Мобильный интернет

Полезные инструменты

Средства защиты от вредоносного ПО

Средства управления доступом

Защита данных

Проводные сети

Беспроводные сети

Сетевая инфраструктура

Сотовая связь

IP-телефония

NAS-накопители

Средства управления сетями

Средства удаленного доступа

Системная интеграция

Проекты в области образования

Электронный документооборот

«Облачные» сервисы для бизнеса

Технологии виртуализации

1999 1 2 3 4 5 6 7 8 9 10 11 12

2000 1 2 3 4 5 6 7 8 9 10 11 12

2001 1 2 3 4 5 6 7 8 9 10 11 12

2002 1 2 3 4 5 6 7 8 9 10 11 12

2003 1 2 3 4 5 6 7 8 9 10 11 12

2004 1 2 3 4 5 6 7 8 9 10 11 12

2005 1 2 3 4 5 6 7 8 9 10 11 12

2006 1 2 3 4 5 6 7 8 9 10 11 12

2007 1 2 3 4 5 6 7 8 9 10 11 12

2008 1 2 3 4 5 6 7 8 9 10 11 12

2009 1 2 3 4 5 6 7 8 9 10 11 12

2010 1 2 3 4 5 6 7 8 9 10 11 12

2011 1 2 3 4 5 6 7 8 9 10 11 12

2012 1 2 3 4 5 6 7 8 9 10 11 12

2013 1 2 3 4 5 6 7 8 9 10 11 12

Популярные статьи

В настоящем обзоре мы рассмотрим модель моноблока от компании HP, которая является признанным лидером в производстве компьютеров как для домашнего использования, так и для офисов. Моноблок HP 205 G4 22 — модель нового семейства, которая построена на базе процессоров AMD последнего поколения и отличается неплохой производительностью вкупе с привлекательной ценой

Швейцарская компания Logitech G представила беспроводную игровую мышь Logitech G PRO X Superlight. Новинка предназначена для профессиональных киберспортсменов, а слово Superlight в ее названии указывает на малый вес этой модели, который не превышает 63 г. Это почти на четверть меньше по сравнению с анонсированным пару лет тому назад манипулятором Logitech G PRO Wireless

Как показало недавнее исследование Кембриджского университета — количество людей, которые пользуются сегодня криптовалютами, приближается к размеру населения небольшой страны и это только начало, мир меняется. Поэтому компания ASRock разработала и выпустила в продажу весьма необычную материнскую плату — H110 PRO BTC+, которую мы и рассмотрим в этом обзоре

Компания Rapoo анонсировала в Китае беспроводную клавиатуру Ralemo Pre 5 Fabric Edition. Новинка выполнена в формате TKL (без секции цифровых клавиш) и привлекает внимание оригинальным дизайном. Одна из отличительных особенностей этой модели — верхняя панель, обтянутая тканью с меланжевым рисунком

Линейку компьютерных мониторов MSI пополнила модель Optix MAG301 CR2, адресованная любителям игр. Она оборудована ЖК-панелью типа VA со сверхширокоформатным (21:9) экраном изогнутой формы (радиус закругления — 1,5 м). Его размер — 29,5 дюйма по диагонали, разрешение — 2560×1080 пикселов

Каталог продукции компании SilverStone пополнил комплект MS12. Он позволяет создать портативный накопитель на базе стандартного SSD типоразмера M.2 2280 с интерфейсом PCI Express

Компания ADATA Technology анонсировала твердотельные накопители серии XPG Spectrix S20G. Они предназначены для оснащения игровых ПК и, как утверждают их создатели, сочетают высокую производительность и эффектный внешний вид

Линейку видеоадаптеров ASUS на базе графических процессоров NVIDIA пополнила модель GeForce RTX 3070 Turbo (заводской индекс TURBO-RTX3070-8G), предназначенная для оснащения игровых ПК. Одной из особенностей новинки является конструкция системы охлаждения

КомпьютерПресс использует

Записки микростокового иллюстратора

Сегодня у нас не совсем обычный урок Adobe Illustrator. Потому что в этот раз мы будем делать не статичную картинку, а самую настоящую анимацию. Представьте себе, оказывается с помощью Adobe Illustrator можно ещё и мультики рисовать 🙂

А потребуется нам для этого всего ничего. Грамотная организация слоёв и экспорт конечной работы в формат swf, где каждый слой преобразуется в кадр анимации. В сегодняшнем уроке мы нарисуем анимацию обратного отсчёта в стиле ретро кинофильма. На выходе должен получится флеш ролик с этим самым обратным отсчётом.

Данный урок предназначен в первую очередь для продвинутых дизайнеров и иллюстраторов. Другие уроки Adobe Illustrator можно найти на этой странице: «Уроки Adobe Illustrator». Если вы столкнулись с какими-либо трудностями при выполнении этого урока, то можете обратиться за подсказкой к разделам курса «Изучи Adobe Illustrator за 30 дней!». Вы также можете взять онлайн консультацию по Adobe Illustrator через Skype.

Автор: Роман aka dacascas
Уровень: продвинутый
Версия Adobe Illustrator: любая

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

Когда все запчасти нашего мультика готовы, можно приступать к созданию самой анимации. Для удобства это лучше делать в новом документе. При этом слои у нас будут играть роль кадров анимации. И в самый первый слой как раз нужно скопировать кадр киноплёнки. Расположите его посередине рабочей области.

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

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

Подобным образом нам нужно накопировать 12 слоёв с кадрами киноплёнки, задающими её движение.

Вот теперь у нас целая куча слоёв и все они видны. В том смысле, что верхние слои загораживают нижние, что не совсем удобно для работы. Поэтому можно выключить какие-то слои, нажав на иконку с глазиком слева от названия слоя. Чтобы выключить или включить сразу все слои, держите зажатой клавишу Alt, когда нажимаете на иконку глазика. Включая и выключая слои, вы можете видеть именно то, что расположено в определённом кадре нашей будущей анимации. И сейчас, чтобы нам добавить к движению плёнки лёгкое дрожание, нужно посдвигать полученные кадры чуть-чуть в разные стороны. Для этого включайте только тот слой, с которым собираетесь работать в данный момент, а затем сдвигайте кадр на пару пикселей в любую сторону.

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

Если снять с круга выделение, то он будет выглядеть как единое целое. Именно это нам и нужно.

Но так как он состоит из отдельных секторов, то можно, изменяя их цвет, очень быстро и легко создать анимацию. Для этого скопируйте этот круг во второй слой и сделайте первый сектор более светлым. Вы помните, что плёнка у нас дрожит во время движения, поэтому совсем не обязательно ставить круг точно в центр кадра. Располагайте его на глаз.

Подобным образом нужно копировать круг в каждый следующий слой, при этом закрашивать более светлым цветом на один сектор больше, чем в предыдущий раз. Все вместе эти 12 слоёв образуют анимацию движения плёнки с заполняющимся кругом.

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

Затем по очереди включаем следующие слои и копируем туда эту же текстуру. Чтобы она выглядела по-разному на каждом кадре, просто поворачивайте её на угол 90 градусов. Как вы уже догадались, нам нужно добавить текстуру во все 12 кадров.

Если вам уже порядком надоело копировать, то могу вас обрадовать – осталось совсем немного. Самое сложное уже позади. Осталось добавить вертикальные царапины, и почти всё. Для этого опять же копируем исходную царапину и ставим её в произвольное место в несколько слоёв. В моём случае царапины появляются всего в двух слоях.

Теперь, когда готов основной цикл с анимацией плёнки, осталось добавить цифры. Так как отсчёт у нас идёт с 3 до 1 плюс ещё слово Go. то нам нужно ещё больше слоёв. Не 12, а целых 48. Для этого нужно сделать ещё три копии уже готовых слоёв с анимацией плёнки.

А дальше всё просто. Включаем самый первый слой и ставим туда цифру три.

Затем нужно копировать эту цифру в следующие слои до тех пор, пока не закончится анимация круга. Когда вы дойдёте до следующей копии слоёв, где круг опять будет закрашен полностью, нужно ставить уже цифру два. Точно так же скопируйте в нужные слои цифру один. А когда вы дойдёте до заключительных слоёв, предназначенных для надписи Go. то просто удаляйте круг, прежде чем скопировать надпись в нужный слой.

На этом с анимацией всё. Главное тут — не запутаться. Можно давать слоям какие-нибудь удобные названия, но мне было как-то лень 🙂 И ещё, когда вы закончите работу, обязательно включите обратно все слои, нажав на иконку глазика. Осталось всего ничего — сохранить анимацию в виде флеш ролика. Для этого нужно сделать экспорт в формат swf. Идём File > Export и выбираем формат Flash (swf).

В окошке с настройками экспорта обязательно установите Export As: AI Layers to SWF Frames. Именно эта опция превращает слои иллюстратора в кадры анимации. Далее нажмите кнопку Advanced.

Откроются дополнительные настройки. Здесь нужно установить частоту кадров Frame Rate. У меня стоит 12 кадров в секунду. Галочка Looping отвечает за цикличность анимации. Благодаря ей ролик будет воспроизводиться по кругу. И опция Layer Order: Bottom Up воспроизводит слои иллюстратора снизу вверх в панели. Как раз именно так мы и строили нашу анимацию.

На выходе получаем флеш ролик с нашей анимацией. Теперь вы видите, что простую анимацию делать в Adobe Illustrator не так уж и сложно как кажется на первый взгляд. Но для создания длинных роликов или интерактивных приложений всё же лучше использовать Adobe Flash либо другие флеш редакторы. Например, вот этого кота я делал в стареньком Macromedia Flash, который откопал у себя на работе. Также последнее время всё чаще для создания анимации применяется HTML5 и CSS3. Данный код поддерживается современными браузерами и не требует использования флеш плеера. Роман aka dacascas специально для блога Записки микростокового иллюстратора

Видеоуроки Adobe Illustrator на YouTube. Всё, начиная от первых шагов в иллюстраторе и заканчивая подготовкой работ для экзаменов и для продажи на микростоках. Получи доступ к видеокурсу для начинающих прямо сейчас! Подробности в этой статье: Экспресс курс Adobe Illustrator для начинающих

Работа с AI-файлами Illustrator в Animate

Animate позволяет импортировать AI-файлы из Adobe® Illustrator®, сохраняя большинство возможностей редактирования и визуальной надежности изображения. AI Importer также обеспечивает высокую степень контроля при определении метода импорта изображений Illustrator в Animate, позволяя указать режим импорта конкретных объектов в AI-файл.

Animate AI Importer располагает следующими основными характеристиками.

Сохраняет возможность редактирования большинства широко используемых эффектов Illustrator как фильтров Animate.

Сохраняет возможность редактирования режимов наложения, общих для Animate и Illustrator.

Сохраняет точность и возможность редактирования градиентных заливок.

Обеспечивает согласованное представление RGB-цветов (красного, зеленого, синего).

Импортирует символы Illustrator как символы Animate.

Сохраняет число и положение опорных точек Безье.

Точно сохраняет маски обрезки.

Сохраняет точный вид обводки и заливки.

Сохраняет прозрачность объектов.

Преобразует слои AI-файла в отдельные слои, ключевые кадры или в один слой Animate. Можно также импортировать AI-файл как единое растровое изображение, в этом случае Animate выполняет сведение (растрирует) файл.

Улучшает процедуры копирования и вставки между Illustrator и Animate. Настройки диалогового окна копирования и вставки применяются к AI-файлам, которые вставляются в рабочую область Animate.

Совместимость между Animate и Illustrator

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

Animate поддерживает только цветовое пространство RGB, но не цветовое пространство CMYK, широко применяемое в печати. Animate может преобразовать изображения CMYK в RGB, однако цвета лучше сохраняются при преобразовании цветов в систему RGB в Illustrator.

Чтобы сохранить AI-эффекты тени, внутреннего свечения слоя, внешнего свечения слоя и размытия по Гауссу в виде редактируемых фильтров Animate, Animate импортирует объекты, к которым применены эти эффекты как фрагмент ролика Animate. При попытке импортировать объект с этими атрибутами как отличный от фрагмента ролика Animate выводит предупреждение о несовместимости и рекомендует импортировать объект как фрагмент ролика.

Работа с Illustrator и Animate

Графический объект, созданный в приложении Illustrator, можно переместить в среду редактирования Animate или напрямую открыть в приложении Flash Player. Графические объекты можно копировать и вставлять, сохранять в формате SWF или экспортировать напрямую в приложение Animate. Кроме того, Illustrator обеспечивает поддержку динамического текста Animate и символов роликов.

Вставка графического объекта Illustrator

Созданный в приложении Illustrator графический объект можно быстро, просто и без затруднений скопировать и вставить в приложение Animate.

При вставке графического объекта Illustrator в приложение Animate сохраняются следующие атрибуты.

Контуры и фигуры

Масштаб

Толщина штрихов

Определения градиентов

Текст (включая шрифты OpenType)

Связанные изображения

Символы

Режимы наложения

Кроме того, Illustrator и Animate поддерживают следующие возможности при вставке графического объекта.

При выделении в графическом объекте Illustrator слоев верхнего уровня целиком и вставке их в приложение Animate сохраняются слои и их свойства (видимость и блокировка).

Цветовые форматы Illustrator, отличные от RGB (CMYK, градации серого и пользовательские форматы), преобразуются приложением Animate в формат RGB. Цвета RGB вставляются обычным образом.

При импорте или вставке графического объекта Illustrator можно с помощью различных параметров сохранить определенные эффекты (например, тень, отбрасываемую текстом) в виде фильтров Animate.

Animate сохраняет маски Illustrator.

Экспорт SWF-файлов из приложения Illustrator

SWF-файлы, экспортируемые из приложения Illustrator, соответствуют по качеству и степени сжатия SWF-файлам, экспортируемым из приложения Animate.

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

Импорт файлов Illustrator в приложение Animate

Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Animate за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Animate с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».

Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Animate и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области могут быть импортированы как один или несколько слоев или ключевых кадров Animate в программу Animate.

При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Animate сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.

Преобразование слоев Illustrator в слои Animate

Преобразование слоев Illustrator в кадры Animate

Преобразование слоев Illustrator в один слой Animate

Работа с символами

Работа с символами в приложении Illustrator похожа на работу с символами в Animate.

Если AI-файл содержит текст, его можно преобразовать в следующие объекты.

Текст, доступный для редактирования

Векторный контур

Сведенное растровое изображение

Animate позволяет конвертировать слои в импортированном AI-файле, получая на выходе следующее.

Файл растрового изображения, сведенного в один слой

Редактируемые контуры и эффекты

(только для Flash Professional CS6 и более ранних версий) Свойства символа и ссылки

С помощью палитры «Символы» или панели·«Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в Animate работают аналогично.

(только для Flash Professional CS6 и более ранних версий) Объекты статического, динамического и вводимого текста

При переносе статического текста из приложения Illustrator в приложение Animate он преобразуется в контуры. Кроме того, можно настроить текст в приложении Illustrator как динамический текст. Динамический текст позволяет редактировать содержимое текста в приложении Animate программным образом и легко управлять проектами, требующими локализации на разные языки.

В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Animate имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним XML-файлом, содержащим текст.

Об импорте AI-файлов в библиотеку Animate

Импорт AI-файла в библиотеку аналогичен импорту в рабочую область. Различие заключается в том, что весь AI-файл инкапсулирован в символ Animate. Содержимое импортируется в библиотеку и упорядочивается в структуре слоев и групп AI-файла.

Когда AI-файл импортируется в библиотеку, для корневой папки используется имя AI-файла. После импортирования AI-файла в библиотеку можно изменить имя корневой папки или переместить слои из папки.

Содержимое импортированного AI-файла упорядочивается в библиотеке по алфавиту. Иерархическая структура групп и папок остается неизменной, но в библиотеке они переупорядочиваются по алфавиту.

При преобразовании AI-слоев в ключевые кадры AI-файл импортируется как фрагмент ролика; при преобразовании AI-слоев во Flash-слои AI-файл импортируется как графический символ. Полученный в результате фрагмент ролика или графический символ включает все содержимое AI-файла, импортированного на временную шкалу, как если бы содержимое было импортировано в рабочую область. Почти со всеми фрагментами ролика связаны растровые изображения и другие ресурсы. Чтобы избежать недоразумений и конфликтов имен, эти ресурсы хранятся в папке Assets в одной папке с фрагментом ролика.

При импорте в библиотеку содержимое AI-файла импортируется на временную шкалу фрагмента видеоролика, а не на основную временную шкалу Animate.

(только для Flash Professional CS6 и более ранних версий) Параметры средства импорта AI-файлов

В диалоговом окне «Настройки» в Animate можно задать настройки импорта для AI-файлов и диалогового окна «Импорт AI-файлов». Заданные настройки импорта AI-файлов влияют на параметры, первоначально установленные в диалоговом окне «Импорт AI» для типов объектов Illustrator.

Используйте диалоговое окно «Импорт AI», чтобы изменить для отдельных объектов настройки, заданные для слоев различных типов. Выберите слой, объект или группу, чтобы изменить соответствующие параметры импорта, и укажите необходимые параметры.

Настройки, которые влияют на действия средства импорта при импорте AI-файлов.

Показать диалоговое окно «Импорт»

Указывает, что появляется диалоговое окно «Импорт AI-файла».

Вынести объекты за область кадрирования

Исключает объекты на холсте Illustrator, которые находятся вне макета или области кадрирования.

Импортировать скрытые слои.

Указывает, что скрытые слои будут импортированы по умолчанию.

Импортировать текст как

Позволяет указать следующие установки импорта для текстовых объектов.

Текст, доступный для редактирования

Указывает, что импортированный из программы Illustrator текст является редактируемым в Animate. Допускается ухудшение вида текста, чтобы сохранить редактируемость текста.

Преобразует текст в векторные контуры. Этот параметр используется, чтобы сохранить внешний вид текста. Могут быть потеряны некоторые визуальные эффекты (в частности, неподдерживаемые режимы наложения и фильтры), но визуальные атрибуты (такие как текст по контуру) сохраняются, если текст импортируется как фрагмент ролика. Сам текст более нельзя редактировать, но сохраняется редактируемость степени плотности цвета и совместимых режимов наложения.

Чтобы сохранить AI-эффекты тени, внутреннего свечения, внешнего свечения и размытия по Гауссу в виде редактируемых фильтров Animate, выберите команду «Создать фрагмент ролика для импорта», чтобы импортировать текст как фрагмент ролика.

Преобразует текст в растровое изображение, чтобы сохранить точный вид текста, каким он был в Illustrator. Если применяются фильтры или другие эффекты, которые не совместимы с Animate, то импорт текста как растрового изображения сохраняет его внешний вид. Растрированный текст больше нельзя редактировать.

Создать фрагменты ролика

Указывает, что текстовые объекты импортируются во фрагмент ролика. Чтобы сохранить поддерживаемые режимы наложения, AI-эффекты и прозрачность менее 100% при передаче между Illustrator и Animate, укажите, что текстовый объект импортируется как фрагмент ролика.

Импортировать пути как

Позволяет указать следующие установки импорта контуров.

Создает редактируемый векторный контур. Сохраняются поддерживаемые режимы наложения, эффекты и прозрачность объекта, но атрибуты, не поддерживаемые в Animate, отбрасываются.

Преобразует контур в растровое изображение, чтобы сохранить точный вид контура в Illustrator. Растрированное изображение более нельзя редактировать.

Создать фрагменты ролика

Указывает, что объекты контура импортируются во фрагмент ролика.

Позволяет задать установки импорта для изображений.

Свести растровое изображение для сохранения оформления

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

Создать фрагменты ролика

Указывает, что изображения импортируются во фрагмент ролика.

Позволяет указать установки импорта для групп.

Импортировать как растровые изображения

Преобразует группу в растровое изображение, чтобы сохранить вид объектов, каким он был в Illustrator. После преобразования группы в растровое изображение объекты в ней нельзя выделить или переименовать.

Создать фрагменты ролика

Указывает, что все объекты в группе инкапсулируются в одном фрагменте ролика.

Позволяет задать установки импорта для слоев.

Импортировать как растровые изображения

Преобразует слой в растровое изображение, чтобы сохранить внешний вид объектов, какими они были в Illustrator.

Создать фрагменты ролика

Указывает, что слой инкапсулирован во фрагменте ролика.

Регистрация фрагмента ролика

Указывает глобальную точку регистрации для создаваемых роликов. Этот параметр применяется для точки регистрации для всех типов объектов. Этот параметр может быть изменен для отдельных объектов в диалоговом окне «Импорт AI-файла»; это начальный параметр для всех типов объектов. Дополнительные сведения о точке регистрации фрагмента ролика см. в разделе Изменение символов.

Импорт файлов Adobe Illustrator

Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Animate за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Animate с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».

Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Animate и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области могут быть импортированы как один или несколько слоев flash/ключевых кадров в программу Animate.

При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Animate сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.

Преобразовать слои Illustrator в слои Flash.

Преобразовать слои Illustrator в кадры Flash.

Преобразовать все слои Illustrator в один слой Flash.

Работа с символами

Работа с символами в приложении Illustrator похожа на работу с символами в Animate.

Преобразование текста

Если AI-файл содержит текст, его можно преобразовать в следующие объекты.

Текст, доступный для редактирования

Векторный контур

Сведенное растровое изображение

Преобразование слоя

Animate позволяет конвертировать слои в импортированном AI-файле, получая на выходе следующее.

Файл растрового изображения, сведенного в один слой

Редактируемые контуры и эффекты

(только для Flash Professional CS6 и более ранних версий) Свойства символа и ссылки

С помощью палитры «Символы» или панели·«Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в Animate работают аналогично.

(только для Flash Professional CS6 и более ранних версий) Объекты статического, динамического и вводимого текста

При переносе статического текста из приложения Illustrator в приложение Animate он преобразуется в контуры. Кроме того, можно настроить текст в приложении Illustrator как динамический текст. Динамический текст позволяет редактировать содержимое текста в приложении Animate программным образом и легко управлять проектами, требующими локализации на разные языки.

В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Animate имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним XML-файлом, содержащим текст.

Лучшие методы создания веб-графики

Illustrator содержит различные инструменты для разработки макетов веб-страниц, а также создания и оптимизации веб-графики. Например, используйте безопасные веб-цвета, ищите баланс между качеством и размером файла и выбирайте наилучший формат файла для своей графики. Веб-графика обладает преимуществом в отношении фрагментов и карт ссылок, и вы можете выбирать из множества вариантов оптимизации, чтобы убедиться в правильном отображении файлов в Интернете.

О веб-графике

При разработке графики для Интернета приходится решать проблемы, которые не возникают с графикой для печати.

Для принятия обоснованных решений по веб-графике помните три следующие рекомендации:

Используйте безопасные web-цвета.

Цвет часто является ключевым аспектом объекта. Однако цвета в монтажной области — это не всегда те цвета, которые появятся в веб-браузере другой системы. Можно предотвратить дизеринг (метод имитации недоступных цветов) и другие проблемы с цветом, приняв две меры предосторожности при создании веб-графики. Во-первых, всегда работайте в цветовом режиме RGB. Во-вторых, используйте безопасные цвета Web.

Ищите компромисс между качеством и размером файла.

Для распространения изображений в Интернете важно создавать небольшие файлы. Веб-серверы более эффективно хранят и передают изображения меньшего размера. Средства просмотра быстрее загружают такие изображения. Размер и предполагаемое время загрузки веб-графики отображаются в диалоговом окне Сохранить для Web и устройств .

Выберите наилучший формат файла для своей графики.

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

Примечание.

Многие шаблоны Illustrator созданы специально для Интернета, включая веб-страницы и баннеры. Для выбора шаблона выберите «Файл» > «Новый из шаблона».

О режиме просмотра в виде пикселей

Чтобы разработчики веб-приложений могли создавать точные пиксельные модели, в Illustrator необходимо добавить свойство выравнивания по пикселям. Если для объекта включено свойство выравнивания по пикселям, все его горизонтальные и вертикальные сегменты выравниваются по пиксельной сетке, что обеспечивает четкость обводок. Пока данное свойство задано для объекта при любых преобразованиях, он повторно выравнивается по пиксельной сетке в соответствии с новыми координатами. Чтобы включить данное свойство, требуется установить флажок «Выровнять по пиксельной сетке» на палитре «Трансформирование». В Illustrator на уровне документа также доступен флажок «Выровнять новые объекты по пиксельной сетке», который по умолчанию установлен для веб-документов. Если данное свойство включено, для любого рисуемого объекта свойство выравнивания по пикселям задается по умолчанию.

Сохраняя объект в битовом формате (например, в виде файла JPEG, GIF или PNG), Illustrator растрирует объект с разрешением 72 пикселя на дюйм. Выбрав «Просмотр» > «Просмотр в виде пикселов», можно увидеть, как будут выглядеть объекты после растрирования. Это очень удобно, если требуется проконтролировать точное расположение, размер и сглаживание объектов в растрированной графике.

Чтобы понять, как Illustrator разделяет объекты на пиксели, откройте файл с векторными объектами, выберите команду «Просмотр» > «Просмотр в виде пикселов» и увеличьте объект так, чтобы видеть каждый пиксель. Расположение пикселей определяется пиксельной сеткой, делящей монтажную область с шагом в один пункт (1/72 дюйма). Пиксельную сетку можно увидеть, если выбрать масштаб 600 %. При перемещении, добавлении или преобразовании объект привязывается к пиксельной сетке. В результате любое сглаживание вдоль «привязанных» краев объекта (обычно левого верхнего края) исчезает. Теперь отмените выбор команды «Просмотр» > «Просмотр в виде пикселов» и переместите объект. Теперь можно расположить объект между линиями сетки. Посмотрите, как это влияет на сглаживание объекта. Видно, что даже незначительные корректировки могут влиять на растрирование объекта.

Примечание.

Пиксельная сетка зависит от начала координат линейки (0,0). Перемещение начала координат линейки изменит растрирование объекта Illustrator.

Советы по созданию изображений Illustrator для мобильных устройств

Чтобы оптимизировать графическое содержимое для мобильных устройств, сохраните графические объекты, созданные в программе Illustrator в любом формате SVG, включая SVG-t, который предназначен специально для мобильных устройств.

Следуйте приведенным ниже советам, чтобы изображения, созданные в программе Illustrator, отображались на мобильных устройствах качественно.

Создавайте содержимое в соответствии со стандартом SVG. При публикации векторных изображений на мобильных устройствах в формате SVG создаются файлы небольшого размера, достигается независимость от размера экрана, обеспечивается превосходное управление цветами, появляется возможность масштабирования, а текст становится доступным для редактирования (в составе исходного кода). Кроме того, формат SVG основан на XML, поэтому он позволяет включать в изображения такие интерактивные средства, как выделение подсветкой, подсказки по инструментам, специальные эффекты, звуки и анимацию.

Рекомендуем с самого начала организовывать работу с учетом конечных размеров целевых мобильных устройств. Хотя формат SVG поддерживает масштабирование, работой в установленных размерах можно гарантировать, что конечные изображения будут оптимизированы для целевых устройств по качеству и размеру.

В качестве цветового режима программы Illustrator задайте RGB. Формат SVG можно просматривать на устройствах с растровым дисплеем RGB, например на мониторах.

Чтобы уменьшить размер файла, попытайтесь сократить количество объектов (включая группы) или сделать их менее сложными (содержащими меньше точек). Использование меньшего количества точек способствует значительному уменьшению количества текстовой информации, необходимой для описания графических объектов в файле SVG. Чтобы сократить количество точек, выберите «Объект» > «Путь» > «Упростить» и поэкспериментируйте с различными сочетаниями параметров, пока не найдете баланс, позволяющий добиться нужного качества при минимальном количестве точек.

При возможности используйте символы. Символы определяют векторы, которые описывают объект всего один раз. Это удобно, если композиция содержит такие объекты, как фоновые изображения кнопок, применяемые многократно.

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

Старайтесь использовать версию SVGZ, т. е. версию SVG со сжатием программой gzip. Сжатие, в зависимости от содержимого, позволяет значительно уменьшить размер файла. Лучше всего сжимается текст, а содержимое с двоичной кодировкой, например встроенные растровые изображения (файлы JPEG, PNG или GIF), сжимаются лишь незначительно. Файлы SVGZ можно распаковать с помощью любого приложения, которое открывает файлы, упакованные программой gzip. Для успешного использования SVGZ необходимо проверить, поддерживается ли на целевом устройстве распаковка файлов gzip.

Связанные материалы

Сбор ресурсов и их массовый экспорт

Замена цвета на безопасный веб-цвет

Рисование графического объекта с точностью на уровне пикселей

О растровых изображениях

Онлайн-инструмент для создания диаграмм

Инструмент для создания инфографики

Похожие публикации:

Вектор в ворде как поставить

Как включить компьютер без корпуса

Как обновить питон на термекс

Как удалить темы в вордпресс