Share
Photoshop CS6 è un'applicazione di editing vettoriale molto più potente rispetto ai suoi predecessori. In questo tutorial, ti mostreremo come utilizzare queste nuove funzionalità per creare un'interfaccia per l'app del lettore musicale iPhone sia nella risoluzione originale dell'iPhone, sia nella retina senza dover ripetere lo stesso processo per entrambi i progetti. Iniziamo!
Le seguenti risorse sono state utilizzate durante la produzione di questo tutorial.
Crea un nuovo file. Imposta Larghezza a 320 px e Altezza a 480 px.
In questo passaggio creeremo lo sfondo. C'è un nuovo modo più semplice di creare forme vettoriali in Photoshop CS6 e useremo questo metodo attraverso l'intero tutorial.
Crea un nuovo gruppo e chiamalo "Sfondo". Seleziona lo strumento Rettangolo (R) e nella barra delle opzioni imposta la Modalità strumento su Forma, quindi fai clic sul pulsante accanto ad esso per scegliere il Tipo di riempimento forma. Dall'elenco dei tipi di riempimento selezionare il pulsante Gradiente. Imposta tutti i valori come i valori evidenziati nell'immagine sottostante. Usa i colori # 3F4042 e # 303133 per il gradiente.
Fai clic in qualsiasi punto della tela. Quando viene visualizzata la finestra Crea rettangolo, fai clic su OK e assicurati che le dimensioni siano impostate su 700x700px. Denominare il livello appena creato "Sfondo".
Premi Cmd / Ctrl + A per selezionare l'intero canvas, seleziona lo strumento Sposta (V) e poi nella barra delle opzioni fai clic su Allinea centri orizzontali e allinea i pulsanti dei bordi inferiori.
Fai doppio clic sulla miniatura del livello sul livello "Sfondo" e assicurati che la casella di controllo Dither sia selezionata. In questo modo otterrai una sfumatura uniforme senza bande.
Apri statusbar.psd in Photoshop e importa il gruppo della barra di stato sul tuo PSD funzionante. Usa il metodo menzionato sopra per allineare il gruppo "Barra di stato" - Premi Cmd / Ctrl + A per selezionare l'intera tela e mentre usi lo strumento Sposta (V) fai clic sui pulsanti Allinea centri orizzontali e Allinea bordi superiori.
Crea un nuovo gruppo sotto il gruppo "Barra di stato" e chiamalo "Barra di navigazione". Seleziona lo strumento Rettangolo arrotondato (U) e imposta le proprietà come mostrato nell'immagine sottostante. Usa # 5F8F1D e # 99B83D per il gradiente. Fare clic in un punto qualsiasi dell'area di disegno e fare clic su OK quando viene visualizzata la finestra Crea rettangolo arrotondato. Denominare il livello appena creato "Nav Bg."
Allinea orizzontalmente il livello al centro e verticalmente appena sotto la barra di stato come mostrato di seguito.
Seleziona lo strumento Rettangolo (U) e disegna una forma rettangolare simile a quella mostrata sotto, ma assicurati che questa forma copra solo la parte inferiore del livello "Nav Bg". Ho usato l'opzione Nessun colore per il tipo di riempimento forma.
Usando lo Strumento selezione percorso (A) seleziona la forma appena creata. Premi Cmd / Ctrl + C per copiare la forma negli appunti. Ora seleziona il livello "Nav Bg" nel pannello Livelli e premi Cmd / Ctrl + V. Ora la forma viene incollata sul livello "Nav Bg".
Con lo strumento selezione tracciato (A) ancora attivo, fare clic sul pulsante Operazioni su tracciato nella barra delle opzioni, quindi selezionare Sottrai forma anteriore.
Ora fai di nuovo clic sul pulsante Operazioni traccia e quindi seleziona Unisci componenti forma.
Usando lo Strumento selezione diretta (A) seleziona i due punti in basso e spostali finché l'altezza della forma è 43 px.
Applica il seguente stile di livello al livello "Nav Bg":
Usando lo strumento Rettangolo arrotondato (U) disegna una forma con le proprietà mostrate di seguito. Usa colore pieno per il tipo di riempimento forma. Denominare il livello appena creato "Impostazioni Bg."
Applica il seguente stile di livello:
Sposta "Impostazioni Bg" in modo che sia allineato verticalmente al centro di "Nav Bg" e orizzontalmente a 6 px dal bordo destro della tela.
Apri icons.psd e sposta il livello "Impostazioni" sul tuo PSD. Allinea l'icona orizzontalmente e verticalmente al centro di "Impostazioni Bg."
Applica il seguente stile di livello:
Usando lo strumento Rettangolo arrotondato (U) disegna una forma con le proprietà mostrate di seguito. Usa colore pieno per il tipo di riempimento forma. Denominare il livello appena creato "Back Bg."
Utilizzando lo strumento Aggiungi punto di ancoraggio aggiungi un punto di ancoraggio sul lato sinistro del rettangolo e 14 px sotto il bordo superiore.
Usando lo strumento Converti punto clicca sullo stesso punto di ancoraggio.
Ora seleziona lo strumento Selezione diretta (A) e sposta il punto 10 px a sinistra.
Con lo strumento selezione diretta (A), continua a selezionare i due punti di ancoraggio evidenziati nell'immagine sottostante e spostali di 1 pixel a sinistra. Quindi selezionare lo strumento Converti punti e fare clic su ciascuno dei due punti di ancoraggio.
Allinea la forma verticalmente al centro di "Nav Bg" e orizzontalmente a 6px dal bordo sinistro dell'area di disegno.
Ora che abbiamo finito con il disegno della forma, possiamo aggiungere uno stile ad esso. Fai clic con il pulsante destro del mouse sul livello "Impostazioni Bg" e seleziona Copia stile livello, quindi fai clic con il pulsante destro del mouse sul livello "Indietro Bg" e seleziona Incolla stile livello.
Aggiungi testo al pulsante utilizzando i parametri dell'immagine sottostante. Ho usato il carattere Helvetica Neue. Allinea il testo al centro della forma e copia lo stile del livello dal livello "Impostazioni".
Aggiungi il testo del titolo utilizzando i parametri dell'immagine sottostante e allinearlo al centro della barra di navigazione.
Crea un nuovo gruppo sotto il gruppo "Barra di navigazione" e chiamalo "Posizione". Seleziona lo strumento Rettangolo (U) e imposta le proprietà come mostrato nell'immagine sottostante, quindi fai clic da qualche parte nell'area di disegno. Usa # 2E2F30 e # 494A4C per il gradiente. Denominare il livello "Posizione Bg."
Posiziona la forma sotto la barra di navigazione, ma assicurati che vi sia uno spazio vuoto di un pixel tra di loro. Allinea la forma orizzontalmente al centro della tela.
Applica il seguente stile di livello alla forma:
Seleziona lo strumento Rettangolo arrotondato (U) e imposta le proprietà come mostrato nell'immagine sottostante, quindi fai clic da qualche parte nell'area di disegno. Imposta il raggio su un valore più alto. Ho usato 50px.
Denominare il livello "Posizione vuota" e allinearlo, sia orizzontalmente che verticalmente, al centro del livello "Posizione Bg".
Applica il seguente stile di livello:
Seleziona lo strumento Rettangolo arrotondato (U) e imposta le proprietà come mostrato nell'immagine sottostante, quindi fai clic da qualche parte nell'area di disegno. Usa # 85AD2A, # A0D028 e # B6D028 per il gradiente. Ancora una volta, imposta il Raggio su un valore più alto. Denominare questo livello "Posizione completa".
Allinea la forma mostrata nell'immagine sottostante, ma assicurati che vi sia uno spazio di due pixel su tutti i lati tra la forma e il livello "Posizione vuota".
Applica il seguente stile di livello alla forma:
Seleziona lo strumento Ellisse (U) e imposta le proprietà come mostrato nell'immagine sottostante, quindi fai clic da qualche parte nell'area di disegno. Usa # 444547 e # 5C5E61 per il gradiente. Assegna un nome a questo livello "Gestisci".
Allinea questa forma in modo che copra il bordo destro del livello "Posizione completa".
Applica il seguente stile di livello:
Seleziona di nuovo lo strumento Ellisse (U) e imposta le proprietà come mostrato nell'immagine sottostante, quindi fai clic da qualche parte sulla tela. Usa # 636669 e # 38393B per il gradiente. Assegna un nome a questo livello "Gestisci cerchio".
Allinea la forma al centro del livello "Maniglia".
Aggiungi testo per il tempo. Usa Helvetica Neue, grassetto. La dimensione è 10pt e il colore # B2B2B2. Allinea il testo come mostrato nell'immagine qui sotto.
Crea un nuovo gruppo e chiamalo "Controlli di riproduzione". Usando lo strumento Ellisse (U) disegna un cerchio con dimensioni 50x50 px. Non prestare attenzione agli altri parametri. Assegna un nome al nuovo livello "Riproduci Bg".
Espandi il gruppo "Posizione", fai clic con il pulsante destro del mouse sul livello "Gestisci" e seleziona Copia attributi forma dal menu.
Torna al gruppo "Controlli di riproduzione", fai clic con il pulsante destro del mouse sul livello "Riproduci Bg" e seleziona Incolla attributi forma dal menu. Questa è una nuova funzionalità di Photoshop CS6. In questo modo invece di impostare tutti gli attributi per Shape Fill Type, come i colori del gradiente, l'angolo ecc., Stiamo copiando quegli attributi dal livello "Handle", poiché stiamo usando gli stessi valori per il layer appena creato.
Allinea orizzontalmente il livello al centro della tela e verticalmente 20px sotto "Posizione Bg".
Applica il seguente stile di livello:
Fai clic con il tasto destro sul livello "Riproduci Bg" e seleziona Duplica livello. Denominare il nuovo layer "Fast Backward Bg."
Usando lo Strumento selezione traccia (A) fai clic sul livello "Ritirata veloce Bg" e modifica le dimensioni nella barra delle opzioni su 34x34 px.
Allinea verticalmente il livello al centro di "Riproduci Bg" e orizzontalmente a 8 px a sinistra.
Duplica "Fast Backward Bg" e assegna al nuovo layer "Fast Forward Bg." Allinea il livello allo stesso modo del precedente, ma questa volta sul lato destro.
Crea una nuova forma circolare con i parametri dell'immagine sottostante. Usa # 46484A e # 2C2D2E per il gradiente. Assicurati che il livello appena creato sia al di sotto di tutti gli altri livelli nel gruppo "Controlli di riproduzione".
Denominare il livello "Riproduzione Bg" e allinearlo sia orizzontalmente che verticalmente al centro di "Riproduci Bg"
Duplica "Riproduzione Bg" e riduci la dimensione a 48x48 px, usando il metodo che abbiamo usato nel passaggio 12. Allinea il livello al centro di "Ritirata veloce Bg".
Ora duplicare nuovamente il livello e allinearlo al centro di "Avanti veloce Bg".
Importa i layer "Fast Backward", "Play" e "Fast Forward" da icons.psd. Allinea le icone come mostrato nell'immagine qui sotto.
Seleziona i tre livelli di icona tenendo premuto Cmd / Ctrl sulla tastiera e facendo clic su ciascun livello di conseguenza. Imposta l'opacità all'85%.
Importa i livelli "Altoparlante" e "Ripeti" da icons.psd. Allinea le icone come mostrato di seguito.
Le icone importate sono piene di colori a tinta unita, ma applicheremo una sfumatura a queste. Usando lo Strumento selezione traccia (A) seleziona il livello "Altoparlante" e imposta i parametri dall'immagine sotto. Usa i colori # 6B6C70 e # 797B80 per il gradiente.
Copia gli attributi dall'icona dell'altoparlante con l'opzione Copia attributi forma e incollali sull'icona ripetizione.
Applica il seguente stile di livello all'altoparlante e ripeti le icone:
In questo passaggio metteremo le copertine degli album nel nostro design. Dopo l'importazione, li convertiamo in oggetti intelligenti e riduciamo la dimensione degli oggetti intelligenti del 50%. Lo stiamo facendo perché nella fase finale del tutorial il file verrà ridimensionato alla risoluzione della retina. In questo modo non perderemo la qualità delle immagini raster dopo il ridimensionamento alla retina.
Apri albumcover-02.jpg e importa l'immagine sul tuo PSD.
Converti il livello in oggetto intelligente passando a Livello> Oggetti avanzati> Converti in oggetto avanzato. Premi Cmd / Ctrl + T sulla tastiera per trasformare il livello. Ridurre le dimensioni al 50%. Assegna un nome a questo livello "Album Cover Center".
Allinea orizzontalmente il livello al centro della tela e verticalmente 20px sotto il livello "Riproduci Bg".
Usando lo strumento Rettangolo arrotondato (U) disegna una forma con i parametri mostrati sotto. Imposta la dimensione su 180x180px. Usa nessun colore per il tipo di riempimento forma e imposta il raggio su 3px.
Allinea la forma esattamente sopra l'immagine di copertina dell'album.
Ora applica la forma all'immagine di copertina dell'album trascinando il cursore del mouse dall'anteprima del rettangolo arrotondato alla miniatura del livello "Cover Cover Center", tenendo premuti i tasti Cmd / Ctrl + Alt sulla tastiera. Dopo aver terminato la copia, elimina il livello con il rettangolo arrotondato, poiché non ne abbiamo più bisogno.
Apri albumcover-01.jpg e importa l'immagine sul tuo PSD, convertila in oggetto intelligente e ridimensiona al 50%. Allinea la copertina verticalmente al centro del livello "Album Cover Center" e orizzontalmente a 40 px a sinistra. Assegna un nome al livello "Copertina dell'album a sinistra".
Usando lo strumento Rettangolo arrotondato (U) disegna una forma con i parametri mostrati sotto. Questa volta imposta la dimensione su 160x160px. Usa nessun colore per il tipo di riempimento forma e imposta il raggio su 3px.
Copia la forma arrotondata del rettangolo sul livello "Copertina album sinistra" usando lo stesso metodo per la copertina centrale. Al termine, elimina il livello con il rettangolo arrotondato.
Apri albumcover-03.jpg e importalo sul tuo PSD. Ripeti la stessa procedura che abbiamo usato per il coperchio sinistro, ma questa volta allinea l'immagine sul lato destro come mostrato di seguito.
Applica il seguente stile di livello al coperchio centrale:
Copia lo stile del livello dal coperchio centrale e incollalo sulle altre due copertine. Ora seleziona i livelli di copertura sinistro e destro e imposta il riempimento su 50%.
Inserisci un testo per il titolo del brano in riproduzione. Posizionalo di pochi pixel sotto il coperchio centrale.
Inserisci un'altra riga di testo per l'autore del brano in riproduzione. Allinea entrambe le linee al centro.
Usando lo Strumento Rettangolo (U) disegna una forma con i parametri mostrati sotto. Usa # 292A2B e # 38393B per il gradiente.
Allinea la forma all'angolo in basso a sinistra della tela.
Usando lo strumento Aggiungi punto di ancoraggio aggiungi due punti di ancoraggio e imposta le distanze come mostrato sull'immagine.
Seleziona i due punti di ancoraggio che sono evidenziati sull'immagine e spostali di 6px verso l'alto.
Utilizzando lo strumento di selezione diretta (A), trascinare le linee di direzione in modo che siano simili a quelle visualizzate in seguito.
In questo passaggio completeremo lo sfondo della barra delle schede duplicando e specchiando il percorso che abbiamo creato nel passaggio precedente.
Duplica il livello e ruotalo orizzontalmente andando su Modifica> Trasforma percorso> Rifletti orizzontale.
Sposta il livello duplicato esattamente nell'angolo in basso a destra dell'area di disegno. Un avviso importante: assicurati che non ci sia spazio tra le due forme.
Ora seleziona entrambi i livelli come mostrato nell'immagine, fai clic con il tasto destro e seleziona Unisci forme.
Questa dovrebbe essere la forma risultante. Come puoi vedere c'è una linea verticale nel mezzo della forma. Ciò significa che abbiamo due forme in un livello che non sono completamente fuse.
Usando lo Strumento selezione traccia (A) fai clic sul livello forma, fai clic sul pulsante Operazioni percorso nella barra delle opzioni e seleziona Unisci componenti forma. Ora hai le due forme completamente fuse. Denominare questo livello "Tab Bar Bg."
Se selezioniamo la selezione diretta (A) noteremo che ci sono alcuni punti di ancoraggio non necessari che sono stati creati durante la fusione delle forme. Cerca sempre di mantenere puliti i tuoi percorsi dai punti non necessari.
Per eliminare questi punti di ancoraggio selezionare lo strumento Elimina punto di ancoraggio e fare clic rispettivamente sui due punti di ancoraggio.
Applica il seguente stile di livello a "Tab Bar Bg":
In questo passaggio creeremo delle guide che ci aiuteranno ad allineare più facilmente le icone della barra delle schede.
Usando lo strumento Selezione rettangolare (M), fai una selezione ampia di 60 px partendo dal lato sinistro dell'area di disegno.
Ora trascina una guida dal righello a sinistra e posizionala sul bordo destro della selezione. Assicurati che l'opzione per l'aggancio alle guide sia attiva. Puoi trovarlo andando su Visualizza> Aggancia a> Guide.
Ripetere la procedura precedente per posizionare le altre guide. Imposta le distanze come mostrato nell'immagine qui sotto.
Trascina due guide orizzontali dal righello superiore e imposta le distanze come mostrato sull'immagine.
Trascina il livello "Home" dal file icons.psd.
Usando lo strumento Selezione rettangolare (M), fai una selezione che scatta sulle guide come quelle qui sotto.
Usando lo strumento Sposta (V) fai clic sui pulsanti Allinea centri verticali e Allinea centri orizzontali nella barra delle opzioni.
Digita il testo "Home" con i seguenti parametri:
Allinea il testo verticalmente vicino alla guida inferiore e orizzontalmente al centro dell'icona.
Ripeti il passaggio 21 per le altre icone e il testo (Preferiti, Playlist e Ricerca). Usa l'immagine qui sotto per riferimento.
Usando lo Strumento Rettangolo (U) disegna una forma con i parametri dall'immagine qui sotto. Usa # 5F8F1D e # 99B83D per il gradiente.
Allineare la forma in modo che il suo bordo superiore tocchi la guida orizzontale superiore e orizzontalmente verso il centro della barra delle linguette. Assegna un nome al layer "Now Playing Bg."
Applica il seguente stile di livello:
Trascina il layer "Now Playing" dal file icons.psd e cambia il colore di riempimento del layer in # 000000.
Applica il seguente stile di livello:
Allinea l'icona orizzontalmente al centro di "Now Playing Bg" e verticalmente pochi pixel sotto il suo bordo superiore.
Digita il testo "Now Playing" con i seguenti parametri:
Allinea di nuovo il testo orizzontalmente al centro del pulsante e verticalmente pochi pixel sotto l'icona. Copia lo stile del livello dall'icona In esecuzione.
Abbiamo finito con la creazione di tutti gli elementi del design. Ma abbiamo ancora un ultimo passaggio, e cioè ridimensionare il file in retina.
Scalare alla risoluzione della retina è molto semplice e richiede solo un passo. Vai a Immagine> Dimensione immagine e imposta i valori come mostrato di seguito. Assicurati che tutti i parametri evidenziati siano impostati esattamente come nell'immagine.
Questo dovrebbe essere il risultato dopo il ridimensionamento dell'immagine alla risoluzione della retina.
Mancia:Cerca sempre di disegnare gli elementi nei tuoi progetti con forme vettoriali, proprio come abbiamo fatto in questo tutorial. In questo modo puoi facilmente personalizzarli e non perderai la qualità quando riduci la retina.
In questo t
Accentsconagua