Share
Animerade Gif-filer har skett många skämt inom designgemenskapen. Det beror på att animerade gifs är kända för att vara lite ostliknande och beryktad för att röra upp en sida. Används korrekt men animering kan rita intresse för ett annars bortseende område på en sida. Idag visar vi hur du använder Photoshop för att skapa ett animerat gif i Photoshop CS5. Låt oss börja!
Skapa ett nytt dokument 250 x 250 px och sätt upplösningen till 70 px med bakgrundsfärgen som är inställd på # f2f2f2.
Placera en logotyp i dukens översta mitt.
Skriv en tagglinje under logotypen.
Rita en rektangellåda och sätt färgen till # 90909.
Öppna dialogrutan Lagstilar och kontrollera Drop shadow. Minska avståndet och storleken till 2px.
Lägg nu till en gradientöverlagring och ställ in blandningsläget till Multiplicera med en opacitet på 28%.
Lägg till en stroke och minska storleken till 1 px. Ställ in färgen till # a31b1b.
Lägg till några punktpunkter. I vårt fall lade vi till texten: Tutorials, Articles, Tips, Freebies, Basix, Videos, Premuim, som visat.
. Radera textlagren och skapa en klippmask.
Lägg nu en iögonfallande bild. I vårt fall använde vi premiumprogramikonet för Psdtuts, men gärna använda vad som helst som passar ditt syfte.
Utkast till lite mer stödjande text som visas under bilden du placerade i steg 6.
Skapa en oval Box och sätt färgen till #fdfcfc.
Öppna dialogrutan för lagerstorlek bix och använd en droppskugga. Minska avståndet och storleken till 1 px.
Kontrollera inre glöd och lämna den som den är.
Lägg till en överdragsöverlägg med opacitet inställt på 6%.
Nu när vi har slutat skapa alla våra lager, är vi nu redo att börja arbeta med animeringen. Öppna först animeringspanelen (Fönster> Animering). Jag kommer att använda tidslinjens animationspanel (och inte ramanimationen). Obs! Den här funktionen är endast i Photoshop Extended. Ange nu alla dina lager för synliga men minska deras opacitet till 0%.
Se bilden nedan för anvisningar om hur du infogar nyckelbilder och var du ska öka opaciteten.
Din tidslinje ska likna exemplet nedan.
Vi har nu slutfört vår animering. Tryck på spel för att se resultatet. Känn dig fri att tweak det vid behov. För att spara din banner, gå till Arkiv> Spara för webb och enheter. Använd sedan inställningarna från följande bild och klicka på Spara.
Det är allt! Du är klar!
Accentsconagua