Bienvenido a este nuevo tutorial, en esta ocasión te mostraré como crear un tema para Wordpress en Photoshop, siempre ten en mente que esto se transformará luego en código así que trata de ser los más consiente posible, así que a trabajar.

UPDATE: Les comento chicos este tutorial pronto se complementará, pronto tendremos el tutorial del desarrollo del theme, esta parte solo consiste en el diseño. Saludos

Paso 1

Para comenzar deberás descargar algunos recursos, todos son gratis y de gran calidad así que te dejo la lista:

Hat RSS Icon – Ir a la página de descarga
Stunning Free Character Pack – Ir a la página de descarga
Museo Font – Ir a la página de descarga

La forma de descargar la fuente Museo es la misma como si estuvieras comprando cualquier otra fuente, así que tendrás que registrarte para poder obtenerla, pero que es registrarse cuando tendrás en tu poder una tipografía profesional?, descarga las tres opciones gratuitas de esta fuente (300, 500 y 700). Ahora instala la fuente y estamos listo para empezar con Photoshop.

Paso 2

Ya en Photoshop crearemos un espacio de trabajo de 1300×1400 pixels a 72ppp.

Luego con el color #6faab8 rellena todo el espacio de trabajo.

Paso 3

Empezaremos creando el Header, toma la Herramienta Marco Rectangular y haz un rectángulo de la siguiente manera.

Ahora vamos a crear una guias para poder ubicar el contenido de la plantilla, primero si no tienes activada la regla presiona Ctrl+R y esta aparecerá, luego ve al menú Vista y checa la opción Extras, vuelve al menu Vista | Mostrar | Guias Inteligentes.. ahora aumenta el zoom del documento al 300% y ve hasta le borde izquierdo del mismo, luego toma la herramienta Regla y mide 170 pixels desde el borde hacia el centro, luego presiona la tecla Ctrl y posiciona el puntero sobre la regla da clic y arrastra la guia hasta el borde mas al centro de la medición que hiciste.

Repite el proceso del lado derecho.

Paso 4

Crea una nueva capa, luego toma un pincel tamaño 500 pixels, color blanco y dureza a cero, luego da Ctrl+Clic sobre la forma del rectángulo que creamos antes y pinta un circulo al lado derecho de la siguiente forma.

Presiona Crtl+D para deseleccionar y ahora solo baja la opacidad de la capa al 15%.

Paso 5

Toma la Herramienta Texto y con la fuente Museo 700 crea un texto para el nombre de la plantilla.

Al texto le he aplicado los siguientes estilos de capa.

Además le he agregado un sub-título como este.

Del lado derecho agregue una pequeña descripción de la plantilla.

Paso 6

Ahora abre uno de los iconos RSS Hat yo use el de 512×512 y luego de dimensionarlo lo ubique así.

Paso 7

Se supone que hagamos esta plantilla completamente en Photoshop así que abriremos uno de los archivo .eps que descargamos desde WeFuction y que contienen al personaje que usaremos para esta plantilla, abre el archivo 002__002.eps y aparecerá un cuadro de dialogo así.

solo da clic en Ok y transfiere la capa del personaje a nuestra composición anterior, luego de transformar el tamaño del objeto mi header quedó así.

Crea una nueva capa debajo de la capa de nuestro personaje, toma la herramienta Marco Elíptico y ajusta el valor Desvanecer a 10px luego haz una selección como la siguiente y rellenala de negro luego baja la opacidad al 21%.

Bien con esto ya tenemos listo nuestro Header, presiona Ctrl y da clic en cada una de las capas, luego ve a Capa | Nuevo | Grupo a partir de capas.. luego nombra al grupo Header o Cabecera.

Paso 8

Ahora crearemos el área principal de contenido y de paso el un pequeño menú fijo, toma la herramienta Marco Rectangular y haz un rectángulo por detrás del grupo Header desde la parte superior del grupo hasta en fondo del documento, para que me entiendas mejor una imagen.

Paso 9

Ahora el sidebar, el mismo método solo que este rectángulo no va más allá del header además debe estar solapado con el rectángulo del contenido principal quedando así por detrás de este.

Paso 10

Ahora crearemos unos post de ejemplo, para saber como queremos que se vea el resultado final ya en HTML, mi forma de crear un post para la portada de un blog es sencilla solo un poco texto haciendo las veces de introducción, una imagen y una linea al fondo del post simbolizando donde termina, te dejo la imagen final de mi post.

Todas las capas las agrupé en un folder y lo dupliqué dos veces para obtener esto.

Paso 11

Hagamos el menú fijo.. porque fijo? porque solo tiene enlaces a ciertas páginas, en lo personal gusto de hacer un área de menú para páginas importantes y el resto lo ubico en el sidebar. Mi menú es tan sencillo como agregar un poco de texto simbolizando los enlaces a las páginas.

Paso 12

Personalmente prefiero crear los estilos del sidebar en CSS por lo que aquí solo previsualizarás el formulario de búsqueda, un espacio para anuncios, y los títulos de los widgets.

Paso 13

El Footer debe quedar sobre las columnas que conforman tanto el Sidebar como el contenido principal, así que debes crearlo sobre toda la composición.

Palabras Finales

Listo espero que hayas disfrutado este tutorial, es muy difícil o mas bien tedioso definir la apariencia de las listas es por eso que obvie ese paso en este tutorial pero el diseño de estas debe ser muy especial y que estén acorde al estilo del tema.
Te dejo la imagen final da clic en ella para verla a tamaño completo.