Developer's Diary

31 marzo, 2011

Creación de Botones con Expression Blend 4.

Filed under: Expression Blend — Etiquetas: , , , , , , , , , , — nostromo86 @ 5:27 PM

En este tutorial vamos a aprender a crear nuestros propios botones personalizados para nuestras aplicaciones o webs usando Expression Blend 4.

Por supuesto Blend 4 nos ofrece la posibilidad de crear un botón sencillo con apenas dos Clic como se muestra en la siguiente imagen:

Con esto conseguimos un botón clásico, pero en este tutorial vamos a crear botones fuera de las formas clásicas y con un aspecto mucho más profesional a través de dos ejemplos de botones.
Para empezar vamos a crear la forma base de nuestro botón, empezaremos con uno sencillo, en mi caso una elipse.

Posicionamos nuestra elipse, clicamos en ‘Fill’ y elegimos el color que le queramos poner.

Asignamos el valor 3 en ‘StrokeThickness’ para hacer más visible el borde del botón y cambiamos el color del borde en ‘Stroke’, en mi caso un azul oscuro.

Ahora vamos a darle algo de vidilla a nuestro botón añadiendo algunos brillos, para esto vamos a crear otras dos elipses que ocupen la mitad superior de nuestro botón, elegimos como colores los indicados en la imagen y para conseguir transparentes modificamos el Alpha a 0%.

Para el siguiente paso vamos a crear una elipse blanca de Alpha 40% y otra de cualquier color que cubra casi totalmente la anterior (en la imagen se ve más claro).

Ahora vamos a substraer de la elipse blanca todo lo que tapa la roja, para esto seleccionaremos ambas con crtl+clic y pulsando clic derecho sobre la blanca elegiremos combine/Subtract.

Nos quedara algo tal que así.

Haremos una copia (ctrl+c y ctrl+v) de esta forma que hemos creado al substraer (capa [path]) la rotaremos horizontalmente y la colocaremos en el lado opuesto.

Vamos a darle un toque más de botón añadiendo dos elipses más y situándolas al fondo del todo arrastrando sus capas encima del resto.
La primera será unos 2 pixels más grande que nuestro botón y será de color negro con un borde de 2 pixels con un degrado negro/gris.
La segunda la haremos unos 4 pixels más grande que la anterior e ira al fondo de todas y su color será un degrado de blanco a gris claro en sentido inverso al usado en la última elipse.
Escrito puede sonar enrevesado, pero en la imagen de debajo lo veréis claro.

Para acabar con el diseño de nuestro botón algún símbolo o texto en su interior dependiendo de su función, en mi caso hare un símbolo de “play” creando un cuadrado blanco pulsando y rotando el cuadrado 45 grados lo que nos dará un rombo.

Ahora solo tenemos que substraer la mitad izquierda de nuestro rombo, como os mostré en pasos anteriores, creando otro cuadrado que tape la mitad y eligiendo combine/Subtract.Como último toque le añadiremos a esta forma de “play” un borde.Y ya tenemos nuestro botón de fabricación casera al más puro estilo megavideo.

Hasta aquí la creación del diseño de nuestro botón, ahora viene la parte más importante, hacer que nuestro conjunto de formas se convierta en un botón, para eso seleccionamos todas las capas del botón, clic derecho y elegimos Group Into/grid.

Posteriormente haremos clic derecho en el Grid donde hemos agrupado las capas del botón para seleccionar Make Into Control.

Elegimos Button como tipo de control y marcamos Application.
Con esto se trasformará en un botón, nos añadirá por defecto un texto que podemos eliminar.

Ahora podemos ir a States y modificar los colores y las formas cuando el botón sea pulsado, con el ratón encima o no disponible por ejemplo.

Hasta aquí nuestro primer botón que nos ha quedado la mar de vistoso.

Para nuestro segundo botón usaremos una imagen como mascara para la forma de nuestro botón, de esta forma podremos hacer un botón con formas muy difíciles de conseguir con las formas geométricas que Blend trae por defecto.
En mi caso he pintado en Photoshop el logo de NamoCode y lo he guardado sin fondo en formato PNG.

En Blend creamos un rectángulo, en Fill elegimos el color que deseemos y en OpacityMask seleccionamos imagen y la ponemos en modo Uniform.

No voy a describir paso por paso de nuevo los cambios que hice a este botón, la imagen creo que deja claro los añadidos que le hice.

Le cambio los colores cuando sea presionado (Pressed) y listo.
Ya tenemos nuestro botón con el logo que queramos.

Y hasta aquí este tutorial, siguiendo estos pasos podréis crear vuestros propios botones, en próximos tutoriales ampliare esta información para por ejemplo crear animaciones para nuestros botones.
Recordar, si os surge alguna duda solo tenéis que comentar y os responderé en la mayor brevedad.

Hasta la próxima.

Anuncios

3 comentarios »

  1. Hola!!…
    gracias por el ejemplo. Quisiera aprender más sobre el tema, ya que tengo la intención de hacer una página web. Tengo una duda, a ver si puedes hacer un ejemplo de personalizar un botón y usarlo en una pagina web.

    Muchas gracias

    Comentario por Juan Diego — 21 mayo, 2011 @ 9:24 PM

  2. hola amigo muy bueno pero saves como poner un fondo de imagenes !!!!!!!!!!!!!!!!!?????? urgente amigo

    Comentario por AEX — 15 noviembre, 2011 @ 3:59 AM

  3. Gracias por tus explicaciones, están de lujo.
    Pero como puedo después utilizar el botón en otra aplicación que desarrolle.
    Graicas de nuevo

    Comentario por yolanda — 11 enero, 2015 @ 5:25 PM


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: