I min förra tutorial visade med 15 steg hur man gör en egen RSS-knapp till sin blogg. Jag fick ett önskemål om att visa hur man gör en animation, så jag tänker nu använda mig av förra exemplet och animera RSS-knappen!



Jag använder: Adobe ImageReady

1. Starta ImageReady och öppna .psd-filen med RSS-knappen. Det kan vara en bra idé att göra en kopia av bilden eftersom vi ska göra en del ändringar, så vi sparar om (Ctrl+Shift+S) bilden till rss-knapp-ani.psd.
2. Vi borde redan ha skurit ner bilden till en lagon storlek, så om du inte gjort det använder du Crop Tool (C) och skär bort överflödig arbetsyta. Zooma in för bättre presicion, och skär precis intill kanten. Till slut är arbetsytan 42x42 px.

Tillskärningen:



3. Nu ska vi fixa lite med det översta lagret, det med symbolen. Pricken och de två bågarna ska skiljas till tre separata lager, så vi klipper ut (Ctrl+X) en i taget med Marquee Tool (M) i ellipsformen. De hamnar automatiskt på ett nytt lager då vi klistrar in igen (Ctrl+V).
4. Dags att ta fram animationsfönstret, som du hittar i ImageReady-menyn under Windows►Animation.
5. Duplicera den första animationsramen 5 gånger genom att trycka på knappen med det lilla pappersarket. Nu har vi 6 identiska ramar att arbeta med.

Steg 3 - 5:




Tanken är nu att pricken, mellanbågen och storbågen ska få en Outer Glow som skall variera i styrka i de olika ramarna. Från 0, till 35, till 75% - och omvänt tillbaka.

6. Första ramen låter vi vara som den är, men i andra ramen ska pricken få en vit Outer Glow. Lägg till effekten genom Layer►Layer Style►Outer Glow. Inställningarna: Screen, Opacity 35%, Size 5.
7. I tredje ramen ökar vi Outer Glow Opacity till 75% på pricken, och utför samma steg som ovan på mellanbågen.
8. I ram nummer fyra skall prickens Outer Glow tillbaka till 35%. Mellanbågens till 75%, och nu ska även storbågen få en - men på 35%.
9. Och i femte ramen... Prickens OG: 0%, mellanbågens: 35%, storbågens: 75%.
10. I sjätte och sista ramen ska endast storbågens OG synas och stå på 35%.

Steg 6 & 7:



Nu har vi en färdig animation! Testa den genom att trycka på Play-knappen i animationsfönstret.

Bilden är klar att sparas (Ctrl+Alt+S) som en .gif. I Optimize-rutan under Window►Optimize kan man välja bildformat.

Tutorials ∥ Kommentera (0) ∥ www