Tutorial - Animering

Om du är intresserad av att testa detta, så var god läs hela texten.
Känns sådär lagom kul att lägga ner en massa tid på att förklara så bra som möjlig (för att minimera antalet följdfrågor) när man sedan ändå får frågor om sådant som redan står, bara för att någon inte läst tillräckligt noga.


Tänkte att jag skulle berätta hur jag gör en animering i Photoshop, eftersom många blev intresserade av det, efter det här inlägget.
Vi börjar med en enkel animation bestående av enbart två bilder som ska flippa.

Dock finns det en väldigt central sak som du bör kunna innan du sätter igång med animeringar på allvar sedan och det är att Kunna arbeta i lager.



1. Öppna de två bilderna i photoshop.
Dra över dem till samma arbetsyta (Antingen drar du helt enkelt bara den ena bilden till den andra med hjälp av markören, eller så använder du Ctrl + C för att kopiera den ena bilden och Ctrl + V för att klistra in den på den andra).

2. Öppna animeringsfönstret.
Klicka på Fönster>Animering (Window>Animation) uppe i menyn.
Då öppnas det ett nytt fönster i nederkanten av programmet.
När fönstret precis är öppnat, så kommer det bara att synas en bildruta i fältet.
För att skapa fler rutor så klickar du på ikonen bredvid papperskorgen (se bild).


VIKTIGT OM BILDRUTOR!
En sak som är bra att veta, är att det är smartast att ha alla händelser förberedda och klara i olika lager i bilden innan du börjar skapa bildrutor, för att därefter placera ut händelserna där du vill ha dem.
Om du mot all förmodan skulle göra en ny händelse när du är mitt inne i att animera, så kommer denna att lägga sig över alla bildrutor, vilket är ganska irriterande när man redan ansett sig vara klar med några av dem....

En annan sak som du bör veta, är att varje enskild bildruta har en egen "lagerinställning".
Dvs. För att visa och dölja händelser i de olika bildrutorna, så ändrar du i Lagermenyn nere till höger.
Alla bildrutors lagerinställningar regleras från samma lagermeny och detta kommer du se när du bläddrar i mellan lagerrutorna - lagren kommer att se ut på olika sätt beroende på vilken som är markerad.

3. Redigera bildrutorna
Markera den första bildrutan i animeringsfönstret och gör den övre bilden osynlig genom att klicka i rutan med ögat i lagermenyn, så att ögat försvinner. Sedan markerar du bildruta nummer två i animeringsfönstret och då kommer det översta laget förmodligen att vara synligt, men om det inte är det så klickar du bara i den lilla rutan där ögat var en gång till, så att ögat kommer tillbaka.



4. Redigera animeringen
Nu kan du göra ganska mycket med bilderna. Själva animeringen finns redan där, men nu är det upp till dig att avgöra hur lång tid visningen av bilderna ska vara, om animeringen är oändlig eller om den bara ska visas en gång och om bilderna ska tonas ihop eller ej.
Ikonerna till det hittar du geom att kolla på bilderna nedan.
Det är bara att klicka på ikonerna, så förstår du nog vad jag menar....

För att förhandsvisa din animation - klicka på playpilen i animationsfönstret...


5. Publicera bilden.
Gå in i Arkiv>Spara för webben (File>Save For Web & Devices). Där kan du välja filformat i listan till höger. Välj GIF.
Sedan är det bara att ladda upp på bloggen! :)


Vill du veta hur man gör en bild svartvit med färgade detaljer, klicka här!

24 Kommentarer
Jenny

jätte coolt tack för tipset :D

2009-01-07 @ 19:09:46
URL: http://zaliw.blogg.se/
majahärnqvist

Gah, toppen elin! :D mer tips vill vi ha!

2009-01-07 @ 19:10:42
URL: http://majahqvist.blogg.se/
Ida

Tack så mycket Elin! :D <3 Måste testa det där ;D

2009-01-07 @ 19:11:34
URL: http://taralom.blogg.se/
Sandra

Ballt :)

2009-01-07 @ 19:18:08
URL: http://rockgrodan.com
Hanna

Intressant, visste inte att man kunde göra animeringar i photoshop, alltid laddad ner diverse grattis program, men det funkar ju också:)

2009-01-07 @ 19:25:50
URL: http://greenrealm.blogg.net
Magnus

Någon gång skall jag lära mig photoshop, köpte en guide idag men tror att det blir senare, just nu fotar jag rent som det är och som jag ser det.

2009-01-07 @ 19:26:52
URL: http://www.textskelett.blogspot.com
Liisa

Jag som tänktye fråga dig hur man gjorde igår, om du kunde visa.
Men så hittade jag en sida dä det stog (minns inte vad den hette nu dock), så jag gjorde en igår ^^
Tajming xD

2009-01-07 @ 19:27:32
URL: http://theliisa.blogg.se/
Liisa

Jag som tänktye fråga dig hur man gjorde igår, om du kunde visa.
Men så hittade jag en sida dä det stog (minns inte vad den hette nu dock), så jag gjorde en igår ^^
Tajming xD

2009-01-07 @ 19:27:33
URL: http://theliisa.blogg.se/
JENNY HSU ♥

Hej Elin! Läste för ett tag sen ett inlägg där du frågade i vilket format man skulle använda när man laddar upp sina bilder på bloggen. Jag använder PNG för att jag tycker att bilderna blir lika fina som när man jobbar med dom i photoshop.. Men antar att det tar lång tid för vissa att ladda/visas? Undrar om du kunde tipsa om vilket format man "borde" spara dem i men ändå kunna behålla deras glans i bilderna? Tack på förhand :) /Jenny

2009-01-07 @ 19:31:33
URL: http://yannii.blogg.se/
Martina

Hej! Jag är verkligen kass på designen på min blogg. Men jag läste dina tips och trix så gick det väldigt bra! Nu blev min blogg lite snyggare iaf. tack du. kram

2009-01-07 @ 19:36:38
URL: http://martinastork.blogg.se/
Martina

Hej! Jag är verkligen kass på designen på min blogg. Men jag läste dina tips och trix så gick det väldigt bra! Nu blev min blogg lite snyggare iaf. tack du. kram

2009-01-07 @ 19:36:58
URL: http://martinastork.blogg.se/

Jag vill bara påpeka att den här funktionen inte finns i versionerna tidigare än cs3 =)

2009-01-07 @ 19:42:29
URL: http://jyees89.blogg.se/
Angelique

Någon dag ska man väl orka lära sig ;)

2009-01-07 @ 19:45:05
URL: http://kinkykitten.blogg.se/
Renée

Hejsan,
jo det är såhär att jag undrar en sak,
och det är hur man återställer inställningarna
i illustrator..
Vore tacksam om du kunde förklara hur :)

2009-01-07 @ 19:51:43
URL: http://nennebua.blogg.se/
Emelie Talvis - e t a l v i s ♦

Bara att ladda upp som en vanlig bild?

2009-01-07 @ 19:52:45
URL: http://etalvis.blogg.se/
Jonnee [fotoblogg]

Jag gjorde en tutorial om det i min blogg igår, hehe, men min var lite längre..

http://jonnee.blogg.se/2009/january/hur-man-gor-en-animation.html#comment

2009-01-07 @ 21:03:17
URL: http://jonnee.blogg.se/
Liisa

Fast jag har ett problem och det är att den vägrar röra sig -.-
Jag har gjort så som man ska. Den funkar ibland ...

2009-01-07 @ 21:18:15
URL: http://theliisa.blogg.se/
S o f i e

Oh! you made my day med den där :). har velat veta hur man gör hur länge som helst :).

2009-01-07 @ 23:45:02
URL: http://pictureperfect.blogg.se/
Pamela

Hmm, konstig nog så gjorde jag allt du skrev där och försökte ladda upp den på bloggen. Men den vill fortfarande inte inte röra/flippar. Den rör på sig när jag kolla på bilden men när jag laddar upp den på bloggen och försöker publicerar så händer ingenting. Vet du vad jag har gjort för fel?
Hälsningar Pamela

2009-01-08 @ 19:30:52
URL: http://zoniex.blogg.se/
Julia

Nejmen ELIN! Nu blev jag lite besviken. Visst trodde jag väl att ett proffs som du skulle ha PS på engelska, som det SKA vara! Ajjabajja! :P :)

2009-01-08 @ 22:39:22
URL: http://precissomjulia.blogg.se/
Sara

Grymt bra guide ! :) gjorde en liten video men min blogg verkar inte gilla Gif formatet =/ Ska skaffa blogg.se snart så får se om det går att publicera då eller om jag gjort något fel i sparandet :P

2009-01-11 @ 19:28:03
URL: http://sassa-sara92.blogspot.com
Matilda

det fungerar verkligen inte för mig och jag har läst texten 10000 gånger :o
men jag tror jag fastnar där i mitten, du kanske kan höra av dig via mejl och försöka hjälpa mig? :) jag förstår inte det där med bildrutorna! tack på förhand!

2009-01-13 @ 20:38:59
URL: http://mahuldan.blogg.se/
Matilda

det fungerar inte för mig :(:(:(

2009-02-05 @ 20:54:36
URL: http://mahuldan.blogg.se/


Kommentera här



FOTO
- Om min kamerautrustning. [länk]
- Kamerafrågor: Vilken kamera ska jag välja? [länk]
- Mina bilder redigeras i Adobe Photoshop CS3.

ILLUSTRATION
- Jag gör inga illustrationer åt andra.
- Alla illustrationer är gjorda i Adobe Illustrator CS3.
- Jag har ingen ritplatta, utan ritar med datormusen.

DESIGN
- Jag gör inga bloggdesigner åt andra.
- Jag svarar inte på frågor ang. bloggdesign, utan hänvisar er till designadinblogg.se. [länk]
- Alla bloggdesigner kodas för hand.




Namn:
Kom ihåg mig? Fungerar ej.

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

RSS 2.0