Template de WordPress: pasar de PSD a HTML5
Esta es la segunda parte del tutorial Diseñar template de WordPress en Photoshop. Ahora vamos a transformar ese diseño en una página web con HTML5 y CSS3, Para esto utilizaremos algunas de las nuevas etiquetas de HTML5, ademas trataremos de evitar la mayor cantidad de imagenes posibles utilizando algunas de las propiedades de CSS3.
Dicho esto nos ponemos mano a la obra 
.
Les digo que el tutorial es un poco largo, pueden seguir por partes para que no se les haga muy pesado, aquí les dejo un demo y los archivos de la web ya maquetada, espero disfruten del tutorial y puedan aprender cosas nuevas, cual quier duda o sugerencia no duden en comentar.
En esta parte del tutorial cortaremos las imágenes necesarias para la web, utilizaremos algunas técnicas css3 para evitar su uso excesivo..
Utilizaremos las nuevas etiquetas html5 para la estructura principal y para el estilo utilizaremos las nuevas propiedades css3 como: degradados, sombras y transiciones.
Estructura de archivos y carpetas a utilizar
Como sabemos que estamos trabajando para lo que será una plantilla para wordpress en el futuro, teniendo esto en cuenta utilizaremos la siguiente estructura de archivos.
- CSS: Albergará los archivos css, en nuestro caso solo tendrá el archivo reset.css y las fuentes que utilizaremos en la web.
- Images: como lo indica su nombre estarán alojadas todas las imágenes de la plantilla, en nuestro caso también colocaremos una carpeta llamada tmp(temporal) para colocar las imágenes del slider y el post.
- Js: aloja nuestros archivos JavaScript.
- style.css: en este archivo tenemos la opción de importar desde la carpeta css los estilos de la pagina o agregarlos directamente en ella, en nuestro caso he importado la hoja de estilos reset.css y he agregado todos los estilos de la web en este archivo.
Una vez creada esta estructura de archivos y carpetas, abrimos index.html en nuestro editor de código y empezamos a codificar el HTML, yo he utilizado DreamWeaver y Notepad ++.
Cortar las imágenes Necesarias
[nota:934c11f811]A la hora de cortar imágenes es muy tedioso buscar las capas, para facilitar este trabajo puedes seleccionar la Herramienta Mover y en la barra de opciones marcar la opción seleccionar automáticamente, de esta forma solo con hacer clic en un elemento del espacio de trabajo te seleccionará automáticamente la capa en el panel capas. [/nota:934c11f811]
Para empezar a aplicar estilos a la página primero cortaremos las imágenes necesarias. Empezaremos por la imagen de fondo, para el fondo utilizaremos 2 imagenes, una que es el fondo general de la web y otro el fondo central superior que es una especie de rayo de luz.
Fondos de la web
para el fondo general ocultamos todas las carpetas en el panel capas menos la de fondo, seleccionamos la herramienta Marco rectangular, creamos una selección de unos 100px x 100px.
Con la selección hecha vamos al menú edición > copiar combinado, luego creamos un nuevo documento (Ctrl + N) si te fijas al crear el nuevo documento ya viene con las dimensiones de la selección anterior, pegamos (Ctrl + V) la selección copiada anteriormente.
Para guardar la imagen ir al menú Archivos > Guardar para web y dispositivos (Ctrl+Alt+Shif+s) lo guardamos como page-bg.jpg en la carpeta imagen que creamos al principio del tutorial y lo configuramos de la siguiente manera.
De esta forma guardaremos todas las imágenes que cortemos, con la salvedad de que las imágenes que necesitan transparencia las guardaremos en png, pero lo demás será el mismo proceso.
Cortemos ahora la imagen de fondo central,ocultemos la capa de fondo verde para solo dejar activa las dos que forman los rayos, seleccionemos la herramienta marco rectangular y creamos una selección a todo ancho del área de trabajo 800px y de alto lo necesario para cubrir toda la imagen.
Para guardar esta imagen seguimos el proceso anterior solo que ahora seleccionamos la opción PNG-24 y guardamos la imagen en la carpeta images como: luz-body-bg.png, ya tenemos las dos imágenes necesarias para el fondo.
Logo
Continuemos cortando imágenes, para el menú no será necesario ya que utilizaremos CSS3, la siguiente sería el logo de la web, para este utilizaremos otro método de corte de imágenes en photoshop, con la tecla ALT pulsada hacemos clic en el ojo de la carpeta logo para solo dejar visible esta, pulsamos Clic derecho > duplicar Grupo, en el nuevo cuadro seleccionamos Nuevo en el desplegable Documento, como muestra la imagen.
El resultado será un nuevo documento con la mismas dimensiones que el Documento general de la web, para recortarlo ir al Menú imagen > Cortar…, en el cuadro que te sale selecciona la opción Píxeles transparentes, con esto solo queda el área del documento donde exista un pixel al menos de la imagen, de esta forma no nos equivocamos cortando mas o menos en el área de la imagen, para terminar guardamos la imagen como logo.png
Esta forma de recorte solo suelo utilizarlas para imágenes que tienen fondo transparente y no se pueden visualizar correctamente las sombras o reflejos que tiene aplicados.
Manejadores del slider
Para el slider solo necesitaremos los dos botones left y right, lo demas lo crearemos con css3, estos botones también se pueden crear fácilmente pero no quiero alargar mucho el tutorial.
Ocultamos todas las capas y dejamos visible solo la carpeta del botón left (Alt + clic en la carpeta), duplicamos en un nuevo documento la carpeta, pulsamos Alt + Clic sobre la mascara de la carpeta Nav Left para desactivarla y ocultamos la capa sombra.
Para terminar con el botón left recortamos la imagen, menú imagen > Cortar…, guardamos el botón como slider-ctrl-left.png.
Para recortar la sombra ocultamos todas las capas menos la capa sombra, vamos al menú imagen > cortar…, la guardamos como sombra-slider-control-l.png.
Para el botón de la Derecha solo abrimos la imagen del botón izquierdo en photoshop, vamos al menú Edición > Transformar > Voltear horizontal y lo guardamos como slider-ctrl-right.png y esta listo el botón derecho, el mismo proceso con la sombra y la guardamos como sombra-slider-control-r.png, con esto ya tenemos los botones del slider.
Fondo del titulo, post y widget sidebar
Para cortar el fondo del titulo de los post utilizaremos el mismo método que para los botones del slider, seleccionamos las dos capas correspondientes al fondo del titulo y pulsamos en duplicar capas en un documento nuevo, ir al menú imagen > cortar… y la guardamos como title-bg.png
Para el titulo del sidebar seguimos el mismo proceso anterior y lo guardamos como title-bg-sidebar.png.
División del contenedor principal
Para dividir los post del sidebar utilizaremos una imagen que se repetirá en forma vertical, seleccionemos la capa Sombra sidebar, la duplicamos en un nuevo documento, creamos una nueva capa por debajo de esta y con la capa Sombra sidebar seleccionada hacemos clic derecho > combinar hacia abajo, esto para eliminar los estilos de capa que contiene.
Con la herramienta Recortar hacemos una selección de unos 10px de alto y todo el ancho de la imagen, pulsamos enter y la guardamos como bg-content.png
Imágenes necesaria del sidebar
Para el sidebar solo necesitamos el icono de la lista, las imágenes de la lista vídeos la dejare en los archivos del tutorial, para recortar el icono seguir el mismo proceso, dupliquen la capa en un nuevo documento, ir a imagen > recortar… y guardarla como lista-noticia-arrow.png.
Imágenes necesaria del footer
En el footer solo necesitamos el botón de la derecha para subir arriba, sigue el mismo proceso para recortar la imagen y guárdala como goTop-footer.png
Ya tenemos todas las imágenes que utilizaremos para la web, el siguiente paso a seguir será la implementación de HTML y css3 para dar forma a nuestra web, empezamos en seguida.
Código Base de la web, archivo index.html
En el archivo index.html crearemos la estructura base de la web el cual contiene las principales secciones.
Código :
<!DOCTYPE HTML> <html> <head> </head> <body> <!-- WRAPPER --> <div id="wrapper" class="clearfix"> <!-- NAV#TOP-MENU --> <nav id="top-menu" role="navigation" class="clearfix"> </nav> <!-- FINAL NAV#TOP-MENU --> <!-- HEADER --> <header id="header" class="clearfix"> </header> <!-- FINAL HEADER --> <!-- #MAIN --> <div id="main" class="clearfix"> </div> <!-- FINAL #MAIN --> <!-- #FOOTER --> <footer id="footer" class="clearfix" role="contentinfo"> </footer> <!-- FINAL #FOOTER --> </div> <!-- FINAL WRAPPER --> </body> </html>
Si te fijas en el código anterior lo primero que vemos es el DOCTYPE que trae HTML5 con diferencia con la versión anterior que existían tres tipos de DOCTYPE, ahora con html5 solo existe uno y mucho más sencillo.
Como muestra el código anterior la página estará compuesta por 5 bloques principales, entre ellos tres etiquetas nuevas en HTML5.
- DIV ID wrapper: Este bloque contendrá todos los demás bloques de la web, este define el ancho que utilizaremos.
- NAV: Esta etiqueta delimita el área de navegación de la página y estará también el buscador.
- HEADER: Dentro de esta etiqueta colocaremos el logos y el slider de la web.
- DIV ID main: Este bloque delimitará el espacio reservado para nuestro contenido y la barra lateral o sidebar.
- FOOTER:En este bloque se colocara la información del pie de página y un menú de navegación.
Configuración de head
En nuestro head debemos agregar los archivos js,css y los meta y todos los script que utilizará la web. El siguiente …
Continua leyendo desde la fuente
Related posts:
- Diseñar template de WordPress en Photoshop En este tutorial realizaremos un theme para WordPress en Photoshop,...
- Template Web corporativo en Photoshop Haremos mediante Photoshop el diseño de un template Web de...
- Web Template minimalista en Photoshop Diseña en Photoshop un estilo de diseño web minimalista. Ayudándonos...
- Layout Sensible en HTML5 con Media Queries y JS Con el lanzamiento de mi nuevo sitio web, decidí poner...
Related posts brought to you by Yet Another Related Posts Plugin.
Leave a Reply