Fondo tipo mosaico a partir de una imagen con Photoshop

Partiendo de una imagen y utilizando Photoshop haremos un fondo para página web, que se vea bien tramado al hacer el mosaico.

Vamos a crear un fondo con Photoshop a partir de una imagen. El fondo lo utilizaremos en una página web y se mostrará creando un mosaico. El objetivo de este artículo es explicar cómo se deben hacer los retoques en la imagen, de manera que el mosaico creado se vea correctamente tramado.

Esta técnica se puede hacer con distintos tipos de imágenes, por ejemplo con unas nubes o una pared de ladrillos. Al hacer el mosaico, la página se mostrará con todo el fondo lleno de nubes o ladrillos. En nuestro ejemplo hemos partido de una imagen con unas raíces. El resultado final será un fondo de una página todo lleno de raíces.

Podemos ver el ejemplo en una página aparte.

Primero creamos una selección de un trozo de la imagen inicial. Haremos la selección del área que más nos guste. El tamaño escogido puede variar, pero nos fijaremos que tanto la altura como la anchura sea divisible por dos, para facilitar el siguiente paso.

Copiaremos la selección y la pegaremos en un documento nuevo. Luego, sobre este nuevo documento, haremos un filtro de desplazamiento. Esto se hace desde el menú Filtro - Otros - Desplazamiento... En la ventana de propiedades del filtro nos solicitan los píxeles que se desea desplazar horizontal y verticalmente. En estos campos colocaremos la mitad del tamaño horizontal y vertical de la imagen. Por ejemplo, si la imagen tenía tamaño 176x148, el desplazamiento horizontal sería de 88 y el vertical de 74.

El resultado obtenido después de hacer el filtro es el siguiente:


A continuación, para que el fondo se vea correctamente tramado al hacer el mosaico, debemos disimular los cambios bruscos que hay en el dibujo en la parte central.


Para disimular esta área utilizamos la herramienta "Tampón de clonar", clonando en el área central otras partes de la imagen, de modo que se disimulen esos cambios bruscos en el dibujo.


Por si alguien no sabe utilizar la herramienta "Tampón de clonar" hay que decir que con la tecla "alt" y pinchando con el ratón en una parte de la imagen, se selecciona el punto desde donde vamos a copiar. Luego soltando la tecla "alt", pintamos en cualquier otra parte de la imagen. Se pintará clonando el dibujo del área seleccionada previamente.

Dependiendo de la imagen de la que hemos partido, el proceso de clonar puede ser más o menos complicado. Nuestra imagen resultado, después de haber hecho los cambios, es la que utilizaremos como fondo de la página.

Se puede ver la imagen obtenida aquí.


Se puede ver el ejemplo en marcha en una página aparte.

+ 1 manual relacionado
+ 2 categorias relacionadas

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Guias de diseño
+ Entrar en Photoshop

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba