Share
Cosa starai creandoHai mai desiderato trasformare un'interfaccia PSD per app in una demo completamente animata per i tuoi clienti o il tuo sito? Risulta, è possibile utilizzare Photoshop anche per questo.
In questo tutorial, progetteremo un'app per iPhone di notizie semplici, quindi la animeremo per la presentazione del cliente e la esporteremo come file GIF. Imparerai tutto ciò che ti serve per passare dall'idea alla demo animata, il tutto all'interno di qualsiasi versione recente di Photoshop.
Abbiamo usato Photoshop CC in questo tutorial, ma CS5 o 6 avrebbe funzionato bene per seguire. Avrai anche bisogno della seguente fotografia per completare questo tutorial. Si prega di scaricarli prima di iniziare, o di sostituire con un'immagine simile e regolare i passaggi di conseguenza:
Innanzitutto, inizieremo a progettare l'interfaccia dell'app. Crea un nuovo file (Control-N) con dimensioni della tela 640 px di 1136 px, quindi fare clic su ok.
Se invece hai già progettato un'interfaccia per app, puoi aprirla in Photoshop e poi saltare a Rubinetto sezione di questo tutorial.
Clic Visualizza> Nuova guida per fare una nuova guida, che ci aiuterà a posizionare gli elementi della GUI in modo accurato. Impostalo su Verticale con posizione 15 px.
Aggiungi un'altra guida verticale su ciascun lato della tela con una distanza di 15 px tra ciascuna guida.
Disegna un'altra guida, questa volta in orizzontale a 40 px, 128 px, e 220 px.
Aggiungi una barra di stato nella parte più alta della tua area di disegno. Se hai bisogno di indicazioni dettagliate su questo, consulta la sezione sulla barra di stato del nostro tutorial precedente Come progettare un'app di posta elettronica iOS 7 in Photoshop.
Quindi, creare un nuovo livello, quindi selezionare la seconda sezione e quindi riempirla di un colore grigio, # 2c3137.
Aggiungi il testo del titolo dell'app nella parte superiore dell'interfaccia.
Aggiungi un logo al titolo. Ho solo disegnato dei semplici rettangoli per il logo, ma se hai un'icona di app esistente, puoi semplicemente importarla in un nuovo livello.
Disegna un'icona a forma di lente utilizzando una combinazione di due forme circolari e un rettangolo arrotondato, utilizzando lo stesso colore del logo dell'app. Posizionalo sul lato destro dell'app.
Dall'altro lato, disegna quattro rettangoli arrotondati per l'icona dell'opzione.
Crea un nuovo livello con una sezione rettangolare che si adatta alla barra del titolo. Riempi la sezione successiva con un colore grigio, proprio come nella sezione precedente.
Aggiungi una maschera di livello al livello e quindi aggiungi una sfumatura dal nero al bianco fino a sfumare la parte inferiore.
Aggiungi un menu usando il Digita strumento, contenente le categorie di notizie. Imposta il primo menu: in questo caso, il Tutti opzione-essere in grassetto, per indicare che la categoria è attiva. Duplicalo (Control-J) e quindi impostare altri menu, in questo caso, Sport-per essere audace, ancora una volta per indicare quale categoria è selezionata.
Ora, dal Livelli pannello, impostare il Sport menu Opacità a 0% per nasconderlo, come vogliamo il Tutti categoria di essere audace in primo luogo.
Aggiungi una freccia sottile per la navigazione del menu, fatta di rettangoli arrotondati.
Aggiungi un'altra freccia sull'altro lato.
Riempi il resto dell'interfaccia con il colore grigio. Assicurati di mettere questo sfondo sotto tutti gli elementi della GUI.
Disegna un rettangolo grigio chiaro per lo sfondo della sezione delle notizie individuali.
Applicare Ictus, Gloria interioreOW, e Bagliore esterno per aggiungere più contrasto all'area delle notizie. Fai doppio clic sul livello e quindi utilizza le seguenti impostazioni dagli screenshot seguenti:
Disegna un rettangolo bianco arrotondato nella parte superiore della forma precedente. Metteremo l'immagine delle notizie qui.
Applicare Bagliore interno nella forma bianca con le seguenti impostazioni:
Seleziona una foto da Tuts + Stock Photo che hai precedentemente scaricato, o qualsiasi altra foto che desideri utilizzare e posizionala sulla forma del rettangolo bianco arrotondato.
Colpire Control-Alt-G per convertire il livello di foto selezionato in una maschera di ritaglio. La foto passerà automaticamente all'interno dello strato dietro di esso. E, ecco quello che vedi: una foto perfettamente posizionata in cima alla singola area delle notizie.
Aggiungi testo per il contenuto delle notizie. Assicurati di aggiungere contrasto al testo delle notizie per un'esperienza di lettura migliore variando tipo di carattere, colore e dimensione.
Aggiungiamo le icone al design dell'elemento news. Disegna due piccoli rettangoli arrotondati senza Riempire e 1 punto colpo bianco.
Fare doppio clic sul livello e quindi aggiungere lo stile di livello Sovrapposizione colore. Uso # 708.196 per il suo colore.
Ripeti il processo precedente, ma questa volta utilizza una combinazione di un rettangolo arrotondato e un rettangolo.
Aggiungi una forma di piccolo cerchio. Ora abbiamo un'icona di tag. Dolce!
Finora, questo è il design della nostra app al 100% di ingrandimento.
Aggiungi altri singoli articoli di notizie nell'app duplicando i livelli degli elementi di notizie, personalizzandoli in modo appropriato.
Aggiungi un'area di notizie più grande. Questo verrà mostrato quando viene selezionata una singola notizia.
Metti tutti i singoli elementi di notizie e le notizie più importanti in gruppi di livelli separati. Si vuole assicurare che ogni livello sia collocato con cura in un gruppo di livelli in base al suo elemento.
Ad esempio, si desidera che ogni livello che ha unito la prima sezione di notizie individuale in un gruppo di livelli e gli elementi per gli articoli di notizie a schermo intero in altri gruppi. Questo ti aiuterà a lavorare più facilmente mentre realizzi l'animazione.
Per ora, non useremo questa sezione delle grandi notizie. Quindi, imposta la sua opacità a 0%.
Ora dobbiamo progettare l'indicatore del rubinetto. Crea un nuovo gruppo di livelli e nominalo rubinetto. Quindi, disegna una forma a cerchio bianco. Imposta la sua Opacità a 50%.
Duplica la forma del cerchio premendo Control-J. Rendilo più grande, set ictus a 3 pt con un colore bianco e rimuovere il Riempire colore.
Aggiungi un'altra forma circolare, questa volta più sottile. Imposta la sua dimensione del tratto a 2 pt.
Nascondi tutti i livelli all'interno del gruppo di livelli di tocco che abbiamo appena creato, poiché non vorrai che i tocchi vengano visualizzati quando l'interfaccia utente viene caricata per la prima volta, ma li visualizzerà solo quando l'animazione si sta fissando per la transizione a un elemento selezionato.
Ora siamo finalmente pronti per iniziare a costruire la nostra animazione dell'interfaccia utente. Apri il Sequenza temporale pannello e quindi creare una nuova cornice.
Crea un altro nuovo frame.
Ora è il momento di rivelare il gruppo di livelli di tocco. Quando mostri una scena a scorrimento, nascondi i due cerchi tratteggiati e useremo questa condizione per indicare il gesto di scorrimento. Apparirà più come un tratto continuo, mentre i cerchi accarezzati esterni conferiscono un aspetto a increspature più coerente con un singolo tocco per selezionare un oggetto.
Cambia la durata a 1 secondo per il primo fotogramma e 0,2 secondi per il secondo fotogramma.
Aggiungi un altro frame.
Attiva il Rubinetto gruppo di livelli e tutti i livelli della griglia delle notizie. Uso Sposta strumento per spostarli nella lista dei livelli.
Fare automaticamente un'animazione liscia tra il fotogramma corrente e quello precedente, fare clic Gemello a partire dal Sequenza temporale menu del pannello.
Impostare l'interpolazione su 5 per il frame aggiunto.
Ora, abbiamo un'animazione della griglia delle notizie che si sposta verso l'alto su ciascun fotogramma.
Se pensi che l'animazione sia troppo veloce, puoi renderla più lenta selezionando tutti i fotogrammi e impostando la durata su 0,2 secondi.
Prova l'animazione facendo clic sull'icona di riproduzione nel Sequenza temporale pannello. Non dimenticare di impostare l'animazione su Per sempre; in questo modo l'animazione è in loop.
La nostra animazione attuale contiene la griglia delle notizie che si sposta verso l'alto. Nel prossimo frame, dobbiamo riportarlo alle condizioni precedenti in modo che continui senza problemi con il primo frame. Per fare ciò, copia il secondo frame e incollalo nell'ultima posizione scegliendo Incolla dopo la selezione nella finestra di dialogo.
Applicare il Gemello comando di nuovo per creare una nuova animazione tra l'ultimo e il penultimo fotogramma.
Aggiungi una nuova cornice e nascondi l'indicatore del rubinetto.
Finora, questa è l'animazione che otteniamo, che ci fornisce un'interfaccia utente di scorrimento di base.
Ora è il momento di animare la selezione di un collegamento nel menu. Innanzitutto, crea una nuova cornice. In questa cornice, imposta il Opacità menu di testo con la variante in grassetto selezionata di Tutti dal menu impostato su 0% e Sport'Sla trasparenza della variante selezionata impostata su 100%.
Attiva il gruppo di livelli Tocca e mostra tutti i suoi livelli. Cambia la durata del frame in 0,2 secondi.
Crea una nuova cornice con una durata di 0,1 secondi. Questa volta nasconde il cerchio più sottile sfiorato.
Aggiungi un altro fotogramma e nascondi il cerchio sfiorato successivo.
Aggiungi una nuova cornice e nascondi il gruppo di livelli di tocco.
Crea una nuova cornice e poi imposta il Opacità di ogni notizia nella griglia senza il tag sport 0%.
Sempre in questa cornice, trascina le notizie sportive individuali verso l'alto nella griglia, riempiendo gli spazi vuoti sopra di loro.
Interpolazione tra il frame corrente e il precedente. Per animazioni più veloci, imposta i fotogrammi aggiunti su 3.
Imposta la durata nell'ultimo fotogramma su 2 secondi.
Per questo tocco, questa è l'animazione che abbiamo.
Successivamente, selezioneremo uno degli articoli di notizie e lo mostreremo a schermo intero. Innanzitutto, crea una nuova cornice con la durata 0,2 secondi e quindi rivelare tutti i livelli all'interno del gruppo di livelli Tap.
Aggiungi un nuovo frame e imposta la sua durata su 0,1 secondi. Nascondi il tratto del cerchio più sottile.
Aggiungi un altro fotogramma e quindi nascondi il cerchio con la successiva traccia.
Aggiungi un altro frame con durata 0,1 secondi. Nascondi il gruppo di livelli Tocca e crea una nuova cornice. Rivela la sezione delle grandi notizie che abbiamo fatto in precedenza Sezione 1 Passo 28 impostando il suo Opacità a 100%. Nascondi la griglia delle notizie piccole impostando la sua Opacità a 0%.
Aggiungi l'interpolazione dell'animazione tra il fotogramma corrente e quelli precedenti.
Questo è ciò che abbiamo per questa animazione.
A partire dal Sequenza temporale pannello, fare clic Appiattisci i fotogrammi negli strati.
Ogni fotogramma verrà convertito in un livello piatto. Se hai 33 fotogrammi, otterrai anche 33 livelli piatti: livello Frame 1 tratto dal contenuto del fotogramma 1, livello Frame 2 prelevato dal frame 2 e così via.
Seleziona tutti i livelli dei frame in Livelli pannello.
Trascina i livelli sulla foto dell'iPhone che hai scaricato in precedenza.
Nel Sequenza temporale pannello, selezionare Crea animazione frame e quindi fare clic Nuova cornice pulsante.
Assicurati che tutti i livelli siano ancora selezionati. Colpire Control-T per eseguire una trasformazione. tenere Controllo quindi trascina ogni angolo e posizionale nell'angolo dello schermo.
Crea una nuova cornice per ogni livello. Metti il livello Frame 1 nel primo fotogramma, livello Frame 2 nel secondo fotogramma, strato Frame 3 nel terzo fotogramma e così via. Vuoi anche abbinare la durata per ciascuno dei frame. Assicurati di impostare il ciclo su Per sempre, quindi l'animazione continuerà a scorrere.
Guarda l'immagine qui sotto per un esempio. Strato Frame 23 è rivelato sul fotogramma 23. Strato Frame 25 è rivelato sul frame 25 e così via. Continua per ogni fotogramma.
È ora di esportare il risultato come file GIF animato. Selezionare Salva per Web nel menu File e selezionare GIF come tipo di file. Gioca con le impostazioni disponibili per ottenere le dimensioni ottimali del file. Prova il risultato dell'animazione facendo clic sul pulsante di riproduzione. Assicurati di impostare il suo Opzioni cicliche a Per sempre.
E questo è tutto: hai progettato un'interfaccia utente dimostrativa, l'hai animata e hai inserito l'animazione all'interno di un'immagine iPhone per far sembrare l'animazione come se fosse in esecuzione su un dispositivo reale.
Spero tu abbia trovato utile questo tutorial. Puoi modificare i passaggi inclusi per lavorare con qualsiasi tipo di app che desideri demo e puoi utilizzare un'immagine del dispositivo diversa per mostrare, ad esempio, un'app per tablet o un sito web. Puoi anche provare altri tipi di interazione multi-touch nella presentazione finale, come lo scorrimento verso l'alto o il pizzico-zoom, se modifichi le animazioni.
Se crei le tue animazioni demo dell'app utilizzando questo tutorial, ci piacerebbe vederle nei commenti qui sotto!
Accentsconagua