1. Inledning

Den här sidan handlar om hur man skapar en enkel animation i ImageReady. Jag går igenom de grundläggande verktygen och visar hur man kan få hjälp av programmet att skapa bildrutor.

Den animation jag gör är inte särskilt snygg, men syftet är bara att visa grunderna i hantverket.

Sidan förutsätter att du har grundläggande kunskaper i Photoshop. Du kan göra övningarna för detta som kommer med programmet eller gå till mina sidor om Photoshop >

2. Animeringsverktygen

Längst till vänster i animeringspaletten finns inställningar för hur animationen skall spelas upp. Man kan välja olika tidsinternvall och visningstider för respektive bildruta.

De alternativ som ligger till höger om tidsinställningen är följande:

• Markera första bildrutan
• Markera föregående bildruta
• Stoppa uppspelningen/animeringen
• Spela upp animeringen
• Markera nästa bildruta
• Duplicera (kopiera) markerad bildruta och lägg den på platsen närmast efter
• Ta bort markerad bildruta

Längst upp till höger i palettfönstret finns en liten svart pil. Bilden här bredvid till höger visar var du hittar den.

Den leder till olika sökalternativ, bl.a övergångar, som jag berättar om i avsnitt 4. Som du ser finns här en hel del saker man kan ha användning för.

Tips! Man kan ofta få fram användbara verktyg genom att högerklicka i ett fönster. I Mac trycker man Ctrl och klickar. Tänk också på att Alt- och Shift-tangenterna används flitigt i programmen för olika kortkommandon.

3. En enkel animation

Så här gjorde jag en väldigt enkel animation. Du får gärna följa min arbetsgång för att förstå verktygen. Längre ner på sidan visar jag den färdiga animationen, men du kan titta på den genom att klicka på den här länken: animation_1.gif

1. Skapa ett nytt dokument om 400x400 pixlar.
2. Gör ett nytt lager och markera det så att det är aktivt.
3. Dra en markeringsram över en del av arbetsytan, motsvarande en knapp eller liten banner, c:a 250x50 pixlar.
4. Fyll markeringen med en färg eller välj en stil från paletten Stilar.
5. Lägg in valfri text i ett nytt lager. Välj teckensnitt och färg/stil som du vill.
6. Placera texten och den färgade ytan så att de ligger bra.
7. Beskär dokumentet så att överflödig arbetsyta försvinner.
8. I animeringspaletten syns ännu så länge bara en enda bildruta (frame). Nu skall vi göra fler.
9. Kopiera den första bildrutan och skriv in ett nytt värde för opacitet, t.ex 90%. Du hittar inställningarna i lagerpaletten och opacitetsreglaget.
10. Upprepa så att det finns bildrutor ner till 10% och sedan upp igen till 90%.
11. Tryck på knappen Spela upp animering.
12. Under varje bildruta finns en liten pil som är klickbar. Här kan man ställa in hur länge varje bildruta skall visas. Jag valde Ingen fördröjning
13. Spara filen via Arkiv - Spara optimerad som...

Så här ser min animation ut. Som du kan se blir den lite ryckig och man måste därför göra ännu fler bildrutor för att den skall visas utan att hacka:

4. Övergångar

Detta verktyg använder man för att automatisera tillverkandet av bildrutor. Övergångsverktyget hjälper alltså till att skapa nya bildrutor för placering (rörelse), opacitet (toning) och andra bildeffekter.

Man utgår nästan alltid ifrån en bildruta i en serie, men man kan också markera de bildrutor man vill ha med. Utgår man ifrån en enda bildruta, skapas effekterna mot nästa eller föregående bildruta.

Skillnaden mellan de rutor ImageReady skapar blir lika stor och programmet ersätter också de inställningar man gjort tidigare mot sina egna, om det ligger bildrutor "i vägen" i den sekvens som skall skapas.

Vi förutsätter nu att det bara finns två bildrutor, nämligen den första och den med störst opacitet (10%), i animationen här ovanför. Jag väljer alternativet Alla lager för att få med alla lager i de bildrutor programmet skall skapa, dvs både textlagret och den färgade bakgrunden.

Övergången skall ske mot nästa bildruta och jag vill att programmet lägger till åtta nya rutor, för värdena 90% t.o.m 20%. När jag sedan klickar OK skapas bildrutorna med korrekta värden för opacitet.

Därefter gör jag likadant från bildrutan med 10% opacitet och upp till den sista bildrutan. programmet skapar då bildrutor för 20% och upp till 90% opacitet.

När jag är klar sparar jag animationen och sedan är det bara att lägga in den på sin sida!

OBS! Tänk på att uppspelningen inte fungerar särskilt bra inne i ImageReady. För att se hur den faktiskt kommer att se ut måste man öppna den i en webbläsare.