Animation med PhotoShop Elements. Tillæg til hæftet PhotoShop Elements - af Palle Bruselius

Transkript

1 Tillæg til hæftet PhotoShop Elements - af Palle Bruselius

2 Animationer er traditionelt set lig med tegnefilm, men i computer-sammenhæng kan det også være digitaliserede videofilm. Animationer er særdeles udbredte på Internet samt i forbindelse med multimedieproduktioner. Animationerne kan brugs til mange ting: bannerreklamer, blikfang, illustration af en arbejdsgang og meget andet. Der anvendes en række forskellige filformater. Flash- og Shockwave-teknologien er det nyeste og varmeste bud på flotte og smarte animationer. Blandt de mere klassiske animationsformater, finder du gif-formatet, der er det ældste animationsformat på Internet, og er sandsynligvis også stadig det mest udbredte. Dette skyldes hovedsageligt, at det er ret nemt at have med at gøre, hvilket gør det tiltrækkende for begyndere såvel som knap så rutinerede computerbrugere. Traditionel animation er baseret på billeder, der tegnes ét for et. Det er som regel en langsom og tidsrøvende proces. Der anvendes typisk mellem 15 og 25 billeder per sekund, eller som det kaldes i fagsproget: fps frames per second. Frames kan oversættes med billeder. De enkelte frames/ billeder kan du tegne i hvilket som helst tegneprogram. PSE giver dig mulighed for både at tegne de nødvendige frames og at sætte disse sammen til en gif-animation. Ét billede én animation Det lyder måske lidt mærkeligt, men ikke desto mindre er det sandt. Når du vil opbygge en animation i PSE, skal du nemlig bruge programmets lagfunktioner til at skabe de enkelte frames i animationen. Formlen er simpel: 1 lag = 1 frame. Det gør det samtidig muligt at efterligne en god gammel gennemprøvet animationsteknik, Onion Skinning. Denne metode går ud på at tegne en frame på et helt eller delvist gennemsigtigt stykke papir. Derefter lægger du et stykke papir ovenpå det første, og tegner den næste frame. Den kan tegnes meget nøjagtigt, fordi du stadig kan se den første frame under det lag papir, du tegner på. I PSE erstattes papirarkene med lag. TIP Det er meget lettere at se, hvad du laver, hvis du udnytter muligheden for at slå de enkelte lags synlighed fra, efterhånden som du opretter nye lag. Behold for eksempel de foregående to lag synlige, og lad resten være slået fra. Du kan også udnytte muligheden for at nedsætte de foregående lags opacitet, og dermed gøre dem mere eller mindre gennemsigtige. I så fald skal du huske at sætte opaciteten for alle lagene op til 100% igen, inden du gemmer din animation En simpel animation I den følgende øvelse skal du prøve at opbygge en helt simpel animation bestående af blot fire frames. Det meget lave antal frames vil betyde, at animationen afspilles på meget kort tid. Dens levetid kan imidlertid forlænges ved at lade den køre i løkke, det vil sige, at den starter forfra, hver gang den er gennemspillet. I fagsproget kaldes dette for looping. 1. Vælg File-menuen! Open. 2. Vælg SOL_BEGYND.PSD, og klik på Openknappen. Billedet indeholder ét lag med en orange cirkel. Du skal imidlertid bruge fire frames. Da den orange cirkel skal være ens i alle fire frames, er det nemmest at kopiere Layer 1 det nødvendige antal gange. 3. Højreklik på Layer 1 i Layers-paletten. Denne genvejsmenu åbnes: En kortfattet genvejsmenu.

3 4. Klik på Duplicate Layer Her kan du navngive laget. 5. Indtast et navn, for eksempel LAYER 2 for det pågældende nye lag, og klik på OK-knappen. 6. Gentag trin 3-5 to gange mere. Nu har du de nødvendige frames. Kopieringen har sikret, at den orange cirkel er placeret nøjagtig ens i alle fire lag og dermed også i alle frames i den færdige animation. Herefter skal du tegne solstråler i hver enkelt frame. 7. Klik på Layer Klik på Eye Dropper Tool i Tools-panelet, og klik derefter på den orange cirkel i billedet. Dermed samler du den orange farve op, som du skal bruge til solstrålerne. 9. Klik på Paint Brush Tool i Tools-panelet. Vælg en brush i en passende størrelse, for eksempel Hard Round 9 Pixels, i Painting Brushpaletten i Options-panelet. Mal nu 6-8 solstråler rundt om den orange cirkel. Se eksemplet nedenfor. Begyndelsen til en rigtig lille solstrålehistorie. 10. Klik på Layer 2 i Layers-paletten, og gentag trin 9. Du skal dog male solstrålerne forskudt for dem, du malede på Layer 1. Se nedenfor. Her kan du se solstrålerne på både Layer 1 og Layer 2. Opaciteten på Layer 1 er nedsat til cirka 80% for at der kan kendes forskel på lagene. 11. Gentag processen for Layer 3 og Layer 4. Forskyd solstrålerne for hvert lag. 12. Nu skal animationen gemmes. Vælg Filemenuen! Save for Web Denne moppedreng af en dialogboks åbnes: En virkelig sværvægter. 13. Aktiv er Animate i panelet i højre side af dialogboksen, for at fortælle PSE, at det er en animation, du vil lave. Glemmer du denne knap, gemmer PSE i stedet et almindeligt gifbillede. 14. Aktivér Loop i panelets højre side for at få animationen til at køre i løkke, det vil sige, at den starter forfra hver gang, den er gennemspillet. Hvis du vil se, hvordan din animation ter sig i en browser, kan du klikke på Preview in:- knappen. Resultatet kan for eksempel se sådan ud: 3

4 Bemærk, at browservinduet også viser den html-kode der vil blive genereret. Den vil naturligvis ikke blive vist, hvis du anvender animationen på dit website. 15. Klik på OK-knappen for at gemme animationen. Save Optimized As-dialogboksen. 16. Indtast fil navn SOL og aktivér Save HTML File. Derved gemmes også en HTML-kode, der kan sættes direkte ind i HTML-koden til en webside. Det gør arbejdet med at indsætte animationen på en webside lettere. Klik på Gem-knappen. Bannerreklamer Denne type reklamer kender du allerede fra et utal af websider. De kan bestå af et enkelt billede, som brugeren kan klikke på, og derved blive sendt til annoncørens website. Det mest almindelige er dog, at et banner består af en lille animation på relativt få frames. Der er faste regler for bannerstørrelser, der er gyldige, se tabellen sidst i kapitlet. Filstørrelsen ikke må være større end 21 kb. Filer større end dette tillades kun meget få steder. I den følgende øvelse skal du prøve at fremstille en bannerreklame. 1. Vælg File-menuen! New. New-dialogboksen åbnes. Indtast 468 i Width-feltet og 60 i Height-feltet. Vælg White i Contents-feltet og klik på OK-knappen. Nu er du klar til at gå i gang. 2. Klik på farvevælgeren i Tools-panelet. Aktivér Only Web Colors. Vælg en klar rød farve. 3. Klik på Horizontal Type Tool-knappen i Toolspanelet. Vælg skriften Arial, skriftsnittet Bold og skriftstørrelsen Klik til venstre i billedet, og indtast: PIZZA PUCCINI. Klik på -knappen for at afslutte tekstredigeringen. 5. Dublér laget med teksten 3 gange. 6. Nu skal du placere de fire lag med teksten PIZZA PUCCINI, så de kan skabe en lille animation. Markér det første lag i lagpaletten. Brug piletasten Ned på tastaturet til at flytte laget nedad og næsten ud af billedet; kun toppen af teksten skal lige netop være synlig. 7. Flyt derefter det næste lag, så det nærmest står ovenpå det første lag. 8. Gentag manøvren med det tredje lag, så det står oven på det foregående. Det sidste lag skal ikke flyttes. Det skulle allerede gerne være placeret sådan, at det ser ud som om det står oven på det foregående. Se illustrationen nedenfor. Når du afvikler animation, vil teksten komme fra bunden og glide opad. 9. Aktivér det sidste tekstlag. Placér tekstmarkøren lige efter teksten. Brug mellemrumstasten til at rykke 12 pladser mod højre, og indtast: UDBRINGNING DAG OG NAT. Vælg en klar grøn farve til det netop indtastede. De- Klik på -knappen for at afslutte tekstredi- geringen. 4

5 10. Så er du klar til at skabe animationen. Vælg Files-menuen! Save for Web 11. Aktivér Animate. Derved gør du de enkelte lag i billedet til frames (enkeltbilleder) i animationen. 12. I feltet Animate kan du fortage forskellige indstillinger. Ved at aktivere Loop, skaber du en animation, der starter forfra, hver gang den er gennemspillet. I feltet Frame Delay bestemmer du, hvor lang tid der skal mellem de enkelte frames. 0,2 sekund er standard. Videoknapperne i feltet kan du bruge til at bladre frem og tilbage i animationen. I de store billedfelter til venstre i Save for Web - dialogboksen kan du se, hvordan animationen vil se ud frame for frame. Indstil Frame delay til 0,3 sekunder. Dit banner er nu klar til at anvende på en webside. En bannerreklame kan naturligvis være meget mere kompliceret og med mange flere detaljer end den, du netop har lavet. Der er dog grænser for, hvor mange frames du kan lægge ind i den. Jo flere frames, jo større fil, og med en stor fil tager det for lang tid for brugerne af websiderne at hente bannerreklamen. Det vil skabe irritation og dermed have den modsatte effekt af din reklames hensigt. Standardbannere Pixelstørrelse Bannertype 468 x 60 Stort banner (mest brugt) 392 x 72 Stort banner med navigationsbjælke 234 x 60 Halvt banner 125 x 125 Kvadratisk knap 120 x 90 Knap type x 60 Knap type 2 88 x 31 Micro knap 120 x 240 Lodret banner 13. Afprøv animationen ved at klikke på Preview in-knappen (den der viser Microsoft Internet Explorer-ikonet). Animationen vises nu i Microsoft Internet Explorer. Luk Internet Explorer igen. 14. Hvis dialogboksen ikke allerede er indstillet til at gemme animationen i gif-format og med Adaptive som farvepalet, skal du indstille dette i feltet Settings. 15. Klik på OK-knappen. Navngiv filen, og klik på Gem-knappen. Obs.. Strengt taget hedder knappen Save, men i danske versioner af Windows overskrives dette med den danske version af navnet. Grunden til dette er, at Windows henter standardnavne på knapper i et fælles systembibliotek. Hvad knappen så kommer til at hedde afhænger af, hvilket sprog din Windowsinstallation har. 5