Een geanimeerde webbanner in Photoshop maken

Sep 11, 2025
Procedures

Het maken van webbanners is niet de meest glamoureuze banen in de wereld, maar het is iets dat elke ontwerper op een bepaald moment in hun carrière moet doen, waarschijnlijk vele malen voorbij. Hoewel er geen harde en snelle regels zijn als het gaat om het maken van webbanners, spreekt het vanzelf dat het type groot moet zijn en het bericht punchy.

Als we dit ook animeren, zou ik niet meer dan drie dia's of geanimeerde elementen voorstellen omdat mensen het gewoon niet zullen kijken. Knipperende elementen kunnen ook helpen om de aandacht van de kijker te pakken.

Make this animated banner for a website below…

Maak deze geanimeerde banner voor een website hieronder ...

In de volgende paar stappen laat ik zien hoe ik moet worden ingesteld en een eenvoudige geanimeerde webbanner kan maken die ooit een briesje zal zijn om in de toekomst op een nieuwe taak te voldoen.

01. Stel uw document in

Start Photoshop, Navigeer naar File & GT; Nieuw en selecteer Web in het vervolgkeuzemenu Preset. Vanaf de vervolgkeuzelijst SiAt-down select of als uw dimensies variëren, kies dan op maat en voert u handmatig de pixelafmetingen in.

Met Snap to Document Bounds geselecteerd in het menu Beeld, sleep de gidsen om te klikken op alle grenzen van het document.

02. Grafische elementen toevoegen

Nu om onze essentiële ontwerpelementen te plaatsen. In het bovenstaande voorbeeld plaatste ik in het T3 Square-logo en zoals ik de gidsen heeft gemaakt, konden het opnieuw formaliseren en het gemakkelijk maken met het documentgrenzen. Plakken in een pijlafbeelding die we later zullen gebruiken en het type Type gebruiken, stel uw bericht in voor de eerste dia. Plakken in alle afbeeldingen die u nodig hebt en zorg ervoor dat u al uw lagen op de juiste manier noemt.

03. De secundaire dia's maken

Dupliceer nu eenvoudig uw typelaag, schakel de laaglaag onder en typ de volgende fase van het bericht in, in dit geval "in verkoop nu". Zodra je blij bent dat je alle elementen op hun plaats hebt, samenvoegen met zoveel mogelijk van de lagen. Terwijl de achtergrond, blijven het logo en het dekselbeeld statisch, we kunnen dit samenvoegen waardoor we met vier lagen, de achtergrond, de type lagen en de pijllaag.

04. Maak de frame-animatie

Klik nu eenvoudig op het tabblad Tijdlijn aan de onderkant van het venster of navigeer naar Window & GT; Tijdlijn. Klik op de kleine pijl in het midden van het venster en selecteer "Frame-animatie maken" en klik vervolgens op de knop. Schakel nu alle lagen uit elkaar van de achtergrondlaag en de eerste berichtlaag. Breng een tweede vertraging aan op het frame in het vervolgkeuzemenu op het kleine animatieframe. Klik nu gewoon op Druk op de knop "Dupliceer geselecteerde frames" in de tijdlijn, maar schakel het eerste bericht uit en schakel het tweede bericht in. Herhaal dit proces voor alle lagen, afwerking met de pijllaag.

  • De 10 Grootste Olympische Spelen-logo's aller tijden

05. Maak de pijl-flitser en pas de timing aan

Om de pijl te laten flitsen, drukt u eenvoudig op "Dupliceer geselecteerde frames" van de tijdlijn en draait u de pijl uit. Pas de tijd aan tot 0,5 seconden en herhaal het proces om de pijl in en uit te zetten in het paneel van de lagen zodat deze wordt weergegeven alsof het knippert. Eindelijk wilt u een deel van de timings aanpassen totdat u helemaal gelukkig bent. Mensen hebben hele korte aandachtspoorden, dus het is geen zin om traag te zijn met de framesnelheid, maar ze moeten het nog steeds kunnen lezen.

06. Opslaan voor web en apparaten

Navigeer eindelijk naar "Opslaan voor Web" en selecteer GIF in het vervolgkeuzemenu. U kunt de kwaliteit hier ook een beetje verminderen om de bestandsgrootte naar beneden te krijgen. Zodra u tevreden bent, kunt u de GIF opslaan en vervolgens eenvoudig naar een webbrowser slepen om het uit te testen.

Procedures - Meest populaire artikelen

8 Essentiële WordPress Security Secrets

Procedures Sep 11, 2025

In de afgelopen 15 jaar is WordPress het populairste contentbeheersysteem 's werelds geworden. Makkelijk aan de slag met en extreem veelzijdig, het is een van de Beste bloggenplatform..

19 tips voor Great Poser Art

Procedures Sep 11, 2025

Pagina 1 van 2: Pagina 1 Pagina 1 Pagina..

De regels van responsieve webtypografie

Procedures Sep 11, 2025

Responsive Web Typografie is moeilijk - je moet zowel ontwerpkarbonades en technische knowhow hebben. Maar hoewel het misschien is, het is verkeerd om het verkeerd te krijgen is geen optie, o..

Creëer prachtige landschappen in Houdini

Procedures Sep 11, 2025

Door gebruik te maken van een op een knooppunt gebaseerde, procedurele aanpak, biedt 3D-software Houdini van SideFX digitale kuns..

Maak een betere personage-animaties in Maya

Procedures Sep 11, 2025

Mierenafdeling wordt een van onze artiesten die uw specifieke vragen beantwoorden Vertex ..

Maak een geanimeerde gif in Photoshop

Procedures Sep 11, 2025

Adobe lanceert een nieuwe reeks video-tutorials die vandaag de dag wordt genoemd, waardoor u wilt schetsen hoe u specifieke ontwerpprojecten kunt maken met behulp van verschillende Cr..

Een snapchat geofilter in Photoshop maken

Procedures Sep 11, 2025

Klanten zijn voortdurend op zoek naar nieuwe manieren om betrokken te zijn bij het publiek. Snapchat GeoFilters - Speciale communicatieve overlays - zijn een geweldige manier om een ​​mer..

Een ruimteschip modelleren voor gameplayontwerp

Procedures Sep 11, 2025

Met Gebroken ruimte Als het is - een free-to-play-team gevechtsspel - de schepen en hun vaardigheden zijn de sterr..

Categorieën