Hur man skapar en animerad webbbanner i Photoshop

Att skapa webbbanners är inte den mest glamorösa jobben 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. Även om det inte finns några hårda och snabba regler när det gäller att skapa webbbannrar, säger det sig självt att typen måste vara stor och meddelandet slagkraftigt.

Eftersom vi också animerar detta föreslår jag inte mer än tre bilder eller animerade element eftersom människor helt enkelt inte kommer att titta på det. Blinkande element kan också hjälpa till att fånga tittarens uppmärksamhet.

Skapa denna animerade banner för en webbplats nedan ...



Skapa denna animerade banner för en webbplats nedan ...

Under de närmaste stegen kommer jag att demonstrera hur man ställer in och skapar en enkel animerad webbbanner som en gång behärskar kommer att vara en lek att tillämpa på något nytt jobb i framtiden.

hur man får traditionell konst att se digital ut

01. Ställ in ditt dokument

Starta Photoshop, navigera till fil> ny och välj Webb i rullgardinsmenyn Förinställd. Välj leaderboard från rullgardinsmenyn eller om dina dimensioner varierar, välj sedan anpassad och ange pixeldimensionerna manuellt.

bästa spelmus för macbook pro

Med snap to document-gränser valda från visningsmenyn, dra guiderna för att snapa till alla ramar i dokumentet.

02. Lägga till grafiska element

Nu för att placera våra väsentliga designelement. I exemplet ovan klistrade jag in T3-kvadratlogotypen och när jag skapade kunde guiderna ändra storlek på den och få den att klämma fast i dokumentets gränser. Klistra in en pilgrafik som vi använder senare och använd typverktyget för att ställa in ditt meddelande för den första bilden. Klistra in alla bilder du behöver och se till att du namnge alla dina lager på rätt sätt.

03. Skapa sekundära bilder

hur man väljer alla i Photoshop

Duplicera nu helt enkelt ditt typlager, stäng av typlagret nedan och skriv in nästa steg i meddelandet, i det här fallet “I REA NU”. När du är glad att du har alla element på plats, slå ihop så många lager som möjligt. Eftersom bakgrunden, logotypen och omslagsbilden förblir statisk kan vi slå samman detta och lämna oss med fyra lager, bakgrunden, typlagren och pilskiktet.

04. Skapa ramanimationen

Klicka bara på tidslinjefliken längst ner i fönstret eller navigera till fönster> Tidslinje. Klicka på den lilla pilen i mitten av fönstret och välj “Skapa ramanimering” och klicka sedan på knappen. Stäng nu av alla lager förutom bakgrundsskiktet och det första meddelandelagret. Tillämpa en sekund fördröjning på ramen från rullgardinsmenyn på den lilla animeringsramen. Klicka nu bara på 'duplicera valda ramar' -knappen i tidslinjen men stäng av det första meddelandet och slå på det andra meddelandet. Upprepa denna process för alla lager och avsluta med pilskiktet.

hur man får Adobe After Effects CC 2015 gratis

05. Låt pilen blinka och justera tiderna

För att få pilen att blinka trycker du helt enkelt på 'Duplicera valda ramar' från tidslinjen och stänger av pilen. Justera tiden till 0,5 sekunder och upprepa processen genom att slå på och av pilen i lagerpanelen så att den ser ut som om den blinkar. Slutligen kanske du vill justera några av tiderna tills du är helt nöjd. Människor har mycket kort uppmärksamhet, så det är 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å ner filstorleken. När du är nöjd sparar du gifen och drar den helt enkelt till en webbläsare för att testa den.