Hvordan lage et animert webbanner i Photoshop

Sep 14, 2025
hvordan

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

Som vi animerer dette også, vil jeg ikke foreslå mer enn tre lysbilder eller animerte elementer som folk bare ikke vil se det. Blinkende elementer kan også bidra til å få oppmerksomheten til betrakteren.

Make this animated banner for a website below…

Gjør dette animerte banneret for et nettsted under ...

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

01. Sett opp dokumentet ditt

Start Photoshop, naviger til File & GT; Ny og velg Web fra den forhåndsinnstilte rullegardinmenyen. Fra rullegardinmenyen Størrelse velger du Leaderboard, eller hvis dimensjonene dine varierer, velger du Tilpasset og skriver inn pixeldimensjonene manuelt.

Med Snap til å dokumentere grenser valgt fra Vis-menyen, dra guider for å snappe til alle grensene i dokumentet.

02. Legge til grafiske elementer

Nå for å plassere våre viktige designelementer. I det ovennevnte eksempelet jeg limte inn i T3-kvadratlogoen, og som jeg hadde opprettet, kunne støttelinjene re-size den og få det til å snappe til dokumentgrensene enkelt. Lim inn en pilgrafikk som vi bruker senere, og bruker Type-verktøyet, angir meldingen din for det første lysbildet. Lim inn i noen bilder du trenger, og sørg for at du heter opp alle lagene dine på riktig måte.

03. Opprette sekundære lysbilder

Nå bare duplisere ditt type lag, slå av typen laget under og skriv inn neste fase av meldingen, i dette tilfellet "på salg nå". Når du er glad for at du har alle elementene på plass, slå sammen så mange lagene som mulig. Som bakgrunnen vil logoen og dekselbildet forbli statisk, vi kan slå sammen dette ned å forlate oss med fire lag, bakgrunnen, typen lag og pillaget.

04. Lag rammeanimasjonen

Bare klikk bare på tidslinjen-fanen nederst i vinduet eller naviger til Window & GT; 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. Påfør en annen forsinkelse på rammen fra rullegardinmenyen på den lille animasjonsrammen. Nå klikk bare klikk på "Duplicate Selected Frames" -knappen i tidslinjen, men slå av den første meldingen og slå på den andre meldingen. Gjenta denne prosessen for alle lagene, etterbehandling med pilen.

  • De 10 største olympiske leker logoer av all tid

05. Gjør pilen blinker og juster timings

For å gjøre pilen blinker, slår du bare "dupliserte utvalgte rammer" fra tidslinjen og slår på pilen. Juster tiden til 0,5 sekunder og gjenta prosessen og slå på pilen på og av i lagpanelet slik at det vises som om det blinker. Endelig vil du kanskje justere noen av timingene til du er helt glad. Folk har svært kort oppmerksomhetsspenninger, så det er ikke noe poeng å være sakte med bildefrekvensen, men de trenger fortsatt å kunne lese den.

06. Lagre for web og enheter

Endelig naviger til "Lagre 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 med å lagre GIF og så bare dra den til en nettleser for å teste den ut.

hvordan - Mest populære artikler

Hvordan skrive HTML-kode raskere

hvordan Sep 14, 2025

[1. 3] (Bildekreditt: Fremtid) Moderne nettsteder krever mye HTML-kode. Komplekse layouter med flere forskjellige syns..

Hvordan maling som en 1800-talls mester

hvordan Sep 14, 2025

[1. 3] Det 19. århundre var en fantastisk tid for kunst. Kunstnere ble holdt i høy grad og offentligheten ble utdannet om kunst...

Lag interaktive 3D-typografiske effekter

hvordan Sep 14, 2025

[1. 3] Typografi har alltid spilt en stor rolle i enhver designers arsenal av verktøy som de velger riktig skrifttype som vil for..

Hvordan bygge raskere nettsteder

hvordan Sep 14, 2025

[1. 3] Foran hans snakk på Generere London 21. september fanget vi opp med Patrick Hamann. , en web..

Skarpe dine skisseferdigheter

hvordan Sep 14, 2025

Sketching. er et enkelt, men kraftig verktøy for alle som er involvert i å lage digitale produkter. Penner, papir og whiteboards er lett tilgjengelige i hvert kontor; Det er ikk..

Lag en kinemagraph med Photoshop på 60 sekunder

hvordan Sep 14, 2025

Ønsker du kan hente en ny ferdighet, men kan ikke synes å finne tid til å sette seg ned og lære? Adobe's. Gjør det nå spilleliste kan være akkurat det du er ute etter. F..

Lag et selvportrett med bare 4 farger

hvordan Sep 14, 2025

[1. 3] Selvportrett er en av de mest givende utfordringene en kunstner kan forsøke. Fordi vi kjenner landskapene til våre egne a..

Utforsk kreativ kode med p5.js

hvordan Sep 14, 2025

[1. 3] Tilbringe en dag med Brendan Dawes. på Generere London ..

Kategorier