Sådan opretter du et animeret webbanner i Photoshop

Sep 12, 2025
hvordan

At skabe webbannere er ikke de mest glamourøse job i verden, men det er noget, som hver designer vil blive forpligtet til at gøre på et tidspunkt i deres karriere, sandsynligvis mange gange over. Selv om der ikke er nogen hårde og hurtige regler, når det kommer til at skabe webbannere, siger det sig selv, at typen skal være stor og meddelelsen punchy.

Da vi også animerer dette, vil jeg ikke foreslå mere end tre dias eller animerede elementer, da folk simpelthen ikke vil se det. Blinkende elementer kan også hjælpe med at få fat i opmærksomheden på seeren.

Make this animated banner for a website below…

Gør dette animerede banner til et websted nedenfor ...

I løbet af de næste par trin viser jeg, hvordan du skal opsætte og oprette et simpelt animeret webbannere, der engang mestrer, vil være en brise, der skal gælde for noget nyt job i fremtiden.

01. Indstil dit dokument

Start Photoshop, naviger til File & GT; Ny og vælg web fra rullemenuen forudindstillet. Fra rullemenuen Størrelse vælg Leaderboard, eller hvis dine dimensioner varierer, så vælg brugerdefineret og manuelt indtast pixeldimensionerne.

Med Snap to Document Bounds, der er valgt fra menuen Vis, skal du trække guider for at snappe til alle grænser for dokumentet.

02. Tilføjelse af grafiske elementer

Nu for at placere vores vigtige designelementer. I ovenstående eksempel indsatte jeg i T3-firkantet logoet, og som jeg havde skabt guiderne, kunne styring af det og få det til at snappe til dokumentet nemt. Indsæt i en pil grafik, som vi bruger senere og bruger værktøjet Type Indstil din besked til det første dias. Indsæt i alle billeder, du har brug for, og sørg for, at du nævner alle dine lag på passende vis.

03. Oprettelse af sekundære dias

Nu skal du blot duplikere dit type lag, slukke for typellaget under og indtaste den næste fase af meddelelsen, i dette tilfælde "Til salg nu". Når du er glad for at du har alle de elementer på plads, skal du fusionere så mange af lagene som muligt. Som baggrunden vil logoet og dækbilledet forblive statisk, vi kan slå sammen, at vi forlader os med fire lag, baggrunden, type lag og pilaget.

04. Opret ramme animationen

Klik nu blot på fanen Tidslinje nederst i vinduet eller navigere til Vindue & GT; Tidslinje. Klik på den lille pil midt i vinduet og vælg "Opret ramme animation" og klik derefter på knappen. Sluk nu alle lagene bortset fra baggrundslaget og det første meddelelseslag. Påfør en anden forsinkelse på rammen fra rullemenuen på den lille animationsramme. Nu skal du blot klikke på knappen "Duplikat valgte rammer" i tidslinjen, men sluk for den første besked og tænd den anden besked. Gentag denne proces for alle lagene, efterbehandling med pilaget.

  • De 10 største olympiske lege logoer for hele tiden

05. Gør pilen flash og juster timings

For at få pilen til at blinke blot "duplikere udvalgte rammer" fra tidslinjen og slå pilen ud. Juster tiden til 0,5 sekunder og gentag processen, der drejer pilen til og fra i panelet Lag, så det vises som om det blinker. Endelig vil du måske justere nogle af timerne, indtil du er helt glad. Folk har meget korte opmærksomhed spændinger, så der er ingen mening at være langsomt med billedhastigheden, men de skal stadig være i stand til at læse det.

06. Gem for web og enheder

Til sidst navigere til "Gem for Web" og vælg GIF i rullemenuen. Du kan også reducere kvaliteten lidt her for at få filstørrelsen nede. Når du er tilfreds, gem gem GIF'en, og træk derefter det til en webbrowser for at teste den ud.

hvordan - Mest populære artikler

Lino printmaking: En introduktion

hvordan Sep 12, 2025

(Billedkredit: meg buick) Lino printmaking er en metode til relieftryk, som involverer udskæring af en tegning i en ..

Sådan forbedres din karakterkunst

hvordan Sep 12, 2025

Når du har til opgave at skabe en tegn design. Fra bunden skal du tænke på det tales personlighed. Sæt dig sel..

Sådan vælges med Photoshop's Lasso Tools

hvordan Sep 12, 2025

Valg er en af ​​de mest vitale opgaver, du lærer at mestre i Photoshop CC. . Et godt udvalg vil give realisme til et billede, for ikke at nævne renhed. Men med så mange ..

Concept Design Tips til kunstnere

hvordan Sep 12, 2025

Side 1 af 2: Side 1 Side 1 Side 2. Hovedopgaven med en visuel udvik..

Sådan laver de lækre teksturer med blyanter

hvordan Sep 12, 2025

Når læring hvordan tegner man Et stille liv kunstværk, det er vigtigt at skabe interesse og engagere seeren med..

Opret en malerisk føler i din digitale kunst

hvordan Sep 12, 2025

Digitalt maleri har historisk set ramt af at se ud for kunstig, men med det store udvalg af software, der er tilgængeligt i dag,..

Sådan skaber du manga-stil hår i bevægelse

hvordan Sep 12, 2025

Læring Sådan tegner man manga er ikke let feat. Så for at gøre det nemt som muligt, følger jeg en simpel trinvis proces, der bruger bevægelse, form, farve, belysning og t..

Modellering Kompleks Geometri: 5 Top Tips

hvordan Sep 12, 2025

I hele mine års erfaring, der arbejder i videospil studioindstillinger og undervisning 3D Art. Til sultne unge ku..

Kategorier