Tips 299: Gör Gif-animationer

45

test

Lite då och då ramlar det in frågor om hur man gör gif-animationer i Photoshop, som man sedan kan ha på sin blogg. Ja likt den ovan på mig. Idag är en utmärkt dag för att ta reda på detta, så lyssna noga.

Börja med att läsa in de bilder som ska vara med i din animering i enskilda lager (Använd gärna Anders tips så går det snabbt och enkelt). Notera att bakgrundslager kan inte kan animeras, så se till att det lagret är tomt eller omgjort till ett vanligt lager.

layers

Öppna sedan Animationspanelen genom Window > Animation (Fönster > Animation). Här ska du jobba i bildruteläge. Har du Photoshop Extended kan du även välja att animera i tidslinjeläge med nyckelrutor, men det ska vi inte beröra idag. Du växlar läge genom den avlånga lilla knappen längst ner till höger i panelen.

Nu kan du skapa bildrutor för varje händelse i din animation. Klicka bara på den vita lilla knappen för ny bildruta. I exemplet har jag två bilder som ska animeras men det går givetvis ha fler.

När du skapat alla dina bildrutor är det bara börja att animera. Klicka på första bildrutan och slå av eller på synligheten på de lager som ska visas. Fortsätt på samma sätt i alla andra bildrutor.

Ex:  I min bild valde jag att i bildruta ett ha det ena lagret synligt medan det andra var osynligt, och tvärt om för bildruta två.

Därefter kan du välja hur länge en bildruta ska visas. Klicka bara på tidsangivelsen i bildrutan så fälls en meny ut med olika alternativ. Du kan också välja hur många gånger din animation ska repetera längst ner till vänster i panelen. Ovanstående animation pågår i oändligheten.

animation copy

När du är färdig sparar du din animation genom File > Save for Web and Devices (Arkiv > Spara för webb och enheter). Där väljer du att spara i formatet GIF. Nu är animationen färdig att slänga upp på din blogg!

Fler tips inom:

45 kommentarer till Tips 299: Gör Gif-animationer

  1. Mikael skriver:

    Aah, ska helt klart testas! Tack för tipset.

    //Mikael

  2. Anders skriver:

    Sjuuuuuuuukt cool exempelanimation också!

  3. Sanna skriver:

    @Mikael: Var så god. Fredagsnöje helt klart!

    @Anders: Du är lättimponerad men det beror på sjuuuuuukt lite sömn för din del. Gå och lägg dig!

  4. anna skriver:

    jag försöker få bilden att rulla men det fungerar inte när jag laddar upp den på sidan…den rullar fint när jag öppnar den som vanligt men inte på BLoggen..tips?

  5. Sanna skriver:

    @anna: Vet inte vilket bloggsystem du använder? Är det så att du förminskar din animation på något sätt när du lägger upp den på bloggen? Ser att det kan ge problem nämligen.

  6. anna skriver:

    tack snälla ….det fungerade!!

  7. Charly skriver:

    Hej,
    jag sitter med mitt Elements 8 och försöker skapa gif-animation. Jag får inte till det. Hur ska jag bära mig åt?
    //Charly

  8. Sanna skriver:

    @Charly: Det verkar vara lite annorlunda i Elements. Kika här och se om det hjälper: http://help.adobe.com/en_US/PhotoshopElements/7.0_Win/WSBD511CF9-F3E4-44ab-BAD2-4F8919956494.html

  9. Annika skriver:

    Tack, precis vad jag behövde! Tänk att man alltid kan hitta precis vad man behöver hos er. Otroligt. Är ni tankeläsare? :)

  10. John.w skriver:

    Hej kan du visa detta mera utförligt!! mvh,John. animation. Klicka bara på den vita lilla knappen för ny bildruta. I exemplet har jag två bilder som ska animeras men det går givetvis ha fler.

    När du skapat alla dina bildrutor är det bara börja att animera. Klicka på första bildrutan och slå av eller på synligheten på de lager som ska visas. Fortsätt på samma sätt i alla andra bildrutor.

    Ex: I min bild valde jag att i bildruta ett ha det ena lagret synligt medan det andra var osynligt, och tvärt om för bildruta två.

  11. Sanna skriver:

    @John w: Den vita knappen skapar bildrutor. Ställ dig på varje bildruta, en i taget, och bestäm hur just den rutan ska se ut via lagerpanelen.

    Vill du att ett lager ska synas så slår du av synligheten på alla andra via det lilla ögat till till vänster om lagret. Du väljer vad som ska vara synligt.

    Därefter klickar du på nästa bildruta och gör förändringar i lagerpanelen igen. Förändringarna sparas i din bildruta.

  12. John.w skriver:

    Vet fortfarande inte vilken vita knapp du menar+när du menar synligheten i lager menar du då opaciteten??Mvh /j

  13. John.w skriver:

    Hej igen! kan du guida stegvis via photoshop,så blir der lättare,(för en trögmask som jag).Mvh!John

  14. Sanna skriver:

    @Johan w: Den vita knappen har jag pekat ut med en röd pil ovan i inlägget.

    Med synlighet menar jag inte opacitet (även om jag tror att det slår igenom också), utan det lilla ögat som ligger bredvid alla lager (som du ser i den andra bilden ovan) .

  15. John.w skriver:

    Gazie millE!!

  16. ★Fam. Bus★ skriver:

    hej!

    detta var precis vad jag sökte, o jag får till det ända fram tills den ska upp på bloggen. Den lägger sig bara som en bild.

    Använder blogg.se

    Förminskade bilderna först till 500px, o laddar upp bilden i 500bredd. Fel??

    Snälla, vore tacksam för hjälp! kram o ha det fint

  17. Stephanie skriver:

    Hejsan på er!
    Super bra hemsida :).

    Jag har precis lärt mig att göra animeringar i photshop nu jag med.

    Och som FAM BUS ovan använder jag blogg.se som bloggplattform. Allt går bra enda tills jag ska ladda upp. Jag gör som det står. Men vad kan felet vara?

    Mvh Stephanie

  18. Lovisa skriver:

    allt går super…. ända fram tills jag ska spara! ”web and devices” går inte ens att trycka på (den är grå). vad är problemet?

    tack!

  19. Sara skriver:

    Hej, jag kan inte få upp bilderna i olika lager utan det blir olika flikar! Jag blir galen och har verkligen inget tålamod vilket är dåligt… något tips om hur jag ska göra? Jag har photoshop Cs4

  20. Mona skriver:

    Mycket bra tips du har! Men nu har jag kört fast med animeringen. Bilderna lägger sig ovanpå varandra i tidslinjen. När jag slår av och på visningen ser jag de olika bilderna, men det blir ingen animering. Vad gör jag för fel? Vill så gärna göra animerade julkort. Please help! Har CS5

  21. Sanna skriver:

    @Mona: Använd inte tidslinjeläget utan växla till bildruteläget, som jag visar ovan.

  22. Mona skriver:

    Tack snälla för hjälpen :)

  23. Maria skriver:

    Har gjort allt som det står, och den funkar perfekt i ps (har cs5). Sen trycker jag på Save for web and devices, och då kommer en annan ruta upp, med olika redigeringsverktyg eller liknande, och sen står det att den är i GIF-format. Då klickar jag på Save, och väljer mapp. Efter det så har jag försökt ladda upp den på bloggen, men sedan står det nånting med att ”sidan kunde inte hittas”, och det funkar inte, har testat flera gånger :/ kan det ha nåt med webbläsaren att göra? Använder google chrome, och har även testat med Safari, men samma sak sker. Jättetacksam för svar!

  24. Sanna skriver:

    @Maria: Vet tyvärr inte vad det kan bero på dessvärre. Det ska inte bero på din webbläsare.

  25. Jenny skriver:

    Hej! allt går bra tills det att jag ska spara. Då går det inte att klicka på ”spara för webb och enheter”. vad ska jag göra?

  26. sigrid skriver:

    Hej! På den här animerings rutan är det en sak läängst ner till höger man ska klicka på, men när jag trycker upp animerings rutan är den inte där! Vad kan det bero på? tacksam för svar:)

  27. Moa skriver:

    Hej! Hmm… jag har ett problem. Jag har gjort allt som man ska göra och nör jag spelar ”filmen” i ps så funkar det som det ska och jag kan spara den och ladda upp den på bloggen men när den är uppe på bloggen så är det som en bild och den visar bara första bilden i ”filmen”. Den är likadan även när jag kollar på den på datorn och när jag öppnar den igen i ps så är det bara en bild…. vad är det som är fel?

    tack på förhand/ moa

  28. jag har testat detta nu men de blir brusigt i bilden när jag sparar den i gif och när jag laddar upp den så vill den inte röra sig och är fortfarande brusig :S

  29. Challen skriver:

    Hej!
    Jag testade att göra en animation, men den funkar inte när den väl hamnar i ett inlägg på bloggen.
    då visas bara en av de två bilderna
    Tacksam för svar

  30. Hej!
    Vill tacka för den en beskrivning som var mycket enkel att följa. Jag satt och skulle göra nya annonser för http://www.mystica.se och sökte på google då jag snubblade in på denna sida.
    Följde instruktionerna och blev supernöjd med resultatet, så fler sådana animerade annonser kommer jag helt klart att göra.
    Tack än en gång!
    // Lizette, Mystica.se

  31. Josefine skriver:

    Hm. inte så bra. rörigt skrivet, man fattar inget, ” Klicka bara på den vita lilla knappen för ny bildruta” VILKEN vit liten knapp?

  32. Anna ;) skriver:

    Tack så mycket! :D

  33. anonym skriver:

    Det funkade inte D:

  34. Alexandra skriver:

    Hej, Jag har lite problem med detta. Allt funkar prima fram tills det är dags att spara i gif. När jag sparar så blir bilderna ALLDELES för stora. Hat försökt förminska dom i photoshop innan jag börjar med animationen men det hjälper dessvärre inte. Det är fortfarande samma problem när jag ska spara. Sedan så vet jag inte om jag ska välja för alternativ när sprarutan kommer upp, HTML och bilder, Endast HTML eller Endast bilder. Använder mac.

  35. Hanna skriver:

    Jättebra tips!
    För er som har svårt att hänga med: Kolla in denna bild-tutorial, där lärde jag mig:

    http://megapixlar.blogg.se/2011/march/hur-du-gor-den-egna-grymma-animering.html

  36. Tilia MD skriver:

    Hej! Jag har försökt på flera olika sätt, men kvalitén blir alltid jätte dålig på bilderna när man sedan ska spara den till webben. gif. filen gör bilderna pixliga och fula. Har du lyckats att få dem bra? Arbetar i Photoshop CS5

    • Sanna skriver:

      Ja tyvärr är det något som du inte kommer undan. Gif-formatet är till för grafik i första hand och inte fotografier, så därmed får du lite sämre kvalitet.

  37. sara skriver:

    Hej!

    Jag har stött på ett problem med att göra rörliga bilder i GIF-format. Jag har tidigare gjort några på samma väg, och då har allt gått smärtfritt, men nu får jag inte ihop det.

    Jag gör dom via photoshop CS4, och allt funkar bra. Jag gör ett lager för varje ruta, och klickar i ”gör bildrutor från lager”, sen spelar jag upp och är nöjd med hastigheten så jag ska spara. Går in på ”spara för webb och enheter”, men när jag spelar upp bilden där så är hastighet mycket snabbare.

    Men jag sparar ändå, och öppnar mina nya bild i webbläsaren. Då går den mycket långsammare än från början, och när jag laddar upp den på nätet så rör den sig inte alls.

    Så, först är hastigheten perfekt, sen för snabb i nästa steg, för långsam när den har sparats och till sist helt stilla när den är uppladdad.

    Jag har som sagt gjort animerade gifs med samma dator och samma program tidigare, och då har allt funkat bra. Så vad gör jag fel nu?

    • Sanna skriver:

      Jag vet inte varför hastigheten skiftar tyvärr, kanske vet någon på Pixelplaneten.se. Varför den inte fungerar där du laddar upp den kan bero på att vissa system avaktiverar att gif-bilder fungerar som de ska. Var laddar du upp den?

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*

Följande HTML-taggar och attribut är tillåtna: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>