TUTORIALES
CREANDO INTERFACES O SKINS
 		Tutorial publicado
por Pixeltool – Pixeltool.com.ve
Te recomendamos que visites y conozcas los tutoriales y artículos
photoshop de Pixeltool.com.ve.

Bienvenidos nuevamente a uno de mis tutoriales. En este sencillo tutorial les mostraré el cómo realizo interfaces para aplicaciones, páginas web o "skins" utilizando Photoshop. Recuerden, ustedes pueden cambiar algunas herramientas o valores de los que yo aquí utilizo, experimentando con las herramientas que se sientan más a gusto y encontrando un estilo más propio. Hablando de estilos, pueden encontrar los styles para PS 7.0 que utilizé en este ejemplo aquí. Con el botón derecho del mouse, haz clic y selecciona "guardar destino como…"

1. La Base
En un nuevo archivo en blanco, crea un nuevo layer y en este, dibuja un ovalo y rellenalo de negro. Centralo, y añade el style "soft metal".

2. Figura interna
 Haz una selección del ovalo y redúcela unos 15 puntos. Ahora, corta ciertas partes, haciendo la imagen más interesante. Copia todo el contenido del layer y pégalo en un nuevo alpha channel.
3. Blur
En el alpha channel, aplicamos un gaussian blur de 15 px.
4. Levels
Teclea Ctrl+L, y en el cuadro de diálogo de levels, usa los valores que ves en la imagen a la izquierda. Copia el channel alpha, y pega la imagen en un nuevo layer (un layer standard).
5. Esquinas
El truco con el alpha resulta en una imagen con esquinas redondeadas, que combina perfectamente con este estilo. Seleccionamos el contenido del layer (Ctrl + Click) contraemos la selección y creamos una imagen en otro layer.
6. Mas bisel
En este nuevo layer, llenamos la selección de negro y aplicamos el mismo style que le dimos a la "base" pero esta vez, invertimos el sentido de la degradación. Este cambio incrementará el effecto de bisel en esta parte de la imagen.
7. Pantalla
En un nuevo layer dibujamos una forma para nuestra pantalla y la redondeamos usando el "truco del alpha". La rellenamos con una degradación, invirtiendo nuevamente el sentido de ésta para más efecto.

8. Color
Un layer más para crear la pantalla: Una degradación en tonos verdes y una sombra interna. Añadímos también unas líneas delgadas para dar el efecto de "scan lines".

9. Detalles
Y el resto de los detalles de la pantalla: El texto, algunas líneas para el volumen y el ecualizador… Lo que quieras… Ya casi terminamos.
10. Detalles finales
Muy bien… el resto incluye añadir elementos como botones, tornillos y cosas como esas… Por supuesto, un logotipo también, si lo deseas. Recuerden el uso del "truco del alpha" y los styles para dar un efecto final agradable.
Agradecemos a Pixeltool, por permitir la publicación de este tutorial.
Si quieres publicar en SoloPhotoshop, ponte en contacto.