WYDBLOG

[Tutorial] Arcade Button

Una de las tantas cosas que nos ofrece Flash es una Biblioteca de botones, en donde encontraremos distintos botones ya hechos y listo para ser usados en nuestras aplicaciones. Uno de esos botones es este que ven aquí abajo, y para mí es el mas atractivo que trae, y en esta entrada les explicare como en simples pasos poder hacer un botón tan atractivo como este.
*Nota: No me centrare en ningún software, es decir explicare que es lo que debemos hacer para luego poder aplicarlo en el editor gráfico que te guste.

Paso 1, Comenzaremos con una sombra suave que se difunde hacia los lados (el color utilizado en el ejemplo es #616161):

Paso 2, elige el color que quieras, en este caso será verde #009900 y traza un círculo (no hace falta que sea perfecto) en una nueva capa por encima de la sombra, este círculo será la base de nuestro botón:

Paso 3, En primer lugar debemos hacer un degradado (dependiendo de donde provenga la luz, en este caso proviene de abajo por eso primero esta la sombra y luego la luz) en el circulo creado en el punto anterior. En una nueva capa por encima de las demás comenzaremos a crear el botón: primero haremos la parte superior del botón, para eso crearemos un círculo 50% más pequeño que el círculo base y lo alinearemos al centro pero un poco mas elevado a nivel vertical, por último lo pintaremos con el mismo degradado que usamos para la base pero de forma invertida. Para darle el efecto de volumen al botón copiaremos el círculo que creamos hace unos instantes en una capa mas abajo, le daremos un degradado mas claro y lo bajaremos un par de pixels.

Paso 4: Crearemos un aro de color negro alrededor del botón y los esfumaremos para dar la impresión de profundidad. El botón comienza a tomar forma.

Paso 5: Con vectores o con la herramienta que te sienta mejor crearemos distintos brillos que le darán un aspecto increíble, simplemente debemos saber donde ubicarlos y tratar de que no sean muy fuertes:

Paso 6: Para darle un toque extra añadir pequeños destellos en blanco esfuminados, la diferencia no es mucho, pero si observan con atención verán que queda muy bien: