Como convertir un boceto de Photoshop a XHTML/CSS

11 de mayo de 2009 | Photoshop, Tutoriales, Webs

El post anterior, y primera parte de este tutorial, crear desde Photoshop un sitio web moderno, paso a paso. atravesó las etapas de producir el concepto visual de un sitio web moderno.

Ahora, vamos a atravesar las etapas de la construcción de la página en XHTML/CSS, empezando por exportar los gráficos, producir, y a continuación, la estructura con los elementos más comunes de HTML dándole estilo con CSS.

Como una visión general, la imagen anterior muestra un diagrama de los diversos DIV’s utilizados en la estructura del sitio Web.

A partir del documento Photoshop separable en capas, exportar una franja de los gráficos de fondo. Incluyendo el área de color que contiene una textura sutil, haz una selección amplia para permitir la textura se ajuste perfectamente a modo de repeticiones. Guarda el gráfico para web en una alta calidad.

Marca una selección muy justa alrededor el logotipo, presiona CMD + Mayús + C para copiar combinadas y guarda para Web.

Repite el proceso con el título introductorio grande. La fuente de este texto continua la imagen de marca y utilizando un efecto de sombra paralela, no puede reproducirse puramente con CSS, para que lo que vamos a usar la técnica de reemplazo de la imagen habitual.

Haz una selección de todo el MacBook, que incluya toda el resplandor exterior y que linde con la parte superior del cambio de color (ver imagen superior). Oculta la capa interior (lo que se ve en la pantalla del macbook) antes de guardarlo.

Oculta las capas de contenido de la barra lateral y haz una selección alrededor del grafico que cubra las curvas superiores y la mayoria del cuerpo.

Pega el gráfico de barra lateral copiado en un nuevo documento. Ampliar el lienzo verticalmente y Dibuja una selección de la parte inferior del gráfico, incluidos los bordes verticales y color de fondo gris. Presiona CMD + T y estira este gráfico para rellenar gran parte del area del lienzo. Esto dejará de espacio adicional que permite ampliar el contenido HTML.

Ya de vuelta en el documento principal, toma una selección del gráfico de barra lateral restante, incluyendo sólo las curvas de abajo.

Haz una copia del boton de la barra lateral y pegalo en un nuevo documento. Expande el lienzo a un  200 % por abajo. Ajustar el degradado del botón en la dirección opuesta para dar una impresión de puslado, luego pega el boton en ese espacio.

Exportar una copia de los gráficos de entrada, incluyendo una versión en blanco en cada imagen.

La colección de archivos incluye diversos elementos que se utilizarán como imágenes de fondo en el CSS. También se ha creado un grupo de trabajos especiale para rotar en un slideshow en el interior de la pantalla del MacBook.

Crear un nuevo documento HTML en la aplicación que prefiera. Escriba el título de la página y únela a una hoja de estilos. Iniciar la estructura del documento con un DIV contenedo, seguido de un encabezado que contiene el nombre del sitio Web en  una etiqueta y la navegación como una lista desordenada.

Cualquier DIV que incluya elementos flotantesa tendrá una compensación. Agrega  una clase de limpeza para la etiqueta DIV, que agregaremos a la hoja de estilos CSS para en una etapa posterior.

Crea un DIV para el encabezado largo de características púrpura, dentro de este DIV, crea otro con el texto de características incluyendo la redacción pertinente. Utilizar una etiqueta de h2 para la introducción de la oración y los párrafos como texto más pequeño.

Crea un segundo DIV segunda para albergar la lista de trabajos destacados. Cada elemento de lista debería incluir una imagen de captura de pantalla, completa con una etiqueta ALT descriptiva.

Divide la siguiente sección del documento en un DIV con un ID de contenido. Dentro de esta seccion usaremos otro DIV llamado “main” para incluir el contenido principal. Esta área de contenido comienza con un párrafo grande, inicializarla en una etiqueta h3. Para el cuerpo de la noticia usaremos la etiqueta de parrafo estandar <p>.

La última sección de noticias se divide en otras dos columnas de, estas se necesitan una capa flotante por lo que añadimos un DIV con la  clase  “latest-news” y no olvides agregar la clase de compensación “latest-news clear”. En este ámbito tendremos dos listas de los títulos de noticias más recientes y un fragmento de contenido. El elemento HTML más natural sería un UL.

En la barra lateral, a continuación, se coloca con un ID “side”. En este ámbito un div de “featured-project” para incluir el contenido de la barra lateral. Esto también actúa como un elemento útil para adjuntar una de las imágenes de fondo que compone el gráfico de barra lateral.

El área de pie de página se muestra dentro de una banda gris en el concepto de diseño, por lo tanto añadir un DIV  “footer-container” página-contenedor al final del documento para acomodar a esto en la hoja de estilos CSS. Dentro de este elemento, crear un DIV “footer”  para el contenido, luego escribir a cada una de las tres secciones del pie de página dentro de su propio DIV.

El DIV “login” contiene el cuadro de inicio de sesión  ficticio. Esto se ha creado mediante un formulario. El concepto muestra un diseño elegante sin el uso de etiquetas separadas, pero estas deberían incluirse por razones de accesibilidad.

Vamos a comenzar con la hoja de estilo CSS ya fuera de la estructura HTML. Agregar un simple reset a la hoja de estilos para quitar los valores predeterminados de cualquier navegador. También agregamos a la codificación a la clase “clear” para dar una solución a los elementos flotantes de la web. Este ejemplo es una versión ligera de la técnica clearfix.

Dale estilo al cuerpo con una fuente de tipo universal y el background de repetición que crea las franjas principales. El DIV del contenedor con un ancho de 960px y centrado con un “margin 0 auto 0;”.

Las lineas 20-22 son el encabezado superior con una altura y el padding superior. A continuacion se declara h1 para la cabecera que mostrará el logotipo de la web usando la tecnica de reemplazo de imagen que ya se comento anteriormente. El ancla se cambia para  su configuración predeterminada como un elemento en línea a un elemento de bloque, que permite un ancho y alto para coincidir con las dimensiones de archivo de imagen de logotipo. El elemento es flotante para que la navegación se muestre junto a él, y se adjunta el archivo de imagen de fondo. Por último se desplaza del texto original del vínculo con una sangría de texto negativo grande.

Despues tenemos el codigo de navegación, , flotando en el lateral y desplazamiento en el lugar con un poco de margen. Cada elemento individual es, a continuación, flotante hacia la izquierda. Por último los vínculos son estilos con el tamaño de fuente específica y color para los estados  normal y hover.

Pasamos a la cabecera púrpura, la etiqueta DIV contiene la imagen de fondo del portatil MacBook y situado a la derecha. El texto se establece mediante el reemplazo de la imagen CSS para el encabezado y estilo de fuente normal para los párrafos. El enlace  ‘Work with us’ , se le da un estilo de fondo que cambia al activarse hover.

La lista de trabajos destacados muestra cinco elementos, pero sólo queremos  mostrar una cada vez en la pantalla del MacBook. En primer lugar el UL se mueve en su lugar con posicionamiento relativo, y luego se agrega la altura de las capturas de pantalla. El overflow hidden simplemente oculta las imágenes de los cuatro restantes hasta que se muestren en pantalla con Javascript mas adelante.

El estilo de texto general se agrega bajo el div del contenido, dando a los párrafos y vínculos sus colores deseados y tamaño. El div del contenido principal es flotante hacia la izquierda y dado el ancho desde el diseño de cuadrícula de Photoshop.

Las listas de noticias más recientes son flotantes también a la izquierda para que se puedan mostrar en paralelo. Cada una recibe un ancho de la mitad el contenedor primario, menos la cantidad de relleno a la derechaen el derecho para acomodarlo a el modelo de caja.

La barra lateral se ha diseñado para flotar junto al contenido principal y se usa la imagen de fondo que exportamos anteriormente. La etiqueta DIV hija featured-project resulta útil para adjuntar el segmento inferior de este gráfico.

El contenido de la barra lateral es diseñado con colores y tamaños pertinentes. El enlace ‘See more work ’se sustituye con el gráfico de botón mediante la técnica de reemplazo de imagen. Para dar feedback visual el fondo se establece como imagen inferior al activar, para mostrar la versión ajustada de la imagen de sprite que contiene el efecto de presion.

La franja de pie de página gris puede crearse fácilmente al añadir un color de fondo al contenedor de pie de página. Debido a que este elemento está fuera de la etiqueta div contenedor automáticamente abarca el ancho completo de la página. No obstante, si el contenido no no existe dentro del contenedro necesitará estilo con el mismo ancho y margen automatico centrado. El gráfico de sombra  encaja bien como la imagen de fondo de este div.

Las áreas de pie de página  son desarrolladas fuera con un montón de estilos para ajustar el estilo de fuente y colores.

La utilización de un formulario de inicio de sesión que muestre las etiquetas como parte de las entradas requiere unos trucos CSS, así como un poco de auda de jQuery. Con un poco de codificación. Este poco de codificación damos estilo a las etiquetas para los usuarios que no tienen Javascript habilitado que se oculta con jQuery.

Cuando el usuario se centra en una entrada, se agrega una clase adicional que revierte la imagen de fondo a la versión en blanco. A diferencia de una antigua tecnica  CSS mediante :focus selector, este estilo sigue cuando se anula la selección.

Si el usuario no tiene JavaScript habilitado, se muestra con etiquetas standard.

El concepto se ha completado ya en términos de codificación HTML y CSS, pero aun no tenemos la funcionalidad de presentación para agregar a el portatil MacBook del encabezado. Agregamo el framework de jQuery, el plugin Cycle y un archivo  JavaScript en blanco a la cabezera del documento.

Para activar el slideshow, usa como objetivo el UL featured work y agrega un efecto de fundido con una pausa de 2 segundos. Esto alternará a través de cada una de las cinco imágenes con una transición suave de difuminado, mostrando uno de cada vez en la pantalla del macbook.

Y eso es todo. Las pruebas de codificación no muestran errores de diseñpo y el resultado incluso no es malo en Internet Explorer 6.

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

Demo del sitio una vez terminado: AQUI