Autor: Jack Bach

Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.

Creamos un documento nuevo, y con el Bote de Pintura creamos el fondo rellenando toda una capa con el color #536358 . En una nueva capa, con la herramienta Rectángulo redondeado (con un rádio de 8px) creamos la caja contenedora de color #ececec de un ancho de 960px.

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!