Diseña tu sitio en PhotoShop!

Mucha gente antes de pasar al diseño web en HTML y CSS o otros lenguajes de programación, crean su diseño en PSD (photoshop) para de ahí sacar todas las referencias que hagan falta, tener el esquema preparado y saber dónde poner los efectos y demás.

Hoy vamos a ver cómo diseñar una web básica pero atractiva, ya que el diseño que vamos a realizar será prácticamente la estructura del sitio y nada más, pero verán muchas funciones que no solo les servirán para este diseño sino que para todos los demás que quieran hacer.

1 Paso

Lo primero de todo es crear nuestro nuevo archivo de photoshop, muchas webs utilizan un sistema para que el tamaño de la web se ajuste automáticamente y sin perder detalle, pero eso ya es cosa de programación, un tamaño muy utilizado en el diseño web es de 900 x 600 pixeles (alto por ancho) por lo cual nosotros crearemos nuestro nuevo archivo de dicho tamaño.

2 Paso

Utilizaremos las reglas para definir los bordes de nuestro sitio, es muy simple, iremos a «ver -> reglas» o utilizando el atajo Ctrl +R para tener la visibilidad de nuestras reglas, y comenzaremos a definir nuestro esquema del sitio.

En la imágen vemos cómo están definidas diferentes secciones de lo que sería el sitio, marque las secciones con contenido de negro (header , contenido y footer, además se puede incluir un sidebar) , el menú de rojo y los bordes, o «secciones limpias» de blanco. Todas estas secciones están definidas por las reglas, se puede incluir el sidebar , el cual está definido con la regla también y podemos dividir el footer en 2 secciones (o más).

3 Paso

Lo siguiente es, una vez definimos con las reglas donde ira cada cosa, definir con formas las secciones de la web, en este caso definiremos , además de las secciones dichas en el paso 2,  un menú en la parte superior y en la sección final , debajo del footer, el texto de copyright que se le añaden a todas las páginas webs. Lo vemos todo definido en la imagen de debajo, todo seleccionado con el respectivo nombre, y vemos el menú superior y texto de copyright con fondo negro.

4 Paso

Ahora tendremos que definir los colores que utilizaremos en nuestro sitio, en este caso yo no use el sidebar, para ahorrar un poco de espacio en la web y mostrar más contenido. Yo voy a utilizar colores que , estando sin contenido, no soy agradables visualmente estando juntos, pero son colores que van de la mano, a la combinación de colores que son atractivos visualmente se le llama armonía de colores , pero esto es una rama que merece que se le dedique una entrada completa para ella misma y próximamente estará disponible en la web.

Uso el negro en las zonas que ya definí (de negro) en la imagen anterior, y use también el negro para el header, un blanco para la zona del contenido y el fondo y un gris para la zona del footer.

Vemos como a la zona del contenido, le aplique una sombra paralela para darle un efecto de relieve o flotante para que el efecto visual que de haga que la vista se centre en el contenido.

5 Paso

Nos toca realizar el menú, poner el texto es muy simple, pero lo que mas me gusta es crear separadores para el menú, es muy simple y le da una estética , un efecto de profundidad muy agradable visualmente y (al menos a mí) me gusta bastante.

El crear estos separadores es muy fácil, vamos a tomar primero nuestra herramienta lápiz, con un tamaño de 1px trazaremos una linea horizontal, de color negro (#000000), a los lados de esta línea trazaremos dos lineas más (una a cada lado) de un color gris (#aaaaaa).

Ahora lo que toca es borrar la parte superior e inferior del separador, y pasar un «soft brush» o pincel suave, en modo goma de borrar, un poco alejado para difuminar las líneas grises, esto le dará un efecto de profundidad, como si los botones se metieran en la línea. Vean el resultado del borrado del separador en la imagen de abajo.

Les tiene que quedar un resultado como aquel, si lo alejamos al 100% veremos cómo da ese efecto de profundidad que mencionábamos anteriormente.

Después de realizar este separador, le añadí un indicador de color blanco, es muy simple hacerlo, si estamos en windows, vamos a seleccionar la herramienta de texto y vamos a teclear la combinación «Alt + 30″ , el número 30 lo teclearemos con el pad numérico del teclado (los números de la derecha).

6 Paso

Vamos a añadirle un buscador a nuestra web, es muy simple, vamos a crear un rectángulo con los bordes suaves, el tamaño de los bordes sería de un radio de 15px , le aplicamos unos efectos de sombra en el interior, duplicamos nuestro rectángulo, en este segundo duplicado lo que vamos a hacer será recortarle la parte sobrante o que no queremos y vamos a añadirle una imagen de una lupa y un sombreado en paralelo. Vamos a ver en la imagen como debería estar el buscador.

Vemos cómo le escribí la típica frase que se le incluye a los buscadores , en este caso le puse «keyword for find» que si no estoy equivocado significa «palabra a buscar».

7 Paso

Ya llegamos prácticamente al final de nuestro diseño, antes de llenarlo con el contenido , vamos a crear en donde señale el «Menú 1» (véase en la imagen del paso Nº 3), un pequeño recuadro tras el que se esconderá el formulario de «login/registro» , lo que vamos a hacer será crear un recuadro de bordes suaves con los bordes a un radio de 7px. Lo arrastramos hasta que desaparezca el bordeado  de la zona superior y sólo aparezca el da la parte inferior del recuadro. Luego vamos a añadir el texto, el cual serían los vínculos hacia el login y el registro (puede que la calidad de la imagen no sea de lo mejor, pero es que tiene un zoom del 700%).

8 Paso

Ahora vamos a crear un «navbar» o la navegación de la web, es decir, los botoncitos que dicen en cual página de la web estamos y movernos sobre las páginas de la sección en la que estemos de la web. Es muy simple la creación de estos.

Vamos a crear un cuadrado con la herramienta de rectángulo bordeado, vamos a ponerle unos bordes con un radio de 4px o 5px y vamos a añadirles el número de las páginas. Vemos en la imagen como queda el resultado final de nuestra navegación.

Vemos como le dí un magnífico color azul claro que no se entona, pero le queda de maravilla si lo vemos en la web (sarcasm). Además le añadí  los indicadores para pasar una página ( los << y >> ).

9 Paso

Lo único que queda por hacer será rellenar un poco el sitio con contenido, en este caso 2 entradas con el típico texto en latín (texto que no vean cuanto me costo encontrar…) y una imagen en cada una . y poner los «separadores» que creamos anteriormente para delimitar el fin del footer. Se los muestro en la imagen del sitio terminado completamente, vemos como cambia estéticamente con todo el contenido, no se ve tan simple y parece un buen diseño.

Con esto ya finalizamos el tutorial, es algo largo, pero si queres diseñar una buena web, te tomará mucho mas tiempo. Al fin y al cabo, el diseño en photoshop de una web no es muy dificil, pero si está el tema de la armonía de los colores y una cosa muy importante que todas las webs buscan, es conseguír que el visitante centre la vista en un punto (en mi caso en el contenido).

No está nada mal para ser mi primer tutorial escrito, ¿verdad?

Ya les dejaré mas como este próximamente en la web.

También te puede interesar: diseño web Zaragoza