Design Web 2.0 Interface in Photoshop
Comprendere il tutorial qui sotto è capire la sua tecnica, con esso è possibile disegnare un po 'di interfaccia utente grafica per un sito web. Navigazione laterale, pulsanti, intestazioni, per esempio. Tutto lo stile Web 2.0.
Lancia una nuova tela; qualsiasi dimensione Qualcosa di più grande di 450x300px sarebbe buono. Seleziona il Strumento rettangolare arrotondato e disegna un rettangolo grande come mostrato nell'immagine sopra.
Fare doppio clic sul livello del rettangolo arrotondato per avviare il Opzioni di fusione. Modifica le impostazioni per i seguenti stili.
Ombra esterna
Opacità: 31% Distanza: 1px Diffusione: 0% Dimensione: 5px
Smusso e rilievo
Profondità: 100% Dimensione: 0px Ammorbidire: 0px
Sovrapposizione graduale
Fare doppio clic su Gradiant e impostare i seguenti punti di arresto. Posizione: 0%, # 1378cd Posizione: 100% # 4da5f0
Ictus
Dimensioni: 5px Posizione: Interno Colore: # 54abf6
Inseriamo del testo, una tagline, un URL o qualcosa del genere. Avere il centro e allineare a destra in modo che il logo possa risiedere sul lato sinistro in seguito. Diamo uno stile al testo. Sto usando Lucida Sans Unicode; 55pt; liscio; -120 per il tracciamento dei caratteri (spaziatura tra lettere). Fare doppio clic sul livello di testo e impostare quanto segue in Opzioni di fusione.
Sovrapposizione sfumatura
Fare doppio clic su Gradiant e impostare i seguenti punti di arresto. Posizione: 0%, # 9ec7eb Posizione: 100% ecf6ff
Dovrai quindi inserire il logo sul lato sinistro del testo. Userò un rettangolo arrotondato con raggio 5px per rappresentare il logo. Ecco il Opzione di fusione impostazioni per il rettangolo arrotondato.
Ombra interiore
Opacità: 45% Distanza: 0 px Dimensione: 43 px;
Smusso e rilievo
Profondità: 100% Dimensione: 0px Ammorbidire: 0px Modalità evidenziatore Opacità: 50% ShadowMode Opacità: 100%
Sovrapposizione graduale
Fare doppio clic su Gradiant e impostare i seguenti punti di arresto. Località: 0% # 0e2f4a Posizione: 47% # 001a31 Ubicazione: 48% # 002545 Ubicazione: 100% # 0f4b7f
Ictus
Dimensione: 5px Fare doppio clic su Gradiant e impostare i seguenti punti di arresto. Ubicazione: 0% # 1468af Ubicazione: 100% # 50abf8
Diamogli un po 'di effetto lucido. tenere CTRL e clic sinistro su rettangolare arrotondato Layer Thumbnail. Quando l'intero rettangolo arrotondato è selezionato, modificato in Strumento per selezione di un'area rettangolare, tenere ALT ed estrae la seconda metà dell'area selezionata; proprio come l'immagine sopra.
Crea un nuovo livello; Trascinalo in modo che si trovi sopra tutti i livelli; riempire la parte selezionata con il bianco [#ffffff]; cambia l'opacità al 15%.
Il tutorial finirà qui. Il modo in cui utilizzerai questo design dipende interamente da te. Modificando leggermente le dimensioni e i colori, può essere utilizzato come intestazione o pulsanti web. Ecco un esempio.
Intestazione del sito Web
Pulsanti del sito web
