Photoshop y Tutoriales

Etiquetas: css, diseño de paginas web, dreamweaver, photoshop, tutorial, web

Con ayuda del CSS podemos crear preciosos fondos de páginas web, bueno … en realidad no los creamos sino los acomodamos dnetro de la página web para darle más calidad gráfica al diseño, en este mini tutorial te explicaré como hacer la imagen en Photoshop y luego poner esa imagen de fondo de nuestro documento html y luego como con unas cuantas lineas de código CSS centrar la imagen, de esta forma no importa la version de navegador o resolución de pantalla que nos visite, el website siempre tendrá el mismo aspecto, al menos mostrará siempre el background en la misma posición.

Comenzamos creando un documento nuevo en Photoshop de 2000px de ancho por 1000px de alto, se que pareciera exagerado, pero es mejor tener una imagen grande, recuerda que hay resoluciones de monitores muy grandes.

Establece #ffffe5 como color de fondo, para efectos de este tutorial este es el color a utilizar, debido a la imagen que voy a emplear como fondo de mi página web, lo que quiero es que si la imagen termina de mostrarse que siempre se vea ese color de fondo como background.

Inserta un rectángulo de color blanco, de 1000px de ancho por 1200px de alto, el ancho debe corresponder con el area visible de tu pagina web, es decir, si tienes un diseño fijo que ocupa 1000px de ancho este debes tomarlo en cuenta para el rectangulo que acabamos de insertar, ya que este estará exactamente debajo del contenido de la página web.

Duplica la capa, ahora el rectangulo de abajo cambiale el color a Negro y aplicale en Filtro / Desenfocar / Desenfoque Gausiano, esto es para que tenga el aspecto difuminado, cuando termines pasa el cuadro negro debajo de la capa blanca, el resultado debería darte un documento en photoshop como el que se ve en la imagen:

Ahora falta la imagen que vamos a utilizar, para efectos del tutorial he utilizado esta imagen. La cual deberás insertarla debajo de todas las capas, inclusive debajo de la capa con el rectangulo negro, cuando lo termines guarda el documento, yo lo llamé “background-website.jpg”:

Ahora en Dreamweaver vamos a la parte final de este tutorial, que será armar nuestro documento html y colocarle el background que previamente realizamos en Photoshop:

Ahora para centrar nuestro background desde el CSS y que esta no cambie su posicion agregaremos “Background-posicion: 50% 0%” ya con esto tenemos nuestra imagen centrada en nuestro documento html.

En nuestro HTML insertamos el texto o las imagenes que necesitemos, en otras palabras le agregamos el contenido a nuestra página web, ya sea este dentro de una tabla o dentro de un DIV centrado, yo utilicé tabla.

Listo!, presiona F12 y deberías tener el siguiente resultado:

Espero que este tutorial para insertar imagen de fondo y centrarla con CSS te sea de utilidad, no te pierdas los tutoriales del curso gratis de diseño de páginas web para que aprendas el proceso de creación de páginas web desde cero.

Comentarios, consultas, dudas, sugerencias porfavor utliza los comentarios.