Оптимизация на уеб графики
Графична информацияе много по-бавно от текста и времето за зареждане на изображенията е пропорционално на размера на техните графични файлове. Ето защо бързо зарежданеУеб страниците изискват вградени в тях графични изображения с малък размер, което се постига чрез тяхната оптимизация. Оптимизирането на изображението се разбира като неговата трансформация, която осигурява минимален размер на файла, като същевременно поддържа необходимото качество на изображението в този случай, което се постига основно чрез намаляване на броя на цветовете в графичните изображения, използване на компресирани и специални файлови формати и оптимизиране на настройките за компресиране за индивидуални фрагменти от изображението.
Illustrator има вградени инструменти за оптимизиране на изображения, които предоставят различни методивизуализирайте бърз и ефективен процес на оптимизация. Прегледдава доста точна представа как ще изглежда оптимизираното изображение в реално време, което помага да се оцени резултатът от оптимизацията и да се избере правилният желаните настройки. И можете да оптимизирате както изображения, създадени директно в Illustrator, така и други, като снимки, които възнамерявате да поставите на уеб сайт.
Параметрите за оптимизация се задават в прозореца Запазване за уеб (Save for Web), извиква се с едноименната команда от менюто файл(файл). Програмата предлага да използвате един от четирите режима на визуализация, но два са най-добри за оценка на качеството на оптимизацията:
- 2-нагоре(два варианта) едновременен преглед на оригиналното и оптимизираното изображение в съответствие с зададените настройки (фиг. 1);
- 4-нагоре(четири опции) в този режим зоната за гледане е разделена на четири прозореца (фиг. 2) за показване оригинално изображениеи три оптимизирани версии: първата версия се генерира на базата на зададените стойности за оптимизация, а другите две са варианти на текущите настройки за оптимизация.
И двата режима ви позволяват значително да спестите време за намиране на най-добрата опция за оптимизация, тъй като премахват необходимостта от запазване на изображения от различни настройкиоптимизация и последващото им визуално сравнение. Освен това е възможно да се оцени не само качеството на оптимизираното изображение, но и неговия размер и време за изтегляне за различни опции за връзка. За сравнение, най-удобният режим е 4-Up (четири опции), който ви позволява визуално да оцените въздействието на компресията или намаляването на палитрата върху качеството и размера на изображението и в крайна сметка да определите най-добрите параметри за оптимизация.
Illustrator ви позволява да оптимизирате уеб графики не само във формати 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. Опитът за незабавно оптимизиране за мрежата няма да доведе до нищо добро, тъй като в този случай изображението ще бъде автоматично изрязано, което няма да вземе предвид истинската позиция на надписа, получен в резултат на деформация (фиг. 4 и 5).
Затова нека се опитаме да експортираме емблемата в PSD формат с командата Файл=>Експортиране(Файл=>Експортиране) Размерът на генерираното изображение ще бъде 143 KB. Отворете получения PSD файл и използвайте командата Файл=>Запазване за уеб(Файл=>Запазване за уеб). Като се има предвид ограниченият брой цветове, включени в изображението, в този случай форматът GIF е оптимален, със специфичните настройки, които трябва да решите. Като експериментирате с настройките, можете да видите това най-добро качестводава алгоритъм за компресиране по подразбиране на програмата селективен(Избирателно). Що се отнася до изглаждането, тогава, предвид наличието на градиентно запълване, е по-добре да изберете алгоритъм с генериране на шум шум(фиг. 6). Размерът на получения файл за оптимизация ще бъде 6,729 KB (фиг. 7), като прозрачността на фона ще бъде запазена, което е лесно да се провери чрез запазване на GIF изображението заедно с HTML файла (фиг. 8). В резултат на това в този примерфайловете emblem.html и emblem.gif бяха получени в папката Primer1.
Бутони
Незаменим специфичен елемент от дизайна на всяка уеб страница са графичните контролни бутони. Просто е невъзможно да си представим страница без тях. Бутоните за рисуване днес се превърнаха в специален жанр и Illustrator ви позволява да създавате най-сложните опции. Например, бутоните, проектирани като мрежови обекти и (или) с маски, изглеждат много по-ефективни от обикновените.
Обмислете опцията за създаване на кръгъл повдигнат бутон в Illustrator. Начертайте векторен обект, запълнен с произволен цвят под формата на кръг (фиг. 9) и го преобразувайте в мрежа с помощта на командата Object=>Създаване на градиентна мрежа(Object=>Create Gradient Mesh) като посочите четири реда и четири колони и в списъка Външен вид(Преглед), като изберете опция Към центъра подчертайте(Подсветка) до 60 (Фигура 10). Изберете инструмент Директен подбори щракнете вляво горен ъгълобект, подчертавайки разположените там възлови точки (фиг. 11). Променете цвета на съответната клетка на бяло, като я изберете в палитрата Swatches(фиг. 12).
Вземете инструмент Елипса(Елипса), поставете маркера на мишката в центъра на кръга, създаден преди и, докато държите натиснати клавишите алтИ Shift, разтегнете новия кръг върху стария, така че да е по-голям от стария с 1-2 пиксела от всички страни. Направете го черна рамка Удар) 1-2 px ширина и го запълнете с радиален градиент от червено към бяло (Фигура 13). Плъзнете създадения векторен обект 1-2 пиксела надясно и надолу, след което, без да премахвате селекцията, щракнете с десния бутон върху него и изберете командата от контекстното меню Подреждане=>Изпращане назад(Организиране=>Изпращане обратно). В резултат на това получаваме заготовка за бутона, показан на фиг. 14.
По правило на всяка уеб страница има няколко бутона от един и същи тип, които се различават например само по посоката на стрелките, начертани върху тях, които показват посоката на движение в сайта. Да разгледаме най-простия случай с два бутона, единият от които със стрелка надолу означава преминаване към следващата страница, а бутонът със стрелка нагоре към предишната. Като заготовка за стрелката, нека вземем правилен триъгълник, начертан с инструмента Многоъгълник(Многоъгълник), изпълнен с черно и също стилизиран като мрежест обект за по-голям ефект. Преместете стрелката до бутона и коригирайте позицията на всички обекти един спрямо друг, като използвате съответните бутони на палитрата Подравнете(Подравняване). Първият от получените бутони е показан на фиг. 15. Направете копие на слоя с бутона, като изберете командата Дублиране на слоя Слоеве, в резултат на което получаваме два еднакви слоя. След това изберете стрелката върху копието на слоя и го завъртете на 180°, като изберете командата от контекстното меню Трансформиране=>ЗавъртанеТрансформация=>Завъртане. Получаваме същия бутон, както е показано на фиг. 16. Моля, имайте предвид, че е много по-удобно да съхранявате всички еднотипни бутони на един проект в един файл на различни слоеве, което е демонстрирано в този случай.
Сега трябва да запазите оптимизираните опции за всеки от бутоните. Първо направете долния слой невидим, в този случай бутонът на горния слой ще бъде запазен. Изберете екип Файл=>Запазване за уеб(File=>Save for Web), конфигурирайте параметрите за оптимизиране на бутона, например, както е показано на фиг. 17, щракнете върху бутона Запазване(Запазване) и въведете име на файл. Записаният в резултат бутон е показан на фиг. 18. Сега направете долния слой видим, направете горния слой невидим и запазете втория бутон по същия начин, като му дадете различно име. Резултатът е показан на фиг. 19.
Сега всичко, което остава, е да се уверите, че бутоните изглеждат добре на уеб страницата и да ги поставите на потребителска страница (Фигура 20). В резултат на това в този пример файлът Primer2.html и две графични изображения бяха получени в папката с изображения (папка Грунд2).
Ако желаете, по време на процеса на оптимизация, бутонът може лесно да се превърне в парче. В този случай, след като изберете командата Файл=>Запазване за уеб(Файл => Запазване за уеб) и настройките за оптимизация трябва да бъдат избрани от инструмента за палитра с инструменти Избор на парче(Избор на парче) и щракнете двукратно върху изображението, което автоматично ще се превърне в парче с сериен номер 1 (фиг. 21). Повтаря се кликнете два пътимишката ще отвори прозорец Опции за резене(Опции за срез), в който ще трябва да посочите връзка и, ако желаете, да промените името на среза (фиг. 22) и след това да запазите оптимизираното изображение. Резултатът в този случай ще бъде файловете Primer3.html (фиг. 23) и Primer3.gif (папка Primer3).
Интерактивни елементи
Един от начините да подправите една страница е да въведете дизайнерски елементи, които променят техния външен вид(или състояние) в зависимост от поведението на мишката или, по-рядко, в случай на други ситуации: мащабиране, превъртане, зареждане, грешки и др.
Сред тези елементи най-известните са преобръщанията (от английското преобръщане към преобръщане, преобръщане) елементи, които променят външния си вид под въздействието на мишката. Анимираните бутони са примери за типични преобръщания. Преместванията често се използват при създаване на други елементи за навигация на сайта. Всъщност всяко преобръщане не е едно, а няколко (до четири) изображения, всяко от които съответства на конкретно събитие. За основни събития се считат следните: Нормално нормално състояние, Преминаване на курсора на мишката върху елемента и Натискане на левия бутон на мишката надолу при прекарване на курсора на мишката върху него. Теоретично могат да бъдат включени събития като Щракване при отпускане на левия бутон на мишката след щракване, Нагоре след отпускане на бутона, Навън при напускане на активната зона. На практика обаче по-често се ограничава до промяна на елемента само за първите три или дори две събития.
Класически преобръщания
В класическия смисъл превъртането е поредица от графични изображения във формат GIF и съответния им HTML код, благодарение на който в зависимост от поведението на мишката едно изображение замества друго в прозореца на браузъра.
Illustrator не е проектиран да създава директно преобръщане в класическия смисъл, но може да помогне с разработването на началните елементи за тях. Идеята в случая е да се създаде слой с изображение, съответстващо на първото събитие. След това направете копие на слоя и трансформирайте изображението, за да съответства на второто събитие и т.н. Полученото наслоено изображение се експортира в PSD файл със запазени слоеве, въз основа на които се създава преобръщане в Програма за изображенияГотов. Предимството на използването на Illustrator, както и в много други случаи, са редица негови интересни функции, които не са налични в други софтуерни инструменти, съчетани с удобството на трансформацията на векторна графика.
Нека се опитаме да създадем преобръщане под формата на надпис, който променя цвета си в зависимост от поведението на мишката. Отворете Illustrator и създайте фигура под формата на заоблен и запълнен с черно правоъгълник (фиг. 24), направете нейно копие и го поставете в свободна част на екрана. Преобразувайте първото копие на правоъгълника в мрежов обект с осветяване в центъра (команда Object=>Създаване на градиентна мрежа Object=>Create Gradient Mesh), като посочите четири реда и десет колони (фиг. 25). Активирайте второто копие на правоъгълника и задайте градиентно запълване за него, подобно на показаното на фиг. 26. Наслагнете градиентния обект върху мрежата, намалете непрозрачността на градиентния обект до около 80%, а размера на градиентния обект до около 1 пиксел, за да симулирате ефект на издутина в крайна сметка. И след това върху обектите отпечатайте надписа. В оригиналната си форма нека има бял цвят, който ще съответства на нормалното състояние (фиг. 27), а след това, когато състоянието на преобръщане се промени, цветът на надписа ще се промени, например, на зелено, когато маркерът на мишката е задържа курсора на мишката върху него (състояние Над) и става син при натискане на бутона на мишката (състояние Надолу).
Обърнете внимание на палитрата Слоевена този етап има само един единствен слой. Направете две копия на този слой, като използвате командата Дублиране на слоя(Дублиране на слой) от менюто на палитрата Слоеве, ще има три слоя в палитрата (фиг. 28). След това в първото копие на слоя сменете цвета на надписа на зелено, а във второто на синьо (фиг. 29). В резултат на това ще се получи необходимата заготовка за преобръщане.
Експортирайте създаденото изображение в PSD формат със запазени слоеве с помощта на командата Файл=>Експортиране(Файл=>Експорт) и избиране на цветовия модел RGB (фиг. 30). Отворете създадения PSD файл в ImageReady (Фигури 31 и 32). Създайте рамки на базата на слоеве, като изберете командата Направете рамки от слоеве(Създаване на рамки от слоеве) от менюто на палитрата анимация. Прозорецът за анимация ще изглежда като на фиг. 33. В същото време в палитрата ПреобръщанияПървоначално ще бъде създадено едно нормално състояние.
После в прозореца анимацияизберете рамката, съответстваща на състоянието на задържане, докато сте в палитрата Слоевеслоят се избира автоматично Копие на слой 1(фиг. 34). Отидете на палитрата Преобръщанияи щракнете върху бутона Създайте състояние на преобръщане(Създаване на състояние на преобръщане) фиг. 35, което ще доведе до появата на държавата Над държаватав палитрата Преобръщания(фиг. 36). Създайте държавата по същия начин Държава надолу. Активиране на състоянието нормалнов палитрата Преобръщанияи изтрийте в палитрата анимациявсички рамки с изключение на тази, която трябва да съответства на състоянието нормално. В резултат на това за всяко състояние на преобръщане в палитрата анимацияще има само една рамка (фиг. 37, 38 и 39).
Ориз. 38. Изглед на изображението, прозореца за анимация и палетите за слоеве и преобръщания за състоянието на надписа
Проверете резултата, като щракнете върху бутона Преглед в браузъра по подразбиране(Преглед на браузъра) в лентата с инструменти и като отидете в прозореца на браузъра (Фигура 40). След това запишете файла с помощта на командата File=>Save Optimized(Файл=>Запазване с оптимизация) и посочване на опцията HTML и изображения (*.html). В резултат на това в този пример бяха получени файлът Primer4.html и серия от графични изображения в папката с изображения.
Ориз. 40. Прозорец на браузъра с елемент Rollover
SVG преобръщане
Набира популярност SVG формат(Мащабируема векторна графика, мащабируема векторна графика), създадена на базата на стандарта XML, също ви позволява да получавате различни интерактивни елементи, по-специално преобръщане, само че на практика това се изпълнява по съвсем различен начин. Заслужава да се отбележи, че създаването на интерактивни SVG превъртания, за разлика от класическите, когато съответният HTML код се генерира напълно автоматично, изисква познания JavaScript езики разбиране на основните принципи на обектно-ориентираното програмиране.
Специална палитра е предназначена за работа с SVG обекти. SVG интерактивност, който се отваря лесно с командата Window=>SVG Интерактивност(Прозорец=>SVG интерактивност) фиг. 41.
Обмисли тази опциясъздаване на преобръщане на примера на интерактивен бутон, цветът на етикета върху който ще се промени от черен на син, когато курсорът на мишката се задържи върху него, и отново ще стане черен, когато мишката напусне активната зона.
Създайте правоъгълен бутон със заоблени ръбове и изберете подходящо градиентно запълване за него, например, както е показано на фиг. 42. Регулирайте прозрачността на бутона в палитрата Прозрачност(Прозрачност) в този пример, стойността на параметъра Непрозрачност(Непрозрачност) е настроен на 50%. Направете копие на бутона, запълнете го с тъмно зелено (фиг. 43) и след това го преобразувайте в мрежест обект с командата Object=>Създаване на градиентна мрежа(Object=>Create Gradient Mesh) като посочите четири реда и десет колони и в списъка Външен вид(Преглед), като изберете опция Към центъра(Към центъра) и настройка на стойността подчертайте(Осветете) до 100. Намалете непрозрачността на слоя с мрежест обект до около 40% (Фигура 44). Поставете мрежестия обект върху градиентния обект и бутонът ще изглежда като този, показан на фиг. 45.
Ориз. 44. Превръщане на копие на бутон в мрежов обект
Допълнете бутона с желания надпис и коригирайте позицията му с помощта на съответните бутони на палитрата Подравнете(Подравняване). Полученото изображение ще съдържа един слой с три обекта, насложени един върху друг (фиг. 46). Насрочените събития ще се отнасят до текстов обект, така че за удобство променете името му на Тексткато щракнете двукратно върху обекта и въведете ново име. По същия начин променете името на слоя от От слой 1 до слой(фиг. 47).
Обработката на събития включва използването на JavaScript процедури, така че трябва да включите файл с описание на тези процедури. Нарича се Events.js и се записва на диска в папката Sample Files\Sample Art\SVG\SVG, когато е инсталиран Adobe Illustrator. За да включите файла Events.js, използвайте командата JavaScript файлове SVG интерактивност(фиг. 48). След това трябва да натиснете бутона Добавете(добавете) и намерете желания файлна твърдия диск. Когато името му се появи в полето URL адрес(фиг. 49), щракнете върху бутона Свършен(Излез).
Ориз. 48. Избиране на командата JavaScript файлове
След това трябва да определите реакцията на обекта към събитията с мишката Текст. Изберете обекта Text в полето събитие(Събитие) палитри SVG интерактивностизберете събитие върху мишката върху elemColor(evt, "Текст", "#3333FF")това ще означава, че когато мишката е над обекта Текстцветът му ще се промени на син (фиг. 50). За да може цветът на текста да се промени в черен, след като мишката напусне активната зона, трябва да създадете още едно събитие onmouseoutизберете го в полето събитие(Събитие) палитри SVG интерактивност. След това в реда за действие въведете текста elemColor(evt, "Текст", "#000000")това ще върне черно (фиг. 51).
Ориз. 51. Крайният вид на палитрата SVG Interactivity за обект Text
Запазете генерираното преобръщане като SVG файл с командата Файл=>Запиши като(Файл=> Тип файлформат SVG, и след това задаване на опциите за запазване на SVG файла, както е показано на фиг. 52. След записване ще се получи само един файл с разширение SVG, а не два, както при класическото преобръщане, в този случай се получава файлът Primer5.svg (папка Primer5). Но за да работи преобръщането наистина, трябва допълнително да копирате файла Events.js с описанието на JavaScript процедурите в папката със SVG файла. След това можете да проверите ефективността на преобръщането, резултатът ще изглежда както е показано на фиг. 53.
SVG анимация
Форматът SVG може да се използва и за предаване на анимация. Нека се опитаме да създадем прост анимационен елемент (в този случай това ще бъде информация за компанията), който ще се появи на екрана, когато мишката се задържи над съответния графичен обект и ще изчезне, когато мишката бъде премахната от интерактивния елемент.
Нека създадем приблизително такава серия от графични и текстови обекти, както е показано на фиг. 54. Преименувайте всички създадени обекти по удобен начин, като последователно щракнете върху името на следващия обект в палитрата Слоевеи въвеждане на желаното име (фиг. 55). Обърнете внимание, че подчертаното на фиг. 56 елемента Текст1, Текст2, Текст3И Път1винаги ще се виждат, а всички останали само когато задържите курсора на мишката върху обекта Текст1.
Ориз. 54. Оригинален изглед на изображението
Включете файла Events.js с описание на процедурите на JavaScript, като използвате командата JavaScript файлове(JavaScript файлове) от палета SVG интерактивностчрез натискане на бутона Добавете(Добавяне), като изберете желания файл на твърдия диск и щракнете върху бутона Свършен(Излез).
Дефинирайте реакция на събитие на мишката за обект Текст1. Изберете обект Текст, в полето събитие(Събитие) палитри SVG интерактивностизберете събитие върху мишката върхуи в реда по-долу въведете текста elemShow(evt, "Текст4"); elemShow(evt, "Път 2"). В резултат на това, когато мишката е над обекта Текст1обектите ще станат видими Текст4И Път 2. Моля, обърнете внимание, че ако трябва да се извършат няколко действия при възникване на събитие, те трябва да бъдат посочени чрез знака „;“. След това направете същото за събитието onmouseout, като въведете текста за него, което ще означава скриване на обекти (фиг. 57).
Запазете резултата като SVG файл с командата Файл=>Запиши като(Файл=>Запиши като), посочване на името на файла, избиране в полето Тип файл SVG формат и след това настройка на опциите за запазване на SVG файла в съответствие с фиг. 58. След записване ще се получи файлът Primer6.svg (папка Primer6). Не забравяйте да копирате файла Events.js в папката с този файл. Ако след това стартирате coz даден файл, ще видите резултата, показан на фиг. 59. Това е почти това, от което се нуждаете. Единственото нещо, което не беше включено в нашите планове, беше първоначалният външен вид на обектите Текст 4 и Пътека 2 при зареждане. За да се отървете от този недостатък, изберете двата обекта наведнъж и създайте действие за тях elemHide(evt, "Текст4"); elemHide(evt, "Път2")на събитието зареждане(фиг. 60). Запазете файла отново и се уверете, че обектите са вече Текст4И Път 2се вижда само при задържане на мишката над обекта Текст1.
GIF анимация
Всяка уеб страница е немислима без уеб анимация, включително анимирани GIF файлове. Един от начините да ги създадете е да използвате приложението Adobe ImageReady, което освен всичко друго ви позволява да създавате анимация от слоеве. В този случай може да се подготви самото многослойно изображение различни приложения, включително в Adobe Illustrator.
Много е лесно да създадете анимация, базирана на елементи от палитрата Символи(Символи), отворени от командата Прозорец=>Символи(Прозорец=>Символи) или от една от библиотеките със символи, които могат да бъдат отворени с помощта на командата Прозорец=>Библиотеки със символи(Прозорец=>Библиотеки със символи).
Например, нека се опитаме да увеличим размера на всеки обект-символ, ключовите етапи на процеса на увеличаване на обекта трябва да бъдат зададени на отделни слоеве. Първо, просто поставете символните обекти един над друг и след това увеличете размера на всеки следващ обект, например, както е показано на фиг. 61. В резултат на това в палитрата Слоевеще бъде създаден един слой с много обекти (фиг. 62). Ако директно експортирате това изображение в PSD формат, това няма да работи, тъй като има само един слой и естествено, когато отворите PSD файла в ImageReady, също ще има само един слой. Следователно първо трябва да поставите обекти на различни слоеве. Това може да се направи различни начининай-лесният начин е първо да изберете слоя Слой 1в палитрата на слоевете и използвайте командата Освобождаване на слой(Освобождаване на слоеве). Резултатът ще бъде преместване на всеки от обектите в неговия собствен слой, но всички те ще бъдат вложени в слоя Слой 1. Следователно ще трябва ръчно да плъзнете всички вложени слоеве в горната част на палитрата със слоеве, така че да са над слоя Слой 1, а след това празния слой Слой 1лесно се отстранява (фиг. 63). Експортирайте изображението в PSD формат с помощта на командата Файл=>Експортиране(File=>Export) с настройки като на фиг. 64.
Заредете създадения PSD файл в програмата ImageReady (фиг. 65 и 66). Отворете менюто на палитрата анимацияНаправете рамки от слоеве(Създайте рамки от слоеве). В резултат на това ще бъдат създадени пет кадъра, всеки от които ще съответства на своя слой и прозореца на палитрата анимацияще изглежда като на фиг. 67.
След това задайте продължителността на всеки от създадените кадри, в този случай продължителността на всички кадри е зададена на 0,2 s. И след това запазете оптимизираната анимация с командата File=>Save Optimized(Файл=>Запазване с оптимизация). Полученият резултат може да прилича на фиг. 68.
Още по-удобно е да използвате функциите Живи смесиСофтуер Illustrator. Тази комбинирана употреба на Illustrator и ImageReady значително ускорява процеса на създаване на GIF анимации.
Например, нарисувайте два произволни многоцветни обекта и след това ги смесете с подходящите параметри (фиг. 69). Невъзможно е този файл да се използва директно за създаване на анимация, тъй като изображението е разположено на един слой (фиг. 70). Следователно, първо ще трябва да поставите всеки елемент от обекта на смесване на отделен слой. За да направите това, в прозореца Слоевемаркирайте линията
Ориз. 70. Първоначално състояние на прозореца на слоевете
Експортирайте създадения файл в PSD формат с командата Файл=>Експортиране(Файл=>Експортиране). Отворете създадения PSD файл в ImageReady (фиг. 73). Моля, обърнете внимание, че всички слоеве, създадени в програмата Illustrator, ще се появят в прозореца на слоевете (фиг. 74), а в прозореца анимацияще има само една рамка.
Активирайте менюто на палитрата анимация, като щракнете върху черната стрелка в горния десен ъгъл на палитрата и изберете командата Направете рамки от слоеве(Създайте рамки от слоеве) в крайна сметка, в този пример ще бъдат създадени пет рамки и прозорецът на палитрата анимацияще приеме формата в съответствие с фиг. 75. Изберете всички кадри, като задържите клавиша Shiftи задайте подходяща продължителност на кадъра в този пример, същото време от 0,2 s се взема за всеки от кадърите. След това запазете файла с командата за оптимизация File=>Save Optimized(Файл=>Запазване с оптимизация) настройка в списъка Тип файлопция Само изображения (*.gif). Анимацията ще прилича на фиг. 76.
Много по-интересно е не движението, а плавното преоразмеряване на смесените обекти. Например, можете да използвате вече създадения смесен преход. В този случай, след като създадете отделни слоеве за всеки елемент от прехода на смесване, поставете всички обекти един върху друг с помощта на бутоните Хоризонтално центриране(Подравняване спрямо хоризонталния център) и Централно вертикално подравняване(Вертикално централно подравняване) палитри Подравнете(фиг. 77).
Експортирайте създадения файл в PSD формат ( Файл=>Експортиране File=>Export) и отворете създадения PSD файл в програмата ImageReady (фиг. 78). Създайте рамки за анимация на базата на слоеве ( Направете рамки от слоевеСъздайте рамки от слоеве) и изберете подходящата продължителност за тях (фиг. 79). И след това, за да направите анимацията по-ефективна, копирайте съществуващите кадри, но в обратен ред, така че изображението първо да се увеличава, а след това да намалява и така нататък в кръг (фиг. 80). След това запазете файла за оптимизация ( File=>Save OptimizedФайл=>Запазване с оптимизация). Получената анимация е показана на фиг. 81.
Ориз. 80. Състояние на прозореца за анимация след дублиране на кадри
Ориз. 81. Готова анимация
Здравейте всички! Днес ще се опитам да направя описание на функциите на програмата Adobe Illustrator, сравнявайки го с възможностите на флъш. Това няма да бъде глобален анализ на костната програма, а по-скоро описание на някои от интересните чипове, които открих в тази програма. Събирах информация част по част, докато я изучавах, за да я събера цялата в един пост. Веднага трябва да призная, че не съм супер опитен потребител на илюстратор, само през последните шест месеца го използвам в рисуването (преди това рисувах всичко във флаш). Мнозина се оплакват, че илюстраторът е сложен, не винаги интуитивен. До известна степен съм съгласен, че след флаш тази програма е трудна. Но основното тук не е да се откажеш, а да продължиш да учиш. И след няколко седмици възниква мисълта, как се справих без него преди!
И така, какво ми хареса в илюстратора и какво открих за себе си, което не е във флаш.
1. Ще започна с най-простото, но в същото време необходимо. Опитайте се да подредите обекти в кръг във флаш. Преди беше Деко инструмент, но беше премахнат, очевидно счетен за ненужен. Решихме, че ще е по-забавно да го направим на ръка. Illustrator има тази функция: Ефект - Изкривяване и трансформиране - Трансформация.
Всичко е бързо и просто, ние сами задаваме стойностите (разстояние между обектите, брой копия) в настройките.
2. Зигзаг
Още по-просто, но все пак полезно нещо. Изглежда дреболия, но във флаш трябва да рисувате на ръка, в илюстратор това е въпрос на секунди.
3. Деформация на обекти (Warp)
Във Flash няма нищо подобно. В примера по-долу показах само 2 начина за деформиране на прости форми (Ефект - Деформация - Дъга / Риба). Всъщност има 15 от тях. последна версияпрограми.
4. Автоматично заобляне на ъгли (Round Corners)
Може да се направи ръчно: върху графичен обект, когато се избере в ъгъл (във всички ъгли), се появява бяла точка и знак със заоблена линия. Плъзнете мишката, настройте според вашия вкус.
Но това се отнася само за форми, с линия с молив малко по-различно - приложете ефекта на закръгляване ( Ефект - Стилизиране - Заоблени ъгли). На изхода получаваме същия резултат.
5. Нагрубете
Ефектът се прилага към прости форми ( Ефект-Изкривяване&Трансформиране-Огрубяване). В резултат на това получаваме нещо подобно на нискополигонални 3D модели. Мисля, че е готино :) И най-важното - много просто.
6 Набръчкване и подуване(Издърпайте и надуйте)
Пример на снимката по-долу:
7. Разширение на формуляр (Offset Path)
Във флаш има функция Expand Fill (разширение за запълване), тя изобщо не работи с линии с молив, за разлика от илюстратора.
8. Четки (четка за изкуства, четка за шаблони, четка за разпръскване)
Вижте снимката по-долу за примери:
9. Четка за текстура (четки за текстура)
Има и много текстурни четки в illustrator, за които писах и как се появиха в новата версия на flash - . Забелязано е, че използването на четки в Adobe Animate е ужасно бавно. Това е:(
10. Не съм сигурен дали това е трик, но искам да се съсредоточа върху четка със смешно име петноЧетка. Намира се в лентата с инструменти, много приятна четка за използване. Има куп настройки, харесва ми повече от обикновено. Трудно е да се обяснят ползите му с думи, по-добре е да го опитате веднъж.
10.Split to Grid
Друга полезна функция е функцията Split to Grid (Object-Path-Split to Grid).Тя ви позволява да изрежете формата на равни сегменти. Какво ни напомня това? Точно така - прозорци в многоетажна сграда. Що се отнася до мен, страхотно нещо за рисуване, например, на градски пейзажи;)
Друг полезен инструмент, представен в илюстратор, вероятно от първото му издание. С него можете да създавате например дървесни текстури:
12. Преместване (надясно - Трансформация - Преместване)
Изместване на обект на дадено разстояние. Ако желаете, можете веднага да създадете копие, което ще бъде поставено на желаното разстояние от избрания обект хоризонтално / или вертикално. По-ранна версия на flash имаше плъгин, който го правеше тази функция. За съжаление не помня името му.
Много е удобно да създавате безшевни шаблони в illustrator ( Object-Pattern-Make). Спомням си как трескаво превъзхождах във флаш със създаването на . В илюстраторската версия на CC 2015 всичко е автоматизирано, куп настройки ще ви помогнат да създадете модел в десетки варианти, само с няколко графични елемента под ръка. В по-ранните версии на програмата всичко трябваше да се прави ръчно, както във флаш досега.
(Забележка - моделът може да бъде направен като векторен редактируем обект с помощта на функцията за анализ ( Външен вид за разширяване на обекта).
14. Обектна мозайка (мозайка)
Създайте цветова палитра въз основа на съществуващо изображение. След това импортирайте снимката, която харесвате, в илюстрацията (Отворете). Обект - Създаване на обектна мозайка. В настройките определяме честотата на разделяне по височина и ширина.
И на изхода получаваме:
15. Смесване (смесване)
Използва се за създаване на градиенти. Можете да създавате преходи стъпка по стъпка, както например на снимката. Не мога да кажа, че го използвам често, но може да е полезно на някого. Струва ми се, че може да се използва за създаване на прости фонови снимки.
Инструментът може да се използва и за клониране на обекти. Поставяме два обекта на разстояние един от друг и прилагаме Blend Options, избираме броя на стъпките (броя на клонираните обекти).
16. Инструмент за изграждане на форма.Много удобно нещо за работа с примитиви. В светкавица, както ми се стори, е по-малко удобно.
Задържане на Alt и щракване върху избраните сегменти - изтриване на сегментите. Ако просто плъзнем мишката върху няколко избрани области - връзки.
Добавка - инструмент, който помага за автоматично изрязване, свързване и т.н. избрани форми. Що се отнася до мен, не е много удобно, използвам го по-често Изгражданеформаинструмент.
(артбордове)
18.Панел с персонализирани инструменти
Възможността да създадете своя собствена лента с инструменти, като изхвърлите ненужните и изберете само тези, които използвате.
Във флаш, артбордове, а именно сцени ( Сцена 1,2,3..) се намират отделно и трябва да превключвате между тях (Shift + F2). В illustrator всички те могат да бъдат позиционирани пред очите ви. Удобно е, когато правите няколко версии на един и същи чертеж, така че всички опции да са пред очите ви за сравнение.
19. Изометрични с графични стилове
И последното нещо е създаването на изометрия без използване на 1 щракване (или по-скоро 3 щраквания, защото имаме 3 страни;) с помощта на графични стилове ( Графични стилове). Как става това, ще пиша следващия път.
Това, което илюстраторът има общо с флаш, е възможността да запише обект в символ (символ) и този символ може също да бъде прехвърлен на флаш без проблеми (отворете .ai файл във флаш, от Импортиране - Импортиране на сцената).
Символът в illustrator има същите свойства като във flash.
И накрая ще напиша какво в илюстратора според мен е по-лошо от флаш. Да, да, и има. И това е инструментът за запълване ( кофа с боя). Колкото и да се опитвам да свикна в illa, във флаш е по-удобно.
Ако моите бележки са ви били полезни или искате да добавите нещо сами - добре дошли в коментарите! Успех на всички ;)
Имате една или две икони, които бихте искали да съживите с анимация. Откъде бихте започнали? Да приемем, че имате SVG файлове, Illustrator CC и After Effects CC, но решението ви убягва.
В тази статия ще ви покажа как лесно да анимирате SVG файл, включително да подготвите SVG файла в Illustrator и да го импортирате в After Effects CC. Ще обясня също как можете да го конвертирате в слоеве с фигури и да добавите движение. И накрая, нека поговорим за експортиране и изобразяване.
Крайният резултат от работата.
Сега нека преминем към най-интересната част - да научите как да анимирате изображения.
Подготовка на SVG файла в Illustrator
Нека започнем, като отворим вашия SVG файл в Adobe Illustrator CC. Ще анимирам малка икона на кола, която е достъпна безплатно на Week Of Icons.
След като отворим файла, трябва да разгрупираме и разделим всички обекти на слоеве. Можете да го направите ръчно или да използвате Освобождаване на слоеве (последователност)за ускоряване на процеса. Преди да импортираме файла в After Effects, трябва да го запазим като файлов формат на Illustrator.
Можем да разгрупираме обекти с помощта на Release to Layers (Sequence), за да не губим ценно време. Импортиране и организиране на файл в After Effects CC
Вече сте готови да импортирате в After Effects CC. Нека използваме клавишна комбинация Ctrl+I (Windows)или Command+I (Mac)за зареждане на диалогов прозорец файл за импортиране, или отидете на Файл > Импортиране > Файл...На същото място изберете файла Illustrator CC, който подготвихме, и щракнете импортиране.Трябва да се появи малък диалогов прозорец с името на избрания файл. Изберете съставот извикания падащ списък Вид импортиране.
| Повече ▼ бърз начинимпортиране на файл - щракнете двукратно върху мястото на колоната в панела на проекта. В панела Timeline ще видим новата композиция. Щракваме два пъти върху него. Сега трябва да видим слоеве на Illustrator CC с оранжеви икони вляво от техните имена.
Преди да се заемем с работата, трябва да конвертираме всички тези слоеве в формиращи слоеве. Трябва да ги изберем всички с Ctrl+A/Command+A, или ръчно използване Shift + лявата мишка. След това щракнете с десния бутон върху слоя и изберете Създаване > Създаване на форми от векторен слой.
Сега, когато новите слоеве са избрани, плъзнете ги в горната част на панела над слоевете на Illustrator CC и след това изтрийте слоевете на Illustrator CC, така че да не ви пречат.
Преобразуване на слоеве на Illustrator CC в слоеве с фигури в After Effects CC Въпреки че не е необходимо, важно е да дадем на всеки слой подходящо име и/или цвят. Това ще ни позволи да работим по-ефективно, докато се фокусираме върху ключови кадри. В примера по-долу цветовете на етикетите повече или по-малко съвпадат със запълването на съответните им слоеве.
Етикетирането на слоеве с фигури с подходящи имена, цветове, етикети и позиции е много практично. Използвайте клавишната комбинация, за да конфигурирате настройките Ctrl+K/Command+Kили Композиция > Настройки на композицията...От Composition Settings трябва да изберем Width, Height, Frame Rate и Duration за ширина, височина, Frame Rate и Duration. За този проект избрах 60 fps, за да поддържам анимацията гладка.
На този моментвсичко изглежда готово за работа, но има още нещо, което трябва да се направи. Трябва да групираме определени слоеве заедно, така че техните движения да са в синхрон с основния слой, който можем да контролираме. Този метод се нарича родителство.
Използвайте Pick Whip, за да зададете родителски слой на множество слоеве. В нашия пример присвоих по-малко значими слоеве (дъщерни слоеве) като предно стъкло, части от тялото, дърво и въжета към основния слой на тялото (родителски слой). Това ми позволи да контролирам позицията и въртенето на цялата кола (с изключение на колелата) с помощта на родителския слой.
Създаване на анимация
Исках колата да се удари в камък и да виси във въздуха за малко. Освен това исках дървото да се движи нагоре-надолу и да отваря ствола. Започнах с изграждането на камъка, колата и колелата. След това беше време да преодолеем най-голямото препятствие - да поставим действието на дървото. След като това беше направено, започнах да работя върху малките детайли като багажника и въжетата.
Скица, описваща анимацията Първата стъпка беше да направя скален елемент или слой, но вместо да се върна към Illustrator CC, за да добавя друг слой, просто използвах Pen Tool в After Effects CC. Това ми позволи бързо да проектирам малък камък.
О, могъщ Pen Tool! Багажникът беше сравнително проста задача. Инсталирах го в задната част на колата и направих опорна точка в долния ляв връх. Използвайки Pick Whip, го присвоих на родителския слой на тялото. Предпоследната стъпка беше да се даде ефект на въртене, което от своя страна направи моментът на подскачане на колата по-реалистичен Bodymovin в комбинация с мобилната библиотека Lottie.
P.S.можете да намерите моите Illustrator CC и After Effects CC файлове.
Комплектът икони е достъпен за безплатно изтегляне на адрес.
Днес имаме не съвсем обичайното Adobe урокИлюстратор. Защото този път няма да правим статична картина, а истинска анимация. Представете си, оказва се, че с помощта на Adobe Illustrator можете да рисувате и карикатури :)
И не ни трябва нищо за това. Компетентна организация на слоевете и експортиране на крайната работа в swf формат, където всеки слой се преобразува в рамка за анимация. В днешния урок ще нарисуваме анимация за обратно броене в стил ретро филм. Резултатът трябва да бъде флаш филм със същото обратно броене.
Първото нещо, което трябва да направите, е да нарисувате всички необходими елементи за бъдеща анимация. За да направя това, направих две позиции на филмовата рамка в отделен документ, кръг за справка, който е нарязан на отделни сектори, текстура и вертикален скреч за добавяне на ефекта на античността, както и всички цифри и надписи.
Когато всички части на нашия анимационен филм са готови, можете да започнете да създавате самата анимация. За удобство това е най-добре да се направи в нов документ. В този случай слоевете ще играят ролята на рамки за анимация. И в първия слой просто трябва да копирате рамката на филма. Поставете го в средата на работната зона.
Сега създайте втори слой и копирайте рамката на филма в него, в която дупките по краищата са направени с изместване. Той също трябва да бъде центриран.
От тези два слоя вече можете да получите анимацията на движещ се филм. Но по-късно ще ни трябват много повече слоеве. Така че изберете първите два слоя, отидете на опциите на панела и направете копие на слоевете.
По подобен начин трябва да натрупаме 12 слоя с филмови рамки, които определят неговото движение.
Сега имаме цял куп слоеве и всички те са видими. В смисъл, че горните слоеве блокират долните, което не е много удобно за работа. Следователно можете да изключите някои слоеве, като щракнете върху иконата на око вляво от името на слоя. За да изключите или включите всички слоеве наведнъж, задръжте натиснат клавиша Alt, докато щракнете върху иконата на око. Включвайки и изключвайки слоевете, можете да видите точно какво се намира в определена рамка от нашата бъдеща анимация. И сега, за да добавим леко разклащане към движението на филма, трябва малко да преместим получените кадри различни страни. За да направите това, включете само слоя, с който ще работите в момента, и след това преместете рамката с няколко пиксела във всяка посока.
Когато сте преминали през всички слоеве и сте добавили малко отместване, можете да започнете да създавате анимацията на движещия се кръг. За да направите това, копирайте кръга, състоящ се от сектори, от документа с части от карикатура и го поставете върху първия слой върху рамката на филма.
Ако премахнете селекцията от кръга, тогава тя ще изглежда като едно цяло. Точно това ни трябва.
Но тъй като се състои от отделни сектори, е възможно чрез промяна на цвета им да се създаде анимация много бързо и лесно. За да направите това, копирайте този кръг на втория слой и направете първия сектор по-светъл. Спомняте си, че филмът се тресе по време на движение, така че не е необходимо да поставяте кръга точно в центъра на рамката. Поставете го върху окото.
По същия начин трябва да копирате кръга на всеки следващ слой, докато рисувате с по-светъл цвят един сектор повече от предишния път. Заедно тези 12 слоя образуват анимация на движението на филма със запълващ кръг.
След това трябва да добавим текстура към нашите слоеве. Включете първия слой и копирайте текстурата от изходния файл с резервни части там.
След това включете следващите слоеве на свой ред и копирайте същата текстура там. За да изглежда различно на всеки кадър, просто го завъртете на 90 градуса. Както може би се досещате, трябва да добавим текстура към всичките 12 кадъра.
Ако вече сте доста уморени от копиране, тогава мога да ви зарадвам - остана много малко. Най-трудното свърши. Остава да добавите вертикални драскотини и почти всичко. За да направите това, отново копирайте оригиналната драскотина и я поставете на произволно място на няколко слоя. В моя случай драскотините се появяват само на два слоя.
Сега, когато основният цикъл с филмовата анимация е готов, остава да добавим числата. Тъй като броим от 3 до 1 плюс думата Go!!!, имаме нужда от още повече слоеве. Не 12, а цели 48. За да направите това, трябва да направите още три копия на готови слоеве с филмова анимация.
И тогава всичко е просто. Включете първия слой и поставете числото три там.
След това трябва да копирате тази фигура на следващите слоеве, докато анимацията на кръга приключи. Когато стигнете до следващото копие на слоевете, където кръгът отново ще бъде напълно запълнен, трябва да поставите номер две. По същия начин копирайте числото едно в желаните слоеве. И когато стигнете до финалните слоеве за етикета Go!!!, просто изтрийте кръга, преди да копирате етикета върху желания слой.
Това е всичко с анимацията. Основното тук е да не се объркате. Можете да дадете на слоевете някои удобни имена, но някак си бях твърде мързелив :) И все пак, когато сте готови, не забравяйте да включите отново всички слоеве, като щракнете върху иконата на окото.
В прозореца с настройки за експортиране не забравяйте да зададете Експортиране като: AI слоеве към SWF рамки. Именно тази опция превръща слоевете на Illustrator в рамки за анимация. След това щракнете върху бутона Разширени.
Ще отвори допълнителни настройки. Тук трябва да зададете честотата на кадрите. Имам 12 кадъра в секунда. Квадратчето Looping отговаря за цикъла на анимацията. Благодарение на нея видеото ще се възпроизвежда в кръг. А опцията Layer Order: Bottom Up изобразява слоевете на илюстратора отдолу нагоре в панела. Точно така изградихме нашата анимация.
В резултат на това получаваме флаш филм с нашата анимация.
Сега виждате това проста анимацияправенето в Adobe Illustrator не е толкова трудно, колкото изглежда на пръв поглед.
Но за създаване на дълги видеоклипове или интерактивни приложения все още е по-добре да се използва Adobe Flashили други флаш редактори. Например, направих тази котка в стара Macromedia Flashкоито изрових на работа.
Освен това напоследък HTML5 и CSS3 се използват все по-често за създаване на анимация. Даден кодподдържан модерни браузърии не изисква използването на флаш плеър.
Римски известен още като dacascasособено за блога
Абонирайте се за нашия бюлетин, за да не пропуснете нищо ново:
формат Flash файл(SWF) въз основа на векторни графикии е предназначен за мащабируема, компактна графика за уеб. Тъй като този файлов формат е базиран на векторна графика, обектът запазва качеството на изображението при всяка резолюция и е идеален за създаване на анимационни рамки. В Illustrator можете да създавате отделни рамки за анимация върху слоеве и след това да експортирате слоевете с изображения като отделни рамки за използване в уебсайта. Можете също така да определите символивъв файл на Illustrator, за да намалите размера на анимацията. Когато се експортира, всеки символ се дефинира само веднъж в SWF файла.
Команда за експортиране (SWF)
Осигурява най-голям контрол върху анимацията и битовата компресия.
Осигурява повече контрол върху комбинацията от SWF и растерни формати във фрагментирано оформление. Тази команда предлага по-малко опции за изображения от командата Експортиране (SWF), но използва най-скоро използваните опции за команда Експортиране (вижте ).
Имайте предвид следните насоки, когато подготвяте обект за запис като SWF.
Като се използва Устройство с приложенияВ центъра можете да видите как ще изглежда графика на 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 Workspace. area" или " Файл" > "Импортиране в библиотека".
Ако файлът на Illustrator съдържа няколко артборда, изберете артборда за импортиране от диалоговия прозорец за импортиране на Flash и задайте настройките за всеки слой в този артборд. Всички обекти в избрания артборд се импортират в Флаш програмакато един слой. Когато импортирате друг артборд от същия AI файл, обектите от този артборд се импортират във Flash като нов слой.
Когато импортирате произведение на изкуството на Illustrator като AI, EPS или PDF файлове, Flash запазва същите атрибути, както когато го поставите графични обектиИлюстратор. Също така, ако файлът на Illustrator, който импортирате, съдържа слоеве, можете да ги импортирате, като използвате един от следните методи.
Преобразувайте слоеве на Illustrator във Flash слоеве.
Преобразувайте слоеве на Illustrator във Flash рамки.
Преобразувайте всички слоеве на Illustrator в един Flash слой.