Sådan oprettes et animeret webbanner i Photoshop

Oprettelse af webbannere er ikke den mest glamourøse job i verden, men det er noget, som enhver designer vil være forpligtet til at gøre på et eller andet tidspunkt i deres karriere, sandsynligvis mange gange. Selvom der ikke er nogen hårde og hurtige regler, når det kommer til at oprette webbannere, siger det sig selv, at typen skal være stor og beskeden stødende.

Da vi også animerer dette, foreslår jeg ikke mere end tre dias eller animerede elementer, da folk simpelthen ikke ser det. Blinkende elementer kan også hjælpe med at få opmærksomhed fra seeren.



Lav dette animerede banner til et websted nedenfor ...



Lav dette animerede banner til et websted nedenfor ...

I løbet af de næste par trin vil jeg demonstrere, hvordan man opsætter og opretter et simpelt animeret webbanner, der en gang mestrer vil være en leg at anvende på ethvert nyt job i fremtiden.

hvordan man laver et album privat på facebook

01. Opsæt dit dokument



Start Photoshop, naviger til fil> ny, og vælg Internettet i rullemenuen Forudindstillet. Vælg leaderboard fra rullemenuen størrelse, eller vælg brugerdefineret, hvis dine dimensioner varierer, og indtast pixeldimensionerne manuelt.

Når snap til dokumentgrænser er valgt i visningsmenuen, skal du trække guiderne for at snappe til alle grænser i dokumentet.



hvordan man skygger hår digital kunst

02. Tilføjelse af grafiske elementer

film med 8 i titlen

Nu for at placere vores væsentlige designelementer. I ovenstående eksempel klistrede jeg i T3-firkantlogoet, og da jeg oprettede, kunne guiderne ændre størrelsen på det og få det til at snappe til dokumentets grænser let. Indsæt en pilgrafik, som vi bruger senere, og brug typeværktøjet til at indstille din besked til det første dias. Indsæt alle de billeder, du har brug for, og sørg derefter for at navngive alle dine lag korrekt.

03. Oprettelse af sekundære dias

Nu skal du blot duplikere dit typelag, slukke for typelaget nedenunder og indtaste det næste trin i meddelelsen, i dette tilfælde “I SALG NU”. Når du er glad for, at du har alle elementerne på plads, skal du flette så mange lag som muligt ned. Som baggrund, logoet og forsidebilledet forbliver statisk, kan vi fusionere dette og efterlade os med fire lag, baggrunden, typelagene og pilelaget.

04. Opret rammeanimationen

har jeg brug for en sag til min macbook pro

Klik nu bare på fanen tidslinje i bunden af ​​vinduet eller naviger til vindue> Tidslinje. Klik på den lille pil i midten af ​​vinduet, og vælg 'Opret rammeanimation', og klik derefter på knappen. Sluk nu alle lag bortset fra baggrundslaget og det første beskedlag. Anvend et sekunders forsinkelse på rammen fra rullemenuen på den lille animationsramme. Klik nu blot på 'duplikér valgte rammer' -knappen i tidslinjen, men slå den første besked fra og slå den anden besked til. Gentag denne proces for alle lagene, og slut med pilelaget.

05. Få pilen til at blinke og juster timingen

For at få pilen til at blinke skal du blot trykke på 'Dupliker valgte rammer' fra tidslinjen og slukke for pilen. Juster tiden til 0,5 sekunder, og gentag processen, når du tænder og slukker pilen i lagpanelet, så det ser ud som om det blinker. Endelig vil du muligvis justere nogle af tidspunkterne, indtil du er helt tilfreds. Folk har meget korte opmærksomhedsspænd, så der er ingen mening i at være langsom med billedhastigheden, men de har stadig brug for at kunne læse den.

06. Gem til web og enheder

Naviger endelig til 'Gem til internettet', og vælg GIF i rullemenuen. Du kan også reducere kvaliteten lidt her for at få filstørrelsen nede. Når du er tilfreds, skal du gemme gif'et og derefter trække det blot ind i en webbrowser for at teste det.