Como hacer un degradado como fondo de una página web

10 de noviembre de 2011
Valoración del artículo:
En este tutorial vamos a explicar como realizar un degradado utilizando el programa Photoshop y poder utilizar este degradado como fondo en una pagina Web.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Esta técnica es muy útil, no solo por el efecto visual, sino por optimizar el peso de la pagina Web, ya que estamos utilizando un grafico de menor tamaño.

El primer paso que debemos hacer será abrir el programa Photoshop, una vez hecho esto debemos abrir un nuevo documento Menú/Nuevo aparecerá una ventana emergente donde debemos indicar las dimensiones en este caso hemos elegido 1600x768.

El siguiente paso será seleccionar la herramienta Degradado y en el selector de color debemos elegir los colores que queramos degradar, en este caso hemos seleccionado como color principal el morado que degradara hacia el blanco.

Justo debajo de la barra de Menú aparecerán todas las opciones para utilizar la herramienta degradado, donde podemos modificar las opciones o probar con algunos degradados predeterminados. Tenemos las opciones de: Degradado lineal, degradado radial, degradado de ángulo, degradado reflejado, degradado de diamante.

Nosotros simplemente hemos elegido dos colores, (morado y blanco) y hemos aplicado un degradado lineal.

Cuando ya tenemos el degradado seleccionado lo que tenemos que hacer es pinchar en la hoja en blanco y sin soltar el botón izquierdo arrastrar, de este modo elegimos la forma que queremos darle al degradado.

Por ultimo guardamos la imagen del degradado con el formato y el nombre que queramos, (nosotros lo hemos guardado como fondodegradado.jpg). Es importante recordar el nombre y la extensión, para luego ponerlo en el código.

El ejemplo final será este

Una vez que tenemos nuestro grafico para usarlo de fondo, tendremos que poner el siguiente código, dentro de la etiqueta ;

<style type="text/css">
body {background-color: #f1ebaf;}
body {background-image: url('fondodegradado.jpg');}
body {background-repeat: no-repeat;}
body {background-position: 50% 0;}
body {margin: 0px 0px 0px 0px;}
</style>

Lo único que debemos tener en cuenta es que el color de la pagina sea el mismo con el que termina el degradado y de este modo conseguir que el degradado se acople al color de la pagina.

Parámetros a tener en cuenta en el código:

{bgcolor="#FFFFFF": En esta etiqueta ira el color que hayáis elegido para el fondo de la pagina.
{background-image: url('fondodegradado.jpg'): En esta etiqueta le daremos la ubicación o path del grafico.
{background-repeat: no-repeat: Esta etiqueta nos indica que el grafico no se repita, es decir, que no cree un mosaico.
{background-position: 50% 0;: Esta etiqueta nos dice la posición de nuestro grafico en la pagina Web.
{margin: 0px 0px 0px 0px;: Esta etiqueta nos esta diciendo no deje ningún margen alrededor del grafico.

Esto también se podría realizar en una pagina Web donde tengamos una cabecera creada con un include, (Cómo crear un include).

La página web debería de quedar con en el ejemplo que os dejamos a continuación;

Comentarios

Los comentarios de los visitantes son para ampliar la
información del artículo. Cualquiera puede participar.

Añadir un comentario al artículo Publicar un comentario del artículo

Mostrando 2 comentarios revisados

 Respuesta
17/11/11 

Comentario de Darkown:

esta bueno el tuto pero le faltan optimizar la imagen y tambien la optimizacion en html


 Como hacer un degradado como fondo en una página web
18/11/11 

Comentario de Miguel:

Otra opción es crear una imagen 1600 veces mas pequeña lo que aligerará la descarga. Para ello, antes de guardar la imagen nos vamos al menú Imagen/Tamaño de imagen, desmarcamos la opción de Restringir proporciones y modificamos la imagen a 1 pixel de ancho antes de guardarla. Después cambiamos background-repeat: no-repeat; por background-repeat: repeat-x; y ya está.


Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se ha encontrado un comentario sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...