Share
Det finns en bra chans att det här inte kommer att intressera dig alls (animerad gif Ian? Skulle du skratta?) Men jag lovade någon jag skulle skriva detta. Jag har nyligen gjort animerade förhandsgranskningsbilder för nyhetsposter på Activetuts +, och nu är jag här borta, det är bara rättvist jag lät Michael veta hur det är gjort.
Photoshop är inte precis en branschledare inom animationsområdet, men för enkla uppgifter som det här gör det bara bra. Vi kommer att ta en standard 200x200px Tuts + förhandsgranskningsbild och lägga till en rullningsnyhets ticker längst ner på den.
Låt oss ta ett passande foto. Här är en som jag tog under Envato-mötet i Chicago förra året, beskuren till 200x200px. Öppna den i Photoshop.
Vi behöver bara två extra lager för detta; en bakgrund för ticker (rektangel färgad # 104333) och en del text med vår önskade mening upprepas ett par gånger.
Tecknet heter 04b_03 och är fritt tillgängligt från dafont.com. Det är en 8-bitars teckensnitt, vilket innebär att du måste visa den vid dess basstorlek (eller en multipel av) med anti-alias avstängd för bästa pixelerade resultat. I det här fallet tittar vi på 8px.
Den har en mjukgrön ton av # f0fcdf med en halvtransparent 1px slag av # 051a14 (för att hjälpa den att sticka ut från bakgrunden).
Öppna ditt animationsfönster (fönstret> animering) och byt till bildvy med hjälp av nedre högra knappen i panelen.
Du kan se den första ramen som nagelfickade för dig, se till att fördröjningen är inställd på 0 sek (direkt under miniatyrbilden) eftersom vi vill att ramen ska spelas så fort den uppstår. Vad du kan se i den första miniatyren är animeringen i sitt nuvarande tillstånd, lagren och objekten precis som du har lagt dem ut.
Klicka på ikonen "Dubbla valda ramar" för att skapa en andra bild. Det här är vårt slutliga tillstånd. Medan den andra miniatyren är vald, tillämpas alla ändringar som vi utför på våra lager endast i den här ramen.
Tween härrör från ordet "inbetweening" och refererar till gradvisa stadier mellan två stater, vilket föreslår rörelse.
Med den andra ramen vald, flytta texten över skärmen i den riktning du vill att den ska rulla. Du kanske vill hålla ner skiftet för att förhindra att det avviker från dess horisontella kurs. Flytta det hela vägen så det verkar vara i exakt samma position som det började.
I det här fallet är "N" stött upp mot vänster sida, så det är lätt att se var jag strävar efter.
När du har flyttat din text väljer du båda ramarna och klickar på knappen "Tweens animation frames". Om du gör det kommer du att avslöja följande dialog:
Som du kan se har jag valt ytterligare 99 ramar att sitta mellan mina två stater. Jag ville att alla lager i mitt dokument skulle matas ut i dessa ramar och jag syftar verkligen till att animera "text" -egenskapen i mitt textlager. Super. Hit OK.
Du har nu massor av ramar som sitter i ditt animationsfönster och alla ser nog ungefär ut som nästa! Men försäkra dig själv genom att trycka på avspelningsknappen och se din text animera före dina ögon. Magi, mina damer och herrar?
Bara för att städa upp saker, välj den 101: e ramen och ta bort den. Som du kanske kommer ihåg är det identiskt med den första ramen, så looping kommer faktiskt att stöta dem mot varandra vilket ger oss en glitch i vår annars smidiga animering.
Resultatet är subtilt men i bilden ovan kan du se vår första bildram och vår sista ram (nummer 100). Looping kommer att blanda dem sömlöst.
Det är allt! Animation komplett. Nu behöver vi bara spara vår fil, så gå till Arkiv> Spara för webb och enheter. Välj GIF som filtyp, och sedan längst ner, inom animationsdelen, välj "Loop forever". Du kan också förhandsgranska animeringen, bara för att vara säker.
Om du vill redigera din fil, samtidigt som du behåller animeringen (du kanske vill ändra texten och byta ut bakgrundsbilden till exempel) så behöver du bara redigera den första bilden. Håll den första bilden vald, välj det lager du vill ändra och se till att alternativet "Propagate Frame 1" är markerat.
Alla attributändringar som gjorts till det lagret kommer att spridas (reproduceras) över alla andra ramar. Lägg till en droppskugga i textlagret i ram ett och Hey Presto! där är det tvärs över animationen. Att misslyckas med att kontrollera "Propagate Frame 1" kommer att resultera i att bara en ram ändras.
Jag gissar att du inte vaknade i morse och tänkte "Det finns en verklig brist på animerade giftrådar där ute" och, om du inte är redaktör för en av Tuts + -sidorna, finns det en bra chans att du inte hittar någon nytta för detta. Fortfarande, Michael, jag hoppas att du hittade detta informativt och jag förväntar mig högkvalitativa nyheter efterhandsvisningsbilder på Activetuts + från och med nu :)
Accentsconagua