Photoshop Tutorial: creare un badge rotondo con piegatura
Ultimamente mi capita spesso di trovare web design nei quali compare un badge rotondo sullo stile di un adesivo piegato.
Ho provato a crearne uno con Photoshop CS3: non è molto difficile.
In seguito ho cercato qualche tutorial mirato, ma quel che ho trovato non mi piaceva abbastanza perché l’effetto era troppo fasullo e regolare.
Così ho pensato di condividere questa mia soluzione: forse potrebbe essere utile a qualcuno.

Crea una nuova immagine e applica un colore di sfondo a piacere (livello 1)
Crea un nuovo livello
Crea una selezione circolare e riempila di bianco, lasciando attiva la selezione (livello 2)

Crea un nuovo livello (3)
Contrai la selezione di 6px (select/modify/contract)

Riempi la selezione di un colore a scelta (livello 3)

Crea un nuovo livello e riempilo con una sfumatura circolare da bianco a trasparente, dall’alto in basso, tenendo premuto Shift (livello 4)

Cambia l’opacità del livello a 50%

Seleziona un’area rettangolare sul livello del livello 3 e cancellala

Vai sul livello 2 e fai taglia e incolla (cmd X, cmd V)

Trascina il nuovo livello creato (5) sopra al livello 3
Rifletti in verticale il livello 5 (edit/transform/flip vertical)


Posiziona la porzione in modo da ottenere la sovrapposizione perfetta con la porzione del livello sottostante
Vai sul livello 5, crea un nuovo livello (6) e clicca tra il livello 5 e il 6 tenendo premuto Alt (Clipping Mask)
Crea una selezione rettangolare sul livello 6 e riempila con una sfumatura lineare da nero a trasparente

Ruota la sfumatura come in figura, riposizionala e cambia l’opacità del livello a 45%

Posizionati sul livello 2, creane uno nuovo (livello 7) e crea la clipping mask
Crea una sfumatura lineare come in figura e imposta l’opacità del livello a 49%


Seleziona tutti i livelli tranne lo sfondo e ruotali di 45 antiorari

Selezionare il livello 2 e applicare l’effetto Drop Shadow, settandolo come in figura (opacity 34, angle 152, distance 1, spread 1, size 3)


Crea la Clipping Mask anche per i livelli 3 e 5
Posizionati sul livello 5 e applica l’effetto Drop Shadow, settandolo come in figura (opacity 20, angle -96, distance 9, spread 0, size 6)

Ecco il risultato finale e alcune possibili soluzioni:



Tag: badge, grafica, photoshop, tips, tutorial, Webdesign
Categorie: Blog
Segui la discussione di questo post via RSS.
Puoi lasciare un commento | trackback

Che bello Suzu! Molto utile, devo provarci!
Tutto ok, la presentazione è davvero ricca d’immagini, chiare ed esaustive.
Ottimo tutorial!!! Effetto garantito!!! Complimenti e grazie :D