Photoshop

 skriv ut »

Animera i ImageReady

Photoshop i senare versioner levereras med programmet ImageReady. Det innehåller en hel del funktioner som även finns i Photoshop och du kan alltså jobba med bildhantering i ImageReady utan att använda Photoshop.

Programmets styrka är att skapa webbgrafik och generera HTML-kod till färdiga webbsidor. Med ImageReady kan du skapa Animerade GIF-bilder, Rollover-effekter med tillhörande javascript och Imagemaps (hotspots).

Programmet ImageReady

Öppna ImageReady från Photoshop med menyn "Arkiv/Gå till/ImageReady" (File/Jump to/ImageReady):

...eller knappen längst ner i Verktygspaletten:

...eller starta det "standalone" med samma meny som programmet Photoshop startas ifrån.

TIPS! Om du vill återställa ImageReady till standardläge för att paletter och menyer ska återgå till standardläge använder du samma metod som vid återställning av Photoshop.

Starta ImageReady och håll CTRL+SHIFT+ALT intryckt tills dialogrutan visas:

Animera i ImageReady

Börja med en enkel animering för att förstå arbetsmetoderna vid animering i ImageReady.

Exempel:

1. Skapa ett nytt dokument.
   
   Skriv din text och välj teckensnitt och färg:
   
   
   
   
2. Paletten "Animering" visar redan nu den första bilden i animeringen:
   
   
   
   Viktigt! Innan du lägger till nya animeringsrutor är det viktigt att du ändrar standardinställningen som innebär att alla nya Layer syns i alla animeringsrutor.
   
   Du avaktiverar den funktionen med "pil-menyn" till höger:
   
   
   
   
   
   
   
3. Lägg till en ny bildruta genom att klicka på knappen "Duplicera aktuell bildruta" (Duplicate current frame):
   
   
   
   ...du har nu 2 likadana bildrutor:
   
   
   
   
4. Ändra på innehållet i den aktuella animeringsrutan genom att ändra färgen på texten i Layer-paletten.
   
   OBS! ändra inte aktuellt Layersom de båda rutorna bygger på!
   
   Duplicera text-Layer, ändra färg på det duplicerade Layer och dölj det Layer som inte ska visas:
   
   
   
   Nu har du olika färg på texten i de två animeringsrutorna:
   
   
   
   
5. Testa din animering genom att klicka på "Play":
   
   
   
   
   Animeringen spelas upp genom att de två bildrutorna växlar. Stoppa animeringen med Stopp-knappen.
   
   
   Exempel:
   
   
   
   
   
   
6. Ställ in en egen animeringstid (frame delay time) för varje bildruta genom att välja "Pil-menyn" i nederkant på varje bildruta:
   
   
   
   I exemplet är tiden inställd till 1 sekund per bild:
   
   
   
   Exempel:
   
   

Använda övergångseffekter

För att få en mjukare övergång i animeringen krävs att du använder fler bildrutor. ImageReady har en funktion för att lägga till bildrutor och samtidigt skapa förändringar som behövs för att ge en animeringsövergång.

1. Använd knappen "Övergångar mellan bildrutor" (Tweens animation frames):
   
   
   
   
   I dialogrutan väljer du hur många bildrutor som ska läggas till och vilken typ av förändring som ska ske i varje ny bildruta.
   
   I vårt exempel är det "Opacitet" (Opacity) som ska användas, men låt alla alternativen vara oförändrade, de påverkar ingenting:
   
   
   
   5 nya bildrutor läggs till i animeringen och totalt innehåller den nu 7 bildrutor:
   
   
   
   
   Antalet bildrutor i animeringen bör vara så få som möjligt om du vill att den färdiga GIF-bilden ska ha en liten lagringsstorlek för snabb laddning på webbsidorna.
   
   
2. Testa animeringen igen med "Play".
   
   Tidsinställningen är densamma för varje bild som den du hade innan. Det kan bli lite långsamt i övergången mellan de två färgerna då det är 1 sekunds fördröjning innan nästa bildruta.
   
   Exempel:
   
   
   
   
   
   För att snabba på övergången mellan färgerna minskar du tiden på de 5 nya bildrutorna.
   
   Markera de bildrutor du vill ändra genom att SHIFT+Klicka eller CTRL+Klicka på bildrutorna.
   
   Ändra tidsinställningen som tidigare.
   
   I exemplet används 0.1 sekunds fördröjning:
   
   
   
   Exempel:
   
   
   
   
   
3. Om du vill ha samma mjuka övergång, från den andra färgen till den första, lägger du till nya bildrutor efter den sista bildrutan:
   
   
   
   Välj att övergången ska vara mot den första bildrutan:
   
   
   
   
   Nu består animationen av 12 bildrutor totalt: 2 st originalrutor och 10 st bildrutor som utgör övergången mellan de 2 bildrutorna.
   
   Ändra tidsinställningen igen som ovan.
   
   I exemplet används 0.1 sekund:
   
   
   
   Exempel:
   
   

Testa, optimera och spara animationen

ImageReady erbjuder möjligheter att optimera och testa animationen innan du bestämmer dig för att spara den.

Innan du fortsätter med test, optimering och slutligen sparar bilden bör du beskära bilden så att överflödig yta tas bort.

1. Använd verktyget "Beskära" (Crop). Beskär din bild så att bara texten blir kvar:
   
   
   
   
   Ett alternativ till att själv beskära bilden är att låta ImageReady själv göra detta baserat på den pixelfärg som är utanför texten, i exemplet är pixelfärgen Vit.
2. Välj menyn "Bild/Trimma" (Image/Trim). Om du inte tänker göra bilden transparent väljer du att "Pixelfärgen längst uppe till vänster" ska vara gräns vid beskärningen:
   
   
   
   
   Resultatet ger en mer exakt beskärning än tidigare exempel:
   
   
   

Optimera bilden

Bilden är nu klar att optimeras för kvalitet och lagringsstorlek. OBS! Det är bara formatet GIF som stödjer animerade bilder. Väljer du något av de de andra bildformaten, PNG eller JPEG så sparas bara den första bildrutan.

1. Välj att visa fliken "Visa 2" (2 Up):
   
   
   
   Den övre bilden visar originalbildens utseende och storlek. Den undre bilden visar den optimerade bilden. Du kan även se den ungefärliga nedladdningstiden med ett 28,8 Kbps modem.
   
   Här kan du själv välja vilken nedladdningshastighet du anpassar dina webbsidor för. Om du anser att minimihastigheten bör vara ett 56,6 Kbps modem så ändrar du till det.
   
   Bildens storlek är nära 18 kilobyte och tar ca 4 sekunder att ladda ner med ett 56,6 Kbps modem:
   
   
   
   
   
2. Vårt exempel innehåller vanlig text utan effekter som skuggor, avfasningar och toningar. Den blir alltså inte särskilt stor men skulle vara ca 1,5 kilobyte om den inte vore animerad. Själva animeringen utgör alltså övriga 16,5 kilobyte.
   
   Ett sätt att minska filstorleken är att ta bort animeringsrutor. Om du väljer det alternativet bör du ta bort hela animeringen med "pil-menyn" i paletten "Animering" och valet "Ta bort animering" (Delete Animation).
   
   Skapa animeringen på nytt men välj färre bildrutor i övergångseffekten.
   
   En annan metod att minska bildens storlek är att optimera antalet färger i GIF-bilden.
   
   Använd du paletten "Optimera" (Optimize). Markera den optimerade bilden genom att klicka på den så att paletten visar informationen om denna bild.
   
   Du kan välja att se fler alternativ:
   
   
   
   Vårt exempel innehåller endast 127 färger från början så för att minska antalet färger och därmed filstorleken gå vi ner till 32 färger utan att resultatet synbart förändras. Storleken däremot ändras till 12,5 kb. Förändringen låter kanske inte mycket i kilobyte men ger faktiskt hela 30% komprimering.
   
   
   
   Optimerad med max antal färger (127 färger), 17,8 kb:
   
   
   
   Optimerad med 32 färger, 12,5 kb:
   
   
   
   Optimerad med 8 färger, 9 kb:
   
   
   
   Notera att för hård optimering försämrar bildens utseende.

Slutsats:
Behöver bilden optimeras? Ja och nej, beroende på hur den ska användas. Kommer webbsidan att innehålla mer tung grafik kan det vara idé att optimera den. Om det bara är HTML-text i övrigt så bör inte 18 kb eller 12,5 kb märkas så mycket i nedladdningstid. Optimering krävs när bildens bredd och höjd är större och när animeringen är mer avancerad med mer effekter och bildrutor i övergångarna.

Testa bilden

Sista åtgärden innan vi sparar bilden är att testa den i en webbläsare.

1. Använd menyn "Arkiv/Förhandsvisa i" (File/Preview in) eller knappen i Verktygspaletten:
   
   
   
   
   
2. Så här kan resultatet se ut. Notera att du ser bredd, höjd, storlek och antal bildrutor i animeringen. Dessutom får du HTML-koden som du kan använda för att placera bilden på din webbsida: