Share
C'è una buona probabilità che questo non ti interessi affatto (gif animato Ian? Stai ridendo?) Ma ho promesso a qualcuno che avrei scritto questo. Di recente ho realizzato immagini di anteprima animate per i post di notizie su Activetuts +, e ora sono qui, è giusto che io faccia sapere a Michael come è fatto.
Photoshop non è esattamente un leader del settore nel campo dell'animazione, ma per compiti semplici come questo, funziona perfettamente. Prendiamo un Tuts standard 200x200px + immagine di anteprima e aggiungiamo un ticker di notizie scorrevoli in fondo ad esso.
Prendiamo una foto adatta. Eccone uno che ho scattato durante il meetup Envato a Chicago l'anno scorso, ritagliato a 200x200px. Aprilo in Photoshop.
Abbiamo bisogno solo di due strati aggiuntivi per questo; uno sfondo per il ticker (rettangolo colorato # 104333) e un testo con la frase desiderata ripetuta un paio di volte.
Il font è chiamato 04b_03 ed è liberamente disponibile da dafont.com. È un font a 8 bit, il che significa che dovrai visualizzarlo alla sua dimensione di base (o un multiplo di) con l'anti-alias disattivato per ottenere i migliori risultati di pixel. In questo caso, guardiamo a 8px.
Ha un tono verde sfumato di # f0fcdf con un tratto 1px semitrasparente di # 051a14 (per aiutarlo a risaltare sullo sfondo).
Apri la finestra dell'animazione (finestra> animazione) e, utilizzando il pulsante in basso a destra nel pannello, passa alla visualizzazione fotogramma.
Puoi vedere il primo fotogramma inchiodato per te, ma assicurati che il ritardo sia impostato su 0 sec (direttamente sotto l'immagine in miniatura) poiché vogliamo che il fotogramma venga riprodotto non appena viene rilevato. Quello che puoi vedere nella prima miniatura è l'animazione nel suo stato attuale, i livelli e gli oggetti esattamente come li hai disposti.
Premi l'icona "Duplica fotogrammi selezionati" per creare un secondo fotogramma. Questo è il nostro stato finale. Mentre è selezionata la seconda miniatura, tutte le modifiche che eseguiamo sui nostri livelli vengono applicate solo a questo fotogramma.
Gemello deriva dalla parola 'inbetweening' e si riferisce a fasi graduali tra due stati, suggerendo movimento.
Con il secondo fotogramma selezionato, sposta il testo sullo schermo nella direzione in cui vuoi che scorra. Potresti voler tenere premuto il tasto Maiusc per evitare che si allontani dal suo corso orizzontale. Spostalo fino in fondo in modo che sembri esattamente nella stessa posizione in cui è iniziato.
In questo caso, la "N" è contraffatta contro il lato sinistro, quindi è facile vedere se stavo mirando.
Dopo aver spostato il testo, seleziona entrambi i frame e premi il pulsante "Tweens animation frames". Fare così rivelerà il seguente dialogo:
Come puoi vedere, ho optato per 99 fotogrammi aggiuntivi tra i miei due stati. Volevo che tutti i livelli del mio documento venissero stampati in questi fotogrammi e in realtà sto solo mirando ad animare la proprietà "position" del mio livello di testo. Super. Hit OK.
Ora avrai una tonnellata di fotogrammi seduti nella finestra di animazione e ognuno probabilmente somigli molto al prossimo! Tuttavia, rassicurati premendo il pulsante di riproduzione e guardando il tuo testo animato davanti ai tuoi occhi. Magia, signore e signori?
Solo per pulire le cose, selezionare il 101st frame ed eliminarlo. Come puoi ricordare, è identico al primo fotogramma, quindi il looping in realtà li cade l'uno contro l'altro e ci dà un problema tecnico nella nostra animazione altrimenti fluida.
Il risultato è sottile, ma nell'immagine sopra puoi vedere il nostro primo fotogramma e il nostro fotogramma finale (numero 100). Looping li mescolerà perfettamente.
Questo è tutto! Animazione completa. Ora dobbiamo solo salvare il nostro file, quindi vai su File> Salva per Web e dispositivi. Scegli GIF come tipo di file, quindi in fondo, all'interno della sezione Animazione, scegli "Loop forever". Puoi anche vedere l'anteprima dell'animazione, solo per essere sicuro.
Se vuoi modificare il tuo file, mantenendo l'animazione (potresti ad esempio cambiare il testo e scambiare l'immagine di sfondo, ad esempio), tutto ciò che devi fare è modificare il primo fotogramma. Mantieni selezionato il primo fotogramma, seleziona il livello che vuoi modificare e assicurati che l'opzione "Propagazione fotogramma 1" sia selezionata.
Tutte le modifiche di attributo apportate a quel livello verranno propagate (riprodotte) su tutti gli altri frame. Aggiungi un'ombra esterna al livello di testo nel fotogramma 1 e Hey Presto! lì è proprio attraverso l'animazione. Se non si seleziona "Propagate Frame 1", verrà modificato solo un fotogramma.
Immagino che stamattina non ti saresti svegliato pensando "C'è una vera carenza di tute di gif animate là fuori" e, a meno che tu non sia un editore di uno dei siti di Tuts +, ci sono buone probabilità che non troverai alcun uso per questo. Comunque, Michael, spero che tu abbia trovato questa informazione e mi aspetto che le immagini di anteprima di notizie di alta qualità su Activetuts + d'ora in poi :)
Accentsconagua