Duplicamos esta capa. Con el Marco Rectangular seleccionamos una porción de esta última capa y suprimimos esta parte. Sleccionamos la capa que habíamos copiado. Invertimos la selección (Selección>Invertir) y suprimimos la parte ahora seleccionada.

Le aplicamos los siguientes estilos a la capa que se encarga de la parte superior (doble click en la capa en la ventana de capas)

Creamos una nueva capa. Hacemos control+click encima de la capa que se encarga de la parte superior – en la ventana de capas. Esto hará que se haga una seleción entorno a esta. Con la herramienta de Degradado en modo radial y de color blanco a transparente clickamos dentro de la selección y sin soltar el click ajustamos el degradado a nuestro gusto. Ajustamos la opacidad de la capa al 25% (en la ventana de capas)

Añadimos una línea de texto de color #21833f. Yo he escogido Delicious como fuente, a 45pt. Podemos hacer más de una línea de texto, pero siempre en capas distintas. Luego a estas capas les damos el siguiente estilo:

Llegados a este punto tenemos algo así:

Ahora vamos a hacer el logo en una nueva capa. Empezamos creando una base con la herramienta Rectángulo redondeado (con un rádio de 8px) de color #b12a17. Con la herramienta Marco rectangular seleccionamos la parte de abajo y la suprimimos.

Ahora le añadimos el siguiente estilo de capa.

Y ahora añadimos el texto del logo, en color blanco, y le añadimos el siguiente estilo a la capa:

En una nueva capa, con la herramienta línea hacemos dos segmentos, el de arriba oscuro y el de abajo blanco. En otra capa (ajustamos su opacidad al 15%) hacemos un degradado lineal de negro a transparente. Por los lados lo suavizamos con la herramienta Borrador.

Con la herramienta Rectángulo redondeado (con un rádio de 8px), marcamos la área donde se mostrarán trabajos que ya hemos hecho (a la derecha del texto que añadimos anteriormente). Clickando encima de la capa donde hemos hecho la forma, se selecciona esta área que suprimimos de la superficie verde con la que hábíamos estado trabajando antes:

Ahora importamos la imagen de alguna página que ya hayamos hecho y la escalamos a un tamaño un poco superior al de la selección. Inverimos la selección (Sleección>Invertir) y suprimimos esta parte de la imagen importada. Luego añadimos el siguiente estilo a la capa:

Debe quedarnos algo así:

El siguiente paso es añadir una barra de navegazión horizontal. En una capa con la opacidad al 5% añadimos un texto de color blanco a 22pt como el siguiente:

Para continuar vamos a trabajar con  la superficie blanca que creamos al principio del tutorial. A la capa que contiene esta superficie le agregamos, en estilo de capa, un trazo de 1px de color negro al 70% de opacidad. En una nueva capa, por encima de la que contiene esta superficie, creamos una línea blanca de 1px y en otra capa un degradado lineal de negro a transparente. La capa del degradado la ajustamos al 10% de opacidad.

Ahora añadimos algo de texto. Para los títulos seguimos utilizando Delicious, para el texto general Trebuchet. Además podemos añadir algunos iconos como los de Function y algunas líneas para separar contenidos.

Para hacer el footer vamos a utilizar una vez más la herramienta Rectángulo redondeado (con un rádio de 8px). Copiamos el estilo que habíamos utilizado para hacer la superficie verde y lo pegamos en esta capa. Creando capas encima y con degradados de blanco a transparente creamos los efectos de luz deseados (opcional).

Ahora podemos añadir algún texto y algún icono en el footer. Podemos utilizar el estilo de capa del texto del header.

Para acabar vamos a añadir algunos brillos y sombras. Con la herramienta Degradado radial (de blanco a transparente), hacemos uno debajo del logo. Otra vez con la herramienta Degradado (esta vez de negro a transparente), hacemos una sombra debajo del footer.

Ajustamos la opacidad de estas capas al 30% o 40% y HEMOS ACABADO!

(click para ampliar)

Descarga el PSD

Esta vez voy a ser un poco malo… No voy a colgar el PSD hasta que haya 5 Tweets sobre esta entrada o esté en Meneame. Lo siento!

Características

• Todas las clases han sido borradas
• Todo el html innecesario también ha sido borrado (<hr />, <br />)
• Elementos convertidos cuando ha sido necesario (<small> pasa a ser <p>)
• Páginas obsletas borradas (comments-popup.php)
• Admite widgets
• Mucho más

Instalación y uso

Para instalarlo, descomprímelo e inserta la carpeta que hay dentro – llamada “starkersES” – en el directorio “themes” de tu Wordpress. Luego es el momento de ponerse a estilizar este sencillo theme ¡Proximamente haré un tutorial explicativo!

Descarga StarkersES

Descargar version 1.0

Si quieres estar informado y saber cuando hay nuevos freebies puedes suscribirte al feed y/o al twitter de Tinnta.

Tipo de archivos

He incluido copias en psd (photoshop), png a 80×80px y png a 40×40px.

¿Qué iconos hay?

Como podéis ver en la imagen: Menéame, Fresqui, Tuenti, Bitácoras, Delicious y Facebook.

Licencia

Haced lo que queráis con ellos excepto revenderlos (se pueden usar para proyectos comerciales). Un link a http://www.tinnta.com estaría bien, aunque no es obligatorio.

Descarga