El diseño de un theme para WordPress

El diseño de un theme para WordPress

Fecha: 04-Feb-2010 | Autor: .
Guardado en: Themes

Bueno, hoy tenemos una nueva entrega de Jueves de WordPress y veremos el proceso de diseño de un blog para WordPress (que en futuras ediciones pasaremos a xHTML y CSS e integraremos a WordPress). Consideré que una forma interesante de mostrar el proceso era mediante un videotutorial, y éste fue el resultado, espero que lo disfruten:


¿Por qué este anuncio?

El diseño.

ÆtheriusClic para ampliar

Recursos utilizados.

Iconos FamFamFam, imágen Abstract Background, imágen Sunrays, autoformas RSS para PhotoShop, generador de Lorem Ipsum.

PD: en la mitad del tutorial, se cuela vía MSN el amigo Mario Navas de FreelanceColombia.com, un saludo para él ;)


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

33 comentarios, participa!

  1. Gusachi

    04. Feb, 2010

    Muy bueno !!!! Gracias por tu trabajo. Única acotación: sin música de fondo seria mas agradable y mas claro .

  2. Marcelo

    04. Feb, 2010

    Excelente, gracias por tu opinión ;)
    Tendré en cuenta ese detalle (y cualquier otro que me sugieran) para próximos VideoTutoriales :)

    Gracias porque esos consejos son los que ayudan a mejorar! Un saludo!

  3. Isaies

    04. Feb, 2010

    Perfecto el tutorial, Marcelo.
    Aunque personalmente lo de la música no lo veo mal… está muy baja y no me molesta. Pero para gustos, colores.

    Gracias por el tutorial! Estoy ansioso por el del próximo Jueves!!
    Saludos

  4. Pablo

    04. Feb, 2010

    hey gracias man! ;)

  5. Pablo

    04. Feb, 2010

    oye Marcelo, cómo lo hago para poder poner las categorías en la parte de arriba de la página y que se desplieguen las subcategorías como menú? (así como está en tu página) :B

    re gracias, muy buen tutorial ;)

  6. […] el 1° video tutorial de Marcelo en el que nos enseña en esta 1° parte como diseñar un theme en WP desde Photoshop y que promete para futuras entregas pasarlo a xHTML&Css y luego integrarlo al CMS WordPress. […]

  7. Marcelo

    04. Feb, 2010

    Isaies, Pablo, gracias por sus comentarios.
    Gracias Isaies por brindar otro comentario acerca de la música de fondo.
    Pablo, eso puede hacerse al generar el menu de categorías, primero necesitas un menu desplegable, y luego integrarlo en WordPress…

    Quizá cuando comencemos a integrar el theme podemos explicarlo (aunque en este caso no se utilice un menu desplegable).

  8. Yuri

    05. Feb, 2010

    Muy bueno Marce! Para cuando yo tenga mi blog hago uno pero con GIMP (?)

    Un comentario, el lorem ipsum es latín no griego.

    Espero la próxima entrega con la misma ansiedad que espero el próximo capitulo de Lost, enserio lo digo, hace tiempo que venía buscando algo asi.

    Saludos!

  9. luchosar

    05. Feb, 2010

    Mis respetos, compartir conocimientos de forma altruista es muy bello…Excelente.
    Estoy ansioso por la segunda parte, los que estamos (y vivimos ) en este mundo del diseño web nos ayudaria enormemente ese segubdo turtorial que es clave…te pido lo hagas como si fueras a explicarle a un anciano de 90 años o un nieño de 4…(osea, suave, tranquilo..tu me entiendes. )

    Mis respetos!

  10. Federico

    05. Feb, 2010

    Muy pero muy claro! Se nota que tenes un manejo del Photoshop muy bueno, a mi hacer eso me puede llevar un día :P

    Con todo la parte que personalmente mas se me complica, es la del jueves que viene, así que estaré atento!

    Saludos y felicitaciones por la iniciativa!

  11. Ichigo

    05. Feb, 2010

    Muy buen video tutorial, me sirvió mucho, ahora estoy maquetando un theme para un nuevo sitio que estoy haciendo y me viene de lujo, a esperar la próxima entrega :D

    Saludos.

  12. Marcelo

    06. Feb, 2010

    Yuri, dije que era griego? si es así quise decir Latín sip :P
    Opa, un halago la analogía con Lost (una genial serie por cierto) ;)

    luchosar, veo que hay bastante expectativa por la próxima entrega, espero estar a la altura! y tendré en cuenta de hacerlo bien sencillo.

    Federico, gracias :) el jueves que viene vamos a maquetarlo (xHTML y CSS) y el otro integrar ese códgo en WordPress, nos leeremos por aca entonces!

    Ichigo, genial, me alegro que sirva! nos leemos el próximo jueves (o antes en algún otro post) ^_^

  13. Mario

    07. Feb, 2010

    genial Marcelo!
    que bien logrado :)
    un saludo!

  14. Marcelo

    08. Feb, 2010

    Gracias Mario por dejarnos tu opinión :D

  15. Lukas

    08. Feb, 2010

    Hey! Como te comentaba en http://pixelar.me/jueves-de-wordpress/ estoy haciendo cada paso de los que nos estás enseñando por acá… :P – Como no nos dijiste cuales programas ibamos a necesitar, no me preocupé por eso en el momento – Pero nomás hice correr el video para darme cuenta de que requieres PhotoShop para maquetar los diseños de las páginas… ¿Conoces alguna alternativa libre – ya que yo utilizo linux – para poder maquetar el diseño de la página?

    Aparte de esto… El video estuvo muy bueno, claro, entendible, la música no molestaba, talvez algo rápido los movimientos – pero para eso está el boton de pause – en fin, excelente entrega! :D

  16. Marcelo

    08. Feb, 2010

    Gracias por tu comentario Lukas! ;)
    Por supuesto que el diseño puedes hacerlo con cualquier otro programa.

    Para linux podrías utilizar Gimp, o tu editor de gráficos preferido ;)

    Saludos!

  17. Lukas

    09. Feb, 2010

    Sorry… Yo de nuevo… ¿En que formato necesitamos el archivo de salida? (No me llevo muy bien con GIMP así que utilicé Inkscape), pero hay unas transparencias que no me salen como van… Asi que lo exporté a PDF… ¿Funcionará así?

  18. Marcelo

    09. Feb, 2010

    Hola Lukas, no importa en que formato lo tengas, porque el próximo paso implicará cortarlo e ir exportando cada imagen, fondo o botón como JPG o PNG para utilizar en web al maquetarlo.

    De eso se tratará el próximo tutorial: pasar ese diseño (o cualquier otro) a HTML, CSS e imágenes.

  19. Nekko

    09. Feb, 2010

    Muy buen trabajo, estaré esperando al jueves para ver el tutorial en donde maquetas el diseño.

  20. Marcelo

    09. Feb, 2010

    Gracias Nekko, te esperamos por aquí ;)

  21. Fernando

    11. Feb, 2010

    Hola, estoy muy contento de aver encontrado tu blog, la verdad es muy bueno el contenido y lo mas bueno de esto es que atrae, la verdad espero que sigas publicando cosas como estas que ayudan bastante.

    Ansioso para ver como maquetas en CSS & XHTML, y despues integrarlo a wordpress.

    Espero aprender con tus videotutoriales, tutoriales.

    PD: Que IDE usas para maquetar los sitios ?

    Un saludo desde Argentina :)

  22. […] y nos toca aprender a maquetar un tema para WordPress. La semana pasada habíamos realizado el diseño del tema y hoy lo […]

  23. Marcelo

    11. Feb, 2010

    Fernando, gracias por tu comentario.
    El IDE que utilizo (aunque cada uno puede utilizar el de su preferencia, es Netbeans que mencioné en un post esta semana ;) Saludos!

  24. Fernando

    11. Feb, 2010

    Si, claro cada uno tiene sus gustos , pero no esta de mas probar netbeans, ya que no lo conozco y capas que me amigue, yo uso este Komodo Edit 5, esta bueno.

    Mirando : Maquetando un theme de WordPress :)

    Saludos !

  25. Snyflex

    12. Feb, 2010

    Esta muy muy bueno el tutorial mano, hace poco tiempo que puse un blog y por falta de tiempo para estudiarme eso, no eh podido hacer mi propia plantilla, por lo cual uso uno de los temas que hay en la libreria de wordpress, pero con este tutorial esta mas que sencillo. seguire al tanto de los demas tutoriales.

    Saludos;

  26. Marcelo

    12. Feb, 2010

    Muchas gracias Snyflex, me alegro que te haya gustado!

  27. […] dejo para que lo vayan conociendo, este increíble tutorial de cómo diseñar una plantilla de WordPress desde […]

  28. teeswood

    15. Sep, 2010

    :P cerca del minuto 12 que musica era? me gusto, ademas muy bueno el trabajo

  29. luz diseño web

    04. Mar, 2011

    muy bueno el tutorial, gracias!!!

  30. Gevasa

    02. Sep, 2011

    gracias por tips

  31. johanso

    04. Nov, 2011

    excelente.. gracias por este tutorial,, me sirve mucho..

  32. gracias

    27. Feb, 2012

    Gracias, gracias y gracias. Qué más puedo decir? ¿Gracias?

  33. Andres

    18. Abr, 2013

    Hola:

    Estuve siguiendo CADA uno de los pasos que explicas en el video y el diseño se ve bueno; yo habia hecho un theme wp desde cero un poco mas sencillo, y estoy practicando con estos videos para ampliar mis conocimientos. Felicidades y sigue asi.
    P.D: cuando lo termine, te mandaré mi version del theme.

    Andrés

Deja tu opinión