Crear skin tipo Windows Vista con Photoshop

Hace poco me encargaron emular la apariencia de las ventanas de Windows Vista para una aplicación de escritorio hecha en Flex. Cuando me puse a ver, me dí cuenta que tienen varios "detallitos" que la hacen lo que es.

Para este tip he creado un archivo reutilizable para que puedan descargar, a continuación voy a explicar qué es lo que van a encontrar.

Capas

En primer lugar vamos notar una carpeta, coloreada de naranja, que contendrá las partes que conforman la ventana propiamente dicha, por encima de ésta tendremos el contenido; debería verse mas o menos así:



Vamos a explicar capa por capa.

Base

Esta es la capa que nos hará, como bien nos dice el nombre, de base y le aplicaremos los efectos generales:

Sombra Paralela


Trazo

Blue Glow

En esta capa vamos a aplicar ese resplandor azul que caracteriza a Vista.

Sombra Interior


Resplandor Interior

Head Glow

En las ventanas crearemos un rectángulo mas claro en la parte superior, aplicándole los siguientes efectos.

Superposición de Degradado

A esta capa le aplicaremos también una máscara de degradado lineal vertical.

Lines

Aquí dibujaremos unas cuantas líneas oblicuas a fin de simular un reflejo de tipo vidrioso.

Box Flow

Esta capa y la que le sigue son para terminar de dar forma a los bordes de lo que sería la caja de contenido.

Trazo

Box Glow

Trazo

Bien; esto es, a grandes rasgos, cómo se logra el efecto para aplicarlo a prácticamente cualquier proyecto.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.