logo
Federico Barberis

Web Designer

Professionista freelance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Scarica il CV
 

Pulsante effetto acciaio in Photoshop

banner_pulsante

Pulsante effetto acciaio in Photoshop

 

Buon giorno a tutti. Oggi vorrei proporvi un tutorial su come disegnare un pulsante effetto acciaio con Photoshop. Potrete realizzarlo anche con un simbolo diverso da quello in esempio, magari con l’icona di Facebook o di Twitter e inserirlo come pulsante nelle vostre pagine web. Ecco cosa intendo:

bottone ON

Righelli e GuideBene! Possiamo cominciare. Per prima cosa creiamo un nuovo documento in Photoshop delle dimensioni di 600 x 600 px; clicchiamo due volte sul livello Sfondo per sbloccarlo, prenderà il nome di livello 0. Se non sono visibili i righelli, attiviamoli con CTRL+R in Windows o CMD+R su Mac, attiviamo il menu
Visualizza->Effetto Calamita e trasciniamo due guide ortogonali che si agganciano al centro del livello, grazie all’effetto calamita che abbiamo attivato precedentemente.

Adesso disegniamo il simbolo del pulsante, per esempio il simbolo “ON-OFF”. Con lo strumento ellisse (U) tracciamo un nuovo livello forma tenendo premuto il tasto maiuscole (shift) per ottenere un cerchio perfetto e posizioniamolo al centro dell’area di lavoro agganciandolo alle guide.

 

Pannello LivelliFacciamo doppio click sulla miniatura del livello per cambiare il colore della nostra forma, in questo caso ho scelto un turchese (RGB 1, 120, 145). Ora clicchiamo sulla maschera vettoriale del livello e con lo strumento (A) selezione tracciato (freccia nera) selezioniamo il cerchio appena disegnato e nel pannello opzioni strumento attiviamo “Escludi aree forme sovrapposte”

Duplichiamo il tracciato con CTRL+D, trasciniamo le maniglie di trasformazione tenendo premuto SHIFT+ALT e rimpiccioliamo il cerchio ottenuto fino a raggiungere le dimensioni desiderate.

cerchio bucato

A questo punto, con la maschera vettoriale selezionata, impostiamo lo strumento poligono con un numero di lati pari a 3; disegniamo un triangolo come in figura e intersechiamolo con il cerchio impostando l’opzione “Sottrai da area forma” e premiamo sul tasto “combina”. Abbiamo così ottenuto un arco di circonferenza.


Non ci resta che disegnare sulla maschera vettoriale del livello Forma 1 un rettangolo per completare il simbolo: selezioniamo la maschera vettoriale del livello e, tenendo premuto il tasto SHIFT, con lo strumento rettangolo (U) tracciamo una barra verticale in mezzo all’arco di circonferenza.
Il nostro simbolo è pronto! Prima di procedere, rimpiccioliamo il livello Forma 1 con il comando scala (CTRL+T), le dimensioni scieglietele voi, l’importante è che sia abbastanza piccolo da non coprire la forma del pulsante che stiamo per disegnare.
Con lo strumento ellisse (U) descriviamo un cerchio (sempre tenendo premuti SHIFT+ALT) creando così un nuovo livello forma, che prenderà il nome di Forma 2.
Posizioniamo questo livello al di sotto di Forma 1, che andiamo a nascondere nella palette dei livelli, cliccando sull’icona a forma di occhio occhio palette livelli. Facciamo doppio click sull’icona del colore del livello Forma 2 e impostiamo i seguenti valori RGB: 165, 165, 165, in modo da ottenere il seguente risultato:

base di partenza per il pulsante

Con il livello Forma 2 selezionato, facciamo CTRL+click sulla maschera vettoriale del livello Forma 1 nella palette dei livelli, poi – sempre nella palette dei livelli – clicchiamo il pulsante crea maschera. Cosa abbiamo fatto? Abbiamo caricato una selezione sulla base della geometria di Forma 1 e l’abbiamo usata per creare una mascheratura su Forma 2.

maschera su livello

Clicchiamo sul punsante “aggiungi stile livello” nella parte bassa della palette dei livelli e selezioniamo “smusso ed effetto rilievo” inserendo questi parametri nella finestra che comparirà:

parametri effetto smusso

Diamo l’OK aggiungiamo allo stesso modo l’effetto “sovrapposizione sfumatura” con questi parametri:

Clicchiamo su sfumatura per modificarla e impostiamo delle variazioni di grigio simili a queste:

imposta sfumatura

Diamo OK e questo è quello che otterremo:

Ci siamo quasi! Dobbiamo solo dare un tocco di realismo in più. Per fare questo duplichiamo il livello Forma 2 e rinominiamolo in Satinatura; posizioniamolo subito sopra a Forma 2, dopodiché facciamo click destro sull’icona della maschera di livello e selezioniamo elimina. Eliminiamo anche gli effetti di livello e facciamo di nuovo click destro sul livello Satinatura e selezioniamo la voce rasterizza livello.
Nella palette degli strumenti ripristiniamo i colori di primo piano e sfondo premendo il tasto D e, dal menù filtro, selezioniamo disturbo->aggiungi disturbo; impostiamo come quantità 100%, distribuzione uniforme e spuntiamo la casella Monocromatico.
Sempre dal menù filtro selezioniamo Sfocatura->Sfocatura radiale; impostiamo fattore 50, metodo di sfocatura rotazione, qualità buona. Ed ecco cosa otteniamo:

metodo di fusioneImpostiamo Sovrapponi come metodo di fusione del livello satinatura settiamo l’opacità al 25 %; rendiamo nuovamente visibile il livello Forma 1 ed ecco pronto il nostro pulsante in stato OFF.

bottone OFF

Ma se vogliamo che il nostro pulsante si accenda dobbiamo aggiungere alcuni stili al livello Forma 1 e precisamente:
Bagliore esterno: colore RGB (0, 211, 255) – estensione 0 px – dimensione 18 px;
Sovrapposizione colore:
metodo di fusione nomale – colore RGB (0, 211, 255);
Et voilà! Il nostro pulsante in stato ON!

bottone ON

Ecco il file in formato PSD!

Download

Conclusioni

Questa semplice tecnica può – ovviamente – essere perfezionata. Potete usare qualsiasi simbolo e potete dare al pulsante anche un’altra forma, per esempio quella di un quadrato coi bordi arrotondati.
Come abbiamo visto, Photoshop è uno strumento molto potente che ci consente di creare da zero la nostra grafica, oltre ad essere lo standard de facto per il foto-ritocco.
Spero che questo articolo abbia catturato la vostra attenzione e come al solito vi invito a inviare dei commenti se qualcosa non vi è sembrato sufficientemente chiaro… E mi raccomando. Condividetelo sui vostri social network preferiti.
Alla prossima.

Federico Barberis
info@weblabdesign.net

Web designer free-lance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Non ci sono commenti

Pubblica commento