Share
Photoshop CS6 è dotato di nuove funzionalità che ti aiuteranno a creare migliori design dell'interfaccia. In questo tutorial utilizzeremo le nuove funzionalità di modifica vettoriale e di tracciamento di Photoshop per creare un'interfaccia dashboard dell'amministratore. Sfrutteremo inoltre la nuova funzione di snap di pixel di Photoshop per contribuire a creare una grafica Web nitida e pulita. Iniziamo!
Le seguenti risorse sono state utilizzate durante la produzione di questo tutorial.
Utilizzeremo la griglia 960 con layout a 12 colonne da 960.gs come framework per il nostro design. Scarica il file modello in formato zip e quindi apri 12 Griglie colonne. Fai clic sull'icona a forma di occhio sul lato anteriore del livello 12 Col Grid per nasconderlo.
Fai clic sull'icona del cerchio bianco e nero per aggiungere un nuovo livello di regolazione. Seleziona Colore solido e scegli il bianco nella finestra di dialogo successiva.
Crea un nuovo livello. Fai clic su Modifica> Riempi e seleziona Usa: Modello. Usa il modello di linea diagonale di PSDfreemium. Poiché si tratta di CS6, proviamo a utilizzare la sua funzione più recente. Attivare Patterns Scripted e selezionare Symetry Fill.
Tonifica il livello Opacità al 4%.
Vogliamo assicurarci che tutti gli strati siano organizzati con cura. Quindi, iniziamo raggruppandoli in un ordine logico. Seleziona entrambi i livelli - sfondo e motivo - quindi premi Comando / Ctrl + G per inserirli nel livello di gruppo.
Non abbiamo bisogno del livello di sfondo, quindi cancellalo trascinandolo sull'icona di eliminazione.
Seleziona il livello del gruppo. Premi F2 e poi cambia nome. Hit Tab per modificare automaticamente il prossimo livello. Cambia il suo nome e poi ripeti questo al livello successivo.
Attiva lo strumento Rettangolo arrotondato. Disegna una forma rettangolare arrotondata con raggio di 10 px e larghezza 2 colonne. Posizionalo in alto a destra sulla tela. Nella barra delle opzioni, imposta Colore di riempimento su # f16424 e Traccia su Nessuno.
Fare doppio clic sulla forma del livello nel pannello Livelli per aprire la finestra di dialogo Stile livello. Attiva sovrapposizione pattern. Seleziona il pattern di pixel da PSDfreemium. Riduci la scala e l'opacità per conferire un aspetto naturale alla trama del tessuto.
Crea un nuovo livello sopra la forma. Attiva la spazzola morbida e l'ombra sulla parte superiore.
Alt: fare clic tra la base del logo e la sua ombra. Questo convertirà il livello in una maschera di ritaglio e posizionerà l'ombra all'interno del logo.
Ripeti il processo alcune volte. Puoi aggiungere più livelli se necessario. Dipingi l'evidenziazione sul lato inferiore.
Crea un nuovo livello sotto il logo. Comando / Ctrl: fare clic sulla forma per effettuare una nuova selezione in base alla sua forma. Riempi la selezione con il nero.
Applica il filtro Sfocatura gaussiana. Fai clic su Filtro> Sfocatura> Sfocatura gaussiana.
Premi Comando / Ctrl + T per eseguire la trasformazione. Fai clic con il tasto destro e scegli Warp. La casella di delimitazione della trasformazione è divisa in 3 x 3 caselle. Trascina la casella in basso. Premi Invio per accettare il risultato della trasformazione.
Disegna una forma rettangolare più piccola arrotondata. Dalla barra delle opzioni, imposta Fill a none e Stroke to white con dimensione 1 pt.
Apri le Opzioni tratto e seleziona Preimpostazione tratteggiata. Fai clic su Altre opzioni per modificare le impostazioni della linea tratteggiata.
Nel pannello Livelli, fai doppio clic sul relativo livello per aprire la finestra di dialogo Stile livello. Attiva l'ombra esterna, imposta l'angolo a 90 °, attiva Usa luce globale, imposta le sue dimensioni su 0 px e distanza 1 px.
Attiva lo strumento Rettangolo e fai clic una volta sulla tela. Nella finestra di dialogo, imposta le sue dimensioni su 6 x 30 px. Fare clic su OK per iniziare a creare la forma.
Fare clic sulla casella Riempi nella barra delle opzioni. Seleziona Gradiente e imposta il suo colore da #dfdfdf a #ffffff.
Disegna un altro percorso rettangolare all'interno del logo. Fare doppio clic sul relativo livello nel pannello Livelli e quindi attivare Ombra esterna.
Aggiungi ombra esterna alla forma del livello.
Di seguito è riportato il risultato a un ingrandimento maggiore. Come puoi vedere finora, la nostra forma vettoriale è sempre nitida. Non c'è mezzo pixel! Questo grazie alla funzione di aggancio vettoriale in Photoshop CS6. È possibile disattivare questa funzione se si desidera dalla finestra di dialogo Preferenze - ancora non ho idea del motivo per cui qualcuno dovrebbe farlo.
Aggiungi testo all'interno del logo. Possiamo aggiungere contrasto al testo semplicemente cambiando parte del carattere in grassetto.
Aggiungi un'altra ombra esterna al testo.
Attiva lo strumento Rettangolo e quindi disegna un rettangolo come sfondo del contenuto principale. Imposta la larghezza su 800 px, Riempi: #eeeeee e Traccia: #cccccc, Dimensione: 1 pt.
Aggiungi bagliore esterno con le seguenti impostazioni.
Aggiungi una forma triangolare e un rettangolo arrotondato. Imposta la loro modalità di percorso su Combina forme.
Aggiungi testo nella scheda per aggiungere il titolo. Aggiungi una piccola icona statistica composta da alcuni piccoli rettangoli.
Disegna una forma rettangolare bianca come base per il nostro grafico principale. Imposta la sua larghezza su 8 colonne. Assicurati di impostare il suo tratto su Nessuno. Aggiungi bagliore esterno di stile di livello.
Premi Comando / Ctrl + J per duplicare la forma. Aggiungi una grande forma rettangolare sulla sua parte inferiore e imposta la sua modalità su Sottrai fronte. Aggiungi sovrapposizione sfumatura.
Disegna un rettangolo arrotondato. Imposta Riempi su Bianco senza tratto. Usa lo stesso bagliore esterno e posizionalo dietro la forma precedente.
Crea un nuovo livello tra queste due forme. Fai una selezione ellittica e poi riempila di nero. Deseleziona (Comando / Ctrl + D) e quindi ammorbidilo aggiungendo Gaussian Blur.
Attiva lo strumento Tipo. Aggiungi il titolo della sezione.
Attiva lo strumento linea e quindi disegna una linea di 1 px. Imposta il colore del tratto su # e4e4ee4.
Ecco la differenza prima e dopo l'aggiunta della linea.
Disegna un rettangolo. Imposta Riempi su Nessuno e Traccia su #cccccc.
Seleziona il tipo di tratto tratteggiato dalla barra delle opzioni. Fai clic su Altre opzioni e imposta Dash and Gap su 4 e 2.
Disegna una linea orizzontale di 1 px con tratto #cccccc. Seleziona tratto tratteggiato.
Attiva lo strumento di selezione del percorso e seleziona il percorso della linea che abbiamo appena creato in precedenza. Premi Comando / Ctrl + Alt + T per duplicarlo e trasformarlo. Premi MAIUSC + Freccia destra due volte per spostarlo di 20 px a destra. Ripeti il processo di trasformazione e duplicazione premendo Comando / Ctrl + Maiusc + Alt + T.
Continua a ripetere il processo finché il rettangolo non viene riempito di colonne.
Riduci l'opacità del livello al 30%.
Ripeti i passaggi precedenti ma questa volta con linee orizzontali.
Di seguito è il risultato. Ora abbiamo una griglia sottile sullo sfondo delle statistiche.
Aggiungi valori su entrambi gli assi, xey.
Attiva lo strumento linea e disegna una linea di 1 px sulla griglia. Imposta il colore Stroke su # f16424.
Maiusc - trascina per aggiungere più linee. Continuate ad aggiungere più linee finché non avremo un grafico a linee completo.
Disegna una piccola figura circolare e posizionala sul grafico a linee. Imposta il suo riempimento su bianco e lo stesso tratto sul colore di riempimento della linea.
Fare doppio clic sul livello di forma del cerchio e attivare Tratto di stile livello. Imposta il suo colore su Bianco e Posiziona su Esterno.
Seleziona il tracciato del cerchio usando lo strumento Direzione del percorso e poi Alt, trascinalo per duplicarlo.
Usa gli stessi passaggi per disegnare un altro grafico a linee. Questa volta usa colori diversi e imposta le sue Opzioni tratto su tratteggiata.
Come nel grafico a linee precedente, aggiungi cerchi su ogni segmento di linea.
In cima al grafico, aggiungi la legenda del grafico. Basta semplicemente aggiungere una breve linea usando le stesse proprietà del grafico a linee e aggiungere una breve descrizione.
Disegna un rettangolo arrotondato. Imposta il suo riempimento su #eeeeee e Traccia su #cbcbcb.
Aggiungi ombra interna allo stile di livello e sovrapposizione gradiente.
Disegna una forma rettangolare sul centro della forma rettangolare arrotondata. Puoi usare qualsiasi colore per il suo riempimento. Imposta il suo tratto su Nessuno. Riduci il suo riempimento allo 0%. Aggiungi Sovrapposizione sfumatura stile livello.
Disegna una linea di 1 px con il colore #cbcbcb sul lato sinistro e destro.
Aggiungi la selezione dell'intervallo di tempo. Puoi vedere che il testo con uno sfondo diverso è ora in condizione attiva.
Utilizziamo gli stili di carattere per definire il nostro carattere predefinito. Questa funzione è una versione semplificata di Stile carattere in Adobe InDesign. Se usi frequentemente InDesign, lo riconosci immediatamente.
Aprire il pannello Stili di carattere e quindi fare clic su nuova icona. Nella finestra di dialogo, impostare Tipo di carattere su Arial Regular, Dimensioni su 12 pt e Colore su # 767676. Utilizzeremo questo stile di carattere nella maggior parte del testo. Ecco perché lo chiameremo anche come stile carattere predefinito.
Applichiamo questo stile di carattere al testo. Attiva lo strumento testo, seleziona il testo e fai clic sullo stile di carattere per applicarlo.
Cosa succede se vogliamo salvare le proprietà dal testo esistente come stili di carattere? Facciamo questo ai valori sull'asse del grafico. Crea nuovi stili di carattere. Seleziona il testo e fai clic sull'icona Ridefinisci.
Fare doppio clic sullo stile del carattere per modificare le sue opzioni. Cambia il suo nome. Applica questo stile di carattere a tutti i valori su entrambi gli assi.
La cosa bella dello stile di carattere (e anche dello stile di paragrafo) è che puoi semplicemente modificarlo per modificare ogni testo che usa quello stile. Ecco un esempio. Modifichiamo l'asse del grafico: uno stile di carattere che abbiamo creato in precedenza per ogni valore su entrambi gli assi. Fare doppio clic e modificare il tipo e la dimensione del font.
Attiva lo strumento Rettangolo arrotondato. Disegna un rettangolo arrotondato e aggiungi un piccolo triangolo sul lato sinistro. Imposta il suo riempimento: # f1f2f2 e tratto: nessuno.
Fare doppio clic sul livello nel pannello Livelli e aggiungere tratto nero. Forse stai chiedendo, perché non usiamo l'opzione Stroke direttamente dalla sua proprietà? La risposta è in Stile livello. Puoi cambiare l'opacità del tratto. È qualcosa che non puoi ancora fare su Photoshop CS6. Inoltre, aggiungi Bagliore esterno e Sovrapposizione sfumatura.
Forma duplicata e cambia il colore di riempimento in # f16424. Rimuovi il suo stile di livello. Aggiungi il percorso rettangolo sulla sua parte inferiore e imposta la sua modalità su Sottrai la forma frontale.
Aggiungi il tratto di stile del livello e la sovrapposizione del gradiente alla forma.
Disegna una linea verticale di 1 px. Imposta il colore di riempimento su nero. Aggiungi tratto Stili livello. Ridurre gli strati Opacità all'8%.
Aggiungi un piccolo titolo sulla forma. Salva la proprietà del carattere come stili di carattere. Aggiungi ombra di stile di livello.
Aggiungi un altro titolo sull'altro lato. Usa gli stessi stili di carattere e la stessa ombra esterna.
Aggiungi una percentuale al suo interno. È sempre una buona idea salvarlo come stili di carattere. In questo modo, puoi facilmente modificarne l'aspetto dal pannello Stili personaggi.
Attiva lo strumento poligono e imposta il suo lato su 3 nella barra delle opzioni. Disegna un piccolo triangolo che punta verso l'alto. Imposta il relativo riempimento: # c1c1c1 e tratto: nessuno.
Aggiungi ombra interna allo stile di livello.
Aggiungi un piccolo cerchio e un'altra forma triangolare - puntando verso il basso questa volta. Usa lo stesso colore e lo stile di livello.
Aggiungi il numero percentuale. Come al solito, assicurati di salvare il suo stile di carattere.
I dati sono positivi. Quindi, sottolineiamo attivando la freccia su. Cambia la sua forma Riempi colore a # 4ff25d.
Duplica il numero per un altro dato.
Disegna una sezione simile per un grafico più piccolo. Puoi usare le stesse tecniche spiegate sopra. Assicurati di utilizzare una dimensione del testo più piccola sul titolo.
Disegna una linea blu di 1 px all'interno della griglia. Imposta le sue opzioni di tratto su tratteggiate.
Come nel grafico principale, aggiungi un cerchio su ciascun punto.
Attiva lo strumento Penna. Disegna una nuova forma che copre la linea che la collega all'asse x. Usa lo stesso colore della linea. Posiziona la forma dietro i cerchi.
Aggiungi pattern pixel gratuiti da PSDfreemium.
Riduci l'opacità al 50%.
Aggiungi la percentuale dalla sua parte. In questo grafico più piccolo, vogliamo anche una dimensione percentuale del testo più piccola.
Aggiungi un altro grafico.
Attualmente stiamo lavorando sulla scheda statistica. Aggiungiamo un'altra scheda e mettiamoli in condizione di inattività. Sfondo della scheda delle statistiche duplicate creato nel passaggio 25 - 27. Sarà utile se si nasconde la scheda statistica in seguito. Cambia il colore di riempimento e traccia in # c1c1c1. Elimina il piccolo rettangolo sul lato sinistro. Sposta il rettangolo superiore arrotondato a destra.
Aggiungi un'icona semplice fatta da un cerchio senza riempimento e tratto: # 646464 con un io al suo interno.
Riporta la scheda Statistiche. Disegna un'altra scheda inattiva se necessario.
Attiva lo strumento Rettangolo e disegna un rettangolo dietro la scheda principale. Imposta il suo riempimento su #eeeeee e Traccia su #cbcbcb.
Disegna un rettangolo arrotondato. Imposta il suo riempimento su un gradiente da # d6d6d6d a #f3f3f3 e Stroke # c1c1c1. Questo sarà lo sfondo per un menu inattivo.
Duplica il rettangolo arrotondato. Cambia il suo colore per riempire sfumature da # ef6526 a fa834d e Stroke: # f16424. Questo è usato per il menu attivo. Assicurati di posizionarlo sotto il piccolo triangolo della scheda Statistiche.
Duplica il primo rettangolo arrotondato per creare più sfondi per i menu inattivi.
Aggiungi testo sul pulsante. Fare doppio clic sul relativo livello per aggiungere un'ombra esterna di stile livello. Per i menu inattivi, utilizzare il testo scuro e ombreggiatura chiara.
Per il menu attivo, utilizzare testo bianco e ombreggiatura scura.
Disegna un rettangolo arrotondato. Non c'è bisogno di preoccuparsi per il suo riempimento o corsa.
Per il suo riempimento, utilizziamo la stessa sfumatura dal precedente menu della barra laterale. Attiva anche Path Selection e seleziona la forma. Fare clic con il tasto destro e selezionare Copia riempimento.
Torna alla nuova forma, fai clic con il pulsante destro del mouse e scegli Incolla riempimento.
Apri l'opzione Riempi dalla barra delle opzioni e fai clic sull'icona sotto l'anteprima del gradiente per capovolgerne la direzione del gradiente.
Ripeti la stessa procedura per copiare l'impostazione di Traccia.
Aggiungi Inner Shadow con le seguenti impostazioni.
Attiva lo strumento Tipo e l'etichetta del pulsante bianco. Aggiungi ombra di stile di livello.
Aggiungi un piccolo triangolo rivolto verso il basso. Riempimento: #eeeeee e Stroke: None. Aggiungi stessa ombra esterna come etichetta del pulsante.
Aggiungi una linea di 1 px che separa l'etichetta e la freccia. Impostare il suo colore su # b04312 e quindi aggiungere una leggera ombra esterna con angolo di 180 °.
Aggiungiamo un'icona mini magnifier sul pulsante. Inizia disegnando un percorso circolare con dimensioni 10 x 10 px. Imposta il suo tratto su Bianco, con Dimensione: 2 pt e Riempi a Nessuno.
Aggiungi una linea a 2 punti accanto al cerchio con un angolo di 45 °.
Accentsconagua