Cómo crear un diseño de página web con temática de acuarela con Photoshop

La acuarela en el diseño gráfico se ha puesto muy de moda el último par de años, muchos sitios web y diseñadores excepcionales están utilizando este estilo y llevándolo a otro nivel. Incluso conocer la técnica es importante en este tipo de diseño, se trata sobre todo de la creatividad y la experimentación. Aprenderás a utilizar el Pincel histórico y a combinarlo con pinceles personalizados de acuarela para crear una bonita imagen de fondo de encabezado y mucho más. ¡Vamos a empezar!

Vista previa de la imagen final

Echa un vistazo a la imagen que crearemos.

Detalles del tutorial

• Programa: Adobe Photoshop CS4
• Dificultad: Intermedio - Avanzado
• Tiempo estimado de realización: 4 horas

Vídeo tutorial

Nuestro editor de video Gavin Steele ha creado este video tutorial para complementar este tutorial de texto + imagen.

Antes de empezar

Este tutorial no debe ser seguido como una guía paso a paso, muchos de los pasos son descripciones del proceso creativo involucrado en la realización de este estilo de diseño en particular. Aunque este no es un tutorial básico, puede ser fácilmente seguido por cualquier nivel de usuario de Photoshop, pero me saltaré la explicación de instrucciones muy básicas como añadir una Guía o crear una Máscara de capa.

Como diseñador web a tiempo completo, tengo experiencia en tratar con clientes que necesitan un diseño terminado en cuestión de días o incluso horas, y cuando vas mal de tiempo cada minuto es oro precioso, así que intentaré darte algunos consejos para ahorrar tiempo que te serán útiles más adelante.

No todos los diseñadores conocen CSS, si eres uno de ellos debes saber desde el principio que estás diseñando algo que será sectorizado y puesto en pedazos; los fondos repetidos, las capas de texto y los fondos de imágenes grandes deben estar perfectamente colocados en el diseño para evitar cambios no deseados.

Imagina lo que quieres lograr

Es una buena idea empezar con un boceto o un esquema para tener una idea de dónde colocar los elementos en el lienzo. Aquí está mi borrador:

Para este diseño voy a optar por un ancho fijo y elementos alineados al centro. ¡Empecemos a diseñar!

Paso 1 - Configuración de la plantilla

Vamos a descargar una plantilla PSD de 960 Grid System, abre la plantilla de 12 columnas. Esto no es obligatorio, puedes empezar a crear un documento de 960px de ancho y dibujar algunas guías en él, pero descargar la plantilla te ahorrará un par de minutos. Ábrela y guárdala con el nombre que quieras.

Tendrás que ampliar el ancho de la imagen para ver cómo queda tu diseño en resoluciones más amplias, para ello ve a Imagen > Tamaño del lienzo y pon el valor del ancho a 1420 píxeles, desde el centro hacia los lados. Pongo todas las capas integradas en la plantilla en una carpeta llamada "Plantilla".

Paso 2 - Fondo de repetición principal

Encuentra una bonita textura de papel, yo estoy usando esta. Esta imagen se repetirá en todo el fondo de la página, pero necesita un poco de edición previa. Selecciona un cuadrado de la textura de papel usando la herramienta Marco rectangular, copia el área y pégala en un nuevo documento (puedes elegir Portapapeles en el desplegable de Ajustes preestablecidos). Luego, ve a Filtro > Otros > Desplazamiento y allí cambia los valores Horizontal y Vertical para poner el desplazamiento de los bordes cerca del centro. A continuación, utilizando la herramienta Clonar, corrige las líneas marcadas en el centro. Una vez que hayas terminado de clonar, selecciona todo (Comando + A) y copia la imagen editada en el portapapeles.

Paso 3 - Configuración del fondo infinito

Copia el trozo de papel y pégalo en el documento principal. Utilizando los Controles de Transformación libre pega el lado derecho de la imagen sobre la Guía del medio, el lado izquierdo sobre la primera Guía de la izquierda, y el borde superior coincidiendo con la parte superior del documento.

Una vez que hayas colocado perfectamente el primer trozo de papel, duplícalo y colócalo a la derecha, de esta manera estarás cubriendo el área real de 960px. Luego duplica las piezas de Papel dos veces a la izquierda y a la derecha de los límites de 960px para cubrir toda la superficie del lienzo, luego toma las 4 capas de papel, duplícalas verticalmente y colócalas debajo de las existentes, hazlo tantas veces como sea necesario hasta cubrir todo el lienzo. Finalmente coloca todas las capas de papel en una carpeta llamada "Textura de fondo", y si lo deseas para una manipulación más fácil duplícala, combina el grupo y oculta la carpeta original.

Paso 4 - Fondo del encabezado

Ahora vamos a añadir el fondo del encabezado, para ello estoy utilizando esta imagen de un paisaje de montaña. Usando la herramienta Marco seleccionamos una porción amplia de la imagen y la pegamos en el documento principal y nombramos la capa algo así como "Paisaje".

Ahora le daremos a esta imagen un falso estilo HDR, que la hará parecer más una pintura que una fotografía. Duplícala y pulsa Comando + I para invertir los colores, ajusta la Saturación a -100 en el panel Tono/Saturación (Comando + U) y luego cambia su Modo de fusión a Superponer. Finalmente selecciona ambas capas "Paisaje" y "Copia de paisaje" en una sola.

Paso 5 - Uso del pincel histórico

Ahora usaremos el Pincel histórico para hacer que nuestra imagen parezca una pintura, selecciona el Pincel histórico haciendo clic y manteniendo sobre la herramienta Pincel histórico (Y) en el Panel de herramientas. Para que esta maravillosa característica funcione, necesitarás crear primero una Instantánea para trabajar con ella, para ello ve a Ventana > Historia para mostrar el panel Historia, y haz clic sobre el botón de Nueva instantánea en la parte inferior. Luego, en el panel Opciones, elige cualquier punta de pincel irregular (yo estoy usando una punta de tiza de 36px) ajusta el Modo a Normal, la Opacidad al 25%, el Estilo delgado, el Área 25px y la Tolerancia 0%. Luego pinta sobre la capa "Paisaje", verás como la imagen se convierte en una pintura con bastante facilidad.

Después, sólo tienes que cambiar los valores de Opacidad, Área y Punta de pincel según tus necesidades, por ejemplo, yo estoy usando una Punta de pincel más grande y aumentando su área para pintar sobre los bordes.

Paso 6 - Máscara de capa de acuarela

Crea una Máscara de capa > Descubrir todo a la capa "Paisaje", ahora intentaremos combinar mejor la imagen con el fondo infinito utilizando algunos pinceles de acuarela. Yo estoy usando este Conjunto de pinceles de acuarela de mcbadshoes. Mantén este conjunto de pinceles a mano ya que lo usaremos durante todo el proceso.

Toma cualquiera de los pinceles, establece el color de primer plano en Negro y pinta algunas marcas directamente sobre la Máscara de capa, lo cual es importante. Estos pinceles tienen diferentes opacidades para que puedas jugar con ellos; en caso de que estés usando otro conjunto de pinceles, deberás cambiar los valores de Opacidad y Flujo del pincel cada vez que pintes una marca. La idea de este paso es fundir los bordes de la imagen con el fondo de papel, intenta colocar tus marcas de acuarela por todo el borde con algunas manchas dentro de la imagen.

No importa si el paisaje está fuera de las Guías de la plantilla, puedes sectorizar el encabezado como una gran imagen de fondo al momento de codificar.

Paso 7 - Agrega un degradado superior

Solo para hacer la codificación un poco más difícil (es una broma) vamos a añadir una Capa de relleno de degradado vertical (#96AFCE - #FFFFFF) y establecer su Modo de fusión en Subexposición lineal.

Paso 8 - Fondo del contenido

Usando la herramienta Rectángulo redondeado, establece el Radio del vértice a 15px en el panel de opciones y dibuja un rectángulo desde la segunda guía de la izquierda hasta la penúltima guía del lado derecho. A menudo utilizo esas guías por si acaso necesito añadir una sombra paralela o algún otro efecto al fondo más adelante. En este caso dejaremos el Rectángulo Redondeado como está, solo cambiando su valor de Relleno a 35% y añadiendo un estilo de Trazo interior de 1px. El cambio de la opacidad de relleno hace que los efectos de capa retengan mucho color para que el trazo se vea realmente bien y todavía se pueda mantener un poco de fondo de acuarela a través del relleno. Puedes nombrar esta capa como "Contenido Bg".

Es importante establecer todos los efectos de trazo dentro del objeto, añadir un trazo fuera aumentará la dimensión del elemento y no queremos eso.

Paso 9 - Piensa como un codificador

Aunque nuestro fondo translúcido se ve muy bien, codificarlo será un poco difícil, pero no imposible. Es más fácil codificar un fondo de color uniforme que uno transparente, así que duplica el Rectángulo redondeado y coloca la copia sobre él. Vuelve a poner el Relleno al 100% y oculta el Estilo de trazo. Ahora añade una Máscara de capa > Ocultar todo y rellénala con un degradado lineal de negro a blanco para ocultar la parte superior del nuevo Rectángulo redondeado. Puedes ayudarte con un par de Guías horizontales adicionales.

¿Cómo funciona? Este contenido debe ser desplazable verticalmente, por lo que el fondo blanco infinito debería ser fácil de expandir hasta el fondo; ¡probemos! Toma la herramienta de Selección directa (A) y selecciona los puntos inferiores del Rectángulo vectorial, luego usando los Cursores mueve los puntos unos pocos píxeles hacia abajo, debería funcionar bien.

Paso 10 - Páginas de navegación

Usando la herramienta Rectángulo redondeado, añade un rectángulo azul (#3F5060) en la parte superior del diseño, establece su valor de Relleno al 50% y añade un estilo de capa de Trazo azul de 1px (#3F5060). Usando la herramienta Texto, escribe las páginas sobre la capa de fondo de navegación, estoy usando la tipografía "Futura Std" en esta ocasión, pero siéntete libre de cambiarla.

A continuación, pinta una pequeña marca de acuarela blanca detrás del texto como un efecto "hover" y cambiar el color de la palabra seleccionada a azul oscuro (#223A54).

Paso 11 - Fundir los fondos

A continuación, rasteriza la capa "Content Bg" o conviértela en un objeto inteligente, añade una Máscara de capa > Descubrir todo y, con un pincel difuso negro, pinta algunos puntos sobre la máscara de capa. Este proceso fundirá el "Contenido Bg" con el paisaje de acuarela dando al diseño un aspecto pulido.

Paso 12 - Título de la página

Añadamos el título de la página. Estoy usando el tipo de letra "Futura Std". Estoy usando estos colores para el texto: #F2F6FC y #E1EDFF. Ahora para el fondo, pinta una sola marca de acuarela azul (#112C37) en una capa debajo de las capas del logotipo y cambia su Modo de fusión a Luz suave. Es una buena idea organizar nuestras capas en carpetas, así que pondremos todas las capas involucradas en una carpeta llamada "Logo".

Paso 13 - Más marcas de acuarela

Para aumentar el impacto visual del fondo, añade más marcas de acuarela utilizando varios colores, colócalas todas a lo largo del borde superior justo encima de la capa "Paisaje". A continuación, cambia el Modo de fusión a Superponer. Por último, añade una gran marca de acuarela azul cielo (#51D3D3) en una nueva capa justo encima de "Paisaje" y debajo de "Contenido B.g". Luego cambia su Modo de fusión a Superponer.

Paso 14 - ¿Qué tal si añadimos un pincel real?

Usar objetos de la vida real en el diseño web está muy de moda, vamos a añadir una imagen de un pincel real a nuestro diseño. Abre esta imagen, extrae una parte del pincel y pégala en el diseño principal a través del encabezado con su punta cerca de la marca de acuarela creada en el paso anterior. Puedes utilizar una Máscara de capa y un pincel negro pequeño y difuso para difuminar la punta del pincel.

Paso 15 - Añade una sombra paralela realista

Duplica la capa "Pincel", nombra la copia "Sombra de arbustos" y ponla detrás de la original, luego ve al panel Tono/Saturación y cambia su valor de Luminosidad a -100. Ahora aplica un Desenfoque gaussiano de 4px de radio, luego cambia su Opacidad al 50%.

Paso 16 - Sobreexponer y subexponer

Siempre dejo Sobreexponer y Subexponer después de extraer y colocar la sombra.

Paso 17 - Apartado sobre nosotros

Comienza a añadir el texto, yo estoy usando Futura Std para el título, Tahoma (11px, Sharpen: Ninguno) para el cuerpo del texto, y una Línea gris como divisor (usa la herramienta Línea para dibujarla).

Agreguemos un cuadro para el texto breve. Dibuja un Rectángulo redondeado de 15px de radio y rellénalo de verde (#434726), luego aplica un Efecto de trazo con el mismo color y cambia su valor de Relleno a 50%. A continuación, convierte el Rectángulo redondeado en un objeto inteligente y añádele una Máscara de capa > Descubrir todo. Utiliza un pincel negro grande y difuso para pintar sobre la máscara, a fin de ocultar algunas partes del fondo fundiéndolo con el paisaje de acuarela, tal como en el Paso 11.

Finalmente puedes añadir más detalles, como una marca de acuarela detrás del texto "Sobre nosotros", como se muestra en la parte inferior de la imagen de abajo.

Paso 18 - Algunos detalles

Este es un paso absolutamente opcional, puedes añadir algunos estilos de capa al logo y a los títulos, sólo para aumentar el contraste entre ellos y el fondo. Voy a mantenerlo simple esta vez añadiendo una pequeña Sombra paralela. Además, no me gustó cómo se ve el pincel detrás de la barra de navegación, por lo que lo voy a mandar hacia adelante, ya que se ve mejor para mí, sin embargo, puedes seguir tu instinto y trabajar esto como prefieras.

Paso 19 - Banner Ajax principal 

A menudo es necesario mostrar más de una pieza de información relevante en la página de inicio, es por eso que aprovecharemos Ajax y crearemos un deslizador de imágenes. Es muy importante tener en cuenta que no todos los diseños pueden ser codificados fácilmente, comienza a investigar en algunos sitios que enlistan bibliotecas ajax para ver cuál puede funcionar bien con tu diseño.

En este caso añadiremos una imagen grande como banner activo colocado alrededor de ocho columnas de las guías de la plantilla. Abajo hay cuatro o cinco miniaturas cuadradas del resto de los banners. Por último añade un triángulo azul (#5D8CB6) (puedes dibujarlo con la herramienta Polígono) que apunte al banner activo.

Consejo: Utiliza imágenes reales y no sólo marcadores de posición de imágenes.

Texto del banner (opcional)

Algunas bibliotecas existentes permiten la opción de añadir algún texto sobre el banner cambiante, en este caso utilizaré Futura Std Light Condensed para el título y Tahoma 11px para el contenido. Usa un rectángulo blanco, con un relleno del 50% y un trazo blanco de 1px como fondo.

Paso 20 - Fondo de la barra lateral

Sigamos adelante, la mayoría de las partes difíciles del proceso ya están terminadas, pero aún quedan algunas áreas importantes, como la barra lateral. Empezaremos con un fondo sencillo, usando la herramienta Rectángulo redondeado (radio de 5px) dibujaremos un rectángulo blanco que cubra las 4 columnas vacías a la derecha del banner principal.

Observa que estoy separando el fondo de la barra lateral 20 píxeles del banner principal y 20 píxeles de la capa "Contenido Bg". Cambia su capa de Relleno al 25% y añade un Estilo de capa de Trazo blanco de 1px. No es necesaria ninguna otra edición ya que parece fundirse bastante bien con la capa "Contenido Bg".

Paso 21 - Fondo de las publicaciones destacadas

Tenemos mucho espacio debajo de la zona del banner, vamos a poner algunas publicaciones destacadas allí. Pero primero vamos a añadir algunas marcas de acuarela de color pastel en una nueva capa, obviamente, por encima del fondo del contenido. Cualquier color está bien, pero debe ser muy claro, cerca del blanco.

Paso 22 - Una publicación

Ahora vamos a añadir a una sola publicación. Utiliza Futura Std Condensed Light para el título, Tahoma para el resumen y la meta, y una línea de 1px de altura como separador, esto no es nada difícil. A continuación, en una nueva capa, dibuja una única marca azul con un pincel de acuarela como fondo de los comentarios, escribe el número de comentarios con Futura y la palabra "comentarios" con Tahoma.

Esto es realmente fácil y rápido, aunque existen algunos consejos:

• Para el cuerpo del texto nunca utilices el color negro (#000000) por su difícil legibilidad, puedes ayudarte añadiendo algunas guías de color para los colores del texto (las estoy incluyendo en el archivo fuente) o utilizando el panel de Muestras, incluso puedes ayudarte con algún complemento como Kuler.
• Coloca siempre tus capas en Grupos de capas (Carpetas) u Objetos inteligentes, ya que son más fáciles de cambiar y duplicar. Lo haremos ahora, duplica la carpeta donde pusiste el contenido de tu publicación destacada (yo la llamé "Publicación") y duplícala tres veces, luego coloca las copias en sus respectivos lugares siguiendo un diseño de dos columnas usando las guías de la plantilla como referencia.

Paso 24 - Icono RSS

Es hora de añadir contenido a la barra lateral, y empezaremos con el botón RSS. Primero descarga estos Iconos sociales dibujados a mano por TheG-Force. Abre el icono RSS, cópialo y pégalo en el diseño, añade el texto relacionado con el RSS: correo electrónico, suscripción al feed, número de lectores y una línea de 1px de altura como separador.

Paso 25 - Formulario de búsqueda

Primero añade unas marcas de acuarela como fondo. Por encima de eso, dibuja un Rectángulo redondeado (5px de radio) rellenado con este color: #1D1D1D. Añade un Trazo blanco de 1px, establece su valor de Relleno al 50%; este será el fondo de nuestra entrada de búsqueda. Usando la herramienta Texto y el tipo de letra Tahoma escribe las instrucciones de búsqueda sobre el cuadro de búsqueda. Finalmente descarga este Paquete de Iconos de acuarela gracias a Tutorial9 y pega el icono de la lupa como botón de búsqueda. Coloca todo esto en un Grupo llamado "Búsqueda" o algo así y pasa al siguiente paso.

Paso 26 - Anuncios de 125 por 125

El formato estándar de los anuncios creativos es de 125 por 125 píxeles, así que añadiremos algunos de ellos en la barra lateral.

Consejo: Para ahorrar tiempo, puedes crear un documento de 125 por 125 px y diseñar un bonito marcador de posición de anuncio, luego convertirlo en un objeto inteligente y guardarlo en algún lugar. Puedes utilizarlo para muchos diseños sin tener que rediseñarlo cada vez. Si tienes suficiente tiempo, aquí tienes una lista con la mayoría de los tamaños de anuncios estándar (vía Google's ad sense). ¿Consideras trabajar en un PSD con algunos marcadores de posición para ellos?

Paso 27 - Twitter

Como gran fanático de Twitter, decidí poner un enlace destacado justo debajo de los anuncios. Añade un poco de fondo de acuarela, copia/pega el icono de Twitter de la biblioteca comentada en el Paso 24. Escribe algún texto relacionado con el pajarito azul como "Sígueme" o tu número de seguidores y actualizaciones. Pon todas estas capas en un grupo llamado "Twitter".

Paso 28 - Un panel con pestañas en la barra lateral

Usando la herramienta Rectángulo redondeado, dibuja un rectángulo blanco con un trazo gris de 1px (#979797) justo debajo del área de "Twitter". Ahora dibuja tres rectángulos más pequeños detrás, estos serán las pestañas. Dibuja un pequeño rectángulo blanco entre una de las pestañas y el fondo para diseñar una pestaña seleccionada.

Paso 29 - Añade algo de contenido a las pestañas

Cambia los colores de fondo de las pestañas no seleccionadas. Añade algunos títulos a las pestañas, estoy usando una versión más gruesa de la tipografía Futura. Para el contenido añadiré un par de Publicaciones recientes en la primera pestaña. Luego, si quieres, diseña el contenido para las otras pestañas, pon cada una en una carpeta para mantener tu diseño organizado.

Paso 30 - Finalmente el pie de página

Este pie de página será realmente sencillo, solo pinta algunas marcas de acuarela al azar con algunos colores pastel, luego repitiendo el proceso de los pasos 8 - 9, dibuja un par de Rectángulos redondeados y fúndelos con el fondo de acuarela. Finalmente añade el texto del pie de página, una pequeña barra de navegación y la información de copyright encaja perfectamente allí, además añadí una Línea de 1px como divisor y le apliqué una máscara de Capa de degradado reflejado.

Siéntete libre de diseñar un pie de página avanzado si lo deseas.

Conclusión

¡Espero que te haya gustado! Por supuesto este tutorial es sólo una pequeña muestra de lo que se puede hacer con este estilo en el diseño web, ¡siéntete libre de experimentar con la técnica y sorpréndenos con algo nuevo!