Come creare dei bottoni in stile 2.0 con Photoshop

tramite: O2O
Difficoltà: media
14

Introduzione

I bottoni in stile 2.0 presentano delle caratteristiche comuni che li rendono riconoscibili nell'universo grafico del web design. Innanzitutto la loro forma dagli angoli arrotondati e il loro aspetto a 'rilievo' sono due caratteristiche che donano loro un leggero effetto di volume, per questo motivo essi sono invitanti da toccare e vengono di norma usati per i dispositivi touch screen. Vediamo come creare un bottone in stile 2.0 utilizzando Photoshop e i suoi utili strumenti.

24

I pixel

Innanzitutto andiamo a creare un nuovo documento con Adobe Photoshop con lo sfondo trasparente e in RGB, in quanto il nostro bottone sarà dedicato al web e non alla stampa in carta. Le misure possono essere inserite a piacimento ma, essendo il documento di consumo veloce, consiglio di tenersi circa su un pulsante che presenti 300, 400 pixel per il lato della lunghezza e di pensare ad una proporzione 'rettangolare' per quanto riguarda la sua altezza. Ad esempio 300x200 px oppure 400x300 px. Andiamo ora a disegnare con lo strumento 'rettangolo con angoli arrotondati' la nostra figura base. Selezioniamo il comando degli effetti ed andiamo ad applicare una leggera ombra esterna di colore nero e con un angolo di circa 130 gradi, selezionando la modalità "moltiplica".

34

Effetto rilievo

Andiamo ora a creare il dovuto effetto "rilievo". Selezioniamo sempre dallo stesso blocco di comandi una traccia dello stesso colore del bottone disegnato. Importante è che sia interna e che presenti una misura che varia dai 5 ai 7 px. Ricordiamoci di controllare che l'opacità sia al 100% in quanto ci serve una traccia interna ben definita. Alcuni pulsanti presentano una cromatura nel bordo. Se la desideriamo andiamo a giocare con una traccia che sia dei colori del metallo.

Continua la lettura
44

La posizione

Per ottenere il riflesso caratteristico di questa tipologia di pulsanti possiamo selezionare una porzione superiore o laterale, a gusto, del bottone. Effettuiamo la selezione utilizzando la pennina grafica e quindi creiamo un tracciato interno prestando attenzione a non toccare la traccia del nostro bottone precedentemente creata. Andiamo ora a trasfomare il tracciato in selezione attraverso l'apposito comando rappresentato da un cerchio tratteggiato e da questa selezione creiamo un livello nuovo semplicemente facendo un copia incolla (ctrl C e ctrl V oppure mela C e mela V). Su questo livello, che porterermo in alto sopra gli altri livelli, è possibile giocare con un'ulteriore sfumatura di colori oppure riempiendo questa porzione di colore donando un'opacità minore. Il nostro bottone è ora creato; se desideriamo possiamo unire tutti il livelli, oppure lasciarli sciolti per modificarli a nostro piacimento. Pensiamo ora alla scritta del comando che andrà ad apparire nel nostro pulsante. Usiamo lo strumento testo e andiamo a scrivere all'interno del bottone, mantenendo le proporzioni e senza uscire dai bordi. Usiamo un colore a contrasto, oppure molto più chiaro della tinta usata per il pulsante. Scriviamo il testo ed andiamo a gestirlo come abbiamo fatto con il bottone. Applichiamo un'ombra esterna nera molto vicina al testo e sempre usando la funzione "moltiplica". Quindi andiamo a dare il comando "smusso effetto rilievo" per alzare otticamente la scritta. Il nostro pulsante in stile 2.0 è pronto, se desideriamo esportarlo consiglio un file. Png oppure un. Jpg leggero.

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Software

Come realizzare l'effetto Double Exposure in Photoshop

Essere bravi a modificare immagini con effetti grafici e di colore, non è spesso facile, soprattutto quando si deve avere a che fare con programmi di grafica complessi come Photoshop. Se la voglia di imparare cose nuove e divertenti è però sempre più...
Software

Come realizzare una scritta trasparente in Photoshop

Adobe Photoshop è un programma evoluto dalla "Adobe System". Esso si è specializzato nel fotoritocco. Non è altro che l'elaborazione delle fotografie, specialmente di immagini digitali. Tale software vi permetterà di creare dei ritocchi di qualità...
Software

Come creare una scritta con effetto riflesso con Photoshop

In internet si vedono spesso banner e scritte caratterizzate da un effetto riflesso del testo, in cui le parole sembrano quasi rispecchiarsi in uno specchio d'acqua. Ottenere questo tipo di effetto sembra difficile, in realtà è molto meno complicato...
Software

Come disegnare manga con Photoshop

I manga sono i fumetti giapponesi ormai conosciuti e amati da tutti. Molti sono i ragazzi italiani che vorrebbero imparare questo stile particolare di disegno, per realizzare le loro storie in pieno stile manga. Imparare l'arte dei manga non è difficile,...
Software

Come creare l'effetto fumo con Photoshop

Adobe Photoshop è il classico programma che permette di creare immagini di qualsiasi tipo con semplici effetti grafici.È possibile eseguire qualsiasi cosa, utilizzando esclusivamente la fantasia ed un buon senso artistico.Photoshop si può, anche, usare...
Software

Come ritoccare i volti con Photoshop

Quando si lavora nel settore della grafica, non è possibile evitare l'impiego del software migliore per il fotoritocco Adobe Photoshop. Questo programma informatico davvero potente contiene numerose opzioni e strumenti in grado di modificare le immagini,...
Software

Come creare un bottone semplice, pulito e bello in Photoshop

Per chi realizza siti web o crea pagine su internet, normalmente si occupa anche di curare la grafica del sito e quindi anche di tutti i bottoni che rappresentano l'ingresso sul sito e possono influenzare il grado di interessamento. Per creare elementi...
Software

Come realizzare gli effetti Instagram con Photoshop

Quando ci troviamo in vacanza o in occasioni speciali come compleanni e cerimonie, vorremmo sempre immortalare il momento in una foto tecnicamente perfetta. Non sempre una fotografia risulta priva di difetti. Talvolta infatti occorre valorizzarla, magari...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.