Theme WordPress en Photoshop (Music Layou)

Este tutorial consta de tres fases que son: Diseño, Maquetación y conversión a wordpress. Esta es la primera parte en la cual desarrollaremos un diseño atractivo en photoshop, teniendo en cuenta que su objetivo final será una plantilla para wordpress.

7. Creando el Área de Contenido de la Web.

El área de contenido estará compuesta por el contenido en si y el sidebar o barra lateral, para empezar creamos una nueva guía Horizontal, Menú Vista > Guía Nueva a 50px de separación del slide.

Creamos una nueva carpeta llamada Contenido todo y trabajamos dentro de ella. Seleccionamos la Herramienta Rectángulo Redondeado con un radio de 10px y un color frontal gris (#e2e2e2) creamos un rectángulo de 800px x 900px, el ancho es el de las guía que colocamos al principio del tutorial.

grey Theme Wordpress en Photoshop (Music Layou)

le aplicaremos los siguientes estilos de capa al contenedor general.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

Dividiremos el área de contenido en 2 partes, para ello agregamos una nueva guía vertical a 550px, con lo cual nos queda un área de contenido de 550px y una barra lateral de 250px.

ya con las dos áreas definidas empezaremos a crear una entrada en la parte izquierda, Creamos otra carpeta dentro de Contenido y la llamamos Post 1 dentro de esta crearemos primero el titulo de la entrada. crearemos un rectángulo que será el fondo del titulo, para ello selecciona la herramienta Rectángulo redondeado y crea un rectángulo de 35px de alto y 375px de ancho, y lo colocamos como muestra la siguiente imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Aplicamos los siguientes estilos de capa al rectángulo anterior.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

Crearemos un aspecto 3D a la esquina izquierda de la barra. Con la capa de la barra de titulo seleccionada, seleccionamos la Herramienta Selección directa, seleccionamos el nodo de la izquierda y lo movemos hacia arriba, como muestra la siguiente imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Lo mismo con el nodo de mas abajo, debe de quedar de esta forma.

grey Theme Wordpress en Photoshop (Music Layou)

creamos una capa nueva por debajo de las dos capas que tenemos, seleccionamos la herramienta Marco elíptico y creamos una circunferencia de 13px x 13px, la rellenamos de color verde(#437201).

grey Theme Wordpress en Photoshop (Music Layou)

Repetimos el paso anterior pero para la parte inferior de la barra, Agregamos un titulo de ejemplo por encima de la barra con las siguientes características, después de agregar el texto nos quedara así.

grey Theme Wordpress en Photoshop (Music Layou)

Ya con el titulo listo crearemos los meta datos debajo del tito a unos 10px.

grey Theme Wordpress en Photoshop (Music Layou)

Debajo de los meta datos crearemos una linea para dividirlo del contenido, para ellos seleccionamos la herramienta Marco fila única, y creamos dos lineas una a continuación de la otra, como muestra la siguiente imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Para la imagen del post entraremos a la web http://lorempixel.com y generar una imagen de 200px x 200px, agregamos la imagen a10px de la linea de división y le aplicamos los siguientes estilos de capa.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

Agregaremos un texto a la derecha de la imagen, a unos 20px. con las siguientes características.

grey Theme Wordpress en Photoshop (Music Layou)

Con esto ya terminamos la parte del contenido, solo debes duplicar la carpeta post1 y cambiar los datos si quieres agregar más contenido. El área de contenido debería de quedar así:

grey Theme Wordpress en Photoshop (Music Layou)

¿Que te ha parecido este artículo? Dejanos tu valoración...

HorribleMaloBuenoMuy BuenoExcelente (1 votes, average: 5,00 out of 5)
Loading ... Loading ...

  • Juan Carlos

    La verdad que esta genial el tutorial y la plantilla en si, pero, ¿un poco largo el tutorial verdad?

    De todas Formas esta genial, se te olvido poner el PSD para Descargarlo :-D

    • jordano_p

      Jejeje, Se me olvido totalmente, gracias por recordarlo, ya he colocado el botón Descargar archivos base, ya puedes descargartelo.

  • gourman

    Este tutorial esta cojonudo. Si se puede decir. Estoy deseando ver las dos partes siguiente.
    Gracas tio!!

  • Fidel

    Muy bueno este tutorial gracias por compartir

  • http://www.denuncias-por-internet-mx.org/infracciones-df infracciones df

    Tal vez estoy fuera de topico, pero estoy explorando en iniciar mi propio pagina web y me preguntaba que se necesita para ponerse en movimiento? Estoy asumiendo que tener un blog como el tuyo costaria harto dinero? No soy muy bueno con el Internet, así que no estoy al 100% seguro. Cualquier consejo sería demasiado bienvendida.

    • jordano_p

      Para nada tiene que ser caro y menos si apenas empiezas, de todas formas hoy en día hay muchos servicios gratuitos que no te suponen ningún gasto, esto siempre depende de lo que quiera tener cada uno.

  • isra

    querías visitas pues aquí las tienes GRACIAS POR APORTAR

  • isra

    una pregunta no importar el tamaña del archivo en photoshop ?a la hora de maquetear

    • jordano_p

      No tiene nada que ver, el archivo de photoshop solo nos sirve como referencia para la maquetación, una referencia para los colores formas e imágenes a utilizar.

  • http://www.topromania.org/tebca tebca

    muy util. Gracias por traer algo asi al internet

  • Marcial

    Genial el tutorial! Felicitaciones!

  • Ivan Garcia

    Muy bueno el tutorial. Muchas gracias con el creo que puedo empezar a hacer una pagina web. Gracias de nuevo

  • jonatan ignacio

    huaaaahua si que te lusiste gracias por darte el tiempo con el tutorial hace tiempo busco este tipo de tutorial gracias.

  • Luis Flores

    Los enlaces para descargar los degradadoss y formas ya no funcionan , espero k lo arreglen pronto :) exelente tutorial me sirve muchooo gracias !! :)

    • http://jordanopolanco.com jordano_p

      Gracias por avisar, ya esta arreglado.

  • alex

    donde descargo el theme terminado ? lo quiero usar tal como esta para mi blog

    • http://jordanopolanco.com jordano_p

      Cuando termines el theme, lo debes agregar en la carpeta wp-content –> theme, y luego lo activas desde tu panel de control, Apariencia –> Themes.

  • Pingback: backlinks

  • Lecsy

    Por favor quisiera saber como exporto el psd al theme para wordpress, si hiciera falta un plugin por favor poner el link de la descarga, muchas gracias, el post esta genial. saludos desde cuba

  • http://miguelms.16mb.com/ Miguel

    Hola, el tutorial muy bueno. Quería descargar los archivos base, pero el link no funciona: http://www.web-desings.com/tutoriales/miusic_web_layou/Materiales_Music_Web_Layou_Tutorial.rar

    Haber si lo arreglas pronto…

    • http://jordanopolanco.com jordano_p

      Ya esta arreglado, puedes descargarlo desde el botón de descarga, al inicio del post.

  • http://celularesfull.com Dani

    Muchas gracias, es una buena guía, intento desarrollar una plantilla personalizada que solo la tenga mi blog, me ha servido de mucha ayuda :)

  • Pingback: fsgb80v7cbwe

  • http://NA Jairo Gomez

    Amigo gracias por este gran tutorial Felicitaciones, pues es esta muy completo Mil gracias de nuevo

    • http://jordanopolanco.com jordano_p

      Gracias a ustedes por sus comentarios, Saludos

  • Matias

    Hola,gracias por el aporte,tengo una pequeña duda, Quisiera saber el tamaño en pixeles de las barras y si se puede poner 2 una a cada lado para quedar así: Sidebar Contenido Sidebar muchas gracias. (PD:Si es facil de hacer disculparme,no entiendo mucho esto.)

    • http://jordanopolanco.com/ jordano_p

      Sí, es fácil de hacer, pero esta plantilla es muy estrecha como para agregarle 2 sidebar, para hacer esto debes modificar la estructura completa de la web.

  • http://gravatar.com/davidsntmr DavidSntmr

    Muy bueno sí señor, estoy haciendo mi theme con tu tutorial

    Saludos,

  • luija

    Buenísimo, muchas gracias!

  • Juan

    Jordano, excelente tutorial, bastante completo y detallado. Me pregunto, ¿Las medidas y procedimientos de la primera y segunda parte, sirven también para una plantilla de Blogger?

    • http://jordanopolanco.com Jordano Polanco

      Gracias @Juan,

      Efectivamente, en las dos primeras partes de este tutorial, se explica como crear un web en HTML y css a partir de un Diseño o PSD, con locual esto lo puedes aplicar a cualquier sistema ya que la estructura HTML es la base de toda web, sin importat en que lenguaje este programada.

      Sólo tendrás que adaptar este HTML al sistema de plantillas de Blogger.

  • Juan

    Jordano, la altura de la plantilla, ¿Determina la altura MAXIMA en el Blog? O a través de códigos esta altura se modifica, por la cantidad de comentarios, post, etc…