Fondo sombreado para web con photoshop y css

Los aprendices de css como yo necesitamos los trucos o tips para poder empezar con esto del diseño web y las hojas de estilo.

Comencemos con una sencilla forma de poner un reborde sombreado en los laterales de cualquier "caja contenedora". Nos basaremos en un artículo de desarrolloweb.com.

En este ejemplo partimos de que se tratará de una caja contenedora central que tendrá un ancho de 700px. Para otras medidas habrá que cambiar las cifras aquí aportadas.

Para cada una de las acciones que realicemos es recomendable utilizar capas diferentes, de este modo podremos modificarlas a posteriori si lo deseamos.

1. Con photoshop o un programa de diseño análogo creamos un archivo nuevo de 1100px de ancho x 20px de alto.

2. Ponemos el color de fondo que queramos (también podemos realizar un motivo que se vaya a repetir como rayas de color horizontal alternadas).

3. Seleccionamos en la parte derecha 350px de ancho por todo el alto (para saber la medida exacta utilizaremos la ventana de "info" en photoshop). La medida que elijamos será exactamente la mitad de lo que queramos que sea de ancha nuestra "caja contenedora". Rellenamos de color blanco la selección (este será el color de fondo de nuestra "caja contenedora" así que cuando digo blanco quiero decir cualquier color que se quiera).

4. Hacemos una selección de 20px x 20 px en la zona coloreada que comience justo en el borde que la separa la zona blanca.

5. En esta selección realizamos un degradado que vaya de negro a transparente de derecha a izquierda. Si nos ha quedado demasiado oscuro podemos quitarle opacidad a la capa.

6. Acoplamos la imagen (no sin antes haber guardado el trabajo conservando las capas). Seleccionamos todo, duplicamos (copiar y pegar) y volteamos horizontalmente la copia de la imagen que se habrá creado en una nueva capa.

7. Modificamos el ancho del lienzo al doble de lo que teníamos (en este caso a 2200px) y trasladamos la copia de la imagen volteada al límite derecho para que queden alineadas ambas imágenes. Nos habrá quedado una imagen simétrica con el centro blanco y los bordes de color. Guardamos para web ya que éste será nuestro fondo.

8. Para incluirlo en css deberemos establecer esta imagen como fondo y repetir verticalmente. En la hoja de estilos la sentencia sería algo como:

BODY{
background: url(imagen-fondo.gif) center repeat-y;
}

¡Y ya tenemos nuestro fondo creado!

Nota: en una actualización posterior incluiré imágenes que ilustren cada uno de los pasos seguidos.