Share
I file GIF animati sono stati il bersaglio di molte battute all'interno della comunità del design. Questo perché le gif animate sono famose per essere un po 'approssimative e famigerate per ingombrare una pagina. Utilizzato correttamente tuttavia, l'animazione può attirare l'attenzione su un'area altrimenti trascurata di una pagina. Oggi dimostreremo come usare Photoshop per creare una gif animata in Photoshop CS5. Iniziamo!
Crea un nuovo documento 250 x 250 px e imposta la risoluzione su 70 px con il colore di sfondo impostato su # f2f2f2.
Metti un logo nella parte superiore centrale della tela.
Scrivi una tag line sotto il logo.
Disegna una casella rettangolare e imposta il colore su # 90909.
Aprire la finestra di dialogo degli stili di livello e selezionare Elimina ombra. Riduci la distanza e la dimensione a 2px.
Ora aggiungi una sovrapposizione sfumatura e imposta la modalità di fusione su Moltiplica con un'opacità del 28%.
Aggiungi un tratto e riduci le dimensioni a 1 px. Imposta il colore su # a31b1b.
Aggiungi alcuni punti elenco. Nel nostro caso abbiamo aggiunto il testo: Tutorial, Articoli, Suggerimenti, Freebies, Basix, Video, Premuim, come mostrato.
. Rasterizza i livelli di testo e crea una maschera di ritaglio.
Ora posiziona un'immagine accattivante. Nel nostro caso abbiamo usato l'icona del programma premium per Psdtuts, ma sentitevi liberi di usare qualsiasi cosa sia adatta al vostro scopo.
Disegna un altro testo di supporto come mostrato sotto l'immagine che hai inserito nel passaggio 6.
Crea una scatola ovale e imposta il colore su #fdfcfc.
Apri la finestra di dialogo degli stili di livello bix e applica un'ombra esterna. Riduci la distanza e la dimensione a 1 px.
Controlla la luce interna e lasciala così com'è.
Aggiungi una sovrapposizione sfumatura con l'Opacità impostata su 6%.
Ora che abbiamo finito di creare tutti i nostri livelli, siamo ora pronti per iniziare a lavorare sull'animazione. Per prima cosa, apri il pannello Animazione (Finestra> Animazione). Userò il pannello Animazione timeline (e non l'animazione del fotogramma). Nota: questa funzione è disponibile solo in Photoshop Extended. Ora imposta tutti i tuoi strati visibili ma riduci la loro opacità allo 0%.
Fare riferimento all'immagine seguente per istruzioni su come inserire i fotogrammi chiave e su dove aumentare l'opacità.
La sequenza temporale dovrebbe essere simile all'esempio seguente.
Ora abbiamo completato la nostra animazione. Premi play per vedere il risultato. Sentiti libero di modificarlo se necessario. Per salvare il tuo banner, vai su File> Salva per Web e dispositivi. Quindi utilizzare le impostazioni dall'immagine seguente e fare clic su Salva.
Questo è tutto! Hai finito!
Accentsconagua