Cargando



Crear fondo para web con Photoshop CS6

Os muestro y aprenderemos como hacer un fondo para web utilizando Photoshop CS6.


oct 24 2014 05:30
Intermedio
oct 24 2014 18:10
Los fondos o imágenes de background son una de las partes visuales más desafiantes de conseguir en una propuesta web, hay momentos en los que un color plano resuelve el problema, pero hay otros casos en los que necesitamos agregar un patrón o figura al fondo y al hacerlo este debe parecer continuo, sobre todo si estamos diseñando algo que va a ser responsive.

Para ello podemos crear fondos con texturas y mediante algunos trucos podemos hacer que parezca ilimitados y sin costuras, de esta manera podremos lograr un resultado que luzca profesional y no tener que repetir una y otra vez la misma imagen.

Crear la base


Lo primero que debemos hacer es crear nuestra base, para ello podemos hacer dos cosas, la primera es dibujar nuestros patrones y texturas a mano en un documento aparte y luego importarlas o la segunda podemos utilizar los patrones ya incluidos en Photoshop para lograr los objetivos.

Como estamos aprendiendo a hacer el fondo vamos a decantarnos por la segunda opción, así que sigamos los siguientes pasos:

1- Vamos a crear un nuevo documento y sobre este vamos a hacer una base, en la capa más baja o de fondo vamos a colocar el color que deseemos.

2- Luego vamos a utilizar la herramienta de formas personalizadas de Photoshop y vamos a crear una capa por cada una de las formas que deseamos utilizar, debemos tener especial cuidado de no salirnos de los límites del documento:

photoshopcs6-fondo-web.jpg


3- Utilizamos capas para poder acomodar los patrones a nuestro gusto, por lo que una vez que ya estén como los queremos vamos a seleccionar cada una de las capas que lo contienen, para ello hacemos click en cada una mientras presionamos la tecla SHIFT, esto hará que todas las que toquemos queden seleccionadas juntas.

4- Ahora vamos a utilizar la herramienta para fusionar las capas o simplemente presionamos la combinación CTRL + E en nuestro teclado.

5- Por último vamos a ocultar las capas individuales y dejaremos solo la nueva capa con todas las formas fusionadas:



photoshopcs6-fondo-web2.jpg


Finalizando el fondo


Si dejamos el fondo como lo creamos en la sección anterior, al utilizarlo en un ejemplo de la vida real, nos daremos cuenta que tendremos muchos espacios vacíos sin figuras que rompen lo que queremos lograr de un fondo sin costuras o límites. Así que para ello debemos seguir estos pasos.

1- Vamos a seleccionar la opción Filtro, luego la opción Otros y finalmente la opción desplazamiento, aquí vamos a crear un desplazamiento vertical de la mitad del tamaño de nuestro documento y lo mismo para el desplazamiento horizontal.

2- Finalmente seleccionamos la opción inferior de vuelta completa y quedaremos con un resultado como el siguiente:

photoshopcs6-fondo-web3.jpg


3- Para completar el fondo solo necesitamos volver a incorporar formas que llenen el espacio vacío que nos quedó en el centro de la imagen, respetando sus límites.

4- Exportamos para web y ya tenemos nuestro fondo:



photoshopcs6-fondo-web4.jpg


Al aplicar este nuevo fondo veremos que se repite sin mostrar ningún tipo de costura o final, por lo que pareciera que fuese infinito con lo que finalizamos este tutorial habiendo creado un buen fondo con texturas para nuestras propuestas web.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X