Disegna una scheda Web 2.0 con Photoshop
La seguente guida qui di seguito tenta di darti un'idea di come progettare un bel menu a schede elegante in Photoshop, in stile Web 2.0.
Passo 1
Crea una nuova tela con sfondo bianco [#ffffff] di qualsiasi dimensione, preferibilmente rettangolare; sono più adatti a disegnare schede. Quindi passare a Scheda Canali (Windows -> Canali), fare clic su Crea un nuovo canale in basso a destra.
Passo 2
Sul livello del canale selezionato, disegna una forma simile con lo strumento Lazo poligonale. Riempi il colore bianco [#ffffff]; deseleziona la regione poligonale (seleziona uno strumento di selezione e premi la schermata uno); dare la forma Sfocatura gaussiana con raggio 6.0px.
Passaggio 3
CTRL-L per richiamare la finestra di dialogo del livello e spingere la freccia sinistra e destra per incontrare la freccia centrale, come l'immagine sopra. Questo sarà “liscio” la forma sfuocata si alza e ti dà una bella forma d'angolo arrotondata.
Passaggio 4
Nella scheda Canali, Tieni premuto CTRL, clicca su Anteprima del canale del livello Alpha 1. La nuova forma verrà ora selezionata, ritorna a Scheda Livelli, Crea nuovo livello e riempire l'area selezionata con il nero [# 000000].
Passaggio 5
Rimuovere gli angoli arrotondati per il bot in basso a sinistra e in basso a destra, spostarlo verso sinistra e posizionarlo come illustrato sopra. Successivamente ci concentreremo sulla scheda di colore nero.
| tenere CTRL, fare clic sulla scheda Layer Thumbnail per evidenziare l'intera immagine della scheda. | |
| Con l'immagine della scheda ancora evidenziata, selezionare strumento per selezione di un'area rettangolare, tenere ALT e disegna un rettangolo di regione che vogliamo rimuovere. | |
| Dovresti vedere solo la parte superiore selezionata. Selezionare -> Modificare -> Contrarre, Contratto di 2px e dovresti ottenere qualcosa come l'immagine a sinistra. | |
| Crea un nuovo livello, riempi la regione evidenziata con il bianco [#ffffff]. Fare clic con il tasto destro, scegliere Opzioni di fusione poi Sovrapposizione graduale. Sostituisci il fermo colore bianco [#ffffff] con il grigio [# 616161]. La tua scheda dovrebbe apparire come l'immagine a sinistra. |
Passaggio 6
Crea un nuovo livello; Selezionare Strumento rettangolare arrotondato (Radius 8px), disegna un rettangolo e posiziona questo livello dietro il livello di tabulazione nero. Fare clic con il tasto destro e selezionare Opzioni di fusione e inserire le seguenti impostazioni.
Ombra esterna
- Opacità: 31%
- Distanza: 0px
- Spread: 0%
- Dimensione: 2px
Smusso e rilievo
- Profondità: 100%
- Dimensione: 0 px
- Ammorbidire: 0 px
Sovrapposizione graduale
- Ecco le impostazioni di arresti colore.
- Colore: #aaaaaa, Ubicazione: 0%
- Colore: #ffffff, posizione 100%
Passaggio 7
Inserisci un testo per vedere l'aspetto generale del Web 2.0. Sto usando font Lucida Fax, font-size 32pt e 25pt. E la tua scheda è fatta! Sentiti libero di giocare con la combinazione di colori del Tab.
Scarica tutorial
