Animera i ImageReady

Tillsammans med Photoshop i senare versioner levereras 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 webgrafik och generera HTML-kod till färdiga webbsidor. Med ImageReady kan du tex skapa Animerade GIF-bilder, Rollover-effekter med tillhörande javascript och Imagemaps (hotspots). I den här övningen beskrivs i första hand hur du animerar i ImageReady.

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.

Programmets verktygspaletter, menyer och kommandon liknar Photoshops men arbetssättet är något annorlunda eftersom ImageReady har andra specialfunktioner. Verktygspaletten innehåller de kända verktygen från Photoshop men har också knappar för "Bildschema" (Imagemap), "Segment" (Slice), "Rollover" och förgranskning i webbläsare.

Alla dokumenten innehåller också fyra flikar i överkant som används för att optimera bilden för bästa resultat på webbsidor.

ImageReady är alltså specialiserat på grafik för web till skillnad från Photoshop som ursprungligen har varit bäst på högupplösta bildformat för prepress/tryck och professionell bildredigering. ImageReady såldes från början som ett separat program för att konkurrera med de nya bildbehandlingsprogrammen som kombinerade HTML och grafikformat för webbsidor. Skillnaderna i ImageReady och Photoshop har blivit mindre för varje version som släpps, det finns nu utmärkta funktioner för att skapa och optimera webgrafik i Photoshop. En naturlig utveckling är kanske att i framtida versioner av Photoshop är ImageReadys funktioner inbyggda i Photoshop.

TIPS! Om du vill återställa ImageReady till standardläge för att paletter och menyer ska återgå till ursprungsläge använder du samma metod som vid återställning av Photoshop 6: starta ImageReady och håll sedan CTRL+SHIFT+ALT intryckt till du får en dialogruta som frågar om du vill återgå/radera inställningsfilen.

Animera i ImageReady

Börja med en enkel animering för att förstå arbetssättet vid animering i ImageReady. En skillnad mot vissa andra animationsprogram är att ImageReady nyttjar Lager (se övningen "Lager, former och fyllning Ps 6" » eller "Lager, former och fyllning Ps 5/5.5" »). Den första animeringen byter färg på text som i exemplet nedan.

E x e m p e l:

Skapa ett nytt dokument med valfria mått. Skriv din text och välj teckensnitt, färg etc. (se övningen "Text Ps 6 »").
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 Lager syns i alla animeringsrutor. Om du har det valet så kan du ju inte ändra färg på texten i de olika animeringsrutorna utan att det påverkar de animeringsrutor du redan har...
Du avaktiverar den funktionen under "pilmenyn" till höger.
Lägg till en ny bildruta genom att klicka på knappen "Duplicera aktuell bildruta" (Duplicate current frame)

...och du har två likadana bildrutor
Nu är det dags att ändra på innehållet i den aktuella animeringsrutan. Det gör du genom att ändra färgen på texten i Lagerpaletten. OBS! ändra inte aktuellt Lager som ju båda rutorna bygger på!

Duplicera textlagret, ändra färg på det duplicerade Lagret och dölj det lager som inte ska visas.

Nu har du olika färg på texten i de två animeringsrutorna:
Testa din animering genom att klicka på Play-knappen!

E x e m p e l:

Animeringen spelas upp genom att de två bildrutorna växlar. Det går undan eftersom du inte har ställt in vilken tidsfördröjning du vill ha. Stoppa animeringen med Stopp-knappen.
Ställ in en egen animeringstid (frame delay time) för varje bildruta genom att välja Pilmenyn i nederkant på varje bildruta.

I exemplet är tiden inställd till 1 sekund per bild:

E x e m p e l:

Använda övergångseffekter

För att få en mjukare övergång 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.

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" som behövs men låt alla alternativen vara oförändrade, de påverkar ingenting.

5 st nya bildrutor läggs till i animeringen och totalt innehåller den nu 7 bildrutor.

Tänk på att 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.
Testa animeringen igen med Play-knappen. 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.

E x e m p e l:

För att snabba på övergången mellan färgerna minskar du tiden på de fem nya bildrutorna. Markera de bildrutor du vill ändra genom att hålla SHIFT eller CTRL intryckt och klicka på bildrutorna. Ändra sedan tidsinställningen som tidigare. I exemplet används 0.1 sekunds fördröjning.

E x e m p e l:
Om du vill ha samma mjuka övergång tillbaka 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 som utgör övergången mellan de 2 bildrutorna.

Ändra tidsinställningen igen som i punkt 2 ovan. I exemplet används 0.1 sekund igen.

E x e m p e l:

Testa, optimera och spara animationen

ImageReady erbjuder bra 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. 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 det baserat på den pixelfärg som är utanför texten, i exemplet Vita pixlar. 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 avseende kvalitet och lagringsstorlek. OBS! Det är bara formatet GIF som stödjer animerade bilder. Väljer du något av de de andra bildformaten för web; PNG eller JPEG så sparas bara den första bildrutan!

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:
Vårt exempel innehåller vanlig text utan effekter som skuggor, avfasningar och toningar etc. 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å de övriga 16,5 kilobyten!

Ett sätt att minska filstorleken är att helt enkelt ta bort animeringsrutor. Om du väljer det alterantivet bör du ta bort hela animeringen med "pilmenyn" i paletten Animering och valet "Ta bort animering" (Delete Animation). Skapa sedan animeringen på nytt men välj färre bildrutor i övergångseffekten.

Ett annat sätt att minska bilden storlek är att optimera antalet färger i GIF-bilden (se mer om de olika alternativen för GIF-formatet i övningen "Webformat, Photoshop 5.5 och 6" »).
I ImageReady använder du paletten "Optimera" (Optimize). Markera först den optimerade bilden genom att klicka på den så att paletten visar informationen om den.

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:

(För hård optimering som 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 skarpt i en webbläsare. Använd menyn "Arkiv/Förhandsvisa i..." (File/Preview in...) eller knappen i Verktygspaletten.

Så här kan resultatet se ut in Internet Explorer. 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!