ubiquitour.com

Tutorial para el Div contenedor en Photoshop

Uno de los grandes misterios en el diseño web es conseguir un efecto de sombra de la gota detrás del principal área de contenido, que a menudo es blanco de color y se refirió a como el wrapper. Crear la imagen adecuada en un editor de imágenes, como Photoshop, es mitad de la batalla. Utilizando la imagen como un fondo de repetición en un div HTML es la otra mitad. La imagen se sienta realmente dentro de un div dentro del div "contenedor" en la página.

Instrucciones

1 Crear un documento nuevo en Photoshop que es 840 píxeles de ancho por 1.000 píxeles de profundidad. Haga doble clic en el 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, que indica la transparencia.

2 Crear un rectángulo en el escenario utilizando la herramienta "Rectángulo de Marqués" (rectángulo punteado) en la barra de herramientas izquierda. No te preocupes el tamaño que dibuje. Haga clic derecho sobre el cuadro y seleccione "Transformar selección". Haga clic en el cuadro superior izquierdo en el indicador de "Ubicación de punto de referencia" en la barra de herramientas en la parte superior del área de trabajo. Parece un tablero de Tic Tac Toe de las clases. Esto orienta su coordenadas x, y en la parte superior izquierda del área de trabajo. En los campos del formulario de referencia a la derecha del indicador, establecer su coordenada x 20 píxeles y su ancho de 800 píxeles. Esto centra el rectángulo en el espacio de trabajo y hojas 20 píxeles a cada lado de la sombra. Haga doble clic en el rectángulo a su rectángulo de Marqués. Haga clic derecho sobre él, seleccionar "Rellenar" y elija "Blanco" en sus opciones.

3 Haga clic en el botón de "Añadir un estilo de capa" (F) a lo largo de la parte inferior de la paleta capas y seleccione "Exterior iluminado." Haga doble clic en el campo "Set Color de resplandor" en la ventana que se abre y 333333. Establece su "opacidad" en 100 por ciento y el "Spread" y "Tamaño" para 5. "Ruido" y "Jitter" debe establecerse en 0 y "Gama" a 50, los valores predeterminados para los tres. Haga clic en "Aceptar". El efecto del tipo de sombra debe aparecer alrededor del rectángulo, aunque aparece que menos pronunciado que el cómo se verá en su página web.

4 Configurar la herramienta "Recortar" a 840 píxeles para la anchura y 2 píxeles para la profundidad. Arrastre la herramienta "Recortar" de un lado del espacio de trabajo a otro, cortar una cuña de 2 pixeles profundo por el medio de tu rectángulo. Haga doble clic en la herramienta "Recortar" en la barra de herramientas para confirmar el cultivo (ya que no tienes al hacer doble clic en la imagen delgada). Una pequeña cantidad de la luz mostrará a ambos lados de la imagen recortada dentro de los 20 píxeles de área transparente que deja a cada lado. Guarde el archivo como "wrapper.png" en formato PNG en la misma carpeta como su página Web.

5 Abra el documento HTML y crear un contenedor div con el ID "contenedor" que es de 840 píxeles ancho y centrados en la página. Crear un div con el ID de "content" que se encuentra dentro de la div de contenedor con un ancho de 840 píxeles y agrega a su wrapper.png a esta capa como una imagen de fondo repetida en el eje y, o verticalmente. Agregar un div con el ID de "leftSideBar" con algunos contenidos para dar profundidad a tu div content, estirar el fondo blanco para que pueda ver el efecto de la sombra. La codificación de la página HTML se ve así:

< html >

< head >

< estilo tipo = "text/css" >

{cuerpo}

margen: 0;

padding: 0;

fondo: #ffcc99;

}

{} de la envoltura anchura: 840px;

posición: pariente;

auto del margen: 0;

}

{contenido} anchura: 840px;

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

posición: absoluto;

}

leftSideBar {} flotante: izquierda;

width: 90px;

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

fuente-tamaño: 11px;

línea-altura: 18px;

color: #000;

padding: 20px 10px 20px 40px;

margen: 0;

}

< / estilo >

< /HEAD >

< cuerpo >

< div id = "wrapper" >

< div id = "contenido" >

< div id = "leftSideBar" >

< p > texto texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí texto aquí aquí aquí el texto < /p >

< / div >

< / div >

< / div >

< /body >

< / html >

6 Guarde su página, ábralo en un navegador y compruebe que la sombra aparece detrás de su área de envoltura.