Creare un'icona di scudo in Photoshop

In questo tutorial, utilizzeremo gli strumenti Path in Photoshop per disegnare una forma simile a uno scudo. Quindi usando alcuni gradienti, gli daremo un bordo metallico e un centro lucido. In realtà ho fatto questo tutorial quando creo le icone predefinite per alcuni post qui su PSDtuts, quindi se vai alla lista principale del sito li vedrai in azione.


Passo 1:

Iniziamo con una sfumatura da grigio scuro a nero. L'ho disegnato con Radial Gradient, che i lettori PSDtuts di vecchia data sapranno essere il mio strumento gradiente preferito. Comunque non preoccuparti troppo di questi colori, perché a metà del tutorial ho deciso che erano troppo scuri e li ho cambiati!


Passo 2:

Ora premi Ctrl-R per accendere i tuoi righelli e trascinare alcune guide. Fai questo cliccando sul righello e poi tenendo il mouse verso il basso e trascinandoti dove vuoi che siano. Ho impostato le mie guide come mostrato di seguito. Perché sto disegnando un triangolo, voglio assicurarmi che sia simmetrico e non traballante - da qui le guide.

Tieni presente che in qualsiasi momento puoi premere Ctrl + 'e le guide si accenderanno e si spegneranno. Questo è utile perché altrimenti interferiscono con ciò che stai cercando di fare a volte.

Inoltre con i righelli puoi fare clic con il pulsante destro del mouse sui righelli e vedrai le diverse misure su cui lavorano. Per la grafica Web è probabilmente più facile lavorare in pixel (anche se per la stampa vorresti probabilmente qualcosa di più grande). Comunque, dato che la mia tela è 500x500, ho messo le guide a 100px, 250px e 400px e poi a 100px e 250px verso il basso.


Passaggio 3:

Quindi prendi lo strumento Penna (P) e disegna un triangolo come mostrato. Puoi farlo con tre punti (sì, tutta la matematica delle scuole superiori è utile dopo tutto!). Si noti che se si tiene premuto il mouse quando si posizionano i punti, si entra nella penna curva (il nome tecnico è curve di Bézier) e non ci interessa oggi, quindi basta fare clic una volta per ottenere punti angolati.

Inoltre, se tieni premuto Maiusc, troverai lo strumento Penna che si aggancia alle linee che sono in multipli di 45 gradi. Ciò può essere particolarmente utile se si desidera tracciare la linea retta morta in alto (e non posizionare accidentalmente un segno con qualche pixel spento). In alternativa suppongo che tu possa essere sicuro di avere lo snap su quale è in Visualizza> Aggancia a> Guide. In entrambi i casi dovrebbe ottenere il risultato giusto. Come sempre Photoshop ti offre una miriade di modi per fare tutto.


Passaggio 4:

Ora vogliamo una variante dello strumento Penna chiamata strumento Aggiungi punto di ancoraggio. Puoi vederlo nella foto qui sotto.


Passaggio 5:

Con lo strumento Aggiungi ancoraggio selezionato e le tue guide ancora in su, passa e aggiungi punti extra nelle posizioni mostrate di seguito (nota che ho disattivato le guide con CTRL + 'in modo da poter effettuare uno screenshot corretto).

Ci si potrebbe chiedere perché non abbiamo aggiunto tutti questi punti all'inizio piuttosto che dopo aver disegnato il triangolo. La risposta è semplicemente che è difficile ottenere un aspetto gradevole e simmetrico. Questo è solo un modo più semplice.


Passaggio 6:

Ora passeremo allo Strumento selezione diretta (A), che è la freccia mostrata. Ci sono in realtà tre strumenti freccia in Photoshop, questo, è alternativo che è chiamato lo strumento di selezione del percorso e la nostra normale freccia è anche chiamata strumento di spostamento. Qual è la differenza?

Beh, in pratica lo strumento Sposta (quello normale) serve per spostare gli oggetti come fai normalmente. Questi altri due sono per i percorsi. Lo strumento Selezione diretta serve per selezionare punti o bordi (le linee tra i punti). Mentre lo strumento Selezione traccia è per spostare l'intero percorso attorno a tutti insieme (senza perdere forma).

Il modo migliore per capirli, ovviamente, è cliccare su ognuno a turno e vedere cosa fa! Ma per ora vogliamo solo lo strumento di selezione diretta.


Step 7:

Quindi, usando lo strumento selezione diretta, prima fai clic sul punto medio in alto per selezionarlo. Ora tieni premuto Maiusc e premi la freccia Su un paio di volte e vedrai il punto spostarsi verso l'alto. Quindi fai lo stesso con i punti medi sinistro e destro per farli muovere.

Teniamo premuto Shift perché rende il movimento più veloce (penso che SHIFT + Arrow sia lo stesso di 10xArrow senza Shift).

In ogni caso, sposta i punti finché non hai qualcosa come mostrato ...


Passaggio 8:

Dipende da te come si realizza il tuo ultimo percorso, ho reso il mio un po 'bizzarro semplicemente spostando i punti finché non sembravano uno scudo. Ho salvato il percorso nel file PSD per il download nel caso in cui desideri il percorso esatto. Puoi trovarlo facendo clic sulla scheda Percorsi e quindi vedrai un percorso segnato Percorso scudo.

Ogni volta che si ha un percorso che si ritiene necessario in seguito, fare clic sulla scheda Percorsi e quindi fare clic sulla piccola freccia rivolta a destra e selezionare Salva percorso. Ciò è particolarmente utile se hai passato molto tempo a incidere profondamente una persona da una fotografia e vuoi essere certo di non perdere il lavoro sul percorso.


Passaggio 9:

Quindi crea un nuovo livello. Fare clic sullo strumento Penna e quindi fare clic con il tasto destro in qualsiasi punto dell'area di disegno e selezionare Crea selezione. Avrai una piccola finestra di dialogo che ti chiederà se vuoi sfumare la selezione, assicurati che sia impostata su 0 (impostazione predefinita) e premi OK.

Successivamente, passa da grigio chiaro a grigio scuro e traccia una sfumatura nel nuovo livello come mostrato.


Passaggio 10:

Ora con quel livello ancora selezionato, crea un nuovo livello e vai a Seleziona> Modifica> Contratto e inserisci 10 pixel.

Quindi disegna una sfumatura andando alla direzione opposta con gli stessi due colori grigio chiaro e grigio scuro. Quindi il primo dovrebbe essere da in alto a sinistra a in basso a destra. Questo nuovo livello dovrebbe essere in basso a destra in alto a sinistra. Puoi vedere l'effetto dei due gradienti nell'immagine per il prossimo passo.


Passaggio 11:

Successivamente mentre il secondo livello è ancora selezionato, vai di nuovo su Seleziona> Modifica> Contratto e usa nuovamente 10 pixel. Quindi crea un nuovo livello e questa volta con un gradiente radiale, disegna in un gradiente arancione con la parte più chiara in alto a sinistra come mostrato.


Passaggio 12:

Ora torna al livello intermedio e premi Ctrl e fai clic sul livello per selezionare i suoi pixel come mostrato. Crea un nuovo livello sopra quello e riempilo di bianco.

Quindi seleziona Seleziona> Modifica> Contratto e utilizza un valore di 1 pixel, quindi seleziona Elimina. Questo lascerà una linea bianca sottile di un pixel tra i due gradienti metallici. Sembrerà la cima di una cresta di metallo (una specie di ...)


Step 13:

Ok, ecco cosa abbiamo finora. Puoi vedere che usando i due gradienti che vanno in direzioni opposte, abbiamo creato una sorta di effetto 3D che sembra che la luce provenga dall'angolo in alto a sinistra e crei un'evidenziazione e un'ombra sul "metallo".


Step 14:

Ora aggiungiamo una semplice Ombra esterna e Ombra interna al livello arancione. È possibile vederle nel file PSD di esempio per il download, ma in pratica si tratta solo di un'ombra interna con distanza pari a 0 in modo che l'ombra si trovi anche attorno ai bordi e, analogamente, con un'ombra esterna. Vogliamo l'ombra interiore che rende l'aspetto un po 'più tridimensionale perché i bordi si piegano lontano dalla prospettiva dell'osservatore. L'ombra esterna serve solo a far reagire lo strato arancione con il telaio metallico.


Step 15:

Ecco cosa abbiamo adesso ... Sta iniziando a sembrare piuttosto interessante. A questo punto ho anche alleggerito lo sfondo (anche se è difficile dire ora che lo guardo). Quindi qui è un grigio molto scuro, al contrario del nero. Inoltre ho aggiunto un'ombra esterna al primo strato di metallo grigio, anche se è piuttosto debole.


Step 16:

Ora in un nuovo livello in alto, disegna un'ellisse con lo strumento Selezione ellittica (M) e riempila con il bianco come mostrato.


Step 17:

Ora l'unica ragione per cui abbiamo riempito di bianco questo è che ora possiamo premere Ctrl-T e ruotare l'ellisse come mostrato.


Step 18:

Una volta ruotata l'ellisse, tieni premuto Ctrl e fai clic su quel livello per selezionare l'ellisse e quindi elimina il livello stesso in modo da lasciare solo una selezione a forma di un'ellisse su un angolo.

Quindi crea un nuovo livello e disegna un gradiente radiale passando dal bianco al trasparente come mostrato.


Step 19:

Ora tieni premuto Ctrl e fai clic sul livello arancione per selezionarne i pixel, quindi premi Ctrl + Maiusc + I per invertire la selezione (ad esempio, dovrai selezionare tutto tranne i pixel del livello arancione) e quindi fare clic sul livello superiore, che ha quel gradiente radiale bianco-trasparente dall'ultimo passaggio e premere Elimina. Ora dovresti avere un momento saliente come mostrato.


Step 20:

Ora imposta il livello di evidenziazione su una modalità di fusione di Sovrapposizione e un'opacità del 60%. Dovrebbe dare un bel giallo dorato come mostrato.


Step 21:

Ora crea un nuovo livello e poi tieni premuto Ctrl e fai clic sul livello arancione per selezionarne i pixel. Quindi, nel nuovo livello, traccia un gradiente lineare verso il basso da nero a trasparente come mostrato.


Step 22:

Imposta questo nuovo livello nero su un metodo di fusione di Luce soffusa, quindi tieni premuto Ctrl e fai nuovamente clic sullo strato arancione, quindi tieni premuto Maiusc e premi la freccia giù alcune volte per spostare la selezione verso il basso. Quindi torna a quel livello nero e premi Elimina per lasciare solo una barra che corre lungo la parte superiore, come mostrato.


Step 23:

A questo punto, ho deciso di spazzolare un po 'il metallo. Per fare ciò, fare clic su uno dei due livelli grigi e con lo strumento Brucia (O) selezionato e un pennello morbido, basta scurire le parti più scure e alleggerire le parti più chiare come meglio credi. L'ho fatto solo per ottenere un po 'più di contrasto, come mostrato. Non dimenticare di tenere premuto Alt mentre usi lo strumento Brucia per passare allo Strumento scherma (che si schiarisce invece di scurire) in modo da non dover continuare a spostarsi tra di loro.


Passo 24:

OK ora per lo scoppio radiale in background. Scegli lo Strumento forma personalizzata (U) e seleziona la forma mostrata sotto.


Passaggio 25:

Crea un nuovo livello appena sopra lo sfondo grigio scuro e, usando il bianco come colore di primo piano, disegna una versione molto grande di quella forma come mostrato. Questo rende una specie di effetto starburst vettoriale.


Passaggio 26:

Ora imposta il livello su Sovrapponi e il 30% di opacità, quindi è molto più debole. Finalmente in uno strato in cima, ho aggiunto un gigante S in un colore rosso scuro e impostarlo su Moltiplicare al 20%. Poi ho scritto una parola sopra le righe e abbiamo finito! Un po 'strano, ma comunque divertente!