Theme WordPress en Photoshop (Music Layou)
(8 votos)
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.
Al campo de búsqueda aplicaremos los siguientes estilos de capa.
Ya lista el área de búsqueda aplicaremos los siguientes estilos de capa al botón.
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.
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.
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.
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:
Loading ...
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
Jejeje, Se me olvido totalmente, gracias por recordarlo, ya he colocado el botón Descargar archivos base, ya puedes descargartelo.
Este tutorial esta cojonudo. Si se puede decir. Estoy deseando ver las dos partes siguiente.
Gracas tio!!
Muy bueno este tutorial gracias por compartir
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.
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.
querías visitas pues aquí las tienes GRACIAS POR APORTAR
una pregunta no importar el tamaña del archivo en photoshop ?a la hora de maquetear
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.
muy util. Gracias por traer algo asi al internet
Genial el tutorial! Felicitaciones!
Muy bueno el tutorial. Muchas gracias con el creo que puedo empezar a hacer una pagina web. Gracias de nuevo
huaaaahua si que te lusiste gracias por darte el tiempo con el tutorial hace tiempo busco este tipo de tutorial gracias.
Los enlaces para descargar los degradadoss y formas ya no funcionan , espero k lo arreglen pronto
exelente tutorial me sirve muchooo gracias !! 
Gracias por avisar, ya esta arreglado.
donde descargo el theme terminado ? lo quiero usar tal como esta para mi blog
Cuando termines el theme, lo debes agregar en la carpeta wp-content –> theme, y luego lo activas desde tu panel de control, Apariencia –> Themes.
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
Para pasar de psd a HTML no es así de facil, debes seguir el tutorial completo, esta es la segunda parte: http://www.web-desings.com/category/de-psd-a-html
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…
Ya esta arreglado, puedes descargarlo desde el botón de descarga, al inicio del post.
Muchas gracias, es una buena guía, intento desarrollar una plantilla personalizada que solo la tenga mi blog, me ha servido de mucha ayuda
Amigo gracias por este gran tutorial Felicitaciones, pues es esta muy completo Mil gracias de nuevo
Gracias a ustedes por sus comentarios, Saludos
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.)
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.