Share
Det er en god sjanse for at dette ikke vil interessere deg i det hele tatt (animert gif Ian? Har du en latter?), Men jeg lovet noen jeg ville skrive dette. Jeg har nylig laget animerte forhåndsvisningsbilder for nyhetsposter på Activetuts +, og nå er jeg her over, det er bare rettferdig, jeg lar Michael vite hvordan det er gjort.
Photoshop er ikke akkurat en bransjeleder innen animasjonens rike, men for enkle oppgaver som dette, gjør det bare bra. Vi skal ta en standard 200x200px Tuts + forhåndsvisningsbilde og legge til en rullende nyhets ticker til bunnen av den.
La oss ta et passende bilde. Her er en jeg tok under Envato møtet i Chicago i fjor, beskåret til 200x200px. Åpne den opp i Photoshop.
Vi trenger bare to ekstra lag for dette; en bakgrunn for ticker (rektangel farget # 104333) og noen tekst med ønsket setning gjentas et par ganger.
Skriften er kalt 04b_03 og er fritt tilgjengelig fra dafont.com. Det er en 8-biters skrifttype, noe som betyr at du må vise den ved basestørrelsen (eller et flertall av) med anti-alias slått av for beste pixelerte resultater. I dette tilfellet ser vi på 8px.
Den har en myk grønn tone på # f0fcdf med et halvt gjennomsiktig 1 px slag av # 051a14 (for å hjelpe det skille seg ut fra bakgrunnen).
Åpne animasjonsvinduet ditt (vindu> animasjon), og bruk den nederste høyre knappen i panelet, bytt til rammevisning.
Du kan se den første rammen som er tommelfingeren for deg, bare sørg for at forsinkelsen er satt til 0 sek (direkte under miniatyrbildet) som vi vil at rammen skal spilles så snart den oppstår. Det du kan se i den første miniatyrbilden, er animasjonen i sin nåværende tilstand, lagene og objektene akkurat som du har lagt dem ut.
Trykk på "Dupliser valgte rammer" -ikonet for å lage en andre ramme. Dette er å være vår endelige tilstand. Mens den andre miniatyrbildet er valgt, brukes alle endringene vi utfører på våre lag, kun i denne rammen.
Tween er avledet fra ordet "inbetweening" og refererer til gradvise stadier mellom to stater, noe som tyder på bevegelse.
Med den andre rammen som er valgt, flytter du teksten over skjermen i retningen du vil at den skal rulle. Du vil kanskje holde nede skift for å hindre at det kommer fra sin horisontale kurs. Flytt det hele veien, så det ser ut til å ligge i nøyaktig samme posisjon som det startet.
I dette tilfellet er "N" støttet opp mot venstre side, så det er lett å se hvor jeg sikter mot.
Etter å ha flyttet teksten, velg begge rammene og trykk på "Tweens animasjonsrammer" -knappen. Å gjøre det vil avsløre følgende dialog:
Som du kan se, har jeg valgt ytterligere 99 rammer å sitte mellom mine to stater. Jeg ville at alle lagene i dokumentet mitt skulle sendes ut i disse rammene, og jeg har egentlig bare sikte på å animere "posisjonen" -egenskapen til tekstlaget mitt. Super. Hit OK.
Du har nå massevis av rammer som sitter i animasjonsvinduet ditt, og hver av dem ser sannsynligvis veldig ut som det neste! Imidlertid berolig deg selv ved å trykke på avspillingsknappen og se teksten animere før øynene dine. Magi, damer og herrer?
Bare for å rydde opp ting, velg den 101. rammen og slett den. Som du kanskje husker, er det identisk med den første rammen, så looping vil faktisk støte dem opp mot hverandre og gi oss en glitch i vår ellers glatte animasjon.
Resultatet er subtelt, men i bildet ovenfor kan du se vår første ramme og vår siste ramme (nummer 100). Looping vil blande dem sømløst.
Det er det! Animasjon fullført. Vi må bare lagre filen, så gå til Arkiv> Lagre for web og enheter. Velg GIF som filtype, deretter nederst, innenfor animasjonsseksjonen, velg "Loop forever". Du kan også forhåndsvise animasjonen, bare for å være sikker.
Hvis du vil redigere filen, samtidig som du beholder animasjonen (du vil kanskje endre teksten og bytte ut bakgrunnsbildet, for eksempel), er alt du trenger å gjøre, redigere den første rammen. Hold den første rammen valgt, velg laget du vil endre, og kontroller at alternativet "Propagate Frame 1" er merket.
Alle attributtendringer som gjøres til det laget vil bli forplantet (gjengitt) på tvers av alle andre rammer. Legg til en dråpeskygge i tekstlaget i ramme ett og Hey Presto! der er det rett over animasjonen. Hvis du ikke kontrollerer "Propagate Frame 1", blir det bare en ramme som endres.
Jeg gjetter at du ikke våknet i morges og tenker "Det er en reell mangel på animerte gif tuts der ute" og, med mindre du er redaktør for en av Tuts + -nettene, er det en god sjanse for at du ikke finner noe nytt for dette. Likevel, Michael, jeg håper du fant dette informativ, og jeg forventer toppkvalitets nyhetsoppdateringsbilder på Activetuts + fra nå av :)
Accentsconagua