Comunidad de diseño web y desarrollo en internet

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.



[ click en la imagen para descargar archivo RAR ]


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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate