Hvordan lage et animert webbanner i Photoshop

Å lage webbannere er ikke den mest glamorøse jobben i verden, men det er noe hver designer vil være pålagt å gjøre på et tidspunkt i karrieren, sannsynligvis mange ganger. Selv om det ikke er noen harde og raske regler når det gjelder å lage webbannere, sier det seg selv at typen må være stor og meldingen slagkraftig.

Når vi også animerer dette, foreslår jeg ikke mer enn tre lysbilder eller animerte elementer, ettersom folk rett og slett ikke vil se det. Blinkende elementer kan også bidra til å fange oppmerksomheten til betrakteren.

Lag dette animerte banneret til et nettsted nedenfor ...



Lag dette animerte banneret til et nettsted nedenfor ...

I løpet av de neste trinnene vil jeg demonstrere hvordan du konfigurerer og lager et enkelt animert webbanner som en gang mestrer vil være en lek å bruke på enhver ny jobb i fremtiden.

hvordan du får merke til tumblr-bloggen din

01. Sett opp dokumentet

Start Photoshop, naviger til fil> ny og velg Internett fra rullegardinmenyen Forhåndsinnstilt. Velg ledertavle fra rullegardinmenyen eller hvis dimensjonene dine varierer, velg deretter tilpasset og skriv inn pikselmålene manuelt.

Med snap to document bounds valgt fra visningsmenyen, dra guider for å snap til alle rammer i dokumentet.

forskjell mellom positivt og negativt rom

02. Legge til grafiske elementer

hvordan tegne en drage hodeskalle

Nå for å plassere våre essensielle designelementer. I eksemplet ovenfor limte jeg inn T3-firkantlogoen, og da jeg opprettet, kunne guidene endre størrelsen på den og få den til å smekke til dokumentgrensene. Lim inn en pilgrafikk som vi bruker senere, og bruk typeverktøyet til å angi meldingen din for det første lysbildet. Lim inn alle bildene du trenger, og sørg for at du navngir alle lagene dine riktig.

03. Opprette sekundære lysbilder

Nå er det bare å duplisere typelaget ditt, slå av typelaget under og skrive inn neste trinn i meldingen, i dette tilfellet “I SALG NÅ”. Når du er glad for at du har alle elementene på plass, fletter du sammen så mange lag som mulig. Som bakgrunn, logoen og forsidebildet vil forbli statisk, så kan vi slå det sammen, slik at vi har fire lag, bakgrunnen, typelagene og pilelaget.

04. Lag rammeanimasjonen

Nå er det bare å klikke på tidslinjefanen nederst i vinduet eller navigere til vindu> Tidslinje. Klikk på den lille pilen i midten av vinduet, og velg 'Opprett rammeanimasjon' og klikk deretter på knappen. Slå nå av alle lagene bortsett fra bakgrunnslaget og det første meldingslaget. Bruk et sekund forsinkelse på rammen fra rullegardinmenyen på den lille animasjonsrammen. Nå er det bare å klikke på 'dupliser valgte rammer' -knappen i tidslinjen, men slå av den første meldingen og slå på den andre meldingen. Gjenta denne prosessen for alle lagene, og avslutt med pilelaget.

05. Få pilen til å blinke og juster timene

Samsung Galaxy S7 Walmart Straight Talk

For å få pilen til å blinke, trykk bare på 'Dupliser valgte rammer' fra tidslinjen og slå av pilen. Juster tiden til 0,5 sekunder, og gjenta prosessen ved å slå pilen av og på i lagpanelet, slik at det ser ut som om det blinker. Til slutt vil du kanskje justere noen av tidene til du er helt fornøyd. Folk har veldig korte oppmerksomhetsspenn, så det nytter ikke å være treg med bildefrekvensen, men de trenger fortsatt å kunne lese den.

06. Lagre for nett og enheter

Til slutt navigerer du til “Save for web” og velg GIF fra rullegardinmenyen. Du kan også redusere kvaliteten litt her for å få filstørrelsen ned. Når du er fornøyd, kan du lagre gifen og deretter dra den til en nettleser for å teste den.