Hur man skapar en animerad webbbanner i Photoshop

Sep 12, 2025
Hur

Att skapa webb banners är inte den mest glamorösa jobb i världen, men det är något som varje designer kommer att behöva göra någon gång i sin karriär, förmodligen många gånger över. Även om det inte finns några hårda och snabba regler när det gäller att skapa webbbanners, är det självklart att typen måste vara stor och meddelandet Punchy.

När vi animerar det här, föreslår jag inte mer än tre diabilder eller animerade element eftersom människor helt enkelt inte tittar på det. Blinkande element kan också bidra till att ta hänsyn till tittarens uppmärksamhet.

Make this animated banner for a website below…

Gör den här animerade bannern för en webbplats nedan ...

Under de närmaste stegen kommer jag att visa hur man installerar och skapar en enkel animerad webbbanner som en gång behärskar kommer att vara en bris att ansöka om ett nytt jobb i framtiden.

01. Ställ in ditt dokument

Starta Photoshop, navigera till File & GT; Ny och välj WEB från rullgardinsmenyn för förinställd. Från rullgardinsmenyn storlek Välj Leaderboard eller om dina dimensioner varierar och välj sedan Anpassning och manuellt ange pixelsimensionerna.

Med Snap to Document Bounds valda från menyn Visa, dra guider för att snäppa till alla gränser för dokumentet.

02. Lägga till grafiska element

Nu för att placera våra viktiga designelement. I det ovanstående exemplet klistrade jag på T3-kvadratlogotypen och som jag hade skapat kunde guiderna omstora det och göra det enkelt att snacka på dokumentet. Klistra in i en pilgrafik som vi ska använda senare och använda typverktyget Ange ditt meddelande för den första bilden. Klistra in i alla bilder som du behöver och se till att du heter alla dina lager på lämpligt sätt.

03. Skapa de sekundära bilderna

Nu bara duplicera ditt typskikt, stäng av typskiktet under och skriv in nästa steg i meddelandet, i det här fallet "Till salu nu". När du är glad att du har alla element på plats, slå ner så många av lagren som möjligt. Som bakgrund kommer logotypen och omslagsbilden att förbli statisk vi kan slå samman denna nere och lämnar oss med fyra lager, bakgrunden, typskikten och pilskiktet.

04. Skapa ramanimationen

Klicka nu bara på fliken Tidslinje längst ner i fönstret eller navigera till Fönster och GT; Tidslinje. Klicka på den lilla pilen mitt i fönstret och välj "Skapa ramanimering" och klicka sedan på knappen. Stäng nu av alla lager från bakgrundsskiktet och det första meddelandelagret. Applicera en andra fördröjning till ramen från rullgardinsmenyn på den lilla animationsramen. Klicka nu bara på knappen "Duplicate Valda ramar" i tidslinjen, men stäng av det första meddelandet och sätt på det andra meddelandet. Upprepa denna process för alla lager, efterbehandling med pilskiktet.

  • De 10 största olympiska spelen logotyper hela tiden

05. Gör pilen Flash och justera tidpunkter

Så här gör pilen Flash helt enkelt "Duplicate valda ramar" från tidslinjen och stäng av pilen. Justera tiden till 0,5 sekunder och upprepa processen som vrider pilen på och av i panelen Lager så att den visas som om den blinkar. Slutligen kanske du vill justera några av tidpunkterna tills du är helt glad. Människor har mycket korta uppmärksamhet spänner, så det finns ingen mening att vara långsam med bildfrekvensen, men de behöver fortfarande kunna läsa den.

06. Spara för webb och enheter

Navigera äntligen till "Spara för webben" och välj GIF i rullgardinsmenyn. Du kan också minska kvaliteten något här för att få filstorleken nere. När du är nöjd med att spara GIF och dra sedan det bara till en webbläsare för att testa den.

Hur - Mest populära artiklar

Master mixerborsten i Photoshop

Hur Sep 12, 2025

Digitala målningsverktyg har allvarligt avancerat de senaste åren. Konstnärer kan använda tabletter för att producera konstv..

Hur man vänder dag till natt i Photoshop

Hur Sep 12, 2025

Dag-till-natt-omvandlingar har funnits så länge som Photoshop har haft justeringsskikt, men mastering av effekten tar mycket tr..

En guide till Googles webbverktyg

Hur Sep 12, 2025

Sida 1 av 5: Visa och ändra HTML, CSS & AMP; Js Visa och ändra HTML..

Skapa en välkomnande inredning med hjälp av Line Art

Hur Sep 12, 2025

För den här verkstaden ska jag skapa en inre bakgrund med linjekonst och en texturerad färgstil. Jag vill sätta upp mig för ..

10 fantastiska saker du kan göra med lager

Hur Sep 12, 2025

Lager är det som gör det möjligt för dig att bygga ett projekt från de tidiga grundarna till de slutliga handen. Det är sv�..

Hur man förbättrar din karaktärskonst

Hur Sep 12, 2025

När du har till uppgift att skapa en karaktär design Från början, tänk på den här personens personlighet. S..

Skapa en portal effekt i Maya

Hur Sep 12, 2025

Den portalen i Dr Strange var mycket speciell. Det var ganska mycket den enda effekten i filmen som inte lutade mer mot rörelse ..

Hur man designar en animerad hjälte

Hur Sep 12, 2025

Följande tips bryter ner min process för att animera BINK för Eric Miller Animation Studios kommande webbserie. Bink är en nyfiken liten sjöfart varelse som fångades och tas till ett te..

Kategorier