-
Tutorial para la envoltura Div en Photoshop
-
Uno de los grandes misterios en el diseño web es cómo conseguir un efecto de sombra detrás del área de contenido principal, que a menudo es blanco o de color claro y se refiere como la envoltura. La creación de la imagen adecuada en un editor de imágenes, como Photoshop, es la mitad de la batalla. El uso de la imagen como fondo de repetición en una etiqueta div HTML es la otra mitad. La imagen de hecho se encuentra dentro de su propio div dentro del div "contenedor" en la página.
Instrucciones
1 Crear un nuevo documento en Photoshop que es de 840 píxeles de ancho por 1000 píxeles de profundidad. Haga doble clic en la capa de fondo en la paleta de capas para que sea una capa editable. El espacio de trabajo debe tener un fondo de tablero de ajedrez, lo que indica la transparencia.
2 Crear un rectángulo en el escenario con la función "Marqués del rectángulo" (rectángulo de puntos) en la barra de la izquierda. No se preocupe por el tamaño dibuja. Haga clic sobre el cuadro y seleccione "Transformar selección." Haga clic en el cuadro superior izquierdo en el indicador de "punto de referencia ubicación" en la barra de herramientas en la parte superior del espacio de trabajo. Se parece a un tablero del dedo del pie de Tic Tac de clases. Esto orienta sus coordenadas x, y de la parte superior izquierda del área de trabajo. En los campos del formulario referencia a la derecha del indicador, defina su coordenada x 20 píxeles y su anchura de 800 píxeles. Esto centra el rectángulo en el espacio de trabajo y deja 20 píxeles en cada lado de la sombra. Haga doble clic en el rectángulo para volver a su rectángulo marqués. Haga clic sobre él, seleccione "relleno" y seleccione "White" de sus opciones.
3 Haga clic en el botón "Añadir un estilo de capa" (F) a lo largo de la parte inferior de la paleta Capas y seleccione "Resplandor exterior". Haga doble clic en el campo "Establecer color de resplandor" en la ventana que se abre y entra 333333. Configure su "opacidad" al 100 por ciento y "Spread" y "Tamaño" a 5. "ruido" y "jitter" debe establecerse en 0 y "Rango" a 50, los valores por defecto para los tres. Haga clic en Aceptar." El efecto del tipo de sombra debe aparecer alrededor del rectángulo, a pesar de que aparecerá menos pronunciada que la forma en que se verá en su página web.
4 Establecer su herramienta "Recortar" a 840 píxeles para el ancho y 2 píxeles para la profundidad. Arrastre la herramienta "Recortar" de un lado del espacio de trabajo a otro, cortando una cuña de 2 píxeles de profundidad en la parte central de su rectángulo. Haga doble clic en la herramienta "Recortar" en la barra de herramientas para confirmar el cultivo (ya que no tienen lugar para hacer doble clic sobre la imagen delgada). Una pequeña cantidad de la luz se mostrará en ambos lados de la imagen recortada dentro de los 20 píxeles de área transparente que has dejado en cada lado. Guarde el archivo como "wrapper.png" en el formato PNG a la misma carpeta que la página Web.
5 Abra el documento HTML y crear un div envoltorio con el ID de "contenedor" que es de 840 píxeles de ancho y centrada en la página. Crear un div con el ID de "contenido" que se encuentra en el interior del envoltorio div con un ancho de 840 píxeles y añadir su wrapper.png a esta capa una imagen de fondo que se repite en el eje y, verticalmente o como. Añadir un div con el ID de "leftSideBar" con un cierto contenido para dar profundidad a su div de contenido, que se extiende el fondo blanco para que pueda ver el efecto de la sombra. La codificación de la página HTML es el siguiente:
<Html>
<Head>
<Style type = "text / css">
cuerpo {
margin: 0;
padding: 0;
background: # FFCC99;
}
envoltorio {
Anchura: 840px;position: relative;
margin: 0 auto;
}
contenido {
Anchura: 840px;background: url (wrapper.png) repeat-y;
position: absolute;
}
Barra lateral izquierda {
flotador izquierdo;Ancho: 90px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: # 000;
padding: 20px 10px 20px 40px;
margin: 0;
}
</ Style>
</ Head>
<Body>
<Div id = "contenedor">
<Div id = "contenido">
<Div id = "leftSideBar">
<P> texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí el texto aquí </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
6 Guarde la página, abrirlo en un navegador y compruebe que la sombra aparece por detrás de la zona de envoltura.
