Tnt village
tntvillage.scambioetico.org · Statuto T.N.T.      Aiuto      Cerca      Utenti      Calendario

Questo sito non utilizza cookies a scopo di tracciamento o di profilazione. L'utilizzo dei cookies ha fini strettamente tecnici.

Sostieni movimentopirati.org

 

  Discussione chiusaInizia nuova discussioneAvvia sondaggio

> [GUIDA] Creare stupendi bottoni web 2.0, Photoshop
AndyMcMas
  Inviato il: Jul 26 2007, 05:39 PM
Cita questo messaggio


\"100rel\"
\"residente\"

Group Icon

Gruppo: V.I.P.
Messaggi: 442
Utente Nr.: 9381
Iscritto il: 9-August 05



user posted image


Evidenzio
user posted image
LICENZA:user posted image

Oggi vi mostrerò come creare stupendi bottoni in perfetto stile web 2.0 con Photoshop. Tengo a precisare che potrete usare questi ultimi anche come header del vostro sito, per esempio. Prima di tutto però vorrei solo aggiungere che questa è una traduzione dell’articolo “Sketch Web 2.0 interface in Photoshop“, e che ho avuto il permesso dall’autore del post originale. Bene, possiamo cominciare.


Passo 1

user posted image

Aprite Adobe Photoshop e create una nuova immagine, di qualsiasi dimensione. Di solito più grande di 450 x 300 può andar bene. Selezionate lo strumento Rettangolo Arrotondato e disegnate una forma come quella qui sopra.

Passo 2

user posted image

Doppio click sul livello della forma per aprire la finestra di Stile livello. Settate i seguenti parametri:
    Ombra esterna:
    Opacità 31% Distanza 1px, Estensione 0%, Dimensione px

    Smusso ed effetto rilievo:
    Profondità 100%, Dimensione 0px, Attenuazione 0px

    Sovrapposizione sfumatura:
    Cliccate sulla barra della sfumatura e settate: in posizione 0% (ovvero l’inizio della barra) colore #1378cd, in posizione 100% (la fine della barra) #4da5f0

    Traccia:
    Dimensione 5px, Posizione interno, Colore #54abf6
Passo 3

user posted image

Ora inserite il vostro testo. Allineatelo orizzontalmente a destra e verticalmente al centro. Il carattere qui usato è un Lucida Sans Unicode; 55pt; arrotondato; Doppio click sul livello e in Opzioni di fusione settate:
    Sovrapposizione sfumatura:
    Posizione 0% colore #9ec7eb, Posizione 100% colore #ecf6ff
Passo 4

user posted image

E’ il momento di inserire un piccolo logo a sinistra per migliorare il tutto. Per farlo, selezionate lo strumento Rettangolo Arrotondato con raggio 5px. Disegnatelo come qui sopra. Ora, nelle Opzioni di fusione, settate i vari parametri in questo modo:
    Ombra interna
    Opacità:45%
    Distanza:0px
    Dimensione:43px;

    Smusso ed effetto rilievo
    Profondità:100%
    Dimensione:0px
    Attenuazione:0px
    Opacità metodo luce:50%
    Opacità metodo ombra:100%

    Sovrapposizione sfumatura
    Doppio click sulla barra della sfumatura.
    Posizione:0% #0e2f4a
    Posizione:47% #001a31
    Posizione:48% #002545
    Posizione:100% #0f4b7f

    Traccia
    Dimensione:5px
    Doppio click sulla barra della sfumatura
    Posizione:0% #1468af
    Posizione:100% #50abf8
Passo 5

user posted image

Per rendere il tutto ancora più bello, dategli un effetto “vetro”. Per farlo tenete premuto il tasto CTRL e selezionate il livello della vostra forma. Una volta fatto ciò, usate lo Strumento selezione rettangolare, tenete premuto ALT e catturate l’area come mostrato qui sopra.

Passo 6

user posted image

Riempite la selezione appena catturata di bianco e impostate come Opacità 15%

Bene, il tutorial è finito. Spero di esser stato chiaro. Ora non vi resta che provare, oppure, se volete, scaricare il file .PSD in modo da averlo a disposizione senza nessuna fatica :-): clicca per il download


Per problemi o dubbi inerenti questa guida, o per mostrare ciò che siete riusciti a fare seguendo questa guida,
aprite un topic nel Forum GRAPHIC'S LAB
Per ringraziare l'autore di questa guida esiste questa discussione


Messaggio modificato da toller58 il Jul 30 2014, 08:11 AM

Nella vita, come nell'arte, è difficile dire qualche cosa che sia altrettanto efficace del silenzio.
Messaggio Privato
Top
Utenti totali che stanno leggendo la discussione: 0 (0 Visitatori e 0 Utenti Anonimi)
Gli utenti registrati sono 0 :
 

Opzioni Discussione Discussione chiusaInizia nuova discussioneAvvia sondaggio

 

Scambio etico - ethic share
 Debian powered site  Nginx powered site  Php 5 powered site  MariaDB powered site  xml rss2.0 compliant  no software patents  no software patents