Share
Imparare a progettare interfacce può essere un viaggio duraturo se devi farlo da solo. Mi chiamo Tim Silva e sono stato il tentativo progettare questi tipi di interfacce da oltre 5 anni e ho molte informazioni preziose da condividere con voi per accelerare e facilitare il processo di apprendimento. Ecco cosa ho imparato a capire sulla progettazione di interfacce dettagliate, realistiche e dall'aspetto fresco: devi essere grande in molte aree di Photoshop bene al design dell'interfaccia. Quindi, insieme ai passaggi effettivi necessari per creare questa particolare interfaccia, in questa serie fornirò anche il maggior numero di riferimenti ad altri tutorial, risorse e concetti possibili. In questo modo, puoi avere accesso ad alcuni degli strumenti che ti permetteranno di creare interfacce completamente originali utilizzando gli stessi metodi che insegno in collaborazione con la tua creatività. Andiamo avanti con la parte 2 di questa serie in due parti.
Questo post è il 6 ° giorno della nostra sessione di progettazione dell'interfaccia. Sessioni creative "Session Day 5Session Day 7"Rivediamo e pianifichiamo. Siamo arrivati fin qui. Successivamente, inizieremo a compilare l'area dello schermo. Il blu è il più sicuro freddo colore da usare. Come un designer di interfacce con esperienza, sono ancora completamente innamorato di esso.
Nasconde le due aree dello schermo interno. Nella parte 1, li ho etichettati "Inner" e "Inner_Screen".
Ripetendo il metodo insegnato nel Passo 37 di Parte 1, crea un riflesso bianco di 2-3 pixel nella parte inferiore del livello di base. Ho usato più strati per finire con un risultato di cui ero felice. Usa lo Strumento Gomma (E) con una Dimensione pennello di 75 px e una Durezza dello 0% per ripulire qualsiasi pixel che potresti incontrare.
Da qui, continua avanti per creare da 1 a 3 pixel le rientranze nere sulle parti superiori e sui lati della forma. Il lato sinistro dovrebbe essere più spesso e più complesso mentre il lato destro sarà più sottile e più semplice a causa della fonte di luce. Nessuno degli effetti seguenti è stato creato utilizzando gli stili di livello. Tutto è da 1-3 pixel di pixel che ho spostato, regolato e ripulito manualmente. Ho usato circa 20 livelli di dettagli minuscoli qui. Come ho spiegato al punto 49 della Parte 1, questi tipi di dettagli "non sono difficili da [creare], richiedono solo tempo". Prenditi il tuo tempo con i dettagli e abbina questi risultati il più vicino possibile.
Successivamente aggiungeremo ombre e sfumature scure. Aggiungi un'ombra esterna all'esterno e a sinistra della base della forma. Inoltre, metti dei gradienti scuri sul fondo che arrivano verso l'alto.
Come sempre, gli effetti più brillanti vengono dopo gli effetti più scuri. Utilizzando gli stessi metodi del passaggio 3 (da Parte 2), aggiungi alcune sfumature bianche al design. Ripeti la 2a, 3a e 4a frase del punto 46 della Parte 1 per creare luci sul lato sinistro e la parte superiore della forma.
Ora possiamo passare allo schermo interno più esterno. Scopri tutti e due i livelli di base interni e riempi il più interno con un colore blu temporaneamente piatto di # 38a6de.
Ripeti i passaggi da 2 a 4 per creare effetti simili sul livello base interno più esterno. Notare il gradiente bianco nella parte inferiore (fuori dalla forma), i gradienti scuri nella parte superiore e inferiore della base e la spazzolatura negli angoli. Gli effetti su questa forma di base impiegheranno più tempo. Ho usato quasi 25 strati per creare i dettagli qui. Richiede molte prove ed errori per rendere gli angoli più agevoli.
Mentre lo stesso effetto può essere ottenuto con le sole opzioni di fusione, preferisco non usare affatto stili in modo da avere il controllo completo sui pixel. Non c'è mai alcun processo passo passo che seguo per questi tipi di dettagli. Continuo ad aggiungere fino a quando non sono soddisfatto di quello che vedo. Entra nella modalità pixel-pusher!
Quindi aggiungi uno stile di bagliore interno alla base blu. Crea un duplicato del livello dello schermo blu. Fai clic con il pulsante destro del mouse sul livello duplicato e scegli Cancella stile livello per eliminare l'opzione di fusione bagliore interno. Vai a Filtro> Sfocatura> Sfocatura gaussiana. Digitare 10 e premere OK. Questo creerà un effetto bagliore blu al di fuori dello schermo. Assicurati di spostare questo livello sfocato sotto l'originale, solo per mantenere tutto pulito più tardi. Ripetere questo passaggio più volte con diverse dimensioni di sfocatura e metodi di fusione. Mirare a un bagliore piacevole, forte e ambientale.
Utilizzare lo strumento Gomma (E) per tornare indietro e rimuovere le parti troppo forti. Assicurati di rimuovere la maggior parte del bagliore blu dal destra lato, poiché lo splendore della sorgente luminosa indebolirebbe l'effetto luminoso blu in quell'area.
Successivamente aggiungeremo uno stile di bagliore interno alla base blu. Crea un duplicato del livello dello schermo blu. Fai clic con il pulsante destro del mouse sul livello duplicato e scegli "Cancella stile livello" per eliminare l'opzione di fusione bagliore interno. Vai a Filtro> Sfocatura> Sfocatura gaussiana. Digitare 10 e premere OK. Questo creerà un effetto bagliore blu al di fuori dello schermo. Assicurati di spostare questo livello sfocato sotto l'originale, solo per mantenere tutto pulito più tardi.
Il modo più sicuro per aggiungere profondità in uno schermo è aggiungere un gradiente scuro sottile dal basso verso l'alto. Usando lo strumento Gradiente (G), abbina il mio risultato il più vicino possibile. Nota che ho usato un gradiente lineare perfettamente verticale (perché ho tenuto premuto il tasto Maiusc), non un gradiente radiale come prima. Sperimenta con il Luce soffusa e copertura Modalità di fusione. Sono anche tornato e ho reso l'Inner Glow per il principale strato blu 200x più forte. Spesso torno indietro e aggiusto le impostazioni dello stile dei livelli. In effetti, la maggior parte del processo di pulizia / revisione è costituito da piccole regolazioni delle impostazioni.
Lo schermo dovrebbe apparire ancora piatto. In passato, l'avrei lasciato qui e ho cercato di rimediare con altri dettagli. Fortunatamente, la community dell'interfaccia ha abbastanza membri a cui interessa. Mi sono imbattuto in un nuovo approccio che si è dimostrato efficace e fruttuoso. Lance Thackeray, che ho menzionato nella prima parte, ha creato diverse sfere e schermi con questo look di base. Innanzitutto, riempire un cerchio su un nuovo livello al centro dello schermo di queste dimensioni. Puoi riempirlo con qualsiasi colore, perché in ogni caso imposterai il riempimento del livello su 0%.
Imposta il riempimento del livello su 0%. Apri gli stili di livello e aggiungi un bagliore interno con le seguenti impostazioni.
Duplica il livello e trasforma il livello orizzontalmente (Comando + T) a circa l'85% della larghezza originale. Quindi, apri le opzioni Bagliore interno e inserisci i seguenti dati.
Quindi dobbiamo creare un anello interno. Questo aggiunge all'illusione di profondità perché aggiunge un profondo fine dello schermo che è leggermente più scuro. Per prima cosa, dobbiamo creare un anello forte ed esagerato. Puoi utilizzare lo strumento pennello o lo strumento selezione ellittica per questo. Innanzitutto, crea una forma di base, quindi usa di nuovo il filtro Sfocatura per sfocare i bordi. Quando hai un anello che corrisponde al mio, abbassa l'opacità a circa il 10%. Lo vuoi a malapena essere lì. Questo è quando è più efficace. Ho anche reso lo schermo un po 'più scuro per far risaltare la ricchezza dei colori e dei gradienti.
Ora arriva una delle mie parti preferite: i punti salienti. Usando il metodo che ho insegnato per i punti salienti laterali del punto 46, crea un punto forte nella parte superiore della schermata blu. Inoltre, aggiungi un riflesso di 3-4 pixel in alto ripetendo il famigerato passaggio 37 di nuovo. Rendi il bordo più alto ancora più forte. Piccole sfumature all'interno di questi 4 pixel verticali possono essere molto efficaci. Ho usato 8 strati per ottenere i miei risultati.
Mi piace aggiungere alcuni pennelli di teck alle mie interfacce. Porta davvero il look aggiornato. Zane Bien, alias z-design, ha compilato una vasta collezione di pennelli tecnologici avanzati. Set di pennelli tecnologici Z-Design: 1 | 2 | 3 | 4. Dai uno sguardo a quelli e scegli qualcosa che ti piace. Ne ho scelto uno dal secondo set e ho inserito il mio logo personale all'interno dell'area vuota al centro per un risultato sorprendente.
Sarebbe giusto fermarsi qui poiché è essenzialmente completato. Ora, vorrei fare questo extra e migliorare l'interfaccia principale che abbiamo creato fino ad ora. Tutto ciò su cui hai lavorato dovrebbe essere ben organizzato all'interno di una cartella chiamata "Interfaccia". Voglio duplicare questa cartella e appiattire (comando + E) il duplicato.
NOTA: non si dovrebbe mai, in nessuna circostanza, mai eliminare o appiattire la cartella originale.
Fino ad oggi, vedo persone che fanno reclami come "Oops, ho perso quella parte del design" o "Quella parte è stata appiattita, vorrei poter tornare indietro e cambiarla". Salva te stesso da questo incubo e salva la cartella originale. Vai oltre e crea un file sorgente duplicato prima di passare alla parte successiva. Duplica i miei file di origine ogni 2 ore circa di lavoro. Aggiungo "_01", "_02", ecc. Ai miei nomi di file in modo da ridurre le possibilità di perdere gli aggiornamenti più recenti. Ho perso importanti file sorgente su due dei miei più grandi progetti di sempre. Uno a causa di un black out che ha danneggiato i miei file open source e un altro da un completo guasto del disco rigido. Non rischiare. Torna i tuoi file adesso. Voglio dire che.
Rinominare il livello appena duplicato e appiattito su "piatto". Inseriscilo in una nuova cartella denominata "Interfaccia_80%". Premi Comando + T per trasformarlo all'80% sia in verticale che in orizzontale. Premi Invio quando hai finito.
Duplica questo livello ridotto e vai su Filtro> Precisione> Precisione. Ciò renderà l'interfaccia molto più nitida.
Afferra lo strumento Gomma (E) e ripulisci tutte le parti dell'interfaccia pure nitido e che appare anche pixelato. Usa le impostazioni personalizzate della gomma per pulire le parti che vuoi pulire. Prenditi il tuo tempo in questo passaggio, potrebbe facilmente richiedere fino a 15 minuti di ingrandimento e cancellazione in una vista ravvicinata.
Appiattisci i tuoi strati affilati e non affilati in uno solo. Aggiungi un'ombra esterna e una luce interna con le seguenti impostazioni.
Usa gli strumenti Scherma e brucia (O) per aggiungere luminosità e oscurità a parti dell'interfaccia che ritieni debbano essere ritoccate. Ancora una volta, come con il passaggio 18 [Parte 2], prenditi il tuo tempo su questo. Ho impiegato circa 15 minuti per lavorare su questo.
Ora diamo allo schermo un po 'più di attenzione. Carica la base dello schermo interno e nel menu, seleziona Seleziona> Trasforma selezione. Digita l'80% sia per l'altezza che per la larghezza e salva questa nuova selezione come "Inner_Screen_base_80%" in modo da poterla riprendere più tardi se necessario. Crea un nuovo livello e riempi la selezione "Inner_Screen_base_80%" con il nero. Imposta il riempimento del livello su 0% e aggiungi un bagliore interno nero da 15 pixel. Duplica questo livello e cambia il bagliore interno del nuovo livello in Sovrapponi. Sperimenta con impostazioni diverse per ottenere un risultato pulito. Ricrea l'evidenziazione se necessario caricando la selezione e creandola manualmente. Gli angoli di questo highlight devono rimanere nitidi e visibili.
Usando queste linee che ho fornito per il tuo, compila una griglia sullo schermo che ti fa apparire più tecnico e computerizzato. Questo è visto su calcolatrici e altri dispositivi portatili, quindi ho pensato che sarebbe stato un bel tocco. Ho usato lo strumento Gomma (E) per pulire il centro della griglia in cui si trovava il logo e ho anche ridotto l'opacità del livello a circa il 10%. Utilizzare più livelli con più modalità di fusione, se necessario.
La nostra interfaccia sta iniziando a sviluppare carattere. Abbiamo bisogno di maggiori dettagli. Aggiungi alcuni micro bulloni e dadi ai vari gusci di superficie. Qui puoi scaricare un bullone di base trasparente. Apri il file in Photoshop, copia il suo contenuto e incollalo nell'altro documento. Imposta i livelli dei bulloni su copertura e / o Luce soffusa e altera le opacità del livello a seconda del tipo di sfondo su cui sono seduti. Iniziare con appena il lato sinistro, duplica e posiziona i bulloni su tutta l'interfaccia. Una volta che sei soddisfatto del lato sinistro, duplica e capovolgile tutti per il lato destro. Inoltre, inserisci un bel titolo o nome con un font appropriato.
Appiattisci tutto fino a questo punto in una cartella duplicata. Nascondi la cartella originale e continua a lavorare con questa nuova. Comando-clic sull'icona del livello appiattito per mostrare la sua selezione. Nella parte inferiore del pannello dei livelli troverai un pulsante con l'etichetta "Crea nuovo livello di riempimento o regolazione". Fare clic e tenere premuto fino a quando non viene visualizzato un nuovo elenco di opzioni. Muovi il mouse su "Vividezza" e rilascia il tuo clic. Apparirà una nuova finestra di dialogo. Imposta Vividezza su circa 15 e Saturazione su 10 prima di chiudere la scatola. Il tuo blu dovrebbe apparire ancora più ricco ora.
Ancora una volta, passa attraverso l'interfaccia con Dodge and Burn Tools (O) su impostazioni personalizzate fino a quando non sei soddisfatto del contrasto del tuo design dell'interfaccia finale.
Spero che tu abbia trovato utile questo tutorial. Non era un insieme facile di concetti da insegnare, e spero che ti dia abbastanza per essere ispirato a saperne di più sull'interfaccia high-tech e realistica. Non ci sono davvero molti di noi là fuori, anche se il nostro genere si sta decisamente espandendo esponenzialmente.
Inoltre, vorrei chiarire la mia opinione sulla differenza tra arte e design. L'arte è comunicazione in qualsiasi forma, ed è senza confini. Il design ha delle restrizioni e riguarda il modo in cui gli utenti interagiscono e sperimentano qualcosa.
Un lettore di interfaccia con pulsanti che funziona come una vera pelle è un design. Tuttavia, se un'interfaccia non ha pulsanti o agenti interattivi, e esiste solo come un'immagine statica senza interattività, è un disegno psuedo. Quando quella linea diventa sfocata, è molto più probabile che sia arte.
Sono felice del termine "fantasy interface design" perché è abbastanza ambiguo da coprire tutto con un solo nome. Ho cercato di capire le differenze tra design e arte per diversi anni e la mia filosofia attuale è molto forte nella mia mente. Se hai pensieri, critiche o opinioni sui miei tutorial, tecniche e idee sentiti libero, condividili con un commento.
Accentsconagua