Vediamo oggi come creare un pulsante per siti web che richiama la forma e i colori di una pillola, con questo tutorial utile per imparare a gestire qualche effetto di trasparenza di Photoshop.
Apriamo un nuovo file delle dimensioni di 400×400 pixels, a 72 dpi.
Pill Shaped Button Photoshop
Selezioniamo dal pannello Strumenti lo strumento Sfumatura (Shift+g). Nella barra dell’applicazione in alto a sinistra selezioniamo col click la seconda icona da sinistra, ovvero la sfumatura Radiale. Clickando ora sulla barra del colore subito a sinistra, impostiamo il colore delle due etichette: a sinistra #144c71 e a destra #0d2734. Tracciamo la sfumatura puntando il click al centro del layout e trascinandolo in alto, e rilasciamo.
![pillow button #1 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-jrISTC.jpeg)
Prendiamo lo strumento Rettangolo arrotondato, con raggio 80, e tracciamo la seguente forma con riempimento nero.
![pillow button #2 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-saUStx.jpeg)
Clickiamo con il tasto destro sulla miniatura dal pannello dei livelli, e selezioniamo Opzioni di fusione per aggiungere i seguenti stili al livello:
![Creare Pill Shaped Button Photoshop Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-3UMoOu.jpeg)
![Creare Pill Shaped Button Photoshop Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-F52pfn.jpeg)
![Creare Pill Shaped Button Photoshop Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-oVWAjB.jpeg)
Ed ecco il risultato:
![pillow button #6 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-MARkBW.jpeg)
Selezioniamo il livello con la forma, clickando la sua miniatura dal pannello dei livelli mentre teniamo premuto Ctrl:
![pillow button #7 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-Z049fp.jpeg)
Spuntiamo in alto il pulsante Sottrai selezione , e con lo strumento Selezione ellittica tracciamo un’ellisse come da immagine seguente, aiutandoci con le linee guida per identificare il centro del layout:
![pillow button #8 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-UkKL8S.jpeg)
Creiamo un nuovo livello superiore, e riempiamo la selezione ottenuta dalla precedente operazione con #f26520:
![pillow button #9 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-GzdVnm.jpeg)
Premiamo Ctrl+t, poi click destro sull’immagine in trasformazione, e selezioniamo Rifletti orizzontale. Con i tasti freccia spostiamo il livello fino a farlo combaciare con i bordi a sinistra.
![pillow button #10 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-0si3Gv.jpeg)
Creiamo un nuovo livello superiore, e ancora con lo strumento Selezione ellittica, creiamo una forma come da immagine seguente, e tagliamo con Canc la parte di riempimento in eccesso dal livello inferiore in modo da creare una sezione pressochè perfetta:
![pillow button #11 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-Es2SSs.jpeg)
Sul nuovo livello, usiamo il riempimento con colore # e45e1f:
![pillow button #12 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-MrbXnV.jpeg)
E veniamo alle fasi finali. Selezioniamo di nuovo il livello della forma con Ctrl+Click, e spuntiamo Sottrai selezione. Con lo strumento Selezione rettangolare, sottraiamo la seguente forma:
![pillow button #13 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-L4HQ63.jpeg)
Operiamo su Selezione/Modifica/Contrai, con valore 7 e diamo l’Ok.
![pillow button #14 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-ljbExq.jpeg)
Creiamo un nuovo livello superiore, dal pannello Strumenti selezioniamo lo strumento Sfumatura e in alto spuntiamo la prima icona da sinistra, Sfumatura lineare. Impostiamo i due colori come bianco a sinistra e trasparente a destra: con lo strumento all’interno della selezione, tracciamo un segmento dal bordo superiore a quello inferiore, e rilasciamo.
![pillow button #15 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-DiuuxS.jpeg)
Creiamo un ultimo livello superiore, e con lo strumento Forma Rettangolare senza contorno e riempimento, di Raggio 80, creiamo una forma come da immagine seguente e trasformiamola in selezione (click destro sulla forma e selezionare Crea selezione):
![pillow button #16 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-xMzM1l.jpeg)
Con la medesima sfumatura precedente, da bianco a trasparente, tracciamo un segmento questa volta dal basso verso l’alto, trascinando il punto di arrivo poco oltre il bordo superiore e poi rilasciando.
![pillow button #17 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-yEpb0v.jpeg)
Dal menù a tendina delle opzioni di livello, selezioniamo per questo livello Sovrapponi.
Se la pillola è troppo larga, selezioniamo tutti i livelli dal pannello livelli (a parte lo sfondo), e modifichiamone le dimensioni premendo Ctrl+t e trascinando le maniglie:
![pillow button #18 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-O0MJBA.jpeg)
Uniamo tutti i livelli per poter rimpicciolire il pulsante a piacere, a seconda del layout web che lo dovrà accogliere.
![pillow button #19 Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-ZhhSLj.jpeg)
Alla prossima!
![Creare Pill Shaped Button Photoshop Creare Pill Shaped Button Photoshop](http://m2.paperblog.com/i/130/1301730/creare-pill-shaped-button-photoshop-L-SCJXcd.jpeg)