Share
Creiamo un gif pre-caricatore animato per il tuo prossimo progetto UI. Avrai bisogno della versione estesa di Photoshop CS3 o superiore.
Creeremo una piccola gif animata che può essere utilizzata per una moltitudine di widget, ogni volta che viene richiesto il contenuto di ajax, i file vengono caricati, qualsiasi cosa vogliate. Sentiti libero di mescolare i tuoi stili e le varianti al caricatore mentre procediamo. Ci sono tre sezioni principali che intraprenderemo:
Pronto. Impostato. Partire…
Inizia impostando la dimensione dell'area di lavoro e aggiungi uno sfondo veloce per iniziare.
Solo per i calci, aggiungeremo un motivo foderato al nostro background, e quindi iniziamo a lavorare sul loader.
Crea un nuovo documento trasparente: (7px per 7px). Disegna una linea diagonale con uno strumento matita nera 1pz (fai clic sul pixel in alto a sinistra, tieni premuto Maiusc e fai clic sul pixel in basso a destra)
Definire e assegnare un nome al modello (menu Modifica> Definisci modello).
Fatto ciò, torna al documento originale e crea uno stile di livello di "Sovrapposizione modello" sul nostro livello di sfondo grigio: (menu Livello> Stile livello> Sovrapposizione modello). Scegli il tuo pattern dal pattern box e abbassa l'opacità (ho usato il 20%).
Creeremo alcuni segni che fungeranno da guida per aiutarci - useremo il comando "Trasforma ancora" per velocizzare le cose.
Disegna una linea bianca verticale 1px con lo strumento linea nel tuo documento:
Per assicurarti che sia allineato al centro, seleziona il suo livello e il livello di sfondo, afferra lo strumento sposta e fai clic sull'opzione "Allinea centri orizzontali" in questo modo:
Ruota la linea di 45 ° (seleziona la riga Modifica menu> Trasformazione libera || Controllo / Comando + T)
Seleziona il menu Modifica> Trasforma> "Trasforma ancora" tenendo premuto il tasto "Opzione / Alt" (Comando / Controllo + Opzione / Alt + Maiusc + T)
Esegui questo comando più volte fino a quando la linea non ha ruotato tutto intorno, in questo modo:
Usando la stessa tecnica spiegata sopra, aggiungeremo alcuni piccoli segni di spunta su ogni linea della griglia per far girare il caricatore attorno e intorno ... Ecco qui.
Aggiungi alcune guide dove vuoi che appaia il tuo "Segno di spunta" iniziale (assicurati che le tue guide siano su pixel interi, non dividi i pixel).
Crea un rettangolo arrotondato con un raggio di 1 pixel all'interno delle nostre linee guida (assicurati di avere lo snap attivato per le guide: menu Visualizza> Blocca)
Usando lo strumento selezione diretta sposta gli angoli inferiori (nodi) della nostra forma di spunta rettangolo verso l'interno, in modo che la forma si assottiglia.
Utilizza lo stesso trucco "Trasforma di nuovo" che abbiamo usato sopra, per duplicare la forma intorno ai nostri segni di graduazione (quando ruoti il 45 ° assicurati di impostare il punto di trasformazione al centro della nostra griglia, non il centro del rettangolo forma, che è dove è di default).
Seleziona il menu Modifica> Trasforma> "Trasforma ancora" tenendo premuto il tasto "Opzione / Alt" (Comando / Controllo + Opzione / Alt + Maiusc + T) fino a quando il segno di spunta non è stato copiato completamente. Dovrebbe sembrare come questo:
Verifica dei livelli: assicurati che il pannello dei livelli sia simile al seguente:
Uff. Abbiamo creato tutte le forme di pre-caricatore, ora aggiungeremo solo un po 'di stili di livello per far crescere un po' le cose. Come al solito, sale a piacere. Stiamo per aggiungere stili di livello che possono essere trovati in "Menu Livello> Stili livello".
Aggiungi uno stile di livello "Sovrapposizione colore" al livello delle zecche (io ho usato # 242424).
Aggiungi uno stile di livello "Ombra esterna" al livello di zecche:
Aggiungi uno stile di livello "Inner Shadow" al livello delle zecche:
Il tuo caricatore ora dovrebbe assomigliare a questo:
Ci sono alcuni modi in cui potremmo andare su questo prossimo bit, ma per semplificare le cose duplicheremo il nostro tick layer per cinque volte, e quindi cancelleremo tutti i ticks di forma che non appartengono a quei particolari layer di forma. Non vogliamo alcun segno di spunta sovrapposto dai livelli sottostanti, poiché gli stili di livello che verranno aggiunti si sovrapporranno, causando effetti di visualizzazione sovraesposti.
Duplica il tuo livello di zecca di base quattro volte, quindi inizia a eliminare i segni di graduazione su ciascuno dei livelli fino a ottenere quanto segue:
È possibile utilizzare lo strumento selezione diretta per eliminare le forme di graduazione da ciascuno dei livelli.
Ora aggiungeremo alcuni stili a ciascuno dei singoli livelli del segno di spunta che abbiamo separato. Mi riferirò ai miei nomi di livelli.
Per il livello denominato "Shine-Active", aggiungi / modifica lo stile di livello "Outer Glow":
Allo stesso livello, aggiungi / modifica lo stile di livello "Bagliore interno":
Quindi aggiungi / modifica lo stile di livello "Sovrapposizione colore" (ho usato # 0087c6):
Per il livello denominato "Shine-Fading1", aggiungi gli stessi stili sopra, omettendo lo stile di livello "Outter Glow":
Per il livello denominato "Shine-Fading2", aggiungi / modifica lo stile di livello "Inner Shadow":
Allo stesso livello, aggiungi / modifica lo stile di livello "Inner Shadow" (ho usato # 0087c6).
Quindi, al livello denominato "Shine-Fading3", aggiungi / modifica lo stile di livello "Inner Shadow" (nota anche il cambio di opacità):
Il tuo loader dovrebbe ora assomigliare a questo (modifica gli stili di livello a tuo piacimento):
Ok, abbiamo impostato gli stili di base, ora è il momento di duplicare tutti i livelli (che renderà l'animazione più semplice) e creare il nostro .gif animato
Raggruppa tutti i livelli che compongono il nostro segno di spunta (evidenziali tutti + menu Strato> Raggruppa livelli)
Duplica l'intero gruppo, quindi ruotalo di 45 ° (menu Modifica> Trasformazione libera). Ripeti il passaggio 2 fino a quando non hai ruotato il segno di spunta tutto intorno (avrai otto gruppi in totale).
Il tuo caricatore dovrebbe apparire in questo modo:
Bene, i nostri livelli sono tutti impostati e siamo pronti per l'animazione. Continueremo con le normali animazioni fotogramma per fotogramma, sebbene potremmo realizzare le stesse cose con l'animazione basata sulla timeline.
Apri il pannello di animazione: (Finestra> Animazione). Disattiva tutti i livelli del gruppo di graduazione tranne il primo, quindi fai clic sul pulsante "Duplica fotogrammi selezionati" nel pannello di animazione.
Disattiva il primo livello raggruppato e attiva il secondo livello raggruppato.
Ripeti il passaggio precedente per ciascuno dei livelli del gruppo. Evidenzia tutti i fotogrammi nel livello di animazione (Maiusc + clic su ciascun fotogramma) e imposta la durata del fotogramma su .1 sec
Scegli File> Salva per Web e dispositivi e usa le seguenti impostazioni per il tuo .gif animato
Apri il tuo .gif in un browser web e ammira il tuo nuovo caricatore! Infine, prendi del gelato.
Questo è tutto. Spero ti sia divertito a creare il caricatore! È stato divertente per me creare. Carica e collega ad alcune delle tue creazioni nei commenti e fai tutte le domande che potresti avere.
Accentsconagua