Web Desings

Diseño & Desarrollo Web

Theme WordPress en Photoshop (Music Layou)

Valoración del artículo
1 Star2 Stars3 Stars4 Stars5 Stars (9 votos)
34948 Visitas Ver Comentarios (30)
Portada tutorial
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.

Herramientas:Adobe Photoshop Cs5

Dificultad:Intermedia

Duración Estimada:60-120 Min.

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)

1 Star2 Stars3 Stars4 Stars5 Stars (9 votos)
Páginas: 1 2 3 4 5 6

Escrito por: Jordano Polanco

Font-End and Back-End Developer

Hola, soy el editor y escritor de este blog, trabajo como Diseñador & Desarrollador web y comparto mis conocimientos en este blog. Otros Post (17)

Twitter Facebook Jordano Polanco

Suscríbete por correo

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada:

Add Comment

Discussion: 30 Comentarios

  1. Juan Carlos dice:

    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 dice:

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

  2. gourman dice:

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

  3. Fidel dice:

    Muy bueno este tutorial gracias por compartir

  4. 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 dice:

      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.

  5. isra dice:

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

  6. isra dice:

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

    • jordano_p dice:

      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.

  7. tebca dice:

    muy util. Gracias por traer algo asi al internet

  8. Marcial dice:

    Genial el tutorial! Felicitaciones!

  9. Ivan Garcia dice:

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

  10. jonatan ignacio dice:

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

  11. Luis Flores dice:

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

  12. alex dice:

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

  13. Lecsy dice:

    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

  14. Miguel dice:

    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…

  15. Dani dice:

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

  16. Jairo Gomez dice:

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

  17. Matias dice:

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

  18. DavidSntmr dice:

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

    Saludos,

  19. luija dice:

    Buenísimo, muchas gracias!

Deja un comentario

© Copyright Web Desings | Power By Wordpress | Desings By: Jordano Polanco