Come creare un bottone semplice, pulito e bello in Photoshop

tramite: O2O
Difficoltà: media
17

Introduzione

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 grafici è innanzitutto necessario installare sul proprio computer dei programmi nati per la grafica: uno di questi è senza ombra di dubbio Adobe Photoshop. Questo software nasce come un tool per ritoccare le fotografie, ma offre anche molte features per realizzare elementi grafici e quindi anche per creare un bottone semplice, pulito e bello. Della stessa software house, esiste un altro software ancora più specifico per la grafica web, Adobe Illustrator. In questa guida però ci concentreremo su Photoshop.

27

Occorrente

  • Adobe Photoshop
37

Apriamo Photoshop

Innanzitutto avviamo Photoshop e creiamo un nuovo documento sul quale lavorare. Dal menu File quindi, cliccate su "Nuovo Documento". Vi apparirà una finestra dalla quale potrete scegliere le dimensioni e la risoluzione del vostro lavoro, oltre che le sfondo. Inserite quindi 400x300 px come dimensione, selezionate lo sfondo bianco e 300dpi come risoluzione. Salvate quindi il file in formato .PSD nominandolo ad esempio "bottone. Psd". Con il tasto destro del mouse, cliccate su Layer from Background ed aggiungete un nuovo livello. Selezionate quindi lo strumento "Elipse" dalla barra laterale degli strumenti e tracciate un'ellisse o un cerchio, facendo attenzione ad aver selezionato "Fill elipse" in modo che l'interno del cerchio/ellisse sia colorato.

47

La creazione del bottone

Selezionate il livello del cerchio, quello che sarà il nostro bottone, ed cliccando il tasto destro del mouse, dal menu a tendina, selezionate la funzione "Blending options". Dalla finestra che vi comparirà, vi sarà possibile modificare le proprietà del livello, in modo da creare il vostro bottone. In particolare, selezioniamo Stroke ed impostiamo il valore 2 px. Scegliamo quindi un colore leggermente più scuro di quello usato per il bottone, e spuntiamo l'opzione "outside". Spuntiamo quindi anche "drop shadow".

Continua la lettura
57

Abbelliamo il bottone

A questo punto concentriamoci sull'aspetto del nostro bottone e definiamo le ombre. Tenendo selezionato "Inner shadow", scegliamo "multiply" ed impostiamo il valore al 75% ed un colore leggermente più scuro, angolo 120° e dimensione e distanza a 11. Selezioniamo anche "pattern overlay" impostando una opacità del 20% scegliendo ad esempio un pattern con dei fiori. Passiamo quindi ad "inner glow": in questo caso l'opacità deve essere impostata al 75% e come colore scegliamo uno che dia luce al bottone, quindi bianco o qualcosa di chiaro. Spuntiamo anche "Belev" e "Emboss" con profondità 100% e dimensione 11. Per terminare, applichiamo il gradinte overlay al 20% ed aggiungete un layer trasparente sul quale applicherete il testo del vostro bottone!

67

Guarda il video

77

Consigli

Non dimenticare mai:
  • Salvare sempre il lavoro sia in PSD, che in PNG; così potrete modificarlo e nello stesso tempo avere l'immagine con la trasparenza da usare.

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.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
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 creare una gif animata con Photoshop

Photoshop è un software per computer molto utile e versatile, usato da milioni di utenti, sia a scopo ludico che professionale. Questo programma, di proprietà dell'Adobe System Incorporated, permette di modificare le immagini a proprio piacimento, ma...
Software

Come realizzare un poster con Photoshop

Molte persone sarebbero felici di ricevere un collage di foto realizzato da un amico con le proprie mani. Creare un poster con i moderni software di grafica, in particolare Photoshop, è molto facile e simpatico: in poco tempo si possono creare immagini...
Software

Come creare l'effetto riflesso con Photoshop

Con il programma di ritocco fotografico Photoshop è possibile creare dei bellissimi effetti speciali sulle immagini, in maniera tale da impreziosirle e renderle uniche. Uno di questi effetti è quello riflesso, che consiste nell'aggiungere all'immagine...
Software

Photoshop: come creare un effetto statua

Alla base di ogni lavoro c'è sempre la fantasia, la creatività ed il divertimento. Nel Photoshop, per creare un effetto statua occorrono soprattutto idee. Poi serve la capacità di immaginare la propria opera con la mente, prima che con gli occhi. Nell'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 animazioni con Photoshop

Non in molti lo sanno, ma con Photoshop è possibile anche animare i vostri disegni trasformandoli in un filmato. Per avere disponibili queste funzioni, è consigliabile essere in possesso della versione più recente di Adobe Photoshop o comunque una...
Software

Nozioni base di Photoshop

Adobe Photoshop è un praticissimo software di grafica digitale e photo editing, prodotto dalla società Adobe Systems Incorporated. Per coloro che si occupano di graphic design, è lo strumento fondamentale per la modifica di immagini e alla creazione...
Software

Come modificare un video con Photoshop

I programmi di foto e video che vengono adoperati oggi giorno, appaiono sofisticati e versatili. Ognuno di essi risulta valido, perché usandoli si riesce a sviluppare qualsiasi cambiamento. Ma, il software più utilizzato e apprezzato è Photoshop. Infatti,...
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 »”.