Как да създадете gif анимация в illustrator. Как да направите анимация в Adobe Illustrator. Импортиране на Illustrator файлове във Flash приложение

Файловият формат Flash (SWF) се основава на векторни графикии е предназначен за мащабируема, компактна графика за Интернет. Тъй като този файлов формат е базиран на векторна графика, обектът поддържа качеството на изображението при всяка резолюция и е идеален за създаване на анимационни рамки. В Illustrator можете да създавате отделни рамки за анимация върху слоеве и след това да експортирате слоевете с изображения като отделни рамки за използване на вашия уебсайт. Можете също така да определите символивъв файла на Illustrator, за да намалите размера на анимацията. При експортиране всеки символ се дефинира само веднъж в SWF файла.

Команда за експортиране (SWF)

Осигурява най-голям контрол върху анимацията и битовата компресия.

Осигурява повече контрол върху комбинацията от SWF и растерни формати във фрагментирано оформление. Тази команда предлага по-малко опции за изображения от командата Експортиране (SWF), но използва последните използвани опции за команда Експортиране (вижте ).

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

С помощта на приложението Device Central можете да видите как ще изглежда графика на Illustrator в приложението Flash Playerна различни преносими устройства.

Вмъкване на графика на Illustrator

Графика, създадена в Illustrator, може бързо, лесно и лесно да бъде копирана и поставена във Flash.

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

Очертания и форми

• Дебелина на удара

  Дефиниции на градиенти

  Текст (включително OpenType шрифтове)

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

• Режими на смесване

Освен това Illustrator и Flash поддържат следните опции при вмъкване на графика.

Когато е избрано в графичен обектСлоеве на Illustrator най-високо нивоизцяло и поставянето им във Flash приложение, слоевете и техните свойства (видимост и заключване) се запазват.

Цветните формати на Illustrator, различни от RGB (CMYK, сива скала и потребителски формати), се преобразуват от Flash в RGB формат. RGB цветовевмъкнат по обичайния начин.

Когато импортирате или вмъкнете графика на Illustrator, можете да използвате различни опции за запазване на определени ефекти (като текстови сенки) като Flash филтри.

Flash запазва маските на Illustrator.

Експортирайте SWF файлове от Illustrator

SWF файловете, експортирани от Illustrator, съответстват на качеството и съотношението на компресия на SWF файловете, експортирани от Flash.

Когато експортирате, можете да избирате от различни предварително дефинирани стилове за оптимален изход и да укажете как искате да използвате множество артбордове и как искате да трансформирате символи, слоеве, текст и маски. Например, можете да изберете да експортирате символи на Illustrator като филми или графични изображенияи създаване на SWF символи от слоеве на Illustrator.

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

За да създадете цялостно оформление в Illustrator и след това да го импортирате във Flash с една стъпка, можете да запазите произведението на изкуството в собствения (AI) формат на Illustrator и да го импортирате прецизно във Flash, като използвате командите File > Import to Workbench " > "Импортиране в библиотека".

Ако вашият файл на Illustrator съдържа няколко артборда, изберете артборда за импортиране в диалоговия прозорец Импортиране на Flash и задайте настройки за всеки слой в този артборд. Всички обекти в избрания артборд се импортират в Flash програмакато един слой. Когато импортирате друг артборд от същия AI файл, обектите в този артборд се импортират в програмата Flash като нов слой.

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

Преобразувайте слоеве на Illustrator във Flash слоеве.

Преобразувайте слоеве на Illustrator във Flash рамки.

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

IN напоследъкРазлични видове анимация на SVG (Scalable Vector Graphics) графики на уебсайтове и приложения станаха много популярни. Това се дължи на факта, че всичко най-новите браузъривече поддържа този формат. Ето информация относно поддръжката на браузъра за SVG.

Тази статия обсъжда най-прост примерАнимирайте SVG вектори с помощта на лесен Jquery плъгин Lazy Line Painter.

За да изпълните и разберете напълно тази задача, основни познания по HTML, CSS, Jquery са желателни, но не са задължителни, ако просто искате да анимирате SVG) Да започваме!

И това са стъпките, които трябва да следваме:

1. Създайте правилната файлова структура
За това ще ни помогне услугата Initializr, където трябва да изберем параметри, както е на снимката по-долу.

• Класически H5BP (HTML5 Boiler Plate)
• Няма шаблон
• Просто HTML5 Shiv
• Минимизиран
• IE класове
• Chrome Frame
• След това щракнете върху Изтегляне!

2. Изтеглете и свържете плъгина

Тъй като initializr идва с най-новата библиотека Jquery, от архива, който трябва да изтеглим от хранилището на проекта Lazy Line Painter, трябва да прехвърлим само 2 файла в нашия проект. Първият е „jquery.lazylinepainter-1.1.min.js“ (версията на плъгина може да се различава) той се намира в корена на получената папка. Вторият е example/js/vendor/raphael-min.js.

Тези 2 файла се поставят в папката js. И ги свързваме с нашия index.html преди main.js както следва:

3. Начертайте страхотна контурна картина в Adobe Illustrator

Например, можете да използвате иконите в прикачения файл.

4. Конвертирайте нашето изображение в Lazy Line Converter
Просто плъзнете иконата си в прозореца на снимката по-долу.
Дебелината, цвета на контура и скоростта на анимацията могат да се променят в самия код, който ще се появи след конвертирането!

5. Поставете получения код в main.js
Сега просто поставете получения код в празен файл main.js
Параметри:
strokeWidth — дебелина на контура
strokeColor — цвят на контура
Можете също да промените скоростта на рисуване на всеки вектор, като промените стойностите на параметъра за продължителност (по подразбиране 600)

6. Добавете малко CSS на вкус
Премахване на параграф от index.html

здравей свят! Това е HTML5 Boilerplate.

И вместо него вмъкваме блок, в който ще се проведе нашата анимация

след това добавете малко CSS към файла main.css, за да изглежда по-добре:

Тяло (фон:#F3B71C;) #икони (позиция: фиксирана; горе:50%; ляво:50%; поле: -300px 0 0 -400px;)

запазете всички файлове.
Сега просто отворете index.html в модерен браузър и се насладете на ефекта.

P.S. Когато работи на локална машина, началото на анимацията може да се забави за няколко секунди.

Сега нека усложним малко задачата - нека създадем анимиран Flash банер. Разбира се, в този случай не е необходимо да се говори за пълноценна Flash анимация - за това има специализирани пакети. Но за да създадете просто, аматьорско видео, можете също да използвате Illustrator.

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

Създайте банер само с текст.

ориз. 8.11. Меню на палитрата със слоеве

В това меню се интересуваме от командата Release to Layer (Sequence), която прехвърля всеки отделен обект на нов слой. Моля, обърнете внимание, че когато прилагате командата, трябва да бъде избрана групата, а не слой 1.

Как трябва да изглежда палитрата на слоевете след изпълнение на Release to Layer (Sequence) е показано на фиг. 8.12.

ориз. 8.12. Палитра със слоеве след изпълнение на Release to Layer (Sequence)

На този етап подготовката е завършена, можете да записвате с помощта на Save for Web в SWF. SWF е основният графичен формат, базиран на Flash технологиите. Би било по-точно да се каже, че това е форматът Flash (фиг. 8.13).

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

Разбира се, Adobe Illustrator не реализира дори една десета от възможностите на Flash, защото програмата не е предназначена за това. В него обаче можете да направите както статична картина, така и обикновена анимация.

ориз. 8.13. Настройки за оптимизация за SWF формат

Налични са следните настройки.

• Само за четене. Ако поставите отметка в това квадратче, файлът ще бъде записан по такъв начин, че повече да не може да се отваря за редактиране в никоя програма. Това, от една страна, намалява размера на файла, а от друга защитава вашите авторски права.
• Настройката, обозначена с 1. Параметърът, който определя вида на записа - изображение или анимация.
• Ако изберете опцията AI ​​File to SWF File SWF файл), изображението ще бъде запазено като статично изображение, напълно копирайки това, което виждате на екрана, когато работите в Illustrator.
• Слоевете към SWF рамки ви позволяват да създавате анимации въз основа на съществуващи слоеве, които ще бъдат представени като рамки. Трябва да изберем тази опция.
• Качество на кривата. Точността на кривите, повтаряща файла с кривите на оригиналното изображение. Намаляването на този параметър значително намалява качеството, особено в областта на малките детайли, но също така намалява размера на файла. За нашия случай оптималната стойност е „7“.
• Честота на кадрите. Честота на кадрите и, като резултат, скорост на анимацията. За да бъде ефектът правилен, настройте го на не повече от 4 кадъра в секунда.
• Цикъл (Повторение). Пуснете анимацията многократно. Подходящ за анимация, където е важен повтарящ се цикъл. Банерът принадлежи към този тип.

Прозрачен GIF в Adobe Illustrator се прави по следния начин. Отидете в менюто File > Save for Web & Devices (Alt+Ctrl+Shift+S).

В прозореца, който се отваря, в полето Оптимизиран файлов формат първо трябва да отидете в раздела Размер на изображението. Факт е, че по подразбиране цялата страница е включена в прозореца за оптимизация и това обикновено не е необходимо.

Затова в раздела Размер на изображението премахнете отметката от квадратчето Clip to Artboard и щракнете върху бутона Apply.

След това изберете GIF от списъка за избор на формат и поставете отметка в квадратчето Прозрачност. След това ще определим кои цветове ще бъдат прозрачни. Всички присъстващи цветове в изображението се съдържат в раздела Цветова таблица и се показват като цветни квадратчета. Изберете инструмента Eyedropper от лентата с инструменти от лявата страна на прозореца.(или Ctrl). След като изберете цвят, трябва да инструктирате програмата да го направи прозрачен. За да направите това, щракнете върху иконата Преобразуване на избраните цветове в прозрачни. На снимката този бутон е кръгъл и червеният цвят е прозрачен. В изображението ще се появи прозрачна област, а квадратът на цветната таблица ще промени вида си - част от него ще се превърне в бял триъгълник. За да отмените избрания цвят, трябва да го изберете в таблицата с цветове и след това да щракнете отново върху иконата Maps selected colors to Transparent.

Няколко думи за метода за настройка на прозрачността. Той отговаря за падащото меню Specify Transparency Dither Algorithm, на руски - Алгоритъм за симулиране на прозрачност (фиг. по-долу). Има четири възможности за избор: Трепване без прозрачност, Трепване на прозрачност на дифузия, Трепване на прозрачност на модела и Трепване на прозрачност на шума. В режим на дифузен алгоритъм плъзгачът за количество става активен, което ви позволява да промените стойността на дифузия. Какво да приложим на практика? В зависимост от предназначението и изображението. Не използвам тази опция и винаги я оставям по подразбиране - No Transparency Dither.

Щракнете върху Запазване - прозрачен GIFготов. Работата е извършена в Adobe Illustrator версия CS4 (v.14), но всички действия и клавишни комбинации са приложими и за по-ранната версия CS3 (v.13).

здравейте всички Днес ще се опитам да опиша възможностите Програми на Adobe Illustrator, сравнявайки го с възможностите на Flash. Това няма да бъде глобален анализ на програмата, а по-скоро описание на някои интересни функции, които открих в тази програма. Събирах информация част по част, докато я изучавах, за да публикувам всичко в един пост. Веднага ще призная, че не съм супер опитен потребител на Illustrator, използвам го само за рисуване през последните шест месеца (преди това рисувах всичко във Flash). Много хора се оплакват, че илюстраторът е сложен и не винаги интуитивен. До известна степен съм съгласен, че след флъша тази програма е сложна. Но основното тук е да не се отказвате, а да продължите да учите. И след няколко седмици възниква мисълта, как се справих без него преди!

И така, какво ми хареса в илюстратора и какво открих, което не беше във флаш?
1. Ще започна с най-простото, но в същото време необходимо. Опитайте да подредите обекти в кръг във Flash. Преди имаше Deco Tool, но беше премахнат, очевидно счетен за ненужен. Решихме, че ще е по-забавно да го направим с ръце. Illustrator има тази функция: Effect – Distort&Transform – Transform.

Всичко е бързо и лесно; сами задаваме стойностите (разстоянието между обектите, броя на копията).

2. Зиг-заг

Още по-просто, но все пак полезно нещо. Изглежда малко нещо, но във Flash трябва да рисувате на ръка, в Illustrator това е въпрос на секунди.

3. Деформация на обекти (Warp)

Във Flash няма нищо подобно. В примера по-долу показах само 2 начина за деформиране на прости форми (Ефект – Деформация – Дъга/Риба). Всъщност има 15 от тях най-новата версияпрограми.

4. Автоматично заобляне на ъгли (Round Corners)

Можете да го направите ръчно: върху графичен обект, когато е избран, в ъгъла (във всички ъгли) се появява бяла точка и знак със заоблена линия. Плъзгаме с мишката и го настройваме по ваш вкус.

Но това се отнася само за фигури, с линия с молив го правим малко по-различно - прилагаме ефект на заобляне (Ефект – Стилизиране – Заоблени ъгли). На изхода получаваме същия резултат.

5. Нагрубете

Ефектът се прилага към прости форми (Ефект – Изкривяване и трансформиране – Нагрубяване). Резултатът е нещо подобно на нискополигонални 3D модели. Мисля, че е готино :) И най-важното е, че е много просто.

6. Pucker&Bloat (дърпане и подуване)
Пример на снимката по-долу:

7. Разширяване на формуляра (Offset Path)

Flash има функция Expand Fill; тя изобщо не работи с линии с молив, за разлика от Illustrator.

8. Четки (четка за изкуства, четка за шаблони, четка за разпръскване)
Вижте снимката по-долу с примери:

9. Четка за текстура

Illustrator разполага и с много текстурни четки, за които писах и как се появяват нова версиясветкавица - . Забелязано е, че използването на четки в Adobe AnimateУжасно бави. Ето как става :(

10. Не съм сигурен дали това е истински трик, но искам да се съсредоточа върху четка със забавното име Blob Brush. Разположена в лентата с инструменти, това е много приятна четка за използване. Има куп настройки, харесва ми повече от обикновения. Трудно е да се обяснят ползите му с думи, по-добре е да го опитате веднъж.

10. Разделяне на мрежа

Друго полезно нещо е функцията Split to Grid (Object-Path-Split to Grid). Тя ви позволява да изрежете формата на равни сегменти. Какво ни напомня това? Точно така - прозорци в многоетажна сграда. Мисля, че е готино нещо за рисуване, например, на градски пейзажи;)

Друг полезен инструмент, представен в Illustrator, вероятно от първото му издание. С негова помощ можете да създадете например дървесни текстури:

12. Преместване (вдясно – Трансформиране – Преместване)

Измества обект на определено разстояние. Ако желаете, можете веднага да създадете копие, което да бъде поставено на желаното разстояние от избрания обект хоризонтално/или вертикално. По-ранна версия на Flash имаше приставка, която го правеше тази функция. За съжаление не помня името му.

Illustrator е много удобен за създаване на безшевни модели (Object-Pattern-Make). Спомням си колко яростно развих изтънченост в светкавица със създаването на . Във версията SS 2015 на Illustrator всичко е автоматизирано; куп настройки ще ви помогнат да създадете модел в десетки варианти, като имате само няколко под ръка графични елементи. В повече по-ранни версииВсички програми трябваше да се правят ръчно, както във Flash досега.

(Забележка – шаблонът може да бъде направен във векторен редактируем обект с помощта на функцията Обект – Разгъване на външния вид.

14. Предметна мозайка

Създаване цветова палитравъз основа на съществуващата картина. Импортирайте картината, която харесвате, в илюстрацията (Отвори), след това Обект – Създаване на обектна мозайка. В настройките определяме честотата на разделяне по височина и ширина.

И на изхода получаваме:

15.Смесете

Използва се за създаване на градиенти. Можете да създавате преходи стъпка по стъпка, както е на снимката. Няма да кажа, че го използвам често, но може да е полезно на някого. Струва ми се, че може да се използва за създаване на прости фонови изображения.

Инструментът може да се използва и за клониране на обекти. Поставете два обекта на разстояние един от друг и приложете Blend Options, изберете броя на стъпките (броя на клонираните обекти).

16. Инструмент за изграждане на форма.

Много удобно нещо за работа с примитиви. В светкавицата ми се стори, че е по-малко удобно.

Задръжте Alt и щракнете върху избраните сегменти, за да изтриете сегментите. Ако просто плъзнем мишката върху няколко избрани области - връзки.

Добавката е инструмент, който помага за автоматично изрязване, свързване и т.н. подчертани форми. Що се отнася до мен, не е много удобно; често използвам инструмента за изграждане на форма.

(артбордове)

18.Панел с персонализирани инструменти

Във Flash артбордовете, а именно сцените (Сцена 1,2,3..) се намират отделно и трябва да превключвате между тях (Shift+F2). В Illustrator всички те могат да бъдат поставени пред очите ви. Удобно е, когато правите няколко версии на един и същ чертеж, така че всички опции да са пред очите ви за сравнение.

19. Използване на изометрия Графични стилове

И последното нещо е създаването на изометрия, без да я използвате с 1 клик (или по-точно с 3 клика, защото имаме 3 страни;) с помощта на графични стилове (Graphic Styles). Ще опиша как се прави това следващия път.

Това, което илюстраторът има общо с flash, е способността да записва обект в символ и също толкова лесно този символ може да бъде прехвърлен във flash (отворете файла във flash.ai с помощта на Import – Import to stage).
Символът в Illustrator има същите свойства като във Flash.
И в заключение ще напиша, че в Illustrator според мен отстъпва на флаш. Да, да, има такова нещо. И това е инструментът за запълване (Paint Bucket). Колкото и да се опитвам да свикна с него в Illa, във Flash е по-удобно.
Ако моите бележки са ви станали полезни или ако искате да добавите нещо свое, добре дошли в коментарите! Успех на всички ;)