Crea un design icona lucchetto lucido

Un'icona popolare che puoi trovare su internet è l'icona a forma di lucchetto. È ampiamente utilizzato per identificare pagine Web sicure. Spesso indica i campi password per i file protetti. Ovunque tu voglia posizionare l'icona di un lucchetto, questo tutorial ti mostrerà come creare un modello attraente da usare!

Nota del redattore: questo tutorial è stato originariamente pubblicato in lingua ceca su Grafika Online. Grafika ha gentilmente dato il permesso a Vaclav di ripubblicare qui su Psdtuts + per quelli di noi che non hanno ancora padroneggiato il ceco ...

Anteprima dell'immagine finale

Prima di iniziare, diamo un'occhiata all'immagine che creeremo. Come sempre, il file completo di Photoshop è disponibile tramite il nostro abbonamento Psdtuts + Plus.

Passo 1

Iniziamo con un nuovo documento, riempito con un colore grigio chiaro (# D5D5D5). Scegli lo strumento Rettangolo arrotondato. Quindi disegna la forma base di un lucchetto. Imposta il raggio come ti sembra giusto. Quindi riempilo con un colore grigio chiaro (#DDDDDD).

Passo 2

Aggiungiamo la parte superiore. Usa lo strumento Ellisse per disegnare un cerchio. Sceglilo con lo Strumento selezione percorso, quindi copia, incolla e ridimensionalo usando (Ctrl + T). Quindi sottrai il cerchio più piccolo da quello più grande perforando un buco in esso.

Passaggio 3

Cambia lo strumento con lo strumento Rettangolo e con il tasto Alt premuto (sottrai), disegna un rettangolo come mostrato di seguito. Quindi con lo stesso strumento, ma con il tasto Shift premuto (aggiunta), finisci il lato sinistro e destro.

Rendi arrotondata l'estremità sinistra disegnando un'ellisse con lo strumento Ellisse, sempre con il tasto Maiusc premuto. Se vuoi renderlo preciso al pixel, dovrai attivare la griglia.

Passaggio 4

Iniziamo ad aggiungere alcuni effetti per rendere il blocco realistico. Inizieremo con la parte inferiore e useremo alcuni effetti di livello. Crea un po 'di oscuramento attorno ai bordi con l'effetto Inner Shadow.

Passaggio 5

Alcuni effetti devono essere eseguiti manualmente. Aggiungiamo un'ombra forte copiando il livello (Ctrl + J). Scegli lo strumento Seleziona percorso (A). Quindi selezionare copia (Ctrl + C) e inserire (Ctrl + V). Quindi sposta alcuni pixel verso l'alto e imposta lo stile di sottrazione. Riempi la forma che abbiamo appena creato con un colore grigio scuro (n. 505050). L'ombra (contorno inferiore) è fatta.

Ora ti starai chiedendo perché abbiamo usato questa tecnica e non abbiamo semplicemente applicato un effetto ombra interiore? Beh, questo è perché non vogliamo che l'ombra venga applicata all'intera serratura. Questo è il motivo per cui aggiungiamo la maschera di livello. Raccogli uno strumento pennello (pennello morbido nero) e disegna nel mezzo di una forma. Ciò renderà l'ombra meno visibile e aggiungerà un po 'più di plasticità alla nostra immagine finale. Come puoi vedere nell'ultima immagine qui sotto, l'ombra scompare mentre procediamo verso il centro.

Passaggio 6

Ok, oscuriamo di più la nostra serratura. Sopra il livello forma (di una parte inferiore), crea un nuovo livello (Ctrl + Alt + Maiusc + N). Imposta il livello come maschera di taglio del livello precedente premendo (Ctrl + Alt + G). Prendi lo strumento Pennello (grande nero morbido). Imposta l'opacità per dire il 30%. Quindi disegnare sui lati sinistro e destro. Ciò creerà ombre morbide.

Puoi disegnare parti più chiare proprio come hai disegnato le ombre. Utilizzare un pennello di colore chiaro con una opacità simile. Disegnali in uno nuovo o nello stesso livello. Segui le immagini qui sotto per una guida.

Passaggio 7

Creiamo le riflessioni sul bordo superiore successivo. Seleziona tutto il livello inferiore (Ctrl + clic sul livello). Vai a Seleziona> Modifica> Contratto. Quindi riempi la selezione (in un nuovo livello) con un colore bianco (Alt + backspace). Sposta la selezione di due pixel verso il basso (premi due volte la freccia giù). Quindi premi il tasto Cancella per eliminare questa parte del livello. Non dimenticare di deselezionare con Ctrl + D!

Passaggio 8

Dopo di ciò, inizia a definire la plasticità di una serratura usando riflessi più grandi. Usa lo strumento Selezione rettangolo per creare un rettangolo in un nuovo livello. Disegna un gradiente lineare (strumento Gradiente) da bianco a trasparente.

Passaggio 9

Seleziona una linea da 2 pixel in alto con lo strumento Selezione rettangolo, come mostrato di seguito. Quindi inclinalo, come nella seconda immagine qui sotto. In questo modo la riflessione copia la forma della serratura.

Passaggio 10

Proprio così, crea riflessi dall'altra parte, ma molto più grande.

Passaggio 11

Lo facciamo più grande, quindi non sembra troppo simile. Abbiamo quasi finito con la parte inferiore. Di seguito è riportato come il nostro lucchetto dovrebbe apparire così lontano.

Passaggio 12

Quindi aggiungiamo una striscia! Ancora una volta crea una selezione. Quindi traccia una sfumatura in questa selezione da giallo (# F5E02F) a arancione (# F3BB2A).

Passaggio 13

Quindi seleziona lo strumento Selezione riga singola. Quindi seleziona la prima e l'ultima riga della selezione precedente (seleziona entrambe le linee con Shift premuto).

Usa uno strumento pennello e un colore scuro per soddisfare le tue esigenze. È così che fai la differenza tra lo sfondo e la striscia.

Passaggio 14

Fai una selezione premendo Ctrl-clic su un nuovo livello. Quindi dal menu Livelli aggiungi un nuovo Pattern Fill. Usa questo modello, modifica la scala al 50% per adattarla alla dimensione dell'icona. Quindi imposta lo stile del livello su Moltiplicare. Quindi saranno visibili solo le strisce nere.

Passaggio 15

Per rendere il disegno più piccolo vicino ai bordi, ingrandisci la maschera a destra e a sinistra. Quindi rasterizza il livello (Livello> Rasterizza> Riempi il contenuto).

Passaggio 16

Quindi, restringere i lati sinistro e destro. Ritaglia le porzioni e ridimensiona se necessario. Questo renderà i lati sembrano rastremati e tagliati ad angolo. Questo può essere fatto alcune volte per massimizzare l'effetto.

Passaggio 17

Aggiungi un altro livello. Disegna un po 'per scurire i lati della striscia. Ancora una volta, usa lo strumento Pennello con un colore nero, opacità morbida e abbassata.

Passaggio 18

La parte inferiore del lucchetto è fatta, bene! Lavoriamo sulla parte superiore. Inizia con un nuovo strato superiore e inizia a colorare e definire i bordi. Utilizzare un colore grigio (# D5D5D5). Quindi dargli un effetto Bagliore interno con dimensioni 1 px, colore grigio # 848484. Questo dovrebbe farlo bene. Impostare la modalità di miscelatura su Moltiplica.

Passaggio 19

Come abbiamo imparato prima, una parte importante di una superficie metallica è il riflesso. Quindi creiamo un riflesso che verrà applicato solo a metà della parte superiore. Un'altra forma potrebbe aiutarci. Copia quello che abbiamo premendo Ctrl + J e coloralo in nero, così vediamo esattamente dove si trovano i bordi. Quindi prendi lo Strumento selezione traccia e usalo per selezionare il cerchio interno. Quindi ingrandisci con Ctrl + T.

Passaggio 20

Sopra il lato sinistro e destro, disegna due rettangoli con il tasto Alt premuto (sottrazione).

Passaggio 21

Abbassa l'opacità di questa forma fino al 30%. Crea un nuovo livello tra questo e la forma originale. Quindi traccia un gradiente lineare da bianco a trasparente. Premi Ctrl + Alt + G (tagliando la maschera del livello precedente) per rendere visibile il riflesso solo sulla nostra icona.

Passaggio 22

Come nella parte inferiore, aggiungeremo due riflessioni più grandi qui. Devono solo essere formati come la forma su cui sono posizionati, quindi non saranno rettangoli, ma ellissi. Disegna un'ellisse usando lo strumento Ellisse, come nell'immagine qui sotto.

Passaggio 23

Ruota con Ctrl + T di circa 45 gradi.

Passaggio 24

Infine, usa lo Strumento selezione diretta (A) per selezionare due punti nel centro dell'ellisse. Quindi spostali finché l'ellisse non emula la curva della parte superiore della serratura.

Passaggio 25

Duplica questo livello (Ctrl + J). Quindi giralo orizzontalmente e spostalo sul lato destro.

Passaggio 26

Il blocco è quasi finito. Vogliamo solo scurire i bordi in alcuni punti, quindi l'icona è completamente separata dallo sfondo.

Per prima cosa, crea una selezione di livelli nella parte inferiore dell'icona di blocco (Ctrl + clic su un livello). Crea un nuovo livello. Quindi disegnare in quel nuovo livello. Usa il nostro familiare pennello morbido e scuro per disegnare i punti in cui vuoi rendere la serratura più scura. Al termine, riduci la selezione di 1 pixel andando in Seleziona> Modifica> Contratto. Quindi premi il tasto Cancella. L'immagine seguente mostra lo stage poco prima dell'eliminazione.

Passo 27

Di seguito è riportata la visualizzazione al 100% dopo l'eliminazione. Abbiamo quasi finito.

Passaggio 28

Esattamente la stessa tecnica può essere utilizzata per ottenere un alto livello di dettaglio nella parte superiore di un lucchetto. Le frecce ti mostrano dove scurire.

Passaggio 29

Ogni volta che decidi di inserire l'icona nel tuo disegno, non dimenticare di aggiungere al colore grigio un po 'lo stile di colore dello sfondo su cui sarà posizionato. Nell'immagine seguente, è stato aggiunto più viola per adattarsi al design dell'applicazione.

Conclusione

E questo è tutto. Spero che tu abbia imparato qualcosa di nuovo. L'immagine finale è sotto.