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

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)

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