Share
Geanimeerde Gif-bestanden zijn het mikpunt geweest van vele grappen in de ontwerpgemeenschap. Dat komt omdat geanimeerde gifs beroemd zijn omdat ze een beetje cheesy en berucht zijn omdat ze een pagina overrompelen. Op de juiste manier gebruikt, kan animatie echter interesse wekken voor een anders over het hoofd gezien gedeelte van een pagina. Vandaag zullen we demonstreren hoe je Photoshop gebruikt om een geanimeerde gif te maken in Photoshop CS5. Laten we beginnen!
Maak een nieuw document van 250 x 250 px en stel de resolutie in op 70 px met de achtergrondkleur ingesteld op # f2f2f2.
Plaats een logo in het midden bovenaan het canvas.
Schrijf een tagregel onder het logo.
Teken een rechthoekvak en stel de kleur in op # 90909.
Open het dialoogvenster met laagstijlen en vink Slagschaduw aan. Verklein de afstand en de grootte tot 2px.
Voeg nu een verloopoverlay toe en stel de mengmodus in op Vermenigvuldigen met een dekking van 28%.
Voeg een lijn toe en verkleinen tot 1 px. Zet de kleur op # a31b1b.
Voeg enkele opsommingstekens toe. In ons geval hebben we de tekst toegevoegd: tutorials, artikelen, tips, freebies, basix, video's, premuim, zoals getoond.
. Rasteer de tekstlagen en maak een knipmasker.
Plaats nu een opvallende afbeelding. In ons geval hebben we het premium programmapictogram voor Psdtuts gebruikt, maar gebruik gerust wat u wilt.
Maak wat meer ondersteunende tekst, zoals onder de afbeelding die je in stap 6 hebt geplaatst.
Maak een ovale box en stel de kleur in op #fdfcfc.
Open het lagenstijldialoogvenster bix en pas een slagschaduw toe. Verklein de afstand en de grootte tot 1 px.
Controleer de Innerlijke gloed en laat het zoals het is.
Een verloopoverlay toevoegen met de dekking op 6%.
Nu we al onze lagen hebben gemaakt, zijn we nu klaar om aan de animatie te beginnen. Open eerst het animatiescherm (Venster> Animatie). Ik gebruik het deelvenster Tijdlijnanimatie (en niet de kaderanimatie). Opmerking: deze functie is alleen beschikbaar in Photoshop Extended. Zet nu al je lagen op zichtbaar, maar verminder de dekking naar 0%.
Raadpleeg de onderstaande afbeelding voor instructies over het invoegen van keyframes en waar u de dekking kunt vergroten.
Uw tijdlijn moet er ongeveer zo uitzien als in het onderstaande voorbeeld.
We hebben nu onze animatie voltooid. Druk op play om het resultaat te zien. Voel je vrij om het waar nodig aan te passen. Als u uw banner wilt opslaan, gaat u naar Bestand> Opslaan voor web en apparaten. Gebruik vervolgens de instellingen uit de volgende afbeelding en klik op Opslaan.
Dat is het! Je bent klaar!
Accentsconagua