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.

4. Creando el Buscador

Con la herramienta rectángulo redondeado crea dos cajas al alado derecho de la barra de navegación una para el campo de búsqueda de 135px x 35px y el botón de 40px x 30px. que irá ubicado dentro del campo de búsqueda anterior.

grey Theme Wordpress en Photoshop (Music Layou)

Al campo de búsqueda aplicaremos los siguientes estilos de capa.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

Ya lista el área de búsqueda aplicaremos los siguientes estilos de capa al botón.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

para terminar agregamos un texto en el cuadro de búsqueda de color(#888888) Arial 10px, y al botón un texto, color (#6d9110) Bauhaus 93 18px. con todos estos pasos tendremos una barra de navegación como en la siguiente imagen.

grey Theme Wordpress en Photoshop (Music Layou)

5. Crean el Logo de la Web

Selecciona la herramienta texto, en la parte izquierda debajo del menú pegado a la guía izquierda, crear la frase de su logo con color blanco(#ffffff), tamaño 75px. luego le aplicamos los siguientes estilos de capas.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

Agregaremos un reflejo al texto, para ello duplicamos la capa de texto, vamos al menú edición > transformar > voltear verticalmente, colocamos el texto uno debajo del otro creando un efecto espejo.

grey Theme Wordpress en Photoshop (Music Layou)

Apliquemos una mascara de capa al texto volteado desde el panel de capa en la parte inferior esta el botón mascara de capa, quitamos los estilos a la capa Clic derecho > Borrar estilos de capa. Con la mascara de capa seleccionada coloca negro como color frontal y un degradado de negro a transparente y lo aplicamos de abajo hacia arriba en la letras del reflejo, Jugando con el degradado y la opacidad de la capa debería de quedar algo cosas como esto:

grey Theme Wordpress en Photoshop (Music Layou)

  • 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…