SummArg | Cursos y recursos para webmasters

Clase 2: Cómo encarar el diseño a partir de un archivo PSD

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 según lo veamos conveniente. Les mostramos y entregamos el home de nuestro diseño.

Descargar ThemeTaller: ThemeTaller (6322)

El set de íconos sociales es Socialis21 y pueden encontrar el link de descarga aquí: Socialis21

En el pie de página 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.

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 página, que son llamados por funciones específicas de la plataforma para facilitar las cosas. Son similares a la función include de PHP y nos evitan tener que escribir la misma porción de código en varias plantillas. Por ejemplo, la sección 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 deberíamos copiar este código en cada una de las páginas.

Pero en WordPress bastará con escribir todo el código del encabezado dentro de header.php y luego solicitar el encabezado en cada sección que lo necesitemos. Lo mismo cuenta para la barra lateral (sidebar.php) y el pié de página (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 página los archivos serán: header.php, page.php, sidebar.php y footer.php. ¿Qué cambió? El inicio utiliza index.php para mostrar su contenido principal y una página utiliza el archivo page.php.

Para “solicitar” desde el index.php los archivos en cuestión utilizaremos las funciones:

get_header();
get_sidebar();
get_footer();

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 encontrarán la imagen en tamaño grande).

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 página (el fondo blanco con bordes redondeados) se llamará #content y el ancho del diseño será fijo (960px). Todos los colores y bordes pueden definirse directamente desde el CSS, aunque si quieren ser fieles al diseño sólo deberán recortar un rectángulo pequeño con el fondo de la barra del menú y el fondo gris de los productos destacados:

Para recortar las partes del theme en Photoshop, deberán utilizar la herramienta máscara y seleccionar la sección. En nuestro caso seleccionamos el logo. Luego seleccionan image > crop y guardan el resultado utilizando la opción save for web & devices  (guardar optimizado para la web) como logo.png. También necesitarán repetir el proceso con los íconos sociales.

La clase que viene comenzamos a maquetar esta página. Descarguen el archivo PSD y empiecen a ver como está compuesto.

Volver al temario del Taller

Dejar un comentario

  1. Información 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

    Genial el curso, de momento muy bien explicado, llevo tiempo buscando algo así y por fin lo he encontrado, espero las próximas entregas con impaciencia.
    Gracias

  3. Nekko

    Gracias Juanlu! Espero esta semana poner la tercera parte del tutorial.

  4. skabadip

    Espero impaciente las siguientes entregas.

    Muchas gracias.

  5. Gracias por el curso, sigue así amigo.

  6. 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

    Este curso me parece genial. Una vez me he introducido en WordPress, quería aprender para aportar un elemento de personalización como por ejemplo el desarrollo de un tema, y con este curso podré hacerlo. Enhorabuena por el trabajo. Es excelente.

  8. Elisa

    Los amo. Hace tiempo que buscaba algo así, para entender la forma desde el fondo. Soy usuaria y modifico plantillas, pero me hacía un lío bárbaro con las que venían en psd.
    Gracias!

  9. Interesante perspectiva el Modo Visual para tener una idea de donde deberian ir los enganches PHP de WordPress hacia el Diseño de la Plantilla que estemos desarrollando.

    Gracias XD.

  10. Amigo el mejor tutorial paso a paso que he encontrado en la web! en verdad muy agradecido por el conocimiento que estas compartiendo!

  11. Estoy siguiendo el tutorial por que voy a migrar la pagina de la empresa a wordpress. Espero que me sirva.. Un saludo

  12. 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 módulos. Gracias nuevamente y que sigan adelante ya que sé que no es fácil tener que enseñar de forma escrita.

  13. Marcos

    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

    Muy bien explicado, sumamente didáctico.
    se agradecen sitios como este para complementar conocimientos.

  15. ME da error , falta hoja de estilo :/

  16. 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

  17. Gracias por escribir: Cómo encarar el diseño a partir de un archivo PSD

  18. […] Clase 2: Cómo encarar el diseño a partir de un archivo PSD […]

  19. […] Clase 2: Cómo encarar el diseño a partir de un archivo PSD […]

  20. […] Clase 2: Cómo encarar el diseño a partir de un archivo PSD […]

  21. Juan Carlos

    Hola:
    Me parece un curso muy bueno, uno nunca deja de sorprenderse lo suficiente, por los contenidos gratuitos y de calidad, que se encuentran en internet…
    Acabo de empezar y he visto que se indica en la página 9 del pdf, que la imagen de la home que está en baja, se incluye en alta en la carpeta de themes, pero no es así.
    ¿Estoy haciendo algo mal? Me he bajado todo de un enlace en el que está el libro y un zip con los contenidos del curso.
    Muchas gracias por compartir este curso.

Dejar un comentario