http://www.fundacionevolucion.org.ar Página 1 de 4

Serie: Los tutoriales de la FE Tutorial: Cómo diseñar botones usando una aplicación en línea Destinatarios: Docentes Última fecha de actualización: 19 de octubre de 2011

Cómo diseñar botones usando una aplicación en línea

Descripción: Este tutorial explica en 8 pasos cómo diseñar botones usando una aplicación en línea. Se trata del generador en línea Cool Text, disponible en: http://cooltext.com/

Ingresar y explorar

Vayan a http://cooltext.com/ y exploren el generador gratuito en línea Cool Text.

Elegir el estilo

Elijan el estilo de botón que prefieran.

Como ejemplo, imaginemos aquí que tenemos que diseñar un botón para incluir en una presentación multimedial que remitirá desde la diapositiva inicial hacia la diapositiva donde incluiremos el mapa, fotografías digitales e información sobre la provincia de Chubut.

Elegimos el estilo:

http://www.fundacionevolucion.org.ar Página 2 de 4

Ingresar el texto

Ingresen el texto donde dice Diseña tu botón (Design your button).

En este caso reemplazamos la palabra “Orange” y escribimos “Chubut”, como puede verse aquí:

Elegir la fuente

Elijan la fuente1

.

Presionando sobre el nombre de la fuente (en este caso, Debussy) accederán a una nueva página que agrupa categorías de fuentes (Font Categories) y desde allí a muchísimas fuentes. Podrán cambiarla, si así lo desean.

En nuestro ejemplo, vamos a mantener la fuente Debussy.

Pero si quisiéramos cambiarlo, presionaríamos sobre Debussy y

avanzaríamos página a página para seleccionar la nueva fuente.

1 Juego completo de un tipo de letra.

http://www.fundacionevolucion.org.ar Página 3 de 4

Opciones de texto Pueden modificar el color de la letra, el tamaño del texto (Text Size), incluir

negrita (Bold), itálica (Italics), modificar el grosor y color del contorno (Outline), sombras (Shadow) y la ubicación del texto (Offset).

Opciones de forma

Pueden modificar la forma (Shape): redondeada, rectangular, elíptica, etc., el tipo y color del fondo (Fill), el grosor y color del contorno (Outline), el tipo de sombra (Shadow): ninguna, espejada, etc., y otros efectos (Effect): plano, 3D metálico, etc., con la posibilidad de que cambie el efecto al pasar con el cursor del mouse por encima del botón (Mouse Over). También pueden modificar el ancho (Widht) y la altura (Height).

http://www.fundacionevolucion.org.ar Página 4 de 4

Obtener el botón

Para obtener el botón presionen:

El botón terminado El botón terminado se verá así:

Para insertar el botón en un sitio Web, con efecto al pasar por arriba con el

cursor del mouse se verá así:

Para guardar, presionen en cada caso:

En caso de querer insertar el botón en un sitio Web, copien el código HTML

para que funcione el efecto elegido al pasar por arriba con el cursor del mouse (opción Mouse over). En nuestro caso:

Si se equivocaron y prefieren editar antes de guardar, presionen:

Pueden insertar el botón (como cualquier otra imagen) en informes,

presentaciones multimediales, weblogs, weblessons, etc.