Crear desde Photoshop un sitio web moderno, paso a paso.

7 de mayo de 2009 | Photoshop, Tutoriales, Webs

Crea un boceto del diseño de sitio Web completo para un estudio de diseño ficticio, empezando por  la creación del boceto inicial para luego pasar a diseñar los elementos de página individual. El resultado es un diseño de página Web moderna, nítida y limpia, lista para la codificación.

Tomando como fuente de  inspiración diferentes diseños Web, produciremos este diseño web limpio sitio. Como características importantes incluye bandas horizontales para separar el contenido en áreas específicas; un área de encabezado a todo color introductora del  sitio; un mensaje de bienvenida con ejemplos de trabajo; diseño principal de dos columnas y un pie de pagina lleno de recursos.

Un buen comienzo para cualquier diseño es esbozar el planteamiento sobre el papel, el reinado libre del lápiz ayuda a corregir asperezas en el diseñoc con facilidad.

Planificar un esqueleto también ayuda a desarrollar una jerarquía en los elementos y da una mejor idea de las posiciones para dichos elementos claves del diseño

Crea un documento nuevo en Adobe Photoshop, Yo tiendo a hacer el tamaño de los trabajos  similar a la de un monitor de pantalla panorámica común para dar una buena representación de la apariencia general del sitio.

Coloca guías en un ancho de 960px en el centro del documento y crear una cuadrícula básica para colocar los elementos de página en ella.

Comienza con la creación de la barra de encabezado. Dibuja una selección en todo el ancho completo del documento y relleno con blanco. Haz doble clic en la capa para abrir los estilos de capa y añade un degradado superpuesto de gris a blanco ejecutado verticalmente.

A continuación, señala el área de cabecera principal donde se colocará el contenido destacado. En una nueva capa dibuja una selección, agregua una superposición de degradado con una selección de dos colores vibrantes. También agrega una sombra interior sutil para darle profundidad al diseño.

Toques sutiles de textura pueden dar vida a un diseño. Con el área de encabezado seleccionado con una máscara pulsa CMD+Mayús+C para copiar combinadas, pegalas en una nueva capa. Vete a filtro > ruido >, a continuación, agrega ruido para producir una textura simple, ajuste el modo de mezcla en Multiply y reduce la opacidad según convenga.

Pega en el logotipo de empresa, posiciónandolo en la pantalla de acuerdo a la cuadrícula, a continuación, agrega algunos estilos a través de las opciones de estilo de capa. Agrega una superposición de degradado para coincidir con los colores de encabezado de la característica, luego crea una sombra interior muy suave.

Usa la herramienta de tipografía para crear el texto del menú de navegación, establece el tipo en un gris medio para luego utilizar una versión ligeramente más oscura para el vínculo activo.

La zona de encabezado destacada  es un lugar perfecto para introducir el sitio Web, con el color de fondo vibrante el usuario le da prioridad. Utiliza este espacio para colocar un título de introducción alegre en una fuente personalizada que coincida con la imagen de la compañía.

Continuando con el contenido de introducción, es aconsejable usar Arial o Helvética como la fuente para que el texto se puede establecer en html, sin tener que recurrir despues a técnicas de reemplazo de imagen.

Coloca un ordenador portátil en el área destacada tal como ves en la imagen (una serie de ejemplos puedes encontrarlos aqui), esto encaja bien en la naturaleza de la compañía de ficción y crea un gran área focal para ver ejemplos de trabajos en la pantalla de portátil.

Enfatiza en este punto focal con un degradado radial que emita por detrás del portátil. Esto agrega detalle adicional  eleva el elemento dentro de la pagina.

Debajo de la cabecera principal, hazs otra selección y rellena con un degradado gris a blanco.

Divide la sección central de la página en dos columnas con guías en relación con las líneas de cuadrícula. A la izquierda tendremos un panel de contenido principal, mientras que a la derecha tendremos una barra lateral más delgada. Utiliza la herramienta de tipografia para agregar  algún contenido ficticio. La alteración de tamaños de letra y espaciados hace al usuario los pasajes mas digeribles a la vez que facilmente legibles.

A continuación de esta área de contenido principal podría existir otra para mostrar las entradas más recientes del blog. Divide la columna en otras de dos y inventa una selección de entradas para el ejemplo. Los enlaces del titulo debe destacan para el usuario como algo pulsable/clickeable, cambiar los colores puede dar pistas visuales al usuario.

Utiliza la herramienta de rectángulo redondeado para dibujar un cuadro en la barra lateral. El color original no importa demasiado ya que el estilo se lo daremos en la proxima etapa.

Haz doble clic en la capa y agrega una gama de estilos de capa, incluyendo un degradado gris a blanco, un fino trazo gris y una sombra interior suave

Utiliza este zona de la barra lateral para desarrollar una sección de proyecto destacado. Puedes incluir elementos como una captura de pantalla pequeña y un pequeño pasaje de texto.

Dibuja otro Rectángulo redondeado para usar como un botón, agrega un par de estilos de capa como una superposición de degradado y trazo para dar estilo al botón para que coincida con el tema general, limpio y gris.

Creaa una etiqueta descriptiva y corta para el botón invitando al usuario a continuar a través del sitio para ver más proyectos.

Identifica el final del contenido dibujando un área de pie de página en la pantalla. Rellena el área con un gris claro para diferenciarlo de la zona principal de contenido.

Dibuja una máscara circular y rellenala con un degradado radial negro a transparente. Presione CMD+T para transformar la selección, estrecha y estira el degradado para formar una sombra  larga y delgada como el dibujo.

Centra la sombra en la pantalla y luego elimina el exceso por encima del pie de página. El resultado es una sombra sutil que levanta la página principal, agrega un poco de toque de detalle al diseño.

El área del pie de página es un lugar perfecto para depositar elementos secundarios, un ejemplo podría ser un área de inicio de sesión de cliente. Realiza el diseño con la herramienta de tipografía y dibuja un par de cuadros de entrada de datos. Dale a los cuadros una sombra interior suave de estilo.

Utiliza el área central del pie de página para mostrar un mensaje acerca de la sociedad. Establece el texto utilizando encabezado coherente y tamaños de fuente de texto de cuerpo.

Por último, agrega un punto de contacto en la parte inferior derecha. Estos detalles, mas adelante, serán útiles para el usuario en todo el sitio. Dale importancia a los aspectos más importantes a través de tamaño o más fuerza en color o estilo.

El diseño final ajusta a todos los elementos deseados claramente en la página, manteniendo todo alineado a la base de la cuadrícula. El resultado es un diseño estructurado y limpio con un montón de grises sutiles para añadir profundidad. El color se utiliza para destacar áreas destacadas  y contenido importante.

Este articulo es una traduccion libre al castellano del tutorial que Chris Spooner ha publicado en Line25.

CONTINUACION DEL ARTICULO EN:  Cómo convertir un boceto de photoshop a xhtml/css