13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

SummArg | Cursos y recursos para webmasters

Enviar

449 fans 195 followers 321 subscribers General Diseo Programacin WordPress Rincn del Webmaster Contactanos Taller de WordPress 07/09/2011

Clase 2: Cmo encarar el diseo a partir de un archivo PSD

Este artculo corresponde a la parte 3 de 13 en la serie Taller: Crear un theme WordPress desde cero - Ver todos Clase 1: Instalar WordPress en XAMPP, un servidor localClase 3: Comenzamos a maquetar! Taller: Crear un theme WordPress desde cero Clase 1: Instalar WordPress en XAMPP, un servidor local Clase 2: Cmo encarar el diseo a partir de un archivo PSD Clase 3: Comenzamos a maquetar! Clase 4: El bucle y jerarqua de plantillas Clase 5: El bucle avanzado: query_posts. Clase 6: el archivo header.php y los mens en WordPress Clase 7: Insertar un slider sin utilizar plugins Clase 8: Sidebars y widgets Clase 8 Anexo: Sidebar horizontal
www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/ 1/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

Clase 9: el archivo footer.php Clase 10: La plantilla de entrada y de comentarios Clase 11: La plantilla de pgina Bienvenidos a la segunda clase de Taller para crear un theme WordPress desde cero. En esta clase veremos como tomar un template en formato PSD (Adobe Photoshop) y convertirlo en un theme WordPress . Utilizaremos un template que hemos creado especialmente para este taller, lo bautizamos ThemeTaller. Est dividido en capas y agrupadas por secciones con un nombre descriptivo, pueden descargarlo y modificarlo libremente. Este template estar sujeto a modificaciones a lo largo del taller segn lo veamos conveniente. Les mostramos y entregamos el home de nuestro diseo. Descargar ThemeTalle r: ThemeTaller (4326)

El set de conos sociales es Socialis21 y pueden encontrar el link de descarga aqu: Socialis21 En el pie de pgina pueden encontrar la paleta de colores utilizada para el theme y la compartimos para que puedan crear nuevas secciones dentro de la plantilla haciendo uso de la misma.

www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/

2/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

Antes de empezar a maquetar conozcamos un poco lo que vamos a hacer. Los themes WordPress utilizan varios archivos a la vez para formar una pgina, que son llamados por funciones especficas de la plataforma para facilitar las cosas. Son similares a la funcin include de PHP y nos evitan tener que escribir la misma porcin de cdigo en varias plantillas. Por ejemplo, la seccin del encabezado del sitio siempre es igual, llevar un logo y una botonera que no deseamos que cambie. En un sitio construido ntegramente en HTML deberamos copiar este cdigo en cada una de las pginas. Pero en WordPress bastar con escribir todo el cdigo del encabezado dentro de header.php y luego solicitar el encabezado en cada seccin que lo necesitemos. Lo mismo cuenta para la barra lateral (sidebar.php) y el pi de pgina (footer.php). De ese modo cuando se lista el index de un sitio WordPress , ste estar compuesto de los archivos header.php, index.php, sidebar.php y footer.php. Para el caso de listar una pgina los archivos sern: header.php, page.php, sidebar.php y footer.php. Qu cambi? El inicio utiliza index.php para mostrar su contenido principal y una pgina utiliza el archivo page.php. Para solicitar desde el index.php los archivos en cuestin utilizaremos las funciones: 1 2 3 g e t _ h e a d e r ( ) ; g e t _ s i d e b a r ( ) ; g e t _ f o o t e r ( ) ;
?

Entonces dividiremos el home (index.php) en 4 archivos que los marcamos a la derecha en la siguiente imagen (en el zip de descarga del theme encontrarn la imagen en tamao grande).

www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/

3/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

A la izquierda indicamos los elementos que consideramos necesario nombrar, con sus respectivos atributos class e id. De este modo el archivo header.php contendr, entre cosas, el elemento #header, que dentro de s contendr el un #menu-top, el #logo y el #menu. El contenido de la pgina (el fondo blanco con bordes redondeados) se llamar #content y el ancho del diseo ser fijo (960px). Todos los colores y bordes pueden definirse directamente desde el CSS, aunque si quieren ser fieles al diseo slo debern recortar un rectngulo pequeo con el fondo de la barra del men y el fondo gris de los productos destacados:

Para recortar las partes del theme en Photoshop, debern utilizar la herramienta mscara y seleccionar la seccin. En nuestro caso seleccionamos el logo. Luego seleccionan image > crop y guardan el resultado utilizando la opcin save for web & devices (guardar optimizado para la web) como logo.png. Tambin necesitarn repetir el proceso con los conos sociales.

www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/

4/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

La clase que viene comenzamos a maquetar esta pgina. Descarguen el archivo PSD y empiecen a ver como est compuesto. Volver al temario del Taller
Me gusta Tw ittear 0 5 3

Entradas Relacionadas Clase 8: Sidebars y widgets Theme Design Group Taller: Crear un theme WordPress desde cero Tutorial paso a paso para construir un theme minimalista en Photoshop: Myriad Pro Clase 10: La plantilla de entrada y de comentarios Clase 9: el archivo footer.php Clase 5: El bucle avanzado: query_posts.

Dejar un comentario
1. Bitacoras.com 7-9-11 Informacin Bitacoras.com Valora en Bitacoras.com: Bienvenidos a la segunda clase de Taller para crear un theme WordPress desde cero. En esta clase veremos como tomar un template en formato PSD (Adobe Photoshop) y convertirlo en un theme WordPress. Utilizaremos un template qu.. 2. Juanlu 13-9-11
www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/ 5/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

Genial el curso, de momento muy bien explicado, llevo tiempo buscando algo as y por fin lo he encontrado, espero las prximas entregas con impaciencia. Gracias 3. Nekko 13-9-11 Gracias Juanlu! Espero esta semana poner la tercera parte del tutorial. 4. skabadip 16-9-11 Espero impaciente las siguientes entregas. Muchas gracias. 5. Antonio Soto 1-10-11 Gracias por el curso, sigue as amigo. 6. Paginas Web Miami 30-11-11 Excelente yo soy un utilizador de wordpress para mis clientes y ojala que cuando me toco aprender hubiera encontrado algo como este curso suyo. Felicidades y enhorabuena. 7. Carlos 3-3-12 Este curso me parece genial. Una vez me he introducido en WordPress, quera aprender para aportar un elemento de personalizacin como por ejemplo el desarrollo de un tema, y con este curso podr hacerlo. Enhorabuena por el trabajo. Es excelente. 8.
www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/ 6/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

Elisa 11-8-12 Los amo. Hace tiempo que buscaba algo as, para entender la forma desde el fondo. Soy usuaria y modifico plantillas, pero me haca un lo brbaro con las que venan en psd. Gracias! 9. remanencia 4-11-12 Interesante perspectiva el Modo Visual para tener una idea de donde deberian ir los enganches PHP de WordPress hacia el Diseo de la Plantilla que estemos desarrollando. Gracias XD. 10. Balo 14-1-13 Amigo el mejor tutorial paso a paso que he encontrado en la web! en verdad muy agradecido por el conocimiento que estas compartiendo! 11. viajeshogaral 18-1-13 Estoy siguiendo el tutorial por que voy a migrar la pagina de la empresa a wordpress. Espero que me sirva.. Un saludo 12. elprofecibernetico 6-2-13 Gracias, estoy llevando el curso en linea ahora mismo y creo que esta bien explicado. Por lo que voy a ir comentando cada vez que termine los mdulos. Gracias nuevamente y que sigan adelante ya que s que no es fcil tener que ensear de forma escrita. 13. Marcos
www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/ 7/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

17-4-13 Otra forma que esta muy bien es convertir a algunos de los elementos en objetos inteligentes, desde ah entrar al archivo y guardarlos de manera individual. 14. mario 29-4-13 Muy bien explicado, sumamente didctico. se agradecen sitios como este para complementar conocimientos. 15. lili 29-4-13 ME da error , falta hoja de estilo :/ 16. Daniel 24-5-13 Voy a probar a seguir tus recomendaciones oara darle un lavado de cara a mi web de wordpress. Si alguien quiere recomendarme algo estar encantado de escuchar y aprender.. Mi web es dermatologo online

Dejar un comentario
Nombre (required) Mail (No se publicara) (required) Website

www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/

8/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

Enviar
Me gusta Tw ittear 0 5 3

Taller de WordPress
20 clases

Taller de HTML + CSS

Nivel Inicial-Prximamente

Taller de jQuery

Nivel Inicial-Prximamente

Taller de PHP

Nivel Inicial-Prximamente

Montar un negocio online

www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/ 9/10

13/08/13

Clase 2: Cmo encarar el diseo a partir de un archivo PSD | SummArg

Prximamente
3d ajax

animacion audio botones codecanyon css css3 diseo email envato facebook firefox Flash formulario

functions.php galeria

google grficos html html5 Iconos y Recursos Grficos imagenes

javascript jquery menu miniaturas Photoshop / Fireworks plugin premium psd redes sociales seguridad
seo shortcode

slider taller theme tooltip twitter vBulletin video Web webmaster Wordpress

Polticas de privacidad Contactanos

www.summarg.com/2011/clase-2-como-encarar-el-diseno-a-partir-de-un-archivo-psd/

10/10