Archivo de la etiqueta: theme wordpress

Agregar panel de opciones a un theme wordpress

Como dice el titulo, en este tutorial agregaremos un panel de opciones a nuestro theme de wordpress, explicaremos como funciona y como utilizarlo facilmente en la configuración de tu plantilla.

¿Para que Agregar panel de opciones a un theme wordpress? Cuando se trabaja para clientes con plantillas de desarrollo propio es muy importante que algunas opciones del front End de la web puedan ser editadas por el cliente, con esto podemos evitar llamadas como: Hola, Necesito cambiar el teléfono de la web, ¿puedes ayudarme? :-/.

¿Cómo evitamos esto? Muy fácil, agregando un panel de opciones a la web del cliente, que es el tema a tratar en este tutorial, para ello utilizaremos el plugin Options Framework Theme, pero con la particularidad de que estará integrado en tu theme, para evitar inconvenientes de instalación y configuración de plugins.

Para desarrollar este tutorial utilizaremos la plantilla Music Theme desarrollada por mí en el tutoriales De HTML a WordPress, agregaremos a esta plantilla un panel de opciones donde podremos controlar  los siguientes datos básicos:

  • Información de contacto: Teléfono, Email, Dirección, Cp.
  • Configuración general: Logo, Activar/Desactivar el slider, activar/Desactivar el buscador, Seleccionar la categoría del slider.

1.- ¿Que es Options FrameWork? ¿Para qué sirve?

A pesar de que wordpress cuenta con Settings API para agregar un panel de opciones a un theme, o cualquier tipo de configuración extra, nosotros ocuparemos este plugins el cual hace el trabajo sucio por nosotros ahorrándonos mucho tiempo de trabajo.

Options FrameWork: Es un frameWork que nos permite centrarnos en el desarrollo de nuestro theme en vez de centrar nuestra atención en crear un panel de opciones desde cero. Se puede utilizar tanto en proyectos personales como comerciales. Para ver todas sus funcionalidades y descripción completa visita la web del autor.

2.-Descarga y configuración inicial de Options FrameWork

Para iniciar con el tutorial nos descargamos el plugin Options framework theme  en GitHub, nos descargamos esta versión ya que es mucho más fácil de integrar a wordpress y además trae datos de ejemplo para que te hagas una idea de cómo funciona este framework.

Una vez descargado el plugin, copiamos la carpeta inc y el archivo options.php en el directorio de nuestro theme.

grey Agregar panel de opciones a un theme wordpress

Agregamos el siguiente código en el archivo functions.php:

El código anterior simplemente dice que si existe la función optionsframework_init, busque en el directorio inc el archivo options-framework.php, para poder utilizar las opciones disponibles en el plugin.

Con esto ya tenemos registrado el plugin, sin necesidad de instalación y activación previa, y de esta forma podrás instalar tu plantilla sin preocuparte por el plugin del panel de opciones. Si vas a tu panel de control en Apariencia, podrás ver que ya tienes un enlace a theme Options de tu theme.

grey Agregar panel de opciones a un theme wordpress

3.-Prepararnos para agregar opciones al theme

Sí abres el archivo options.php en un editor de código podrás ver todo el código de ejemplo que nos facilitan en este archivo, yo como lo conozco lo borrare e iré agregando lo que me interese para este tutorial.

Con el archivo options.php vacío empezamos a pegar los siguientes trozos de código:

Con esta función obtenemos el nombre del theme, que será utilizado en la configuración interna del plugin.Se define para almacenar las opciones en la base de datos y hacer referencia a ellos en el theme, por defecto se utiliza el nombre del theme el cual es tomado desde el archivo style.css de la plantilla, se muestra en minúsculas y sin espacios, pero esto se puede cambiar si es necesario. Debes de tener en cuenta que si cambia el identificador, las opciones serán restablecidas a su valor por defecto.

En esta función se definen una serie de opciones que se utilizan para generar la página de configuración de nuestro theme y guardarlas en la base de datos.

4.-Panel de opciones básico

En esta parte del tutorial crearé un panel de opciones básico, el cual contará con dos pestañas (datos de contactosconfiguración general), todo el código que estaré explicando estará dentro de la función antes mencionada.

Agregamos los dos apartados de configuración.

Con el siguiente código agregamos dos pestañas al panel de administración de nuestra plantilla.

Solo debemos configurar la opción name que se refiere al nombre que mostrará la pestaña, como muestra la siguiente imagen.

grey Agregar panel de opciones a un theme wordpress

Agregando campos en la pestaña configuración general

En la pestaña de configuración general utilizaremos los siguientes tipos de campos, para agregar campos de entrada a una pestaña, basta con agregar el código correspondiente al campo deseado y colocarlo debajo del código que hace referencia a dicha pestaña.

Configuración del logo

Para mostrar el logo en la web utilizaremos el input Type:upload:, con este campo podemos subir el logo de la web de una forma muy sencilla, así podemos cambiarlo cuando queramos, sin ir a meterle mano al código.

Para ello agregamos el siguiente código en el archivo options.php, debajo del array de configuración general agregado anteriormente.

grey Agregar panel de opciones a un theme wordpress
Ahora ya tenemos el input upload en nuestro panel de control, ¿cómo lo utilizamos para mostrarlo en la web? muy sencillo, crearemos un script php el cual muestre un texto si no hay imagen, y si hay imagen que la muestre.

El input upload nos devuelve la url de la imagen subida en el panel de control, para mostrar estos datos option theme framework utiliza la siguiente función.

Donde lo más importante es el primer parámetro, que hace referencia al ID del campo agregado, en este caso es:logo_uploader.

Utilizando la función anterior agregamos este código donde queremos mostrar el logo de la web.

Configuración del slider

Para configurar el slider de la web necesitaré 3 datos, estos datos serán decididos por el usuario desde el panel de control del theme. Queremos saber si está activo o no, la categoría desde donde extraer los artículos y el número de post a mostrar en el slider, se pueden agregar tantas opciones como necesites para programar las funcionalidades del slider, para este ejemplo solo utilizare estas tres.

Slider Activo o no – input Type:checkbox: Este campo lo utilizaré para activar el slider de la web si esta marcado, y desactivarlo si no lo esta.

grey Agregar panel de opciones a un theme wordpress

El checkbox nos devuelve 1 si esta seleccionado y 0 si no está seleccionado, sabiendo esto ya podemos crear un simple condicional para meter el código del slider dentro de él y que solo se muestre si obtenemos 1 (activo). Veamos el siguiente código.

Con esto ya controlamos desde el panel de administración de nuestro theme el estado del slider, visible o no.

Número de post a mostrar- Input type:select: Este campo lo utilizare para agregar un desplegable de números del 1 al 8, que se utilizara para elegir el número de imágenes a mostrar en el slider de la web. Agregaré el código y luego lo explico en detalle.

grey Agregar panel de opciones a un theme wordpress

Ya teniendo el menú desplegable en el panel de opciones de nuestro theme, solo nos queda obtener la selección, asignarla a una variable y utilizarla en el loop del slider, como hemos visto antes para obtener lo seleccionado en el panel de administración utilizaremos la siguiente función.

Con este código almacenamos en la variable $img_slider el número seleccionado por el usuario en la configuración del theme.

Más abajo agregaré un ejemplo de cómo utilizar estos datos en el loop de wordpress, terminemos de agregar y obtener el dato de la categoría del slider.

Categoría del slider – Input type:select: En este caso el select lo utilizaremos para seleccionar la categoría de la cual queremos extraer los artículos a mostrar en el slider.

grey Agregar panel de opciones a un theme wordpress

Ya contamos con el número de imágenes y la categoría que queremos utilizar para el slider, teniendo estos datos podemos aprovecharlos para personalizar nuestro loop y obtener las entradas que nos interesan, para ello utilizaremos el siguiente código.

En el código anterior puedes ver como utilizo el valor de estas variables para filtrar el loop de wordpress, este código solo es a modo de ejemplo, si por cualquier cosa alguien lo necesita completo sin problema puedo facilitarlo, pero en este tutorial solo pongo parte de este para mostrar cómo utilizar los datos obtenidos desde el panel de opciones del theme.

Del código anterior podemos destacar las siguientes líneas, que son las que limitan el loop a unas entradas especificadas por los valores de las variables, esta no es más que una forma de utilizarlo, con esto puede hacer todo lo que se te ocurra y más.

Agregar Datos de contacto al panel de opciones del theme

Dejare el código completo para esta pestaña ya que son todos campos de texto y se obtienen igual que los datos obtenidos anteriormente, con este código le facilitamos al usuario el cambio de sus datos de contacto sin necesidad de tocar el código de la web.

¿Como obtengo estos datos?

Para obtener estos datos utilizaremos la misma función.

Y con los datos ya guardados en sus respectivas variables, simplemente usaremos otro condicional que verifique si hay texto en el campo, si hay texto lo muestra de lo contrario no muestra nada. En mi caso utilice una lista desordenada para listar estos datos de la siguiente manera.

5.-Campos disponibles en options frameWork

text input – textarea

Como puedes imaginarte nos muestra un input type text y un textArea, el input type text tienes la opción de mostrarlo pequeño agregando en sus opciones la clase mini, el código para activar cada uno de estos es el siguiente.

grey Agregar panel de opciones a un theme wordpress

checkbox

Muestra un checkbox, nos devuelve 1 si esta marcado y 0 si no lo esta, puede decidir si dejarlo marcado o no por defecto, utilizando su opción ‘std’ => ’1′.

grey Agregar panel de opciones a un theme wordpress

select

Para los input type select se utiliza un array para guardar las opciones que queremos mostrar, luego ese array se lo asignamos a la opción ‘options’ => $test_array); del select, como muestro en el siguiente código, dejare 3 4 formas de utilizar los array de datos, uno que agregamos los datos manualmente, otro que nos muestra un listado de categoría de wordpress y otro que nos muestra un listado de páginas.

grey Agregar panel de opciones a un theme wordpress

radio button

grey Agregar panel de opciones a un theme wordpress

upload (image uploader)

Este campo nos devuelve la url de la imagen subida, utiliza el gestor multimedia de wordpress para subir los archivos y nos muestra una vista previa de la imagen actual.

grey Agregar panel de opciones a un theme wordpress

Otros tipos de entrada más avanzados.

Para la explicación de cada una de estas entradas lamento decirle que tendrán que leer el archivo index.php del option framework theme que nos descargamos, no lo explico aquí por qué me he alargado mucho con este tutorial y para explicarlas a medias mejor que cada uno publique sus dudas y yo trato de ayudarles, los tipos de entrada avanzados con los que cuenta este framework son las siguientes:

  • images (uso de imágenes en lugar de radio buttons)
  • background (un conjunto de opciones para definir un background)
  • multicheck
  • color (jquery color picker)
  • typography (un conjunto de opciones para definir su tipografía)
  • editor(Editor de código tipo TyniMCE)

Conclusión

Disculpen que me he alargado tanto, siempre me pasa igual, espero que este tutorial les anime a crear plantillas que les quiten problemas futuros con los clientes.

Para cualquier suda que tengan referente a este tutorial pueden dejar sus comentarios, tanto en la web, por twitter o por nuestra fan Page de Facebook, no te quedes con dudas pregunta que te ayudaré en todo lo que pueda.

Un saludo enorme y espero que el tutorial sea de provecho.

Pasar de PSD a HTML5 – Theme WordPress part.2

Descubrimos como se codifica una página web previamente diseñada en photoshop. Se utilizaran las nuevas tecnologías para maquetar en HTML5 y Css3.

Empesamos a Pasar de PSD a HTML5 nuestro diseño, en la primera parte del tutorial seguimos los pasos necesarios para diseñar una página web en photoshop, ahora vamos a transformar esa imagen en una página web con html5 y css3, dicho esto nos ponemos mano a la obra :-).

En esta parte del tutorial cortaremos las imágenes necesarias para la web, utilizaremos algunas técnicas css3 para evitar su uso excesivo..

Utilizaremos las nuevas etiquetas html5 para la estructura principal y para el estilo utilizaremos las nuevas propiedades css3 como: degradados, sombras, sombra en textos y transiciones.

Estructura de archivos y carpetas a utilizar

Como sabemos que estamos trabajando para lo que será una plantilla para wordpress en el futuro, teniéndolo en cuenta utilizaremos la siguiente estructura de archivos.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

CSS: Albergará los archivos css, en nuestro caso solo tendrá el archivo reset.css y las fuentes que utilizaremos en la web.

Images: como lo indica su nombre estarán alojadas todas las imágenes de la plantilla, en nuestro caso también colocaremos una carpeta llamada tmp(temporal) para colocar las imágenes del slider y el post.

Js: aloja nuestros archivos JavaScript.

style.css: en este archivo tenemos la opción de importar desde la carpeta css los estilos de la pagina o agregarlos directamente en ella, en nuestro caso he importado la hoja de estilos reset.css y he agregado todos los estilos de la web en este archivo.

Una ves creada esta estructura de archivos y carpetas abrimos index.html en nuestro editor de código y empezamos a codificar el HTML, yo he utilizado DreamWeaver y Notepad ++.

Cortar las imágenes Necesarias

A la hora de cortar imágenes es muy tedioso buscar las capas, para facilitar este trabajo puedes seleccionar la Herramienta Mover y en la barra de opciones marcar la opción seleccionar automáticamente, de esta forma solo con hacer clic en un elemento del espacio de trabajo te seleccionará automáticamente la capa en el panel capas.

Para empezar a aplicar estilos a la página primero cortaremos las imágenes necesarias, empezaremos por la imagen de fondo, para el fondo utilizaremos 2 imagenes, una que es el fondo general de la web y otro el fondo central superior que es una especie de rayo de luz.

Fondos de la web

para el fondo general ocultamos todas las carpetas en el panel capas menos la de fondo, seleccionamos la herramienta Marco rectangular, creamos una selección de unos 100px x 100px.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Con la selección hecha vamos al menú edición > copiar combinado, luego creamos un nuevo documento (Ctrl + N) si te fijas al crear el nuevo documento ya viene con las dimensiones de la selección anterior, pegamos (Ctrl + V) la selección copiada anteriormente.

Para guardar la imagen ir al menú Archivos > Guardar para web y dispositivos (Ctrl+Alt+Shif+s) lo guardamos como page-bg.jpg en la carpeta imagen que creamos al principio del tutorial y lo configuramos de la siguiente manera.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

De esta forma guardaremos todas las imágenes que cortemos, con la salvedad de que las imágenes que necesitan transparencia las guardaremos en png, pero lo demás será el mismo proceso.

Cortemos ahora la imagen de fondo central,ocultemos la capa de fondo verde para solo dejar activa las dos que forman los rayos, seleccionemos la herramienta marco rectangular y creamos una selección a todo ancho del área de trabajo 800px y de alto lo necesario para cubrir toda la imagen.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Para guardar esta imagen seguimos el proceso anterior solo que ahora seleccionamos la opción PNG-24 y guardamos la imagen en la carpeta images como: luz-body-bg.png, ya tenemos las dos imágenes necesarias para el fondo

Logo

Continuemos cortando imagenes, para el menú no será necesario ya que utilizaremos CSS3, la siguiente sería el logo de la web, para este utilizaremos otro metodo de corte de imagenes en photoshop, con la tecla ALT pulsada hacemos clic en el ojo de la carpeta logo para solo dejar visible esta, pulsamos Clic derecho > duplicar Grupo, en el nuevo cuadro seleccionamos Nuevo en el desplegable Documento, como muestra la imagen.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

El resultado será un nuevo docuemnto con la mismas dimensiones que el Docuemtno general de la web, para recortarlo ir al Menú imagen > Cortar…, en el cuadro que te sale selecciona la opción Píxeles transparentes, con esto solo queda el área del documento donde exista un pixel al menos de la imagen, de esta forma no nos equivocamos cortando mas o menos área de la imagen, para terminar guardamos la imagen como logo.png

Esta forma de recorte solo suelo utilizarlas para imágenes que tienen fondo transparente y no se pueden visualizar correctamente las sombras o reflejos que tiene aplicado

Manejadores del slider

Para el slider solo necesitaremos los dos botones left y right, lo demas lo crearemos con css3, estos botones también se pueden crear fácilmente pero no quiero alargar mucho el tutorial.

Ocultamos todas las capas y dejamos visible solo la carpeta del botón left(Alt + clic en la carpeta), duplicamos en un nuevo documento la carpeta, pulsamos Alt + Clic sobre la mascara de la carpeta Nav Left para desactivarla y ocultamos la capa sombra.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Para terminar con el botón left recortamos la imagen, menú imagen > Cortar…, guardamos el botón como slider-ctrl-left.png.

Para recortar la sombra ocultamos todas las capas menos la capa sombra, vamos al menú imagen > cortar…, la guardamos como sombra-slider-control-l.png.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Para el botón de la Derecha solo abrimos la imagen del botón izquierdo en photoshop, vamos al menú Edición > Transformar > Voltear horizontal y lo guardamos como slider-ctrl-right.png y esta listo el botón derecho, el mismo proceso con la sombra y la guardamos como sombra-slider-control-r.png, con esto ya tenemos los botones del slider.

Fondo titulo post y widget sidebar

Para cortar el fondo del titulo de los post utilizaremos el mismo metodo que para los botones del slider, seleccionamos las dos capas correspondientes al fondo del titulo y pulsamos en duplicar capas en un documento nuevo, ir al menú imagen > cortar… y la guardamos como title-bg.png

Para el titulo del sidebar seguimos el mismo proceso anterior y lo guardamos como title-bg-sidebar.png.

División del contenedor principal

Para dividir los post del sidebar utilizaremos una imagen que se repetirá en forma vertical, seleccionemos la capa Somra sidebar, la duplicamos en un nuevo documento, creamos una nueva capa por debajo de esta y con la capa Somra sidebar seleccionada hacemos clic derecho > combinar hacia abajo, esto para eliminar los estilos de capa que contiene.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Con la herramienta Recortar hacemos una selección de unos 10px de alto y todo el ancho de la imagen, pulsamos enter y la guardamos como bg-content.png

Imágenes necesaria del sidebar

Para el sidebar solo necesitamos el icono de la lista, las imágenes de la lista vídeos la dejare en los archivos del tutorial, para recortar el icono seguir el mismo proceso, dupliquen la capa en un nuevo documento, ir a imagen > recortar… y guardarla como lista-noticia-arrow.png.

Imágenes necesaria del footer

En el footer solo necesitamos el botón de la derecha para subir arriba, sigue el mismo proceso para recortar la imagen y guárdala como goTop-footer.png

Ya tenemos todas las imágenes que utilizaremos para la web, el siguiente paso a seguir será la implementación de css3 para dar forma a nuestra web.

Para empezar utilizaremos el reset css de meyerweb.com copia los estilos y pegalos en el archivo reset.css que se encuentra dentro de la carpeta css.

Configuración de head

En nuestro head debemos agregar los archivos js,css y un archivo js para agregar compatibilidad con las versiones antiguas de IE.
El siguiente código lo agregaremos entre las etiquetas [head] y [/head]

Crear el Código Base, archivo index.html

Dentro del archivo index.html crearemos el código base de la página.

Si te fijas en el código anterior lo primero que vemos es el DOCTYPE que trae HTML5 con diferencia con la versión anterior que existían tres tipos de DOCTYPE, ahora con html5 solo existe uno y mucho más sencillo.

Como muestra el código anterior la página estará compuesta por 5 bloques principales, entre ellos tres etiquetas nuevas en HTML5.

DIV ID wrapper: Este bloque contendrá todos los demás bloques de la web, este define el ancho que utilizaremos.

NAV: Esta etiqueta delimita el área de navegación de la página y estará también el buscador.

HEADER: Dentro de esta etiqueta colocaremos el logos y el slider de la web.

DIV ID main: Este bloque delimitará el espacio reservado para nuestro contenido y la barra lateral o sidebar.

FOOTER:En este bloque se colocara la información del pie de página y un menú de navegación.

Creando el Menú Principal de la web

Para delimitar el menú utilizaremos la etiqueta de HTML Nav, dentro de ella utilizaremos una lista desordenada ul para crear el menú, para ello inserta dentro de la etiquena NAV el siguiente código:

dentro de la etiqueta nav también colocaremos el buscador de la página, para ello agregamos el siguiente código

Dentro del bloque NAV tenemos el menu principal de la web y el buscador, para el buscador utilizamos un formulario con sus respectivos input type text y button para enviar el formulario, si se fija he implementado una nueva etiqueta HTML5 en el formulario de busqueda, placeholder y button.

Con esto queda ya terminada la estructura de la barra de navegación.

Creando el Slider Show

Para el slider he utilizado el plugins jQuery Tiny Carousel, específicamente el ejemplo 2 de esta web, edite los estilos css y la estructura html para adaptarlo al diseño, hay un sin numero de plugins que hacen esta función, pero, me he decidido por esta opción por que es muy flexible al editarlo y ademas de imágenes te permite agregar html al contenido deslizante.

Dentro de la Etiqueta HEADER crearemos la estructura del slider, para ello colocaremos el siguiente código:

Código para el Logo

Para el logo utilizaremos un encabezado h1, dentro del h1 un enlace el cual aplicaremos más adelante unos estilo para colocare la imagen del logo de fondo, la estructura será la siguiente.

Debajo del logo colocaremos un botón que dará opción a ver mas vídeos, en la plantilla creada en photoshop no se explico la creación de ese botón, lo dejare para descargar entre los materiales del tutorial, para el botón agregaremos el siguiente código debajo del logo.

con esto ya damos pro terminada la estructura del HEADER, ahora pasaremos a crear la estructura del MAIN que es donde se colocarán los post y el sidebar o barra lateral.

Estructura del contenido principal y sidebar

Como muestra el código anterior el bloque main estará dividido en dos partes, una la section content que será la que albergue las entradas del blog y otra el bloque aside sidebar, que es donde se despligan los widget de wordpress.

En esta ocación he utilizado dos etiquetas de HTML5, SECTION Y ASIDE

Si se fija en el código he agregado un atributo role en cada etiqueta (aside, aection), este atributo indica el papel que el elemento actual juega en el contexto del documento. Además, la información de este atributo pueden ser utilizada para definir cada acción que se puede realizar en un elemento.

Para más información sobre el atributo role puedes entrar Aquí.

Área contenedora de los artículos del blog

Dentro de la etiqueta (SECION ID=”CONTENT”) colocaremos la etiqueta ARTICLE DE HTML5 y dentro de esta todas las partes del articulo.

El arículo cuenta con tres bloques principales que son:

  • HEADER:en este bloque agregaremos toda la información referente al artículo, categoría, autor, fecha,etc…
  • FIGURE: Etiqueta que envuelve la imagen del artículo.
  • DIV entry-content: en este bloque estará el extracto o resumen que se muestra en el index de los blog.

Estas son las partes principales del bloque article, con esto queda ya estructurado.

Widget para la barra lateral o sidebar

El código de los widget lo colocaremos dentro de la etiqueta aside, nuestra web consta de tres widget los cuales se detallan a continuación.

Widget Últimas noticias

Widget Últimos vídeos

Widget Contact form

Si se fija en todos los widget son una simple lista desordenada en la cual se agrega un contenido dentro de ella, luego con css acomodaremos cada elemneto en su lugar.

Estructura del Footer

En el footer solo tendremos un menú creado por una lista desordenada, un texto de CopyRight y un botón para subir, el código es el siguiente.

Con esto ya queda terminada la estructura de la web, el siguiente paso será cortar las imagenes necesaria para la web y aplicar estilos css para organizar la estructura que acabamos de crear, Puedes descargarte los archivos del tutorial, donde encontraras la estructura completa de la web.

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.

Hola, este es el primer tutorial para web-desings.com referente al diseño web con photoshop. Este tutorial trata de un theme para WordPress que más adelante maquetaremos con HTML y CSS y lo convertirlo a WordPress.Será un proceso largo pero no nos adelantemos al tiempo primero comencemos con el diseño y ya hablaremos sobre la maquetación y su posterior conversión a wordpres.

Bien Empecemos, Este tutorial va orientado a personas que tengan unos conocimientos básicos al menos sobre el uso de las herramientas de photoshop ya que no puedo explicar todo con tanto detalle, quizás más adelante pueda hacerlo cuando empiece a gravar vídeos tutoriales.

Materiales para Descargar:

Descargar Fuente:Bauhaus 93

Decargar Degradados y Formas Utilizadas

Resultado que Obtendremos

grey Theme Wordpress en Photoshop (Music Layou)

1. Creando el Documento de trabajo en photoshop Cs5.

Para empezar Crear un documento (Ctrl + N) con unas medidas de 1200px x 1200px, 72 píxeles/pulgadas, color de fondo blanco(#ffffff), una vez creado el documento colocaremos las guías verticales para definir una anchura de 800px que será el ancho de la web. Para crear las guías tenemos que ir a vista > Guía Nueva, en el cuadro que aparece seleccionar la opción vertical y colocar 200px para la primera guía.

grey Theme Wordpress en Photoshop (Music Layou)

Para agregar la segunda Guía repetimos el mismo proceso, vista > guía Nueva, en el cuadro que aparece seleccionar la opción vertical y colocar 1000px para la segunda guía.

grey Theme Wordpress en Photoshop (Music Layou)

Ahora debería tener dos guías a 200px del borde del documento y con un área central de 800px entre las guías que será el área de trabajo que utilizaremos, todo lo que se creará desde ahora estará en ese espacio.

2. Creando el fondo de la web.

Para empezar con nuestro fondo crearemos una capa de color uniforme desde el panel de capas, con un color de relleno verde (#6d9110).

grey Theme Wordpress en Photoshop (Music Layou)

Re-nombremos la capa a fondo y conviértela en objeto inteligente (Clic derecho > Convertir a Objeto Inteligente), este paso es opcional, lo hago de esta forma por que le aplicaremos filtros a esta capa y el objeto inteligente me da la opción de poder editar esos filtros posteriormente.

grey Theme Wordpress en Photoshop (Music Layou)

Aplicamos ruido a la capa fondo, para ello vamos a Filtros > Ruido > Añadir ruido, con cantidad: 1%, Distribución: Gaussiano, Monocromático: si y pulsamos Ok.

grey Theme Wordpress en Photoshop (Music Layou)

Ahora crearemos unos rayos de luz para el fondo, para ello seleccionamos la herramienta forma personalizada y seleccionamos la forma que a continuación muestro en la imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Si no tienes la forma la dejare para descargar entre los materiales del tutorial, para aplicar la forma haces clic y con la tecla Shif pulsada para crear un circulo perfecto, cuando lo tengas colócalo en el centro horizontal del documento y el centro vertical del circulo en el borde superior del documento, (tal cual está en la imagen).

Para eliminar los bordes selecciona la capa de la forma personalizada y agrégale una mascara de capa, con la mascara de capa seleccionada configura el blanco como color frontal y el negro color de fondo, selecciona la herramienta degradado configurado a radial y debes aplicarlo desde la parte superior del documento hasta el borde final de la forma personalizada.

grey Theme Wordpress en Photoshop (Music Layou)

Cambiamos el color de la forma personalizada a un verde oscuro(#437201). Creamos una nueva capa por encima de la forma personalizada renombrada a Brillo, le aplicaremos un degradado radial con el color blanco como frontal y el degradado que vaya de blanco a transparente y por último reducimos la opacidad de la capa al 40%, aplicarlo desde arriba hacia abajo y quedará un resultado como en la siguiente imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Con esto ya tenemos el fondo terminado, para tener todo organizado puedes agrupar esas tres capas en una carpeta y llamarla fondo o como quieras, de esta forma iremos agrupando cada parte de la web que creemos.

3. Creando el menú de navegación principal.

Antes de empezar con el menú crearemos un borde de 5px en la parte superior del documento, para ello seleccione el color verde(#264602) como color frontal, selecciones la herramienta Rectángulo cree una linea de 5px de alto y a todo el ancho del documento, como en la imagen siguiente:

grey Theme Wordpress en Photoshop (Music Layou)

Agregamos una nueva guía horizontal a 100px del borde superior del documento, seleccionamos la herramienta Rectángulo redondeado con un radio de 10px, realizamos el rectángulo entre las dos lineas verticales de 800px y la que acabamos de crear de 100px, el rectángulo debe sobre salir del documento por la parte de arriba para que no se visualicen las esquinas superiores y la capa debe estar por debajo del borde superior que creamos anteriormente.

grey Theme Wordpress en Photoshop (Music Layou)

A esta barra de navegación agregaremos los siguiente estilos de capa.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

seleccione la herramienta texto, configure el tipo de letra en Bauhaus 93, con un color verde(#658b15),Si no la tienes instalada puedes descargarla es gratuita y escribe las secciones que quieras agregar en tu web, nosotros utilizamos : Home, Rock, Pop, Rap, Salsa, otras.

grey Theme Wordpress en Photoshop (Music Layou)

Debería de quedar como en la imagen de arriba, ahora crearemos el efecto Hover para el texto, selecciona la herramienta texto y la palabra home y cambia el color a un verde mas oscuro(#264602) y agregaremos con la herramienta pluma un triangulo del mismo color que el borde superior como muestro en la imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Para separar cada item del menú crearemos una linea de 1px de color(#aab5c) y otra de 1px de color(#e2e2e2) colocada como en la imagen de abajo.

grey Theme Wordpress en Photoshop (Music Layou)