Hoe animatie te maken in Adobe Illustrator. Tips en trucs in Adobe Illustrator: Trucs in Illustrator. Mogelijkheden voor het maken van afbeeldingen in Illustrator (vergeleken met Adobe Flash) Hoe maak je GIF-animatie in Illustrator

Het Flash-bestandsformaat (SWF) is gebaseerd op vectorafbeeldingen en is ontworpen voor schaalbare, compacte afbeeldingen voor internet. Omdat dit bestandsformaat is gebaseerd op vectorafbeeldingen, behoudt het object de beeldkwaliteit bij elke resolutie en is het ideaal voor het maken van animatieframes. In Illustrator kunt u afzonderlijke animatieframes op lagen maken en de afbeeldingslagen vervolgens exporteren als afzonderlijke frames voor gebruik op uw website. Je kunt ook definiëren symbolen in het Illustrator-bestand om de grootte van de animatie te verkleinen. Bij het exporteren wordt elk symbool slechts één keer gedefinieerd in het SWF-bestand.

Exportopdracht (SWF)

Biedt de meeste controle over animatie en bitcompressie.

Biedt meer controle over de mix van SWF- en bitmapformaten in een gefragmenteerde lay-out. Deze opdracht biedt minder afbeeldingsopties dan de opdracht Exporteren (SWF), maar gebruikt de laatst gebruikte opdrachtopties voor Exporteren (zie ).

Houd bij het voorbereiden van een object voor opslag in SWF-indeling rekening met de volgende richtlijnen.

Met Device Central kunt u zien hoe uw Illustrator-illustraties er in Flash Player uitzien op verschillende draagbare apparaten.

Een Illustrator-afbeelding invoegen

Een afbeelding die in Illustrator is gemaakt, kan snel, eenvoudig en gemakkelijk in Flash worden gekopieerd en geplakt.

Wanneer u een Illustrator-afbeelding in een Flash-toepassing invoegt, blijven de volgende kenmerken behouden.

Omtrekken en vormen

Slagdikte
Definities van gradiënten
Tekst (inclusief OpenType-lettertypen)
Gerelateerde afbeeldingen
Mengmodi

Bovendien ondersteunen Illustrator en Flash de volgende opties bij het invoegen van een afbeelding.

Wanneer u volledige lagen op het hoogste niveau in een Illustrator-afbeelding selecteert en deze in een Flash-toepassing plakt, blijven de lagen en hun eigenschappen (zichtbaarheid en vergrendeling) behouden.

Andere Illustrator-kleurformaten dan RGB (CMYK, grijstinten en aangepaste formaten) worden door Flash naar RGB geconverteerd. RGB-kleuren worden zoals gebruikelijk ingevoegd.

Wanneer u een Illustrator-afbeelding importeert of invoegt, kunt u verschillende opties gebruiken om bepaalde effecten (zoals tekstschaduwen) op te slaan als Flash-filters.

Flash behoudt Illustrator-maskers.

Exporteer SWF-bestanden vanuit Illustrator

SWF-bestanden die uit Illustrator worden geëxporteerd, komen overeen met de kwaliteit en compressieverhouding van SWF-bestanden die uit Flash worden geëxporteerd.

Wanneer u exporteert, kunt u kiezen uit een groot aantal vooraf gedefinieerde stijlen voor optimale uitvoer, en opgeven hoe u meerdere tekengebieden wilt gebruiken en hoe u symbolen, lagen, tekst en maskers wilt transformeren. U kunt er bijvoorbeeld voor kiezen Illustrator-symbolen te exporteren als films of afbeeldingen, of SWF-symbolen te maken op basis van Illustrator-lagen.

Illustrator-bestanden importeren in een Flash-toepassing

Als u een volledige lay-out in Illustrator wilt maken en deze vervolgens in één stap in Flash wilt importeren, kunt u de illustraties opslaan in de oorspronkelijke (AI)-indeling van Illustrator en deze met precisie importeren in Flash met behulp van de opdrachten Bestand > Importeren naar Workbench " > "Importeren naar bibliotheek".

Als uw Illustrator-bestand meerdere tekengebieden bevat, selecteert u het tekengebied dat u wilt importeren in het dialoogvenster Importeren van Flash en geeft u instellingen op voor elke laag in dat tekengebied. Alle objecten in het geselecteerde tekengebied worden als één laag in Flash geïmporteerd. Wanneer u een ander tekengebied uit hetzelfde AI-bestand importeert, worden de objecten in dat tekengebied als een nieuwe laag in Flash geïmporteerd.

Wanneer u een Illustrator-afbeelding importeert als AI-, EPS- of PDF-bestand, behoudt Flash dezelfde kenmerken als wanneer u een Illustrator-afbeelding invoegt. Als het Illustrator-bestand dat u importeert lagen bevat, kunt u deze bovendien op een van de volgende manieren importeren.

Converteer Illustrator-lagen naar Flash-lagen.

Converteer Illustrator-lagen naar Flash-frames.

Converteer alle Illustrator-lagen naar één Flash-laag.

Je hebt een of twee pictogrammen die je tot leven wilt brengen met animatie. Waar zou je beginnen? Stel dat u SVG-bestanden, Illustrator CC en After Effects CC heeft, maar de oplossing ontgaat u.

In dit artikel ga ik demonstreren hoe je eenvoudig een SVG-bestand kunt animeren, inclusief het voorbereiden van het SVG-bestand in Illustrator en het importeren ervan in After Effects CC. Ik zal ook uitleggen hoe je het naar vormlagen kunt converteren en beweging kunt toevoegen. Laten we het ten slotte hebben over exporteren en renderen.

Het eindresultaat van het werk.

Laten we nu naar het leuke gedeelte gaan: leren hoe je afbeeldingen tot leven kunt brengen.

Een SVG-bestand voorbereiden in Illustrator

Laten we beginnen met het openen van uw SVG-bestand in Adobe Illustrator CC. Ik ga een klein autopictogram animeren dat gratis beschikbaar is op Week Of Icons.

Nadat we het bestand hebben geopend, moeten we alle objecten degroeperen en in lagen verdelen. U kunt dit handmatig doen of gebruiken Vrijgeven naar lagen (reeks) om het proces te versnellen. Voordat we het bestand in After Effects importeren, moeten we het opslaan als een Illustrator-bestandsformaat.

We kunnen objecten degroeperen met behulp van Release to Layers (Sequence) om geen kostbare tijd te verspillen.

Importeer en organiseer een bestand in After Effects CC

Nu bent u klaar om te importeren in After Effects CC. Laten we de sneltoets gebruiken Ctrl+I (Windows) of Commando+I (Mac) om het dialoogvenster te laden Bestand importeren, of ga naar Bestand > Importeren > Bestand… Selecteer daar het Illustrator CC-bestand dat we hebben voorbereid en klik Importeren. Er zou een klein dialoogvenster moeten verschijnen met de naam van het geselecteerde bestand. Selecteer Samenstelling uit de vervolgkeuzelijst genaamd Soort importeren.

Een snellere manier om een bestand te importeren is door te dubbelklikken op de kolomlocatie in het projectpaneel.

In het Tijdlijnpaneel zien we een nieuwe compositie. Dubbelklik erop. We zouden nu de Illustrator CC-lagen moeten zien met oranje pictogrammen links van hun namen.

Voordat we beginnen, moeten we al deze lagen converteren naar Vormlagen. We moeten ze allemaal selecteren met Ctrl+A/Command+A of handmatig gebruiken Shift + linkermuisknop. Klik daarna met de rechtermuisknop op de laag en selecteer Maken> Vormen maken van vectorlaag.

Nu de nieuwe lagen zijn geselecteerd, sleept u ze naar de bovenkant van het paneel boven de Illustrator CC-lagen en verwijdert u vervolgens de Illustrator CC-lagen zodat ze niet in de weg zitten.

Converteer Illustrator CC-lagen naar vormlagen in After Effects CC

Hoewel dit niet nodig is, is het wel belangrijk dat we elke laag een passende naam en/of kleurcode geven. Hierdoor kunnen we efficiënter werken omdat we ons concentreren op sleutelpersoneel. In het onderstaande voorbeeld komen de kleuren van de labels min of meer overeen met de vulling van de overeenkomstige lagen.

Het labelen van vormlagen met de juiste namen, kleuren, tekst en plaatsing is erg praktisch.

Gebruik de sneltoets om instellingen te configureren Ctrl+K/Command+K of Compositie > Compositie-instellingen… Vanuit Compositie-instellingen moeten we Breedte, Hoogte, Framesnelheid en Duur selecteren. Voor dit project heb ik gekozen voor 60 frames per seconde om de animatie vloeiend te houden.

Op dit moment lijkt alles gereed te zijn, maar er moet nog één ding gedaan worden. We moeten bepaalde lagen groeperen, zodat hun bewegingen synchroon lopen met de hoofdlaag, die we kunnen controleren. Deze methode heet Ouderschap.

Gebruik Pick Whip om een bovenliggende laag aan meerdere lagen toe te wijzen.

In ons voorbeeld heb ik minder belangrijke lagen (onderliggende lagen), zoals de voorruit, lichaamsdelen, hout en touwen, toegewezen aan de primaire lichaamslaag (bovenliggende laag). Hierdoor kon ik de positie en rotatie van de hele auto (behalve de wielen) regelen met behulp van de bovenliggende laag.

Animatie maken

Ik wilde dat de auto een rots zou raken en een tijdje in de lucht zou blijven hangen. Ik wilde ook dat de boom op en neer zou bewegen en de stam zou openen. Ik begon met het maken van een steen, een auto en wielen. Dan is het tijd om de grootste hindernis te overwinnen: de actie op de boom leggen. Toen dat klaar was, ging ik verder met de kleinere onderdelen zoals het rek en de touwen.

Schets die de animatie beschrijft

De eerste stap was het maken van een rotselement of -laag, maar in plaats van terug te gaan naar Illustrator CC om nog een laag toe te voegen, gebruikte ik gewoon het gereedschap Pen in After Effects CC. Hierdoor kon ik snel een kleine steen ontwerpen.

Oh, het machtige pengereedschap!

De kofferbak was een relatief eenvoudige taak. Ik monteerde hem aan de achterkant van de auto en maakte een ankerpunt linksonder. Met Pick Whip heb ik het aan de bovenliggende lichaamslaag toegewezen. De voorlaatste stap was om het effect van rotatie te geven, waardoor het moment waarop de auto stuitert realistischer werd.

P.S. je kunt mijn Illustrator CC- en After Effects CC-bestanden vinden.

De iconenset kan gratis worden gedownload op .

Laten we de taak nu een beetje ingewikkelder maken: laten we een geanimeerde Flash-banner maken. Natuurlijk is het in dit geval niet nodig om over volwaardige Flash-animatie te praten - hier zijn gespecialiseerde pakketten voor. Maar om een eenvoudige amateurvideo te maken, kun je ook Illustrator gebruiken.

Er zijn geen speciale tools of interfacefuncties, zoals een tijdlijn, die typisch zijn voor animatie-ontwikkelingsprogramma's in Adobe Illustrator. Maar er is één subtiliteit: je kunt lagen als frames gebruiken.

Maak een banner met alleen tekst.

Groepeer karakters met commando Object › Groep(Object › Groep).
De volgende taak is om contourobjecten te maken van de lettertypesymbolen, anders werkt de juiste vorming van lagen niet. Om dit te doen, selecteert u de groep en selecteert u Type › Omtrekken maken(Lettertype › Overtrekken).
Open daarna het paletmenu Lagen(Lagen) door op de pijlknop op het palet te klikken (Fig. 8.11).

Rijst. 8.11. Menu Lagenpalet

In dit menu zijn we geïnteresseerd in de opdracht Vrijgeven naar laag (reeks)(Converteren naar lagen (opeenvolgend)), waarmee elk afzonderlijk object naar een nieuwe laag wordt geconverteerd. Houd er rekening mee dat bij het toepassen van het commando de groep moet worden geselecteerd Groep, geen laag Laag 1.

Hoe het palet eruit zou moeten zien Lagen(Lagen) na uitvoering Vrijgeven naar laag (reeks)(Converteren naar lagen (opeenvolgend)), weergegeven in Fig. 8.12.

Rijst. 8.12. Lagenpalet na het uitvoeren van Vrijgeven naar laag (reeks)

Op dit punt is de voorbereiding voltooid, u kunt opslaan met Opslaan voor internet(Opslaan voor web) in SWF. SWF is het belangrijkste grafische formaat gebaseerd op Flash-technologieën. Het zou nauwkeuriger zijn om te zeggen dat dit het Flash-formaat is (Fig. 8.13).

Waarschijnlijk zijn alle gebruikers tegenwoordig al in een of andere mate bekend met Flash. Momenteel is dit het meest voorkomende animatieformaat op internet, met behulp waarvan de overgrote meerderheid van multimedia-internetpagina's wordt gebouwd.

Uiteraard implementeert Adobe Illustrator nog niet eens een tiende van de mogelijkheden van Flash, want daar is het programma niet voor ontworpen. Daarin kun je echter een statische afbeelding of een eenvoudige animatie maken.

Rijst. 8.13. Optimalisatie-instellingen voor SWF-indeling

De volgende instellingen zijn beschikbaar.

Alleen lezen(Alleen lezen). Als u dit vakje aanvinkt, wordt het bestand zo geschreven dat het in geen enkel programma meer kan worden geopend voor bewerking. Dit verkleint enerzijds de bestandsgrootte en beschermt anderzijds uw auteursrecht.
De instelling aangegeven met 1. De parameter die het type opslag specificeert: afbeelding of animatie.
Als u de optie kiest AI-bestand naar SWF-bestand(Illustrator-bestand naar SWF-bestand), wordt de afbeelding opgeslagen als een statische afbeelding die exact repliceert wat u op het scherm ziet wanneer u in Illustrator werkt.
Lagen naar SWF-frames(Layers to SWF Frames) stelt u in staat animaties te maken op basis van bestaande lagen, die als frames worden weergegeven. We moeten deze optie kiezen.
Curve-kwaliteit(Kwaliteit van rondingen). De nauwkeurigheid van de curven die het curvenbestand van de originele afbeelding herhalen. Het verkleinen van deze parameter vermindert de kwaliteit aanzienlijk, vooral op het gebied van kleine details, maar verkleint ook de bestandsgrootte. Voor ons geval is de optimale waarde “7”.
Framesnelheid(Framevertraging). Framesnelheid en, als gevolg daarvan, animatiesnelheid. Om het effect correct te laten zijn, stelt u het in op maximaal 4 frames per seconde.
Lus(Herhalen). Speel de animatie herhaaldelijk af. Geschikt voor animatie waarbij een herhalende lus belangrijk is. De banner behoort tot dit type.

Vandaag hebben we een ongebruikelijke Adobe Illustrator-les. Want deze keer maken we geen statisch beeld, maar een echte animatie. Stel je voor, het blijkt dat je ook cartoons kunt tekenen met Adobe Illustrator :)

En hiervoor hebben we helemaal niets nodig. Goede organisatie van lagen en export van het uiteindelijke werk naar SWF-formaat, waarbij elke laag wordt omgezet in een animatieframe. In de tutorial van vandaag tekenen we een aftelanimatie in de stijl van een retrofilm. De uitvoer zou een flashvideo moeten zijn met hetzelfde aftellen.

Het eerste dat u hoeft te doen, is alle noodzakelijke elementen voor toekomstige animatie tekenen. Om dit te doen heb ik in een afzonderlijk document twee posities van een filmframe gemaakt, een cirkel ter referentie, die in afzonderlijke sectoren is gesneden, een textuur en een verticale kras om het effect van de oudheid toe te voegen, evenals alle cijfers en inscripties.

Wanneer alle delen van onze cartoon klaar zijn, kunnen we beginnen met het maken van de animatie zelf. Voor het gemak is het beter om dit in een nieuw document te doen. In dit geval zullen onze lagen de rol van animatieframes spelen. En in de allereerste laag hoef je alleen maar een filmframe te kopiëren. Plaats hem in het midden van uw werkplek.

Maak nu een tweede laag en kopieer daarin een filmframe, waarin de gaten langs de randen met een offset zijn gemaakt. Het moet ook in het midden worden geplaatst.

Uit deze twee lagen kun je al animatie van bewegende film krijgen. Maar later hebben we nog veel meer lagen nodig. Selecteer dus de eerste twee lagen, ga naar de paneelopties en maak een kopie van de lagen.

Op een vergelijkbare manier moeten we twaalf lagen filmframes verzamelen die de beweging ervan bepalen.

Nu hebben we een hele reeks lagen en ze zijn allemaal zichtbaar. In die zin dat de bovenste lagen de onderste blokkeren, wat niet helemaal handig is voor het werk. Daarom kunt u sommige lagen uitschakelen door op het pictogram met het oog links van de laagnaam te klikken. Om alle lagen in één keer in of uit te schakelen, houdt u de Alt-toets ingedrukt terwijl u op het oogpictogram klikt. Door lagen aan en uit te zetten, kun je precies zien wat zich in een specifiek frame van onze toekomstige animatie bevindt. En om nu een lichte trilling aan de beweging van de film toe te voegen, moeten we de resulterende frames enigszins in verschillende richtingen verplaatsen. Om dit te doen, schakelt u alleen de laag in waarmee u op dit moment gaat werken en verplaatst u het frame vervolgens een paar pixels in een willekeurige richting.

Zodra je alle lagen hebt doorlopen en een kleine verschuiving hebt toegevoegd, kun je beginnen met het maken van de animatie van de bewegende cirkel. Kopieer hiervoor de cirkel bestaande uit sectoren uit het document met de cartoondelen en plaats deze op de eerste laag bovenop het filmframe.

Als u de cirkel deselecteert, ziet deze eruit als één geheel. Dit is precies wat we nodig hebben.

Maar omdat het uit afzonderlijke sectoren bestaat, kun je heel snel en eenvoudig animaties maken door de kleur ervan te veranderen. Kopieer hiervoor deze cirkel naar de tweede laag en maak de eerste sector lichter. Je herinnert je dat onze film trilt als hij beweegt, dus het is helemaal niet nodig om de cirkel precies in het midden van het frame te plaatsen. Plaats het op het oog.

Op een vergelijkbare manier moet je de cirkel naar elke volgende laag kopiëren, terwijl je nog een sector schildert met een lichtere kleur dan de vorige keer. Samen vormen deze twaalf lagen een animatie van de film die beweegt met een vulcirkel.

Vervolgens moeten we textuur aan onze lagen toevoegen. Schakel de eerste laag in en kopieer de textuur uit het originele bestand met de reserveonderdelen daar.

Zet vervolgens de volgende lagen één voor één aan en kopieer daar dezelfde textuur. Om het er in elk frame anders uit te laten zien, draait u het eenvoudigweg 90 graden. Zoals je misschien al geraden hebt, moeten we textuur aan alle 12 frames toevoegen.

Als je het kopiëren al behoorlijk beu bent, dan kan ik je een plezier doen - er is nog maar heel weinig over. Het moeilijkste deel is voorbij. Het enige dat overblijft is het toevoegen van verticale krassen en dat is het bijna. Om dit te doen, kopiëren we opnieuw de originele kras en plaatsen deze op een willekeurige plaats in meerdere lagen. In mijn geval verschijnen krassen in slechts twee lagen.

Nu de hoofdcyclus met filmanimatie klaar is, hoeven we alleen nog maar de cijfers op te tellen. Omdat we aftellen van 3 naar 1 plus het woord Go!!!, hebben we nog meer lagen nodig. Niet 12, maar maar liefst 48. Om dit te doen, moet je nog drie kopieën maken van kant-en-klare lagen met filmanimatie.

En dan is alles eenvoudig. Zet de allereerste laag aan en zet daar het getal drie.

Vervolgens moet je dit nummer naar de volgende lagen kopiëren totdat de cirkelanimatie eindigt. Wanneer je de volgende kopie van de lagen bereikt, waar de cirkel weer volledig gevuld is, moet je het cijfer twee plaatsen. Kopieer op dezelfde manier nummer één naar de gewenste lagen. En wanneer u bij de laatste lagen voor de Go!!!-inscriptie komt, verwijdert u eenvoudigweg de cirkel voordat u de inscriptie naar de gewenste laag kopieert.

Dat is alles voor de animatie. Het belangrijkste hier is om niet in de war te raken. Je kunt de lagen een aantal handige namen geven, maar ik was een beetje lui :) En als je klaar bent met je werk, zorg er dan voor dat je alle lagen weer inschakelt door op het oogpictogram te klikken.

Zorg ervoor dat u in het venster met exportinstellingen Exporteren als: AI-lagen instelt op SWF-frames. Het is deze optie die Illustrator-lagen omzet in animatieframes. Klik vervolgens op de knop Geavanceerd.

Er worden aanvullende instellingen geopend. Hier moet u de framesnelheid instellen. Ik heb 12 frames per seconde. Het selectievakje Looping is verantwoordelijk voor de cyclische animatie. Dankzij dit wordt de video in een cirkel afgespeeld. En de optie Laagvolgorde: Bottom Up reproduceert illustratorlagen van onder naar boven in het paneel. Dit is precies hoe we onze animatie hebben gebouwd.

De output is een flashvideo met onze animatie.

Nu zie je dat het maken van eenvoudige animaties in Adobe Illustrator niet zo moeilijk is als het op het eerste gezicht lijkt.

Maar om lange video's of interactieve applicaties te maken, is het nog steeds beter om Adobe Flash of andere flash-editors te gebruiken. Deze kat heb ik bijvoorbeeld gemaakt in een oude Macromedia Flash die ik uit mijn werk heb opgegraven.

Ook worden HTML5 en CSS3 de laatste tijd steeds vaker gebruikt om animaties te maken. Deze code wordt ondersteund door moderne browsers en vereist geen flashplayer.

Romeins oftewel dacascas vooral voor de blog

Schrijf u in op onze nieuwsbrief, zodat u niets nieuws mist: