Tutorial: Animation av RSS-knapp

2009-08-30 18:07:55
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 WindowsAnimation.
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 LayerLayer StyleOuter 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 WindowOptimize kan man välja bildformat.




Bookmark and Share Pusha Följ med bloglovin' Follow me on Twitter

Kommentarer


Kontakt: Skicka mig ett e-mail!

Jag tar emot designbeställningar. Kika på designsidan!


Kommentera inlägget här:



« Namn
« E-post (visas ej)
« Hemsida/Blogg
« Kommentar
Kom ihåg mig?
Related Posts with Thumbnails