Taller de Adobe Photoshop: diseñar un sitio web o blog

¡Bienvenidos a la última clase del Taller de Adobe Photoshop! Hoy aplicaremos todo lo aprendido para realizar el diseño de un sitio web o un blog. Algo que tienen que tener en cuenta es que el “tutorial” que veremos hoy les servirá para llevar a cabo cualquier tipo de diseño, no sólo el que utilizo como ejemplo.

Muchas clases pasaron desde aquel primer día en donde aprendimos la diferencia entre los colores RGB y las tintas, los píxeles y los vectores. Pero bueno, la finalidad de este taller siempre fue que aprendan a diseñar un sitio web o blog con Photoshop, incluyendo todos los elementos que se pueden encontrar allí. Hoy podemos decir que ya están listos para cumplir con esa meta, de modo que (por última vez ¡snif, snif! ^_^) ¡Comencemos!

Diseñar un sitio web o blog con Photoshop

A esta altura ya saben que diseñar un sitio web no es algo que se haga así nomás, pero también sabrán que en unas horas deberíamos tener toda la interfaz lista (depende más de qué tan despierta esté nuestra creatividad que del manejo de la herramienta).

El fondo de nuestro sitio web

Comencemos, entonces, aplicando lo que vimos en la clase 19 para crear un lienzo donde diseñar nuestro sitio. El lienzo debe ser adecuado al tamaño de la resolución de pantalla pero ojo que el fondo debe ser más grande si va a ser una imagen (tengan en cuenta que los monitores ultra chatos de hoy día llegan a resoluciones muy anchas).

Una vez que ustedes eligieron el tamaño que más se adecuará a su sitio, podemos usar como “wallpaper” una imagen, un collage, un degradado, un motivo, etc, etc, etc. Para darles un ejemplo, yo usé un degradado como vimos en la clase 29. Quedó algo así:

Siguiendo con mi ejemplo, podemos conseguir un pincel o textura gratuita por la web, según vimos en la clase 28:

Para que se amolde mejor podemos usar color, etc:

Podemos aplicar la textura o el pincel fusionándolo en modo luz suave, o con alguna otra modalidad que nos de un resultado original. Podemos, claro, aplicar el pincel cuantas veces queramos y ajustar una y mil veces los niveles, opacidades, tonos, colores, variaciones, etc, etc, etc.

Para que la parte del contenido de nuestro sitio, si necesita scroll, funda a un color pleno que elegiremos por CSS, podemos aplicar un gradiente (degradado) que funda a transparente:

Luego podemos crear una nueva capa y pintar con un pincel “blando” algunos colores accesorios:

Al fusionar esta capa como luz suave obtendremos este resultado:

Seguimos jugando con el tono y saturación, brillo y contraste, etc:

Podemos aplicar una textura con el bote de pintura, usando un motivo en una capa nueva. Luego lo fusionamos como más nos guste:

Hasta aquí suficiente con el fondo. Ahora pasemos a la interfaz propiamente dicha…

Diseñar la interfaz de un blog con Photoshop

Sobre el fondo que teníamos tiramos algunas guías como vimos en la clase +++++ según la forma que tendrá nuestra interfaz (¿tiéne barra de navegación? ¿Cuántas columnas? ¿Qué sector se alargará automáticamente con el contenido? ¿Será un diseño fijo?).

Una vez que tenemos esto bien claro y las guías como soporte, podemos crear la maqueta de la interfaz con formas vectoriales como vimos en la clase 13. En este caso yo elegí el rectángulo redondeado:

Pueden ver en el panel capas que son formas vectorizadas.

Yo he decidido aplicarles un estilo (clase 14) usando sólo un trazo de 1px y superposición de gradiente:

Noten que no es necesario repetir el estilo una vez que ya lo seteamos en la primera capa. podemos hacer clic y arrastrar el ícono de los efectos especiales (fx) o dar clic derecho y elegir “copiar estilos de capa” para pegarlos en la que no los tiene.

Nuevamente, con líneas vectoriales, divido la barra de navegación y el footer:

Y agrego texto como título (también podría ser un logo) y a la barra de navegación como vimos en la clase 25:

Les pido perdón por la estética del diseño, pero está hecho rápidamente con el sólo fin de ejemplificar este taller, jeje.

Agregando más textos, formas vectorizadas, etc., iremos completando el diseño del sitio. Para los que les gustan más los sitios estilo “collage”, la técnica la vimos en la clase 30. Elegimos las imágenes que más nos gustan y las recortamos con la pluma o con el lazo. Luego las pegamos en la interfaz.

Este es un recurso muy usado para agregar recortes realistas. Vean cómo quedaría una página de un cuaderno como fondo del sector de contenido de este “blog” imaginario (junto con los últimos detalles agregados):

¡Ahora sólo resta el contenido del sitio! Podemos simularlo con Photoshop para tener una idea clara de lo que haremos luego con CSS, HTML y contenido real.

UN COSEJO IMPORTANTE: en estos casos conviene elegir como estilo de texto “ninguno” en vez de nítido, grueso, redondeado, etc. De esta forma lo veremos como se verá en el navegador. Obviamente usaremos las tipografías estándares (Arial, Georgia, etc):

¡Voila! agregando unos detallecitos finales tenemos listo nuestro sitio web:

Ahora podemos recortarlo automáticamente para luego rearmarlo con CSS. Claro que si se trata de un sitio institucional sin scroll ni contenido dinámico podemos hacerlo directamente con Photoshop con la función Guardar para la web y dispositivos, como vimos en la clase 27.

Bueno, de esta forma me despido de uno de los talleres que más placer me dio llevar adelante. Les quiero agradecer mucho haberse aguantado mis interminables explicaciones y les doy las gracias también por todos sus comentarios de aliento.

Espero que este taller les haya sido de gran ayuda para que puedan diseñar sitios web por ustedes mismos. No queda más que decir, salvo invitarlos a que me dejen todas las dudas y mensajes que quieran via comentarios. (Y seguiremos en contacto en algún que otro tutorial ).

¡Hasta siempre!

Juanma.

Haz clic aquí para volver al Temario.