Share
Cosa starai creandoAdobe Photoshop è famoso non solo per la sua funzione di modifica delle immagini, ma anche per le sue capacità di progettare interfacce utente. In questo tutorial progetteremo una ricerca tridimensionale e un'interfaccia di visualizzazione delle immagini. Utilizzeremo molte funzioni di forma vettoriale e quindi applicheremo gli stili di livello per aggiungere un effetto 3D.
Avrai bisogno delle seguenti risorse gratuite per seguire questo tutorial:
Inizia creando un nuovo file (Control-N) con dimensioni 400 pixel × 300 pixel. Per lo sfondo, selezionare bianca.
Clicca il Aggiungi livello di regolazione icona e quindi selezionare Tinta unita. Nella successiva finestra di dialogo, seleziona un colore chiaro per lo sfondo.
Fare doppio clic sul Tinta unita livello di regolazione e quindi attivare Sovrapposizione di modelli. Per il modello, seleziona un motivo a pixel libero. Riduci il suo Opacità a 10% per tenerlo sottile.
Vogliamo mantenere tutti gli strati organizzati. Inizia creando un nuovo livello di gruppo.
Disegna un rettangolo arrotondato con raggio d'angolo 6 px. Per il suo colore, usa il grigio.
Fare doppio clic sulla forma del rettangolo arrotondato e quindi applicare gli stili di livello Ictus, Ombra interiore, e Sovrapposizione sfumatura. Questi stili aggiungeranno un effetto 3D alla forma.
Duplica la forma premendo Control-J. Cambia il suo colore in blu. Stiamo per convertirlo in un pulsante.
Cambia le impostazioni dello stile di livello. Sentiti libero di giocare con le impostazioni, specialmente se usi colori diversi nella forma vettoriale.
Taglia il pulsante aggiungendo una forma rettangolare sul lato sinistro e impostane la modalità Sottrai la forma frontale.
All'interno dell'area di ricerca, disegna un rettangolo bianco arrotondato con raggio d'angolo 2 pixel. Assicurati che sia posizionato al centro dello spazio vuoto.
Fare doppio clic sulla forma per aggiungere gli stili di livello Bevel & Emboss, Ictus, Ombra interiore, Sovrapposizione sfumatura, e Bagliore esterno. Questi effetti aggiungeranno un leggero effetto rilievo all'area di ricerca.
Duplica la forma del vettore dell'area di ricerca. Cambia il suo colore in verde. Tagliala aggiungendo un percorso rettangolo sul lato sinistro con la modalità Sottrai la forma frontale.
Aggiungi questi stili di livello alla forma.
Aggiungi un'etichetta sopra la forma verde. In questo tutorial, sto usando il carattere NuOrder. Sentiti libero di usare qualsiasi font. Fare doppio clic sul livello di testo e quindi aggiungere gli stili di livello Ombra esterna e Sovrapposizione sfumatura per aggiungere profondità al testo, che aumenterà la sua leggibilità.
Aggiungi una freccia accanto all'etichetta. Puoi disegnarlo usando due forme triangolari sovrapposte, con l'ultima forma impostata su Sottrai la forma frontale.
Aggiungi gli stessi stili di livello alla forma della freccia come nell'etichetta.
Stiamo per aggiungere un'icona di lente di ingrandimento sul pulsante di ricerca. Per disegnarlo, inizia creando una forma a ciambella composta da due forme di cerchi sovrapposti.
Quindi aggiungi una forma rettangolare arrotondata per la maniglia del magnifier.
Fare doppio clic sull'icona della lente di ingrandimento per aggiungere stili di livello. Nella finestra di dialogo Stile livello, attivare Bevel & Emboss, Ictus, Ombra interiore, Sovrapposizione sfumatura, e Bagliore esterno. Una combinazione di tutti questi stili di livello trasformerà l'icona in una bella buca che attraversa il pulsante.
Aggiungi un'etichetta nell'area di ricerca. Per renderlo leggibile, aggiungi un sottile Ombra esterna Stile di livello.
Duplica la forma principale e posizionala sopra la barra di ricerca. Aggiungi gli stili di livello Bagliore interno e Sovrapposizione sfumatura dal nero al bianco con il basso Opacità.
Riduci il Riempire strato a 0% fino a quando non abbiamo solo il gradiente seduto sulla barra di ricerca.
Ora, vogliamo trasformare la barra di ricerca in una forma 3D. Inizia duplicando il pulsante di ricerca e spostandolo verso il basso di alcuni pixel. Cambia il suo colore in un blu più scuro. Assicurati che la forma duplicata sia posizionata dietro la barra di ricerca.
Ripeti questo passaggio per la forma principale della barra di ricerca. Spostalo verso il basso di alcuni pixel e cambialo in un colore più scuro.
Fare doppio clic sulla forma e quindi aggiungere lo stile di livello Ombra esterna. Ricorda che dovrai sempre aggiungere un'ombra esterna a ogni forma 3D.
Vogliamo anche aggiungere un'evidenziazione in cima al pulsante. Premuto il tasto Control la forma della barra di ricerca in alto per creare una nuova selezione in base alla sua forma. Crea un nuovo livello sopra ogni livello. Clic Modifica> Tratto. Imposta il colore del tratto su bianco.
Rimuovi la selezione che abbiamo appena creato premendo Control-D. Ammorbidisci la linea del tratto applicando a Sfocatura gaussiana filtro.
Aggiungi una maschera di livello e rimuovi alcune delle evidenziazioni dipingendole con il nero.
Per mantenere tutti i livelli organizzati, come sempre iniziamo creando un nuovo livello di gruppo. Inseriremo ogni livello nel passaggio successivo all'interno di questo livello di gruppo.
Questa interfaccia di visualizzazione delle immagini utilizzerà lo stesso stile della precedente barra di ricerca. Ecco perché inizieremo duplicando la forma base della barra di ricerca. Vogliamo prendere la barra di ricerca principale, il pulsante, l'area di ricerca, il suo punto culminante e il suo lato posteriore.
Chiaramente, vogliamo che sia più grande. Utilizzare il Strumento di selezione diretta per selezionare i punti nella parte superiore dell'interfaccia del display e quindi tirarlo verso l'alto di alcuni pixel.
Aggiungi un'immagine che verrà visualizzata sopra il livello dell'area di visualizzazione. Convertirlo in una maschera di ritaglio premendo Control-Alt-G. L'immagine andrà all'interno dell'area di visualizzazione.
Attiva il Strumento Poligono. Dalla barra delle opzioni, impostare lati a 5, e attivare Stella e Angoli lisci, con Rientro lati: 50%. Fare clic e trascinare per iniziare a disegnare una forma a stella. Fare doppio clic sul livello di forma vettoriale e quindi attivare gli stili di livello Bevel & Emboss, Ictus, Sovrapposizione sfumatura, Bagliore esterno, e Ombra esterna.
Per il gradiente, usa il gradiente d'oro disponibile nel predefinito del gradiente di default.
Attiva il Sposta strumento e poi Alt-trascinamento la forma a stella per duplicarla. Vogliamo avere quattro stelle sul lato destro del display. Queste stelle rappresenteranno la valutazione dell'immagine.
Seleziona tutti i livelli di stelle nel Livelli Pannello. Assicurati che il Sposta strumento è attivo. Fai clic sull'icona di distribuzione nella barra delle opzioni per correggere l'allineamento e la spaziatura delle stelle.
Attiva il livello stella più in alto e poi modifica l'impostazione nel suo Bevel & Emboss Stile di livello a Giù. Cambialo Ombra interiore colore e anche la sua sfumatura in Sovrapposizione sfumatura.
Questa stella dovrebbe essere percepita come una stella non selezionata. In questo caso, abbiamo una valutazione del display 3 stelle su 4.
Il nostro prossimo lavoro è l'aggiunta di un banner 3D fluttuante nell'area di visualizzazione. Inizia disegnando una forma rettangolare arrotondata con raggio d'angolo 6 px. Utilizziamo costantemente un raggio di punta di 6 px per abbinarlo alla forma di base della barra di ricerca.
Estendi l'angolo del banner aggiungendo una forma rettangolare di 6 px × 12 px. Abbiamo bisogno di questa dimensione, 6 px e 12 px, per abbinare il raggio dell'angolo del banner, 6 px. Capirai presto la ragione.
Successivamente, aggiungi un cerchio con raggio di 6 px e impostalo su Sottrarre forme frontali.
Fare doppio clic sulla forma e quindi applicare i seguenti stili di livello.
Il risultato non è ancora perfetto. Dobbiamo aggiungere un'ombra per renderla formosa.
Crea un nuovo livello sopra il banner e convertilo in una maschera di ritaglio (Control-Alt-G). Dipingi un po 'di ombra manualmente sul lato sinistro del banner.
Per il lato posteriore del banner, disegna un rettangolo arrotondato con un colore più scuro. Come nella parte anteriore, usa un raggio d'angolo di 6 px. Aggiungi lo stesso stile di livello del lato anteriore.
Insieme, il risultato è un banner fluttuante.
Disegna un nuovo livello tra il lato anteriore e posteriore del banner. Dipingi l'ombra manualmente usando il Pennello.
Continuate ad aggiungere ombra dietro il banner come mostrato nella figura seguente. Disegna l'ombra banner sulla tela e la sua ombra sul display dell'immagine.
Aggiungi testo sul banner. Fare doppio clic sul livello e quindi attivare gli stili di livello Ombra esterna e Sovrapposizione sfumatura.
Ecco il risultato finale della nostra barra di ricerca e dell'interfaccia di visualizzazione delle immagini. In questo tutorial, hai imparato come aggiungere un effetto tridimensionale a una forma vettoriale piatta, disegnare icone semplici con strumenti vettoriali e stili livelli e creare manualmente il rettangolo arrotondato perfetto. Spero ti sia piaciuto il tutorial e imparato alcune nuove tecniche da esso.
Accentsconagua