Creare un pulsante per il download in Photoshop

Oggi vedremo come realizzare in Photoshop tramite pochi passi un pulsante destinato al download di un file.

Il primo passo è recuperare il materiale necessario, nel nostro caso una palette di colori, un’icona e un font adatto.

Palette: Per la palette di colori basta effettuare un “print screen” sulla pagina del sito per il quale dovrete creare il pulsante;
Icona: Su IconFinder alla chiave di ricerca “download” ce ne sono a migliaia, scegliete quella che più fa per voi;
Font: Se non avete il font adatto potete trovarlo tra la vastissima collezione di DaFont;

Una volta che abbiamo tutto il materiale necessario possiamo partire!

Il “print screen” della pagina potete utilizzarlo come template vero e proprio in modo da poter vedere quali siano le dimensioni pi appropriate del vostro pulsante!
Nel mio caso una volta definita l’area in cui andare a posizionare il pulsante procedo con la creazione di un rettangolo arrotondato tramite “Strumento rettangolo arrotondato” disponibile nella barra “Strumenti” di Photoshop.

Ad esso associerò un colore di sfondo e un gradiente nel pannello “Opzioni di fusione” (raggiungibile tramite un click con il pulsante destro del mouse sul livello del nostro rettangolo arrotondato).

Ora andiamo ad aggiungere la scritta “Download” sul pulsante. Prendiamo dalla barra degli “Strumenti” di Photoshop lo “Strumento testo”, selezionamo il font che abbiamo scaricato/scelto e andiamo a cliccare sopra alla nostra forma rettangolare su cui scriveremo appunto “Download”. A questo punto posizioniamo il testo dove più ci piace sul nostro pulsante.

Importiamo adesso l’icona che abbiamo scaricato, ridimensioniamola (CTRL+T) e posizioniamola sul pulsante. Poi associamole un colore più vicino alla nostra palette tramite “Opzioni di fusione”.

Il nostro pulsante potrebbe essere già pronto ma possiamo aggiungere ancora qualche caratteristica che lo renda ancora più particolare.
Personalmente ci vedo bene un separatore tra l’etichetta “Download” e l’icona.

Creiamo un nuovo livello e chiamiamolo Separatore verificando che sia appena sopra al livello del Rettangolo arrotondato.
Con lo “Strumento di selezione rettangolare” creiamo una selezione sopra al rettangolo arrotondato di 1px di larghezza (altezza a piacere), che andremo a riempire con lo “Strumento secchiello” con il colore bianco.

A questo punto non resta che cliccare con il pulsante destro del mouse sul livello Separatore e utilizzare “Crea maschera di ritaglio, il separatore calzerà a pennello sul pulsante!
Così però è troppo accentuata la differenza tra pulsante e separatore, portiamo l’opacità al 30% del nostro livello Separatore.

Direi un ottimo risultato!