Share
In questo tutorial creerai un'icona semi-realistica, fantascientifica che potrebbe essere utilizzata come icona di batteria o dock. Iniziamo!
Creare un documento 256 x 256 a 72 DPI. Questa è una dimensione di immagine molto comune per un'icona di dock. Il colore di sfondo può essere impostato su bianco o trasparente.
Impostiamo la tela creando un livello di sfondo bianco se non lo hai già fatto. Lo troverai utile più tardi quando devi vedere il contrasto di sfondo invertendo il livello di sfondo Cmd / Ctrl + I. Visualizza i tuoi righelli e trascina una nuova guida al centro.
Usando lo strumento Ellipse (U), disegna un ovale nella parte superiore centrale della tela con questo colore # e1e1e1. Puoi centrarlo selezionando l'intero documento Cmd / Ctrl + A e usa lo strumento Sposta (V) e fai clic sull'icona nella barra in alto come mostrato nel diagramma. Chiama questo "Cerchio in alto". Duplica questo livello quattordici volte tenendo premuto Alt + Giù con lo strumento Sposta (V). Unire i quattordici livelli duplicati può chiamarlo "Cerchio corpo". Posiziona questo livello sotto "Cerchio in alto".
Applica il seguente stile a "Circle Top" per conferirgli un aspetto metallico. Inner Glow tende a dargli l'effetto di frensel mentre Gradient Overlay dà dimensione.
Applica il seguente stile a "Circle Body".
Dovresti avere qualcosa che assomigli a questo.
Crea un nuovo livello sopra "Circle Top" e chiamalo "Edge". Cmd / Ctrl-clic su "Cerchio superiore" miniatura per la sua selezione. Riempi il bianco con lo strumento Secchiello (G). Sposta la selezione di 1 pixel e premi Elimina. Usando il pedometro della gomma (E) di circa 60 px di diametro e 0% di durezza, fare clic una volta sul lato sinistro e destro del cerchio. Crea un nuovo livello sopra e usa lo stesso metodo per ottenere la selezione di "Cerchio in alto". Chiama questo livello "Shine". Utilizzando un pennello morbido bianco a 60px di diametro, fare clic una volta sul centro inferiore del cerchio. Riduci l'opacità all'80%. Questo darà un aspetto croccante e lucido.
Crea un altro livello e chiamalo "Riflessione". Utilizzare lo strumento Selezione rettangolare (M) e disegnare un rettangolo sul lato del "Corpo cerchio" e riempirlo (G) con il bianco. Ho invertito il colore di sfondo in modo da poterlo vedere più chiaramente. Ottieni la selezione di "Circle Body" e Inverti Cmd / Ctrl + Shift + I. Ora premi delete e imposta Opacity al 10%. Questo potrebbe difficilmente apparire come una differenza, ma questo intero passo ha un impatto molto grande sul design.
Crea un nuovo livello e chiamalo "Bulb". Ottieni la selezione di "Circle Top" e Fill (G) con # 80fa96. Puoi usare qualsiasi colore che desideri, ma per questo tutorial, avremo un green leggermente giallastro. Inserisci Trasformazione libera Cmd / Ctrl + T e mentre tieni premuto Maiusc + Alt, trascina uno degli angoli verso l'interno finché non trovi che è la dimensione della lampadina che desideri.
Ora applica il seguente stile per un effetto bagliore.
Puoi raggruppare tutti i livelli su cui stavamo lavorando solo ora, ad eccezione dello sfondo, e dargli un nome. Ho chiamato il mio "Capo". Crea una nuova chiamata di gruppo "Top Body". Crea un nuovo livello all'interno di questo gruppo e chiamalo "Top". Usa lo strumento Penna (P) e disegna quello che vedi sul diagramma. Ricorda di tenere a mente la prospettiva quando disegni icone 3D. Ora riempire (G) la forma con # d7d7d7 facendo clic con il tasto destro> Percorso di riempimento.
Una volta che hai finito, applica il seguente stile.
È tempo che aggiunga lucentezza e riflesso. Ora è un buon momento per fare uso di uno sfondo nero. Seleziona il livello di sfondo e Inverti Cmd / Ctrl + I. Inizieremo con i bordi. Crea un nuovo livello e chiamalo "Left Edge". Ottieni la selezione del livello "Superiore" e Riempi (G) con il bianco. Sposta la selezione verso l'alto e destra di 1 pixel e premi Elimina. Prendi lo strumento gomma (E) di 70px di diametro, 0% di durezza e fai clic una volta leggermente lontano dall'angolo sinistro. Controlla lo schema per vedere cosa intendo.
Usando la stessa tecnica, disegna un bordo 1px in basso a destra su un nuovo livello chiamato "Right Edge". Cancellare entrambe le estremità della linea con lo strumento Gomma (E).
Useremo lo strumento Penna (P) per disegnare il riflesso. Seguire lo schema quindi riempire (G) con bianco e impostare Opacità al 20%.
Tenendo presente il realismo, aggiungeremo un riflesso di se stesso. Ottieni la selezione di "Circle Body" e Fill (G) it con il nero. Spingilo verso il basso appena sotto il corpo. Imposta la sua opacità al 20%. So che di diritto dovremmo prendere l'immagine originale invece di usarne una nera. Ma a volte è bene rompere le regole per ottenere quello che vuoi.
Crea un gruppo chiamato "Faccia del corpo" e un nuovo livello all'interno chiamato "Faccia". Usa lo strumento Penna (P) e disegna quanto segue. Ricordarsi di allineare i punti con la piastra metallica superiore e mantenere la curva il più simmetrica possibile. Per disegnare una linea retta, premere Maiusc quando si crea un nuovo punto.
Applica il seguente stile di livello.
È tempo di aggiungere riflessione e splendore a questa area come abbiamo fatto per gli altri. Usando il metodo di selezione che ti ho insegnato in precedenza, crea un bordo bianco 1px a destra di "Faccia". Utilizzare una gomma morbida (E) di circa 100 px e spazzolare le due estremità della linea. Imposta l'opacità al 70%. Crea un nuovo livello e chiama questo "Oscuro". Ottieni la selezione di "Faccia" e usa un Gradiente lineare nero (G) e trascinalo dall'alto verso il basso come mostrato. Quindi Cancella (E) il fondo con 0% di durezza e circa 100 px. Basta aggirare il bordo durante la spazzolatura, mantenendo il bordo lontano dalla selezione in modo che appaia così. Quindi imposta Opacity al 10%.
Crea un nuovo livello chiamato "Brush Shine". Ottieni la selezione di "Faccia" e Pennello (B) in alto e in basso con il bianco in modo che l'area assomigli a qualcosa del genere. Quindi imposta Opacity al 20%.
Successivamente, crea un nuovo livello chiamato "Dark Reflection". Usa lo strumento Penna (P) e disegna la forma mostrata e Riempi (G) con il nero. Elimina l'area al di fuori della selezione di "Faccia" come ti ho spiegato in precedenza. Imposta l'opacità al 4%. Ripetendo il processo, crea un livello di "Riflessione" bianco con una Opacità del 10% in alto. Dovresti avere qualcosa come sotto.
Nella sezione successiva, crea un nuovo gruppo chiamato "Inside", quindi un nuovo livello chiamato "Frame". È possibile utilizzare uno strumento Lazo poligonale (L) o uno strumento penna (P) per disegnare la cornice dell'interno. Usa # 777777 come colore. Cerca di mantenere una larghezza costante per tutto il tempo.
Applica lo stile a questo livello.
Ora crea un nuovo livello chiamato "Bordo scuro" e crea un bordo nero 1px sul lato sinistro di "Cornice". Imposta l'opacità al 20%. Quindi crea un nuovo livello chiamato "Angolo". Daremo a questa icona un aspetto particolare, in modo che non appaia così piatta. Di nuovo, puoi usare lo strumento Lazo poligonale (L) o lo strumento Penna (P) per disegnare questo. Usa # 5c5c5c come colore.
Applica il seguente stile di livello a "Angolo".
Aggiungiamo un'ombra ad esso. Crea un nuovo livello chiamato "Oscurità". Usa uno strumento sfumato lineare nero (G) con trasparenza per dipingere nella selezione di "Angolo". Quindi imposta Opacity al 10%.
Ora crea un nuovo livello chiamato "Corpo interiore". Disegna un'area rettangolare per l'interno con # 161616. Un consiglio rapido è di utilizzare le Guide come punto strategico per disegnare oggetti e utilizzare la selezione di altri livelli per eliminare le aree indesiderate. Ho invertito il colore di sfondo affinché tu possa vedere chiaramente.
Applica questo stile di livello e siamo a metà strada! Dark Inner Shadow e la sfumatura Overlay aiutano a dare una forte profondità.
È ora di preparare qualche cambiamento nell'illuminazione per il lato destro dell'icona senza dover ripetere l'intera parte. Crea un nuovo gruppo chiamato "Per modifiche lato destro". Crea un nuovo livello all'interno e chiamalo come vuoi, l'ho chiamato "Darken For Right Side". Usa i livelli precedenti e Riempi (G) con il nero, quindi imposta Opacità al 20%.
Questi sono quelli per ogni livello insieme all'opacità.
Ecco come dovrebbe apparire dopo aver impostato Opacity.
Abbiamo bisogno di duplicare una copia di questo strato e usarlo per il lato destro. Prima nascondi il livello di sfondo e il gruppo "Testa" facendo clic sull'icona a forma di occhio accanto a loro. Crea un nuovo livello e Unisci Cmd visibile / Ctrl + Maiusc + E. Inserisci Trasformazione libera Cmd / Ctrl + T e capovolgi orizzontalmente a destra Punto di riferimento Posizione facendo clic con il tasto destro> Capovolgi orizzontalmente e trascinando il perno centrale verso destra. Nascondi il gruppo "Per le modifiche sul lato destro" e mostra i gruppi e i livelli precedenti.
Crea un nuovo gruppo chiamato "Destra" e posiziona il livello duplicato al suo interno. Abbiamo un po 'di illuminazione da aggiungere ad esso. Inverti Cmd / Ctrl + I sullo sfondo e crea un nuovo livello chiamato "Ombra del pavimento". Disegna l'ombra in questo modo.
Accedere alla modalità Maschera veloce (Q) e utilizzare lo strumento Sfumatura lineare (G) per inserire qualcosa di simile. Prova ad allineare il gradiente con l'ombra. Quindi esci dalla modalità Maschera veloce (Q) e applica una sfocatura gaussiana 3px sotto Filtro> Sfocatura> Sfocatura gaussiana.
Elimina le aree che stanno toccando l'icona e imposta Opacità al 30%. Aggiungi una maschera vettoriale facendo clic sull'icona nella parte inferiore del pannello del livello. Sembra un rettangolo con un cerchio. Utilizzare da qualche parte attorno a uno strumento di sfumatura lineare (G) di colore grigio medio per riempire l'altro lato dell'ombra in modo che scompaia.
Crea un nuovo livello chiamato "Lato" e disegna un rettangolo nero come mostrato con lo strumento selezione rettangolare (M) o lo strumento rettangolo (U). Applicare un Gaussian Blur 5px, variando se lo si desidera. Imposta Opacità al 30% e elimina le aree che non toccano il lato destro dell'icona.
Crea un nuovo livello chiamato "Edge Stroke". Disegna una linea bianca lungo il bordo interno del metallo ("Angolo") usando lo Strumento Linea 1px (U). Quindi utilizzare una gomma morbida (E) di circa 40px di diametro per cancellare entrambe le estremità della linea. Ora crea un nuovo livello chiamato "Edge Blur". Utilizzando uno strumento di selezione rettangolare (M) o uno strumento di linea (U), tracciare una linea bianca di 1 pixel al centro dello schermo con l'aiuto di una guida, se necessario. Quindi applica Gaussian Blur of 1px e imposta Opacity al 20%.
Crea un nuovo gruppo chiamato "Anelli", un altro gruppo all'interno chiamato "Vetro" e uno strato all'interno chiamato "Vetro". Per prima cosa dobbiamo fare degli sketch per avere un'idea di come sarà il nostro tubo circolare 3D. Qui ti mostrerò come ottengo il contorno della forma usando i cerchi, poi uno strumento Penna (P) per tracciare la metà sinistra del tubo.
Riempi la forma con il bianco, quindi taglia la metà indesiderata della forma. Duplicalo e giralo a destra, quindi uniscilo all'altro lato.
Imposta Riempi al 3% e applica questi stili.
È tempo di aggiungere riflessi e riflessi, e questa è solitamente la parte più difficile, quindi consiglio di guardare in giro per occhiali e tubo e vedere come funzionano la riflessione e l'opacità. Per prima cosa crea un nuovo livello chiamato "Top Half Shine". Ottieni la selezione di "Vetro" e riempilo di bianco. Spingi la selezione verso il basso di circa 10px o a metà del tubo. Aggiungi una maschera vettoriale e spazzola (B) i bordi dello splendore in modo che assomigli a qualcosa del genere. Utilizzare da qualche parte intorno al diametro 25px. Imposta l'opacità al 30%. Suggerimento: l'uso di Vector Mask ti aiuta a sperimentare senza distruggere l'immagine.
Crea un nuovo livello chiamato "Upper Top Shine". Ripeteremo il processo, ma con uno splendore più sottile. Per questo Cancella (E) i bordi in modo che si mescoli bene e imposta Opacità al 30%.
Crea un nuovo livello chiamato "Linea spessa". usa uno strumento penna e disegna una curva breve simile alla curva del tubo. Imposta il pennello su 3px di diametro, 100% di durezza e bianco. Tracciare il percorso usando lo strumento Penna (P) Fare clic con il pulsante destro del mouse> Traccia percorso, selezionare Pennello e selezionare Simula pressione, quindi fare clic su OK. Imposta l'opacità al 30%. Puoi usare lo strumento Sposta (V) per spostare la linea se non l'hai disegnata con precisione in precedenza.
Crea un nuovo livello chiamato "Linea sottile". Ancora una volta usa la stessa tecnica, ma questa volta con un pennello 1px (B) e senza Simula pressione. Quindi Cancella (E) o Maschera le due estremità della linea e imposta Opacità al 90%. Applicare un bagliore esterno bianco da 4px con opacità del 40% per lo stile di livello.
Siamo a metà del riflesso. Crea un nuovo livello chiamato "Side Shine". Usa lo strumento Penna (P) per tracciare una forma curva, seguendo la forma del tubo. Quindi fare clic con il pulsante destro del mouse> Riempi percorso con bianco. Aggiungi la maschera vettoriale e inizia a spazzolare (B) con un pennello morbido attorno ai lati della lucentezza in modo che sfiori in basso e a destra. Imposta l'opacità al 40%. Ottieni la selezione di "Vetro" e Inverti selezione Cmd / Ctrl + Maiusc + I quindi premi Elimina.
Ora creeremo i bordi / bordi del tubo in modo che non appaiano così piatti. Crea un nuovo livello e crea un bordo bianco 2px sul lato sinistro di "Vetro". Quindi fai lo stesso per il lato destro e unisci i due strati insieme. Imposta l'opacità al 40%. Applica smussatura e rilievo di dimensioni 0 px e 100% opacità per evidenziazione e ombreggiatura.
Dobbiamo preparare un altro dettaglio importante al tubo. Crea un nuovo livello chiamato "Green Reflection". Usa la selezione di "Vetro" e Riempi (G) la metà inferiore dell'area con # 3bf75f. Quindi aggiungi Vector Mask e Brush (B) la parte superiore e i lati dell'area in modo che si sfuma leggermente. Imposta la modalità di fusione su Scherma lineare (Aggiungi) e Opacità su 25%. Ciò aggiungerà realsim mentre gli anelli verdi luminosi sotto di esso creeranno un riflesso sull'anello sopra di esso.
Ora è il momento di preparare queste immagini per la duplicazione. Abbiamo bisogno di un vetro con il riflesso verde, quindi crea un nuovo livello in questo gruppo, quindi fai clic tenendo premuto il tasto Alt sull'icona a forma di occhio del gruppo. Unisci Cmd visibile / Ctrl + Maiusc + E. Alt-clic sull'occhio di nuovo e nascondi il riflesso verde, quindi ripeti il processo di duplicazione. Ora fai lo stesso senza il "Vetro". Quindi ora dovresti avere 3 tipi di duplicati, vetro con riflessione verde, vetro senza riflessione verde, solo il riflesso ma non quello verde.
Crea un nuovo livello chiamato "One Ring", ottieni la selezione di "Glass" e Fill (G) it con # 3cf760. Spingilo verso il basso di 80 px con MAIUSC + verso il basso. Puoi metterlo in un nuovo gruppo e chiamarlo come vuoi. Ho chiamato il mio "1" poiché sarà il livello 1. Applicare questi stili per il bagliore e la dimensione.
Ricorda il livello di riflessione che abbiamo creato in precedenza? Duplicalo e posizionalo sopra l'anello verde. Successivamente, duplicare quello con il riflesso verde e posizionarlo al centro. Duplica il vetro bianco e dovresti avere questo.
Fai la stessa cosa per ogni livello, mettendoli in gruppi o unendoli se vuoi.
Crea un nuovo livello chiamato "Ombra" nella parte inferiore del gruppo "Anelli". Usa la selezione di "Vetro" per riempire (G) con il nero. Spingi (V) verso il basso di circa 15px. Seleziona una metà dell'ombra e inclinala in modo che tocchi il lato del tubo. In modalità Trasformazione libera Cmd / Ctrl + T, fai clic con il pulsante destro del mouse su> Inclina. È possibile isolare meglio la selezione spostandola fuori luogo e quindi indietro, dopo averla selezionata con lo strumento Selezione rettangolare (M). Fai lo stesso per l'altra metà. Duplicalo per tre tubi, quindi imposta Opacità al 20%. Utilizzare lo strumento Lazo poligonale (L) per eliminare le aree che non toccano l'icona.
Abbiamo quasi finito. Aggiungeremo alcuni dettagli definitivi. Innanzitutto, visualizza il livello di sfondo e il livello "Ombra del pavimento" nel gruppo "Destra". Quindi crea un nuovo livello e Unisci Cmd visibile / Ctrl + Maiusc + E. Scopri i livelli che hai appena nascosto. Crea un nuovo livello in alto e chiamalo "Rumore", ottieni la selezione del livello unito e Riempi (G) con il 50% di grigio. Applicare il 10% di rumore gaussiano e monocromatico in Filtro> Disturbo> Aggiungi disturbo. Imposta la modalità di fusione su Sovrapposizione e Opacità su 10%. Ora puoi eliminare il livello unito. Non noteresti molta differenza, ma aiuta a creare quell'aspetto imperfetto.
Crea un nuovo livello appena sopra il livello di sfondo e chiamalo "Ombra". Usa lo strumento Lazo poligonale (L) per disegnare qualcosa di simile, evidenziando approssimativamente la base dell'icona. Applicare un Gaussian Blur 6px e impostare Opacity al 60%. Finalmente, hai finito!
Ora che hai finito la tua icona, esporta semplicemente le icone ognuna con un livello diverso nascondendo e scoprendo gli anelli necessari.
Accentsconagua