¡Hola! Mi nombre es Nelly Natalí y este es mi blog personal.

Si quieres saber más sobre mí también puedes cotillear mis perfiles en twitter y linkedin.

Categorías
Diseño

Recursos: un patrón que se repite

y se repite y se repite.. hasta crear un bonito fondo para tu página web.

¿Cómo crear un patrón / motivo / fondo?

Lo primero que tienes que saber es, que un motivo es una imagen normalmente con formato .gif y poco peso, que se crea para usarla de manera que se repita cómo fondo, ya sea de una página web o de una imagen en sí. Se pueden crear de forma que cada imagen sea independiente o que se corresponda una con otra.

Para crear un motivo para una imagen con photoshop:

1. Crea un documento nuevo de 1px de ancho y 3px de alto, con fondo transparente.
(Archivo > Nuevo / File > New)
2. Pinta un pixel de un color.
3. Guardalo cómo motivo.
(Edición > Definir motivo / Edit > Define Pattern)

Para usarlo, elige la capa a la que quieras añadirle el motivo, selecciona la herramienta Bote de Pintura (Paint Bucket), y en la barra de herramientas de éste, te aparecerá un menu desplegable que te permite elegir si deseas pintar con un color (Foreground) o con un motivo (Pattern), seleccionas motivo y sólo te queda elegir el motivo que quieras del desplegable que aparece al lado.

motivos00

Para crear un motivo para nuestra página web:

1. Crea una imagen, puedes usar la imagen del anterior ejemplo, sólo tienes que guardarla cómo gif.
(Se guarda cómo gif en este caso, porque no le hace falta más, pero la imagen puede tener el formato que quieras.)
2. Guarda la imagen en un directorio de tu página web.
3. Añade con CSS la imagen al fondo de tu página:

body { background: url(ruta/imagen.gif) repeat left top; }

La hemos colocado cómo fondo al cuerpo de nuestra web, pero si queremos podemos ponerla cómo fondo de un div o una tabla, simplemente cambiaremos body por el elemento que deseemos (table, input, div, etc.)
Con repeat indicamos que se repita en todas las direcciones, si sólo queremos que se repita hacia los laterales utilizaremos repeat-x y si por el contrario sólo queremos que se repita verticalmente utlizaremos repeat-y.

Motivos para ver y descargar:

motivos01

Hay cantidad de webs que ofrecen la descarga gratuita de motivos, aquí os dejo unas cuantas:

http://www.amosaico.com/

http://squidfingers.com/patterns/

http://www.flickr.com/groups/patterrific/

http://webdesignledger.com/

http://deviantart.com/

http://www.dinpattern.com/

Con estos enlaces ya tenéis entretenimiento para unas cuantas horas.. xD

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *