X
Skimbu è stato abbandonato, ma è stato sostituito da due grandi progetti: visita ora Tasc.it e Abits.it!

Come creare uno stile metallico e satinato in Photoshop

Pubblicato da il giorno 17 novembre 2011

In questo nuovo tutorial testuale scopriremo come creare il più basilare degli effetti metallici in Photoshop. In meno di 5 minuti creeremo un cerchio dall’aspetto metallico e satinato, utilizzabile per tantissimi scopi, dagli slider (e ti mando ad un interessante PSD di Orman Clark) ai loghi (meno consigliato, in quanto lo reputo uno stile troppo complesso per essere usato in un logo) ai bottoni. In più potrai scaricare il PSD per solo 0,55 centesimi.  Questa guida va bene anche per chi non sa usare Photoshop, dato che ho cercato di spiegare anche ogni minimo passaggio, anche se una conoscenza minima è sempre richiesta.

In questo momento il design metallico più popolare è sicuramente quello del logo di iCloud. Come saprai già, il design metallico non è mai stato molto estetico nei siti web, per questo viene usato molto raramente, ma se usato bene può dare grandi risultati. Specialmente per certi bottoni, determinati loghi (non i marchi) o elementi grafici. In fondo all’articolo potrai scaricare il PSD di questo stile per 55 centesimi. Ecco la guida di seguito.

Le prime operazioni

In questa guida creeremo un semplice cerchio metallico, il design sarà piuttosto basilare anche perché per creare un effetto anche piuttosto realistico ci vuole veramente poco. Innanzitutto creiamo un documento da 512×512 pixel.

Quindi nella finestra dei livelli fai doppio click sul livello Sfondo e clicca OK per sbloccarlo. Facendo doppio-click ora potrai modificare le Opzioni di Fusione del livello sfondo. Quindi nella sovrapposizione sfumatura crea uno semplice sfumatura dal colore #5a5a5a al colore #242424. Premiamo Ok.

Seleziona lo strumento ellisse (con la tastiera U) e tenendo premuto Shift disegna un cerchio perfetto, grande più o meno come l’immagine sotto. Per centrare il cerchio nel documento tenendo premuto CMD in Mac e CTRL in Windows, seleziona entrambi i livelli (Sfondo e il livello del cerchio), seleziona lo strumento Sposta (V) e clicca sui bottoni cerchiati di rosso (che si trovano nella barra delle opzioni in alto) sempre nell’immagine qui sotto.

Applichiamo i vari stili al cerchio

Il metallo ha la caratteristica di creare strane riflessioni, ed è anche la caratteristica principale dei design metallici. Analizzando questi design ci possiamo accorgere che non hanno altro che una sfumatura grigio-bianca che si ripete in senso circolare. Per creare questa sfumatura facciamo doppio click sul livello del cerchio per andare nelle Opzioni di fusione. Quindi abilitiamo la Sovrapposizione sfumatura e create una sfumatura come nelle seguenti impostazioni (doppio click sulla barretta dei colori per aprire la sfumatura):

Come vedi per semplificarti ho messo, sopra e sotto ogni tassello il colore. Ricordati di cambiare lo stile della sfumatura in Riflesso.

Non usciamo dalle Opzioni di fusione del cerchio ma aggiungiamo anche un Bagliore Interno e un’Ombra Esterna.

Il risultato sarà il seguente:

Applichiamo l’effetto satinato

Per applicare l’effetto satinato utilizzeremo due filtri (Disturbo e Fibre) che ci porteranno a creare due livelli. Tenendo premuto CTRL in Windows e CMD in Mac, clicchiamo su quel quadratino con la forma del cerchio nel livello del cerchio. Dopo aver cliccato vedremo che il nostro cerchio sarà selezionato e il bordicino tratteggiato del cerchio incomincerà a lampeggiare. Andiamo in Livello>Nuovo>Livello, premiamo OK, selezioniamo lo strumento Secchiello (G), controlliamo in fondo nella barra degli strumenti che il colore bianco sia selezionato e clicchiamo all’interno del cerchio per colorarlo di bianco. In realtà abbiamo solo colorato di bianco il livello appena creato.

Ora nella barra degli strumenti in fondo noterai che ci sono due quadrati con i colori, come colore primario seleziona il bianco, come secondario il nero. Quindi vai in Filtro>Rendering>Fibre. Applica i seguenti parametri:

Quindi andiamo in Filtro>Sfocatura>Sfocatura Radiale. E usate i seguenti parametri:

Questo filtro non creerà un vero e proprio effetto satinato, è soltanto un effetto satinato “soft” che sfuma alcune parti e ne evidenzia altre. Nel livello creato impostiamo come metodo di fusione Sovrapponi.

Andiamo a creare il secondo livello che darà un effetto satinato più evidente. Seguiamo la stessa procedura che abbiamo seguito prima per creare il livello., quindi selezioniamo il cerchio principale, andiamo in Livello>Nuovo>Livello, riempiamolo di bianco. Ora andiamo in Filtro>Disturbo>Aggiungi Disturbo. Impostiamo come quantità un valore tra 50 e 250 a seconda dell’intensità che vogliamo dare al nostro effetto satinato, io ho messo 200. Come Distribuzione seleziona Gaussiana e il disturbo dev’essere Monocromatico. Premiamo OK e nel nostro livello verrà creato un disturbo. Seguiamo dunque lo stesso procedimento seguito prima, andiamo in Filtro>Sfocatura>Sfocatura Radiale e impostiamo gli stessi parametri impostati prima. Stavolta come metodo di fusione del secondo livello creato impostiamo Moltiplica e riduciamo l’opacità del livello a nostro piacimento per dare un’effetto più o meno intenso, io ho messo 50.

Il risultato finale sarà il seguente:

L’ideale ora sarebbe nascondere il punto centrale da cui parte un effetto, inserendo qualsiasi forma voi vogliate. Acquistando il PSD (link sotto) sotto potrai vedere la forma da me creata e tutto il PSD completo del cerchio che abbiamo creato.

Acquista il PSD

Puoi acquistare il file di Photoshop creato con questo tutorial per soli 0,55 centesimi cliccando sul link qui sotto, il pagamento avviene tramite PayPal.

Conclusioni

Come per ogni tutorial di Photoshop non mi stancherò mai di dire che si può sempre migliorare. Quest’effetto può sembrare realistico ma si può sempre creare qualcosa di meglio, perdendo più tempo a provare filtri diversi, ad aggiungere livelli e creare un effetto più “profondo”. Per qualsiasi domanda non esitare a commentare ;)

, 883 articoli pubblicati

Fin da quando ho 7 anni sviluppo siti web, amo l'informatica, la fotografia, la scienza e l'economia. Credo che il segreto del successo stia nel fare cose che altri non fanno. Nel 2008 ho fondato Skimbu, a cui ho voluto fin da subito dare una precisa immagine attraverso una grafica semplice, bella e unica e attraverso articoli di qualità e anch'essi unici. Continuerò Skimbu fino a che avrò voglia, con la passione e la voglia di far apprendere alla gente che esiste qualcosa di più meraviglioso che la televisione o che le solite dichiarazioni dei politici.

Visita il sito web di questo autore

Condividi l'articolo!

  • Anonimo

    come si seleziona il colore della sfumatura?

    • Anonimo

      come non detto…risolto :D

      • http://www.skimbu.it Alberto Ziveri

        Ahah ok comunque si clicca sul tassello, quindi sul rettangolino di fianco a “Colore”.

      • Anonimo

        ho un problema…come faccio a vedere se il colore è #5a5a5a? nelle opzioni dei colori lo si può impostare solo in rgb

      • http://www.skimbu.it Alberto Ziveri

        ?? No, stranissimo. Di solito il colore esadecimale (es. #5a5a5a) lo vedi dopo i colori rgb. >Immagine

      • Anonimo

        a me nn esce na cippa…però ho notato che quando mi fa creare la nuova sfumatura, non mi fa scegliere il colore

      • http://www.skimbu.it Alberto Ziveri

        Capito, vai in Immagine>Metodo e scegli 8bit/Canale. 32bit/Canale non è usato da nessuno…

  • Stefano Campagna

    Io l’ho acquistato XD

    • http://www.skimbu.it Alberto Ziveri

      Grazie Stefano!

  • http://twitter.com/LordFahrenheit Enrico Vicari

    Proprio quello che cercavo per completare una cosa fatta l’altro giorno

    http://img843.imageshack.us/img843/5663/mytunes2.png

    • http://www.skimbu.it Alberto Ziveri

      Bene ;)

  • Sbruftl

    Ottimo, ben fatto!