Ayer cotilleando en el Macromedia Flash y probando los efectos de alpha, di con la forma de hacer botones del iPhone. Le doy las gracias a mi ratón, porque como está un poco chocho, a veces al hacer clic interpreta que el botón del ratón sigue pulsado y lo arrastra, gracias a eso, conseguí el efecto base para los botones del iPhone. ¿Queréis ver cómo se hace un botón? Veámoslo.
Nota: aunque yo lo haya comprobado con Flash, estoy seguro de que con otros programas se podrá hacer.
Paso 1: Elaboración de los elementos base
Creamos un rectángulo de unos… no sé, 48×48… 50×50, 64×64, y de ahí no más. El cuadrado puede ser de cualquier color pero el efecto de redondeo debe de estar ajustado con entre 10 y 20 grados. Yo he puesto 15, pero es orientativo; que no se noten las esquinas pero que tampoco parezca un círculo.
Paso 2: Elaboración del brillo
Debemos crear otro rectángulo con las mismas características que el cuadrado original, y que mida lo mismo. Para ello duplicamos nuestro cuadro. Luego seleccionamos más o menos el 70% del cuadrado comenzando desde abajo, algo así a como muestra la imagen derecha. Y ese fragmento lo cortamos. De este modo, tendremos esquinas redondeadas arriba y no redondeadas abajo, ya que luego lo solaparemos justo encima del cuadro.
Ahora hay que conseguir esa forma curva de abajo. Cualquiera que pase unas semanas en Flash habrá aprendido que cuando el elemento está desagrupado y al seleccionarlo hace puntos, podemos cambiar su forma arrastrando el borde. Eso es lo que hay que hacer con el borde inferior, lo arrastramos un poco para que parezca ovalado, como en el dibujo.
Y por último le aplicamos un degradado de arriba a abajo. En la parte de arriba, #FFFFFF con transparencia alpha del 80/90%, y en la de abajo, #FFFFFF de 15/30%. Con esto ya nos quedará el tan ansiado efecto de destello, y si dejamos de seleccionar el elemento, lo veremos (con efecto alfa respecto a lo que haya detrás, si lo has hecho fuera del escenario como yo lo verás gris claro y si lo haces sobre el blanco escenario no verás nada.
Por último, lo podemos colocar ya encima para apreciar su tan bello efecto sobre aquel cuadro azul… ¡cuidado! Recordad ponerlo en otra capa encima, o no veremos nada y lo que es peor, ¡carcomeremos el cuadro azul! Comprobaréis que para cambiar el color, basta con cambiar el color del cuadro grande y ya se ajusta solo el destello. El abanico de posibilidades es ámplio:
Otra cosa de estilo y ya sólamente por dejarlo más elegante: complicad un poco los colores. En el ejemplo de botoncitos que hay aquí justo encima tenemos dos hileras: los botones de arriba son más elegantes que los de abajo, ¿verdad? En los botones de arriba se han usado colores complicados, siempre en la paleta Web216 (por defecto en el Flash), pero currados, por ejemplo el negro es un gris muy oscuro, el rojo es un rojo rosado… los colores de abajo han sido hechos usando los colores de hexadecimal 00-FF (los básicos que hay en la primera columna). Para que quede bonito, tened en cuenta este consejo, currárselo, y también no los dejéis muy claros porque aunque en los feos de abajo se puede ver el glow en el negro y el azul oscuro, el verde claro, el azul claro y el amarillo son tan claros que no sólo molestan, sino que además no dejan ver el glow brillante. Ponedlos un poco oscuros y ya veréis que botones más bonitos.
Si queréis poner un icono en el botón (como suele ser en el menú base del iPhone), mi consejo es que pongáis el fondo con un tono muy similar al color predominante en el icono. Ejemplo:
Comentarios recientes