Nwlapcug.com


Tutorial per Wrapper Div in Photoshop

Uno dei grandi misteri nel web design è come ottenere un effetto di ombreggiatura dietro l'area del contenuto principale, spesso è bianco o chiaro, colorato e indicato come il wrapper. Creare l'immagine corretta in un editor di immagini, come Photoshop, è metà della battaglia. Usando l'immagine come sfondo ripetuto in un div HTML tag è l'altra metà. L'immagine si trova in realtà all'interno di un div all'interno del div "wrapper" nella pagina.

Istruzioni

1

Creare un nuovo documento di Photoshop che è 840 pixel di larghezza e profondità di 1.000 pixel. Fare doppio clic sul livello sfondo nella palette livelli per renderlo un livello modificabili. L'area di lavoro dovrebbe avere uno sfondo a scacchiera, che indica la trasparenza.

2

Creare un rettangolo sullo stage utilizzando lo strumento "Marquis rettangolo" (rettangolo tratteggiato) nella barra di sinistra. Non preoccuparti per le dimensioni che si disegna. Pulsante destro del mouse sulla casella e selezionare "Trasforma selezione." Fare clic sulla casella di sinistra superiore dell'indicatore di "Posizione del punto di riferimento" nella barra degli strumenti nella parte superiore dell'area di lavoro. Sembra un Consiglio di Tic Tac Toe di sorta. Questo orienta il tuo coordinate x e y nella parte superiore sinistra dell'area di lavoro. Nei campi a destra dell'indicatore di riferimento impostato la coordinata x a 20 pixel e la larghezza 800 pixel. Questo centra il rettangolo nell'area di lavoro e fogli di 20 pixel su ogni lato per l'ombra. Fare doppio clic sul rettangolo per tornare alla tuo rettangolo marchese. Pulsante destro del mouse su di esso, seleziona "Copia" e scegliete "Bianco" dalle opzioni di.

3

Fare clic sul pulsante "Aggiungi un stile di livello" (F) lungo la parte inferiore della palette livelli e selezionare "Bagliore esterno". Fare doppio clic sul campo "Imposta colore di incandescenza" nella finestra che si apre e immettere 333333. Impostare il tuo "opacità" al 100 per cento e "Spread" e "Dimensione" a 5. "Rumore" e "Jitter" dovrebbe essere impostato su 0 e "Gamma" a 50, i valori predefiniti per tutti e tre. Fare clic su "OK". L'effetto ombra-tipo dovrebbe comparire intorno al rettangolo, anche se sembrerà che meno pronunciata che come apparirà sulla tua pagina web.

4

Impostate il vostro strumento "Crop" 840 pixel per la larghezza e 2 pixel per la profondità. Trascinare il tuo strumento "Ritaglia" da un lato dell'area di lavoro a altro, un cuneo di taglio 2 pixel profondità attraverso il centro del rettangolo. Fare doppio clic lo strumento "Ritaglia" nella barra degli strumenti per confermare il raccolto (poiché non avere nessun posto dove fare doppio clic sull'immagine sottile). Una piccola quantità del bagliore mostrerà su entrambi i lati dell'immagine ritagliata all'interno i 20 pixel dell'area trasparente che hai lasciato su ogni lato. Salvare il file come "wrapper.png" in formato PNG nella stessa cartella come pagina Web.

5

Aprire il documento HTML e creare un wrapper div con l'ID del "wrapper" che è 840 pixel vasta e centrata nella pagina. Creare un div con ID "contenuto" che si trova all'interno del div wrapper con una larghezza di 840 pixel e Aggiungi il tuo wrapper.png a questo strato come un'immagine di sfondo ripetuta sull'asse y, o verticalmente. Aggiungere un elemento div con ID "leftSideBar" con alcuni contenuti per dare profondità al vostro div del contenuto, che si estende sullo sfondo bianco, così si può vedere l'effetto dell'ombra. La codifica della pagina HTML è simile al seguente:

< html >

< head >

< style type = "text/css" >

corpo () {

margin: 0;

padding: 0;

Priorità bassa: #ffcc99;

}

Wrapper () {

Larghezza: 840px;

Posizione: parente;

auto di margin: 0;

}

contenuto () {

Larghezza: 840px;

background:URL(wrapper.png) repeat-y;

Posizione: absolute;

}

leftSideBar {

float: left;

Larghezza: 90px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

linea-altezza: 18px;

Color: #000;

padding: 20px 10px 20px 40px;

margin: 0;

}

< / stile >

< / head >

< corpo >

< div id = "wrapper" >

< div id = "contenuto" >

< div id = "leftSideBar" >

< p > testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui </p >

< / div >

< / div >

< / div >

< / body >

< / html >

6

Salvare la pagina, aprirlo in un browser e verifica che l'ombra appare dietro la zona di wrapper.