Днес имаме нещо необичайно Adobe урокИлюстратор. Защото този път няма да правим статична картина, а истинска анимация. Представете си, оказва се с с помощта на AdobeИлюстраторът може да рисува и карикатури :)
И за това не ни трябва абсолютно нищо. Правилна организация на слоевете и експортиране на крайната работа в swf формат, където всеки слой се конвертира в анимационен кадър. В днешния урок ще нарисуваме анимация за обратно броене в стила на ретро филм. Резултатът трябва да бъде флаш видео със същото обратно броене.
Първото нещо, което трябва да направите, е да нарисувате всичко необходими елементиза бъдеща анимация. За да направя това, в отделен документ направих две позиции на филмова рамка, кръг за справка, който е нарязан на отделни сектори, текстура и вертикален скреч, за да добавя ефекта на античността, както и всички числа и надписи.
Когато всички части на нашия анимационен филм са готови, можем да започнем да създаваме самата анимация. За удобство е по-добре да направите това в нов документ. В този случай нашите слоеве ще играят ролята на рамки за анимация. И в първия слой просто трябва да копирате кадър от филм. Поставете го в средата на работното си място.
Сега създайте втори слой и копирайте рамка от филм в него, в която дупките по ръбовете са направени с отместване. Той също трябва да бъде поставен в центъра.
От тези два слоя вече можете да получите анимация на движещ се филм. Но по-късно ще имаме нужда от много повече слоеве. Така че изберете първите два слоя, отидете на опциите на панела и направете копие на слоевете.
По подобен начин трябва да натрупаме 12 слоя филмови кадри, които определят неговото движение.
Сега имаме цял куп слоеве и всички те са видими. В смисъл, че горните слоеве блокират долните, което не е съвсем удобно за работа. Следователно можете да изключите някои слоеве, като щракнете върху иконата с око вляво от името на слоя. За да изключите или включите всички слоеве наведнъж, задръжте натиснат клавиша Alt, докато щракнете върху иконата на око. Чрез включване и изключване на слоевете можете да видите какво точно се намира в определен кадър от бъдещата ни анимация. И сега, за да добавим леко трептене към движението на филма, трябва леко да преместим получените кадри в различни посоки. За да направите това, включете само слоя, с който ще работите. този моменти след това преместете рамката с няколко пиксела във всяка посока.
След като сте преминали през всички слоеве и сте добавили малко отместване, можете да започнете да създавате анимацията на движещия се кръг. За да направите това, копирайте кръга, състоящ се от сектори, от документа с частите на карикатурата и го поставете на първия слой върху рамката на филма.
Ако премахнете отметката от кръга, той ще изглежда като едно цяло. Точно това ни трябва.
Но тъй като се състои от отделни сектори, можете да създадете анимация много бързо и лесно, като промените цвета им. За да направите това, копирайте този кръг на втория слой и направете първия сектор по-светъл. Спомняте си, че филмът ни се тресе, докато се движи, така че изобщо не е необходимо да поставяте кръга точно в центъра на рамката. Позиционирайте го на око.
По подобен начин трябва да копирате кръга във всеки следващ слой, докато рисувате още един сектор с по-светъл цвят от предишния път. Заедно тези 12 слоя образуват анимация на филма, движеща се със запълващ кръг.
След това трябва да добавим текстура към нашите слоеве. Включете първия слой и копирайте текстурата от там изходен файлс резервни части.
След това включете следващите слоеве един по един и копирайте същата текстура там. За да изглежда различно във всеки кадър, просто го завъртете на 90 градуса. Както може би се досещате, трябва да добавим текстура към всичките 12 кадъра.
Ако вече сте доста уморени от копиране, тогава мога да ви зарадвам - остана много малко. Най-трудното свърши. Остава само да добавите вертикални драскотини и това е почти всичко. За да направите това, ние отново копираме оригиналната драскотина и я поставяме на произволно място на няколко слоя. В моя случай драскотините се появяват само на два слоя.
Сега, когато основният цикъл с филмова анимация е готов, остава само да съберем числата. Тъй като обратното ни броене върви от 3 до 1 плюс думата Go!!!, имаме нужда от още повече слоеве. Не 12, а цели 48. За да направите това, трябва да направите още три копия на готови слоеве с филмова анимация.
И тогава всичко е просто. Включете първия слой и поставете числото три там.
След това трябва да копирате тази фигура на следващите слоеве, докато анимацията на кръга приключи. Когато стигнете до следващото копие на слоевете, където кръгът отново ще бъде изцяло запълнен, трябва да поставите цифрата две. По същия начин копирайте номер едно на желаните слоеве. И когато стигнете до финалните слоеве за надписа Go!!!, просто изтрийте кръга, преди да копирате надписа на желания слой.
Това е всичко за анимацията. Основното тук е да не се объркате. Можете да дадете на слоевете някои удобни имена, но бях малко мързелив :) И също така, когато приключите работата си, не забравяйте да включите отново всички слоеве, като щракнете върху иконата на окото.
В прозореца с настройки за експортиране не забравяйте да зададете Експортиране като: AI слоеве към SWF рамки. Именно тази опция превръща слоевете на Illustrator в рамки за анимация. След това щракнете върху бутона Разширени.
Ще отвори допълнителни настройки. Тук трябва да зададете честотата на кадрите. Имам 12 кадъра в секунда. Отметката Looping отговаря за цикличната анимация. Благодарение на него видеото ще се възпроизвежда в кръг. А опцията Ред на слоевете: Отдолу нагоре възпроизвежда слоевете на илюстратора отдолу нагоре в панела. Точно така изградихме нашата анимация.
Резултатът е флаш видео с нашата анимация.
Сега виждате, че правенето на проста анимация в Adobe Illustrator не е толкова трудно, колкото изглежда на пръв поглед.
Но за създаване на дълги видеоклипове или интерактивни приложения все още е по-добре да се използва Adobe Flashили други флаш редактори. Например, направих тази котка в стар Macromedia Flash, който изрових от работата си.
Освен това напоследък HTML5 и CSS3 все повече се използват за създаване на анимация. Този кодподдържан модерни браузърии не изисква използването на флаш плеър.
Roman aka dacascas специално за блога Notes of a microstock illustrator
Абонирайте се за нашия бюлетин, за да не пропуснете нищо ново:
Сега нека усложним малко задачата - нека създадем анимиран Flash банер. Разбира се, в този случай не е необходимо да се говори за пълноценна Flash анимация - за това има специализирани пакети. Но за да създадете просто, аматьорско видео, можете също да използвате Illustrator.
Няма специални инструменти или функции на интерфейса, като времева линия, които са типични за програмите за разработка на анимация в Adobe Illustrator. Но има една тънкост - можете да използвате слоеве като рамки.
Създайте банер само с текст.
Ориз. 8.11. Меню на палитрата със слоеве
В това меню се интересуваме от командата Release to Layer (Sequence), която преобразува всеки отделен обект в нов слой. Моля, обърнете внимание, че когато използвате командата, тя трябва да бъде маркирана Група, а не слой 1 .
Как трябва да изглежда палитрата на слоевете след изпълнение на Release to Layer (Sequence) е показано на фиг. 8.12.
Ориз. 8.12. Палитра със слоеве след изпълнение на Release to Layer (Sequence)
На този етап подготовката е завършена, можете да спестите използването Запази заУеб (Запазване за Уеб) в SWF. SWF е основният графичен формат, базиран на Flash технологиите. Би било по-точно да се каже, че това е форматът Flash (фиг. 8.13).
Вероятно днес всички потребители вече са запознати с Flash в една или друга степен. В момента това е най-често срещаният анимационен формат в интернет, с помощта на който се изграждат по-голямата част от мултимедийните интернет страници.
Разбира се, Adobe Illustrator не реализира дори една десета от възможностите на Flash, защото програмата не е предназначена за това. В него обаче можете да направите както статична картина, така и обикновена анимация.
Ориз. 8.13. Настройки за оптимизация за SWF формат
Налични са следните настройки.
- Само за четене. Ако поставите отметка в това квадратче, файлът ще бъде записан по такъв начин, че повече да не може да се отваря за редактиране в никоя програма. Това, от една страна, намалява размера на файла, а от друга защитава вашите авторски права.
- Настройката, обозначена с 1. Параметърът, който определя вида на записа - изображение или анимация.
- Ако изберете опцията AI File to SWF File SWF файл), изображението ще бъде запазено като статично изображение, напълно копирайки това, което виждате на екрана, когато работите в Illustrator.
- Слоевете към SWF рамки ви позволяват да създавате анимации въз основа на съществуващи слоеве, които ще бъдат представени като рамки. Трябва да изберем тази опция.
- Качество на кривата. Точността на кривите, повтаряща файла с кривите на оригиналното изображение. Намаляването на този параметър значително намалява качеството, особено в областта на малките детайли, но също така намалява размера на файла. За нашия случай оптималната стойност е „7“.
- Честота на кадрите. Честота на кадрите и, като резултат, скорост на анимацията. За да бъде ефектът правилен, настройте го на не повече от 4 кадъра в секунда.
- Цикъл (Повторение). Пускайте анимацията многократно. Подходящ за анимация, където е важен повтарящ се цикъл. Банерът принадлежи към този тип.
Напоследък различни видове анимация на 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 файл(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, сива скала и персонализирани формати), се преобразуват в RGB от Flash. 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, който импортирате, съдържа слоеве, можете да ги импортирате, като използвате един от следните методи.
Преобразувайте слоеве на Illustrator във Flash слоеве.
Преобразувайте слоеве на Illustrator във Flash рамки.
Преобразувайте всички слоеве на Illustrator в един Flash слой.
Днес имаме необичаен урок за Adobe Illustrator. Защото този път няма да правим статична картина, а истинска анимация. Представете си, оказва се, че можете също да рисувате карикатури с помощта на Adobe Illustrator :)
И за това не ни трябва абсолютно нищо. Правилна организация на слоевете и експортиране на крайната работа в swf формат, където всеки слой се конвертира в анимационен кадър. В днешния урок ще нарисуваме анимация за обратно броене в стила на ретро филм. Резултатът трябва да бъде флаш видео със същото обратно броене.
Първото нещо, което трябва да направите, е да нарисувате всички необходими елементи за бъдеща анимация. За да направя това, в отделен документ направих две позиции на филмова рамка, кръг за справка, който е нарязан на отделни сектори, текстура и вертикален скреч, за да добавя ефекта на античността, както и всички числа и надписи.
Когато всички части на нашия анимационен филм са готови, можем да започнем да създаваме самата анимация. За удобство е по-добре да направите това в нов документ. В този случай нашите слоеве ще играят ролята на рамки за анимация. И в първия слой просто трябва да копирате кадър от филм. Поставете го в средата на работното си място.
Сега създайте втори слой и копирайте рамка от филм в него, в която дупките по ръбовете са направени с отместване. Той също трябва да бъде поставен в центъра.
От тези два слоя вече можете да получите анимация на движещ се филм. Но по-късно ще имаме нужда от много повече слоеве. Така че изберете първите два слоя, отидете на опциите на панела и направете копие на слоевете.
По подобен начин трябва да натрупаме 12 слоя филмови кадри, които определят неговото движение.
Сега имаме цял куп слоеве и всички те са видими. В смисъл, че горните слоеве блокират долните, което не е съвсем удобно за работа. Следователно можете да изключите някои слоеве, като щракнете върху иконата с око вляво от името на слоя. За да изключите или включите всички слоеве наведнъж, задръжте натиснат клавиша Alt, докато щракнете върху иконата на око. Чрез включване и изключване на слоевете можете да видите какво точно се намира в определен кадър от бъдещата ни анимация. И сега, за да добавим леко трептене към движението на филма, трябва леко да преместим получените кадри в различни посоки. За да направите това, включете само слоя, с който ще работите в момента, и след това преместете рамката с няколко пиксела във всяка посока.
След като сте преминали през всички слоеве и сте добавили малко отместване, можете да започнете да създавате анимацията на движещия се кръг. За да направите това, копирайте кръга, състоящ се от сектори, от документа с частите на карикатурата и го поставете на първия слой върху рамката на филма.
Ако премахнете отметката от кръга, той ще изглежда като едно цяло. Точно това ни трябва.
Но тъй като се състои от отделни сектори, можете да създадете анимация много бързо и лесно, като промените цвета им. За да направите това, копирайте този кръг на втория слой и направете първия сектор по-светъл. Спомняте си, че филмът ни се тресе, докато се движи, така че изобщо не е необходимо да поставяте кръга точно в центъра на рамката. Позиционирайте го на око.
По подобен начин трябва да копирате кръга във всеки следващ слой, докато рисувате още един сектор с по-светъл цвят от предишния път. Заедно тези 12 слоя образуват анимация на филма, движеща се със запълващ кръг.
След това трябва да добавим текстура към нашите слоеве. Включете първия слой и копирайте текстурата от оригиналния файл с резервни части там.
След това включете следващите слоеве един по един и копирайте същата текстура там. За да изглежда различно във всеки кадър, просто го завъртете на 90 градуса. Както може би се досещате, трябва да добавим текстура към всичките 12 кадъра.
Ако вече сте доста уморени от копиране, тогава мога да ви зарадвам - остана много малко. Най-трудното свърши. Остава само да добавите вертикални драскотини и това е почти всичко. За да направите това, ние отново копираме оригиналната драскотина и я поставяме на произволно място на няколко слоя. В моя случай драскотините се появяват само на два слоя.
Сега, когато основният цикъл с филмова анимация е готов, остава само да съберем числата. Тъй като обратното ни броене върви от 3 до 1 плюс думата Go!!!, имаме нужда от още повече слоеве. Не 12, а цели 48. За да направите това, трябва да направите още три копия на готови слоеве с филмова анимация.
И тогава всичко е просто. Включете първия слой и поставете числото три там.
След това трябва да копирате тази фигура на следващите слоеве, докато анимацията на кръга приключи. Когато стигнете до следващото копие на слоевете, където кръгът отново ще бъде изцяло запълнен, трябва да поставите цифрата две. По същия начин копирайте номер едно на желаните слоеве. И когато стигнете до финалните слоеве за надписа Go!!!, просто изтрийте кръга, преди да копирате надписа на желания слой.
Това е всичко за анимацията. Основното тук е да не се объркате. Можете да дадете на слоевете някои удобни имена, но бях малко мързелив :) И също така, когато приключите работата си, не забравяйте да включите отново всички слоеве, като щракнете върху иконата на окото.
В прозореца с настройки за експортиране не забравяйте да зададете Експортиране като: AI слоеве към SWF рамки. Именно тази опция превръща слоевете на Illustrator в рамки за анимация. След това щракнете върху бутона Разширени.
Ще се отворят допълнителни настройки. Тук трябва да зададете честотата на кадрите. Имам 12 кадъра в секунда. Отметката Looping отговаря за цикличната анимация. Благодарение на него видеото ще се възпроизвежда в кръг. А опцията Ред на слоевете: Отдолу нагоре възпроизвежда слоевете на илюстратора отдолу нагоре в панела. Точно така изградихме нашата анимация.
Резултатът е флаш видео с нашата анимация.
Сега виждате, че правенето на проста анимация в Adobe Illustrator не е толкова трудно, колкото изглежда на пръв поглед.
Но за да създавате дълги видеоклипове или интерактивни приложения, все още е по-добре да използвате Adobe Flash или други флаш редактори. Например, направих тази котка в стар Macromedia Flash, който изрових от работата си.
Освен това напоследък HTML5 и CSS3 все повече се използват за създаване на анимация. Този код се поддържа от съвременните браузъри и не изисква използването на флаш плеър.
Roman aka dacascas специално за блога
Абонирайте се за нашия бюлетин, за да не пропуснете нищо ново:
Зареждане...