HOME      TUTORIALS      GUIDE      FORUM      SHOP                                               CONTATTI
Pulsante con sfera
in: Web Design

ATTENZIONE, Alcuni passaggi verranno solamente descritti e non sarà disponibile l'immagine, ho supposto che hai già seguito gli altri esempi e che quindi hai acquisito una certa padronanza delle funzioni base.
Avvia Adobe Photoshop, attendi il caricamento. Vai nel menù File e clicca su nuovo (new), dalla finestra che ti si apre imposta i valori Width:200 pixels e Height:200 pixels la risoluzione a 72 pixels/inch Mode RGB color e colore di fondo trasparente. Premi OK. Vai nella tool bar e premi sullo strumento selezione circolare (se non è disponibile quella circolare tieni premuto il tasto sinistro del mouse sullo strumento selezione, si aprono i vari tipi di selezione, premi su quella interessata)

Premi i tasti ALT + Shift

E crea tenendo premuti tali tasti la selezione. La pressione di ALT + SHIFT consente di creare una selezione sferica precisa partendo dal centro, nel caso si voglia spostare la selezione, tenendo sempre premuti i tasti prima indicati, premere anche la barra spaziatrica e muovere il mouse, e portare la selezione nella zona desiderata. Raggiunta una dimensione soddisfacente rilasciare il tasto del mouse e poi i pulsanti da tastiera, selezionare un colore

Dalla finestra che si apre scegliamo un blu non troppo chiaro, premiamo OK e premiamo i tasti ALT + Backspace

La selezione precedentemente creata si riempie di blu

premi CTRL + D per rimuovere la selezione. Vai nella finestra dei Layers e fai doppio click su Layer 1 (ovvero quello che rappresenta il cerchio), dalla finestra che si apre selezionare Inner Shadow ed impostare i valori come in figura

Se il cerchio da te creato è più piccolo o più grande di quello usato da me è probabile che dovrai impostare valori differenti per avere il risultato seguente (i puntini non ci devono essere, qui ci sono perchè ho salvato l'immagine a bassa qualità :) )

Adesso dalla tool bar premi sullo strumento testo, seleziona il colore rosso e premi nell'immagine. Inserisci il testo sotto la sfera. Per spostare il testo dopo aver premuto INVIO dal tastierino numerico premi CTRL + le freccette direzionali oppure CTRL + SHIFT + le freccette direzionali per movimenti più ampi.

Hai ottenuto un effetto simile? Con lo strumento testo sempre attivo, premi sul pulsante in figura

Dalla finestra che si apre imposta i valori come segue

Anche qui a seconda del carattere utilizzato e dalla lunghezza del testo sarà forse necessario impostare valori differenti per ottenere il seguente risultato

Adesso l'immagine creata contine molta area vuota che a noi non interessa, selezioniamo lo strumento "ritaglia"

premiamo con il tasto sinistro nell'immagine e tenendolo premuto trasciniamo il mouse in modo da creare una selezione attorno all'immagine. Premi INVIO (da tastiernio o il normale è lo stesso) o fai doppio click all'interno della selezione (non sul centro)

Salva con nome l'immagine appena creata. Salva l'immagine in formato PSD, in tal modo conserverai i layers, gli effetti e la trasparenza, l'immagine occuperà più spazio ma in futuro potrai modificarla senza dover ripetere i passaggi.
Vai nella finestra Layers e premi sulla freccetta indicata nell'immagine (quella nel cerchietto rosso), dal menù che si apre premi su "merge visible", ovvero tale comando unisce tutti i livelli visibili in un unico livello conservano la trasparenza. NON SALVARE L'IMMAGINE, unendo i livelli non potrai effettuare modifiche agli effetti.

Nella finestra Layer i livelli risultano uniti

Premi con il tasto destro sul titolo dell'immagine e premi su Image Size

Rimpicciolisci l'immagine, i valori sono proporzionati tra loro, quindi modificando uno cambia anche l'altro.

Premi su OK. Se non avessimo unito i livelli precedentemente, quando avremmo rimpicciolito l'immagine avremmo perso l'effeto sfera, in quanto i dati degli effetti facevano riferimento ad un'immagine più grande. Provare per credere!
Salviamo l'immagine appena creata per il Web. Andiamo nel menù file e scegliamo l'opzione Save for Web, impostiamo i valori in modo da ottenere qualità e pochi Kb occupati su disco.

Siamo pronti per utilizzare l'immagine nelle nostre pagine Web


Questo sito è stato ideato e progettato da Aldo Gragnaniello
E' vietata copia totale o parziale senza autorizzazione del webmaster