7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Site Builds

Cómo crear un diseño web con temática de cómic, de Photoshop a HTML + CSS (Parte 2)

Read Time: 24 mins

Spanish (Español) translation by Nadia Gonzales (you can also view the original English article)

Hace un par de semanas, aprendimos a crear un diseño web con temática de cómic en nuestro sitio hermano, Webdesigntuts+. Hoy, abordaremos la segunda parte: es hora de sectorizar el diseño y convertirlo en un diseño HTML funcional, listo para ser portado a cualquier CMS. ¡Empecemos!


Antes de empezar

Puedes obtener tu propio PSD siguiendo el proceso paso a paso en Webdesigntuts+ o simplemente descargándolo aquí.

Como este no es un tutorial para principiantes, me saltaré algunas explicaciones básicas: se espera un conocimiento práctico de HTML y CSS, así como un poco de conocimiento sobre sectorización de imágenes en Photoshop.


Paso 1 - Diseño HTML

Empecemos por crear la carpeta de trabajo; como este tutorial no requiere el uso de un lenguaje del lado del servidor, puede estar en cualquier lugar de tu sistema. Crea un archivo llamado index.html, y tres carpetas iniciales:

  • /images
  • /js
  • /style

El contenido de estas carpetas debería ser bastante autoexplicativo.

Añade los contenedores básicos de la página a index.html. Envuelve todo con un div llamado page. Dentro de ese div, añade tres más con los IDs de header, content y footer respectivamente.

En la carpeta style, crea un nuevo archivo llamado default.css y añade un reset para eliminar todos los estilos por defecto. Yo estoy usando el de Eric Meyer pero siéntete libre de empezar con tu favorito.

Siguiendo el código HTML para este paso:

Y el CSS:

Probando el código en Firefox, deberías ver algo como esto:


Paso 2 - Diseño CSS básico

Primero vamos a estilizar la estructura del diseño.

Envolvemos todo el contenido con un contenedor de 960px de ancho, y luego establecemos las alturas de los divs interiores. Para obtener la altura exacta de cada div puedes utilizar la herramienta Regla de Photoshop.

Ahora sectorizaremos las imágenes de fondo de toda la página y de la sección de pie de página.

En Photoshop, abre Comicastic.psd y oculta todo excepto las carpetas Header BG y Footer BG. Utilizando la herramienta "sector", dibuja un gran corte desde la parte superior izquierda hasta 575px por debajo del borde superior. A continuación, dibuja otro sector de la guía que delimite el fondo del pie de página (mira la imagen de abajo). Por supuesto, puedes utilizar las guías para obtener un resultado preciso.

Usando la herramienta Seleccionar sector, selecciona los dos sectores recientemente creados y nombra cada uno con sus respectivos nombres: bg-body y bg-footer. A continuación, haz doble clic en todos los sectores automáticos y cambia el "tipo de sector" a No Image.

A continuación, ve a  File > Save for Web and Devices. Selecciona los dos sectores que quieres guardar (Mantén presionada la tecla Mayús para seleccionar más de uno), establece el "tipo de archivo" en JPG, establece la Calidad en 70 y haz clic en Guardar. Busca tu directorio de trabajo y elige el archivo raíz (este diálogo guardará automáticamente tus archivos dentro de la /images folder).

Ahora que tienes las imágenes de fondo, vamos a añadir el CSS para todos los contenedores.

Estableceremos una altura de prueba para los divs excepto el encabezado (que tiene una altura de 180px en realidad) y añadiremos algunos colores de fondo temporales para fines de prueba.

Probando en un navegador, deberías tener algo como la imagen de abajo.


Paso 3 - Sectoriza de las imágenes de fondo del encabezado y del contenido

Ahora que ya sabes cómo sectorizar la imagen, vamos a hacer lo mismo con todas las imágenes de fondo (o primer plano) del encabezado y del contenido. Para las imágenes del encabezado, crea una copia del documento "comicastic.psd" y oculta todo excepto la carpeta Logo y las capas relacionadas con el fondo de búsqueda (además, añado el botón de búsqueda en esta vista después de moverlo unos píxeles a la derecha). Ahora, dibuja los sectores alrededor de los segmentos visibles, y nómbralos logo, bg-search y search-button, respectivamente. Guárdalos como PNGs con fondos transparentes.

Pasemos con el banner de contenido.

Muestra sólo la carpeta Background dentro de Top Banner, muestra la carpeta Page Curl y la capa Page Bg bajo Page Content y muestra la carpeta Header Bg incluyendo el fondo negro general. Luego, con estas capas visibles, dibuja dos sectores: uno para el fondo del banner llamado bg-banner y otro pequeño para el rizo de la página llamado content-page-curl. Luego guárdalos a ambos como JPEG.

Añade un nuevo div llamado logo dentro de "header" y otro div llamado top-banner dentro de content a nuestro archivo HTML.

Y el código CSS para que se vean bien:

Ahora deberías tener algo así:


Paso 4 - Navegación superior

Vamos a añadir el HTML para la navegación superior. Añade el siguiente código dentro del div header, debajo del logo.

El trabajo más duro con este div será el posicionamiento. Haremos que flote a la derecha, y jugaremos con el padding para colocarlo en su sitio. Añade el siguiente CSS:


Paso 5 - Sustitución de fuentes

Como no tengo intención de utilizar "Comic Sans" para este diseño, utilizaremos un tipo de letra más interesante. Aprovecharemos las ventajas de CSS3 para que se vea bien en los navegadores modernos.

En primer lugar, descarga los paquetes de fuentes CSS "Komika Title" y "Komika Text" y colócalos en una nueva carpeta, llamada /fonts. Cada paquete tiene un montón de archivos de fuentes y un archivo .CSS que importaremos a nuestro documento default.css, como se indica a continuación:

Ahora que las fuentes están importadas, podemos utilizarlas en cualquier parte de nuestro sitio. Cada conjunto tiene un número de variantes para elegir; puedes usar las que estén acorde con el diseño gráfico. Para empezar, estableceremos todo el texto del cuerpo con 'KomikaTextTightRegular' de la siguiente manera:

Y puedes probar el resultado en el navegador:


Paso 6 - Estilizar la navegación superior

Vuelve al archivo psd ahora. Oculta todo excepto el fondo de la pestaña, crea un nuevo sector para la pestaña de navegación llamado bg-main-navigation y guárdalo para la web como un archivo PNG.

En nuestro archivo CSS, vamos a añadir los estilos para la barra de navegación, para conseguir el efecto hover deseado. Añadiremos el fondo a la acción hover y crearemos un estilo similar para la instancia a.selected. En cuanto a la tipografía, según el gráfico, utilizaremos "KomikaTextItalic" y añadiremos un bonito estilo de sombra de texto para que se vea mejor.

Tu página debería verse así en esta fase de desarrollo:


Paso 7 - Contenido del encabezado

Además del logotipo y la barra de navegación, tendremos que añadir la barra de búsqueda y los enlaces a las redes sociales a la sección del encabezado. Empecemos creando el cuadro contenedor en HTML y añadiendo el siguiente div dentro del div header.

Y algunos estilos necesarios:

Cuando se prueba en el navegador:


Paso 8 - Barra de búsqueda

A continuación, comenzaremos a estilizar el área de búsqueda. Es básicamente un formulario con una casilla de entrada y un botón (ver paso 3). Para ello, añade el siguiente código dentro del div "header-content:

Y el estilo para que se vea bien:

Eso debería darnos:


Paso 9 - Enlaces a redes sociales

Debajo del div search, añade un div con un id de social_media. En él, puedes insertar una lista de enlaces de redes sociales de tu elección. Estoy usando el Paquete de iconos de redes sociales de Komodo Media

Y en la hoja de estilo:


Paso 10 - Banner deslizante

Comenzaremos con el banner deslizante  Empieza descargando Easy Slider 1.5 y pega los archivos en una carpeta llamada Banner.

Hay varios ejemplos en la carpeta de la biblioteca... imitaremos 02.html. Renombra el archivo, si es necesario, elimina todo el código HTML innecesario y reemplaza las imágenes con algunas imágenes de ejemplo.

Así, el archivo HTML para el banner debería ser algo así:

Y aquí está el CSS

En este punto deberías tener algo así:

No te preocupes si el deslizador presenta algunos problemas, lo arreglaremos en un minuto.

Ajusta la posición y sustituye las flechas

Sectoriza las dos flechas (anterior y siguiente) y guárdalas como archivos PNG en la carpeta de imágenes del directorio de pruebas del banner.

A continuación, ajusta el CSS para que funcione correctamente con las nuevas flechas

Lo que produce:

Posicionamiento

Ahora, vamos a establecer el posicionamiento, el ancho y la altura de todos los divs relacionados con el banner. También arreglaremos la librería JS para evitar cualquier problema relacionado con el div bubble adicional.

Aquí está el CSS modificado:

Y el resultado en el navegador:

Fondo de la burbuja

Ahora, sectoriza el fondo del contenido de la publicación.  Con sólo las burbujas de dialogo visibles en tu .PSD, dibuja un sector llamado "bg-bubble" y guárdalo como un archivo .png.

Modifica el CSS para añadir el fondo y ajustar el posicionamiento del div bubble, como corresponde.

Así es como se ve en el navegador; elimina todos los colores de fondo temporales si lo deseas.

Contenido de la publicación

Para terminar la sección del banner, vamos a añadir el HTML para el contenido de la publicación.

Combinación con el archivo principal de plantillas

Es el momento de combinar el módulo separado con nuestro documento principal.

Primero, copia la carpeta /js del banner a la raíz de la plantilla, luego añade todas las imágenes del banner en la carpeta /images al directorio de la plantilla.

A continuación, añade el siguiente código dentro de la etiqueta <head> de nuestro archivo index.html" :

Y añadir los divs del banner en consecuencia dentro de  top_banner div.

Y el CSS completo para hacer que el banner funcione

En breve estilizaremos el contenido de la publicación destacada. En este punto, sin embargo, deberías tener algo similar a la siguiente imagen:


Paso 11 - Envoltorio de contenido y fondo

Siguiendo con la maqueta, añade un div debajo del banner superior, llamado content_wrapper, y dentro de otro div llamado page_content, que contendrá la información real.

A continuación, para que se parezca al diseño, utilizaremos CSS3 para añadir las esquinas redondeadas al div page_content y al rizo de la página que hemos sectorizado en el paso 3.

Cómo debería ser nuestra página, en este punto:


Paso 12 - Imagen y título de la publicación

Vamos a hacer una publicación de prueba.

Según el diseño, necesitaremos tener una imagen cuadrada con el título de la publicación y la lista de categorías colocada en dos franjas por encima de ella. Vamos a tratar con el HTML primero.

Crea un div llamado post y colócalo dentro del div page_content. A continuación, añade una imagen, un título y algunos metadatos al contenedor.

El CSS para esta parte es complicado ya que cada entrada debe tener un ancho del 50% en referencia al contenedor page_content, además las franjas deben estar delante de la imagen. Tendremos que jugar con el posicionamiento relativo y los márgenes negativos para lograrlo.

Ahora deberías tener algo así:


Paso 13 - Fondo y posición del contenido de la publicación

Ahora, vamos a añadir un div que contiene el contenido de la publicación.

Sectoriza la imagen de fondo para el div post_content, y guárdala como un archivo PNG.

En primer lugar, estableceremos su posicionamiento en el archivo CSS.

Echando un vistazo en el navegador:


Paso 14 - Contenido de la publicación

Añadamos los contenedores para el resumen de la publicación, la información de la publicación y los comentarios:

Y el estilo para que todo se vea bonito:

¡Y ya terminamos con la publicación!


Paso 15 - Añade más publicaciones

Vamos a añadir más publicaciones a tu maqueta. Duplica este bloque tantas veces como quieras el div post. Debes deshacerte de la altura temporal que pusimos en el div page_content. Si todo se ejecuta correctamente, el diseño aumentará su altura a medida que agreguemos más publicaciones a la página de inicio.


Paso 16 - Contenido de la publicación destacada

Ahora que tenemos el estilo básico de la publicación terminado, vamos a estilizar el contenido de la publicación destacada. ¿Recuerdas que teníamos el siguiente código dentro del div bubble?

Añade el siguiente CSS y replica bubble en todas las diapositivas de nuestro banner rotativo.

También añadí un border y una box-shadow a la imagen deslizante:

Debería ser así:


Paso 17 - Widgets de pie de página

En lugar de la clásica barra lateral, quería añadir un pie de página listo para los widgets. Añade el siguiente código dentro del div footer. Dentro de la barra lateral, habrá otro contenedor llamado widget, y, dentro de ese div:

  • un título
  • una lista desordenada y
  • un div para la esquina rizada

Primero nos ocuparemos de la lista de categorías.

Ahora, en el archivo PSD, sectoriza la esquina, nómbrala widget-curl y guarda la imagen para la web como un archivo JPG. De nuevo, corta la pequeña flecha junto a los enlaces, llámala arrow y guárdala como un archivo PNG.

Y edita el archivo CSS así:

Cuando se pruebe en un navegador, deberías ver algo parecido a la siguiente imagen:


Paso 18 - Más widgets

Repite el código HTML para añadir un segundo o incluso un tercer widget de lista. Esta vez, añadiremos archivos al pie de página. Puedes probar el diseño ahora añadiendo varias copias del widget div para ver cómo queda. Lo ideal es que el área del pie de página aumente a medida que se añadan más widgets.

Así es como se ve con la sección de archivos añadida:


Paso 19 - Panel con pestañas

Como ejemplo de un widget más complejo, vamos a añadir un panel con pestañas con tres tipos diferentes de contenido en cada pestaña.

Primero, añade el siguiente código HTML como marcado básico: una lista desordenada para las pestañas, y divs con diferentes ids para el contenido. Estoy añadiendo una clase general, llamada tab a todos los divs de contenido para evitar duplicar el código en el archivo CSS.

Vamos a crear un documento JavaScript, llamado tabs.js, y guardarlo en la carpeta /js. Inclúyelo añadiendo esta línea a la etiqueta <head>

Ahora, añade un panel básico de pestañas jQuery añadiendo el siguiente código al archivo tabs.js.

Con la función de JavaScript funcionando, vamos a añadir el estilo para que tenga un aspecto atractivo. En primer lugar, tendremos que cortar la pequeña flecha que apunta a la pestaña seleccionada. Llámala tab-arrow, y guárdala como PNG.

Ahora agrega el siguiente código al archivo CSS:

Ahora deberías tener el panel de pestañas funcionando; ¡vamos a añadir el contenido dentro!


Paso 20 - Contenido de la pestaña

Vamos a añadir algo de contenido a la pestaña. Echando un vistazo al gráfico, te darás cuenta de que tenemos una lista de tres publicaciones (últimas y populares) con el título, un resumen, y un paginador en la parte inferior para navegar por las publicaciones.

Pega el siguiente código dentro de una pestaña:

Y ahora el CSS:

Replicar el HTML para cada pestaña. Así es como debería verse:


Paso 21 - Pie de página

Por último, añade la barra de navegación del pie de página y la información sobre el copyright:

Ahora, sectoriza la línea de degradado de 1px del archivo PSD, nómbrala "bg-footer-line" y guárdala como JPG. Por último, edita el CSS para configurar todo.


Conclusión

.

¡Y ya está! Hemos terminado con el proceso de conversión. El código utilizado en este caso ha sido probado en la mayoría de los navegadores. Si necesitas compatibilidad con IE6 y 7, no debería ser un gran problema escribir algunas correcciones para ellos específicamente. Nuestro diseño está ahora listo para ser integrado perfectamente en cualquier CMS. ¡Buena suerte y muchas gracias por leer!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.