Manual Genial
Manual Genial
Manual Genial
19
• Una imagen con interactividad permite al usuario que la está viendo acceder a
más información o a otras páginas haciendo clic en un punto de la imagen.
• La animación consiste en hacer que algún(os) elemento(s) de la imagen se
muevan, captando fácilmente la atención del usuario.
Genial.ly ofrece infinidad de recursos para crear contenidos educativos, para Social
Media o Presentaciones de empresa: bloggers, profesores, Community Manager,
emprendedores, ponentes… encontrarán un gran surtido de plantillas para dar vida a los
contenidos en imágenes. Y, por supuesto, también puedes crear imágenes sencillas, sin
animación ni interactividad.
Tabla de contenidos:
Como te decía, Genial.ly hace muy sencilla la creación de contenidos en imagen, a las
que puedes añadir interactividad y animación.
Otras ventajas: la usabilidad es muy buena, casi todo se hace arrastrando y soltando.
Además, puedes personalizar cómodamente cada una de las plantillas.
¡Pruébala gratis! Dentro del plan gratuito podrás crear tantas imágenes como quieras,
acceder a un sinfín de recursos (fondos, ilustraciones, iconos) y sin límite de
visualizaciones. Todo lo que aparece en este tutorial se puede hacer con la versión gratuita
de la herramienta.
Depende: ¿qué uso le vas a dar? ¿Cuáles son tus necesidades de creación de contenidos?
Con la versión gratuita podrás hacer tantas creaciones como desees. Además podrás
compartirlas mediante enlace o directamente en tus Redes Sociales. Dentro del plan
gratuito obtienes también el código necesario para embeber tu creatividad en tu sitio web.
¿Por qué creo que vale la pena pagar por una licencia Genial.ly? Por las ventajas que
ofrece con respecto a otras herramientas, que la hacen diferente. A continuación te explico
algunas de ellas.
Ventajas de Genial.ly:
Como ves en la imagen, existen opciones para cualquier tipo de contenido que necesites
crear.
Te animo a investigar un poco las plantillas que ofrece Genial.ly para los diferentes tipos
de creatividades, ¡te van a encantar!
Además tienes la posibilidad de aplicar filtros para ver solo las que te interesen. Verás la
opción en la parte superior, justo encima de las plantillas. Puedes filtrarlas por temas:
También puedes elegir una plantilla en blanco y crearla desde cero. Mi consejo es que
para tu primer Genial.ly elijas una plantilla ya creada. Así podrás familiarizarte con el
editor y centrarte en aprender a utilizar la herramienta sin pensar en el diseño,
simplemente editando los elementos existentes. Además ¡los diseños son muy buenos!
En el tutorial veremos todas las opciones de edición paso a paso.
¿Qué es una imagen interactiva? Que contiene enlaces, es decir, que clicando sobre
alguno de sus elementos se muestra otro contenido: otra página, una ventana con más
información…
Con los efectos de animación podrás hacer que algunos de los elementos de la imagen se
muevan (giro, zoom, latido, parpadeo…). Esto te permite captar fácilmente la atención
del usuario para que que haga clic. Es decir, la animación ayuda a conseguir más
interacciones.
Es lo que busca todo creador de contenidos: el clic del usuario, que el usuario participe
de la creatividad. Si la utilizas para crear contenidos educativos, verás que la la
interactividad y la animación facilitan el proceso de aprendizaje.
La animación es enormemente útil, pero hay que utilizarla con prudencia. Hay que tener
cuidado de no «pasarse» para no agobiar al usuario. Es bastante estresante ver una imagen
con todos los elementos bailando, al menos para mí.
Piensa también, ¿qué tipo de creatividad estás haciendo? Una presentación de empresa o
un currículum debería ser una creatividad razonablemente sobria. En este tipo de
creatividad te aconsejo que incluyas animación en un elemento, a lo sumo en dos. Para
otro tipo de creatividad, por ejemplo, una invitación de cumpleaños, quizá vaya bien
añadir más elementos animados para hacerla más vistosa.
Vamos a verlo con un ejemplo, una creatividad muy sencilla. Vamos a preparar una
felicitación del día de la madre, que también hay plantillas. Esta es una de ellas:
¿Verdad que está claro dónde esperamos que el usuario haga clic?
Crear una imagen como esta es súper sencillo, vamos a ver el proceso paso a paso. Una
vez que creas tu primera imagen, habrás conseguido familiarizarte con la herramienta y
estarás preparado para creaciones más complejas. Si tienes alguna duda con el tutorial,
escríbeme en los comentarios, ¡seguro que podré ayudarte!
Introduce tu email y una contraseña. Repite la contraseña, acepta las condiciones y haz
clic en «Regístrame». También puedes iniciar sesión con tus cuentas de Facebook,
LinkedIn oTwitter.
A continuación deberás facilitar alguna herramienta sobre tu actividad con Genial.ly:
tardarás pocos segundos.
En el centro verás todos los tipos de plantillas, según vimos en la imagen al principio:
Presentación, dossier, guías…
Elige una de las opciones del centro para empezar a trabajar con tu plantilla.
Una vez que la tengas abierta en el editor, ponle título: será necesario para poder
previsualizarla o compartirla después. El espacio disponible para el título está en la barra
superior, como ves en la siguiente imagen.
He preparado un Genial.ly para explicarte el editor. Haz clic sobre los asteriscos y los
iconos de información para ver las explicaciones.
¿Ya tienes claro par qué sirve cada cosa? ¡Empecemos con el tutorial!
Vamos a crear una felicitación para el día de la madre como la del ejemplo. Incluye un
botón animado que además es interactivo: haciendo clic sobre él pasaremos a otra página
donde estará la carta a la madre.
Para tu tranquilidad:
De momento nuestra creatividad tiene solamente una página, así que lo primero será
añadir otra, a la que dirigiremos al usuario que haga clic sobre el botón.
Para ello haz clic sobre «Páginas» y sobre «Añadir página». Selecciona «Blank» en el
cuadro que aparece y abajo en «Añadir» para que se añada una página en blanco. La nueva
página tendrá el centro en blanco y, por defecto, el mismo fondo que la otra página, que
es el fondo de la plantilla. Vuelve a hacer clic en cualquier parte del lienzo para que se
cierre el menú lateral.
Editar textos:
Para editar un cuadro de texto, haz doble clic sobre él. Aparecerá el editor de texto en la
barra superior.
Podrás seleccionar el tipo de fuente (hay cientos de ellas), el tamaño, el color de letra…
Edita el texto como quieras y cuando termines, haz clic fuera del cuadro de texto.
En el cuadro de texto de debajo he eliminado el texto que aparecía para escribir «Esta
carta es para ti». También he cambiado el color de fuente, lo he puesto del mismo color
de los puntitos del fondo, y en negrita.
Para modificar el color de texto, haz clic en el cuadrado que muestra el color en el menú
superior y aparecerá el selector de colores. Podrás seleccionar el que más te guste o
introducir el código hexadecimal del color que quieras.
En el menú de la izquierda hay la opción «Texto». Sirve para añadir nuevos cuadros de
texto. Tienes párrafos, listas de puntos o listas ordenadas, Título 1 y 2… También hay
plantillas de texto muy vistosas.
• Eliminar elementos
¿Quieres ir más deprisa? Si necesitas eliminar varios elementos al mismo tiempo, mantén
pulsada la tecla CONTROL (CTRL). Una vez seleccionados los elementos que quiere
seliminar, haz clic en papelera y desaparecerán todos a la vez. Si seleccionas alguno que
«no toca» puedes deshacer la selección clicando fuera de ella.
• Reorganizar elementos
Puedes desplazar los diferentes elementos y colocarlos en cualquier parte del lienzo,
donde más te guste. Apoya el cursor del ratón sobre un elemento cualquiera y mantén
pulsado el botón derecho. Mueve el ratón para arrastrar el elemento por el lienzo y
suéltalo donde prefieras.
Volviendo al ejemplo, imagina que quiero colocar los dos cuadros de texto un poco más
arriba. Primero selecciono los dos cuadros de texto (manteniendo pulsada la tecla CTRL,
como hemos visto). Y después hago clic en el icono «Agrupar», que aparece a la derecha
en la barra superior cuando seleccionas más de un elemento.
Selecciona cualquiera de los elementos del lienzo para editarlo, por ejemplo alguno de
los corazones. Una vez seleccionado, puedes hacerlo más grande o más pequeño tirando
de las esquinas con el ratón. También puedes cambiar los colores: verás el selector de
colores en el menú superior, igual que vimos al editar el cuadro de texto.
Fíjate en la imagen:
El texto de la izquierda apenas puede leerse, porque se confunde con el fondo. A la
derecha lo he situado sobre un círculo blanco, ajustando el selector de transparencia al
60% para que se siga viendo el fondo.
Te recomiendo que practiques con este recurso para conseguir diferentes efectos en tus
creatividades. Está disponible no solo para los elementos, sino también para los fondos,
imágenes… verás aparecer el icono siempre que selecciones un recurso y la opción esté
disponible.
Ahora vamos a poner un botón que sirva para mostrar más información. Por ejemplo, un
botón que al hacer clic sobre él dé paso a otra página que muestre una carta para tu madre.
Para conseguir eso, hay que añadir interactividad al botón.
Observa que entre los “Elementos Interactivos”, además de botones hay marcadores,
iconos de Redes Sociales «el área invisible». Esta última opción sirve para hacer que una
zona de la imagen sea interactiva sin mostrar ningún marcador.
Haz clic sobre el icono de interactividad para ver las opciones disponibles:
En este caso seleccionaremos «Ir a página». Aparecerá un recuadro con las demás páginas
de tu Genial.ly (en este caso solo hay una más) para que selecciones. Haz clic sobre la
página y sobre «Guardar».
No tiene más ciencia. Cuando el usuario que esté viendo tu Genial.ly haga clic en el botón,
irá a la siguiente página.
Las aplicaciones de la interactividad son infinitas. Por ejemplo, en el tutorial del editor
que he incluido al principio, he añadido ventanas que se abren al hacer clic y muestran
las explicaciones sobre el funcionamiento de los diferentes botones e iconos del editor.
También puedes enlazar tu sitio web, tus perfiles en Redes Sociales, o cualquier otra
página.
sobre el icono
CONSEJO: Conviene que revises tu creatividad desde todos los dispositivos. Por
ejemplo, la animación «ratón encima» no se activa fácilmente desde una pantalla táctil
(móvil o tablet). Ten en cuenta en qué dispositivo van a consumir tu contenido los
usuarios.
Configura la animación con el efecto deseado y haz clic sobre cualquier punto del lienzo
cuando termines, para cerrar el menú lateral de animación.
¿Quieres ver como está quedando? En cualquier momento puedes hacer clic sobre el
icono con el ojo en el menú superior, y acceder a la vista previa. Esto es algo que debes
hacer siempre antes de compartir tu creatividad. Así comprobarás el funcionamiento de
los efectos que hayas añadido y tendrás posibilidad de corregir cualquier error.
¿Está todo bien? ¡Vamos a compartir tu Genial.ly! Te explico las opciones disponibles
dentro del plan gratuito.
Hay que hacer clic en el botón de arriba a la derecha, que pone «Listo». Verás las
siguientes opciones:
• Enlace: copia el enlace y envíaselo a quien quieras que vea tu Genial.ly, por
ejemplo por Whatsapp
• Insertar: obtienes el código para embeber tu Genial.ly en tu página web
• Enviar: tendrás un espacio para introducir uno o más emails. Los destinatarios
recibiran un email con el enlace a tu Genial.ly
• Redes Sociales: para crear una publicación con el enlace a tu Genial.ly en la red
social que prefieras.
Al principio del tutorial vimos que en este apartado se abría un menú donde se ven las
miniaturas de las páginas de tu Genial.ly y puedes añadir más páginas. ¡Pero tiene muchas
otras opciones interesantes!
En este apartado puedes configurar el “Tamaño del lienzo“. ¡Ojo! El tamaño que
selecciones ahí se aplicará automáticamente a todas las páginas.
CONSEJO: Ten en cuenta que el archivo final tendrá unas dimensiones del doble de lo
que establezcas ahí cuando lo descargues. Si quieres una imagen de 1200x1200px,
configura un tamaño de 600x600px… o tendrás que redimensionarla después.
Menú «Fondos»
Si tienes una licencia Premium, además podrás crear tus propios fondos y guardarlos para
utilizarlos cuando quieras. ¡Muy práctico!
Los fondos «Premium» se identifican con la estrellita amarilla que ves en la imagen, igual
que sucedía con las plantillas. Los que muestran el icono rosa de «animación» son fondos
animados.
Te sugiero que pruebes diferentes fondos para ver cuál queda mejor.
Abajo del todo de la pestaña tienes la opción de aplicar el mismo fondo a todas las
páginas.
Haciendo clic sobre «Media» en el menú lateral podrás agregar imágenes, vídeo o audio.
Añadir contenido multimedia enriquecerá tu creatividad, ¡explota las posibilidades!
Puedes añadir imágenes: subiendo un archivo desde tu PC, pegando una URL,
eligiéndola de la galería de Genial.ly o accediendo directamente a Pixabay o Giphy.
Si lo que quieres añadir es un archivo de vídeo o audio, tiene que ser pegando la URL, a
través de un proveedor exterior. Por el momento no se puede subir directamente este tipo
de contenido, aunque se está trabajando para hacerlo posible.
¿Qué hay en «Recursos»?
Formas, líneas, ilustraciones, mapas… Tienes recursos para ilustrar cualquier creación
sobre cualquier tema. Hay un buscador para filtrar los recursos por palabras clave… pero
para mí es un área de mejora, no me resulta sencillo encontrar lo que busco a través de
los filtros.
Muchas veces vas a necesitar hacer modificaciones en esto. Por ejemplo, imagina que
añades un elemento grande que quieres que se vea en el fondo. Para esto está el botón
«ordenar».
Es este icono, siempre visible arriba a la izquierda cuando tienes un elemento
seleccionado:
Para utilizarlo, primero has de seleccionar un elemento, y después hacer clic en él. Verás
estas opciones para ponerlo más al fondo o más al frente:
¡Practica con esta opción! Te permitirá utilizar perspectiva en tus creatividades, algo muy
útil.
La mayoría de las herramientas no tiene esta opción, ¡y menos las herramientas gratuitas!
Alinear con exactitud los elementos es imposible si lo haces a ojo y «a pulso» con el
ratón.
Verás tres pestañas. El «Modo Diseño» está en la última pestaña de la derecha, en «Mesa
de trabajo».
Actívalo y verás esto:
Selecciona cualquier elemento para ver sus dimensiones en píxeles (altura y anchura), su
posición en los ejes X e Y, y la rotación en grados.
Arriba a la derecha ves la opción «Mantener proporciones», activada por defecto.
Mientras está activada, significa que si modificas el valor numérico de la altura o la
anchura, la otra dimensión se modificará proporcionalmente.
Lo mismo para alinearlos en fila. Introduce el mismo número en «Posición Y» para todos.
• Todos los corazones que se muestran en horizontal tienen «Posición Y» 25. Sus
posiciones X son 465, 665, 865, 1065.
• Todos los corazones que se muestran en vertical tienen «Posición X» 1065, Sus
posiciones Y son 25, 225, 425, 625.
No te puedes hacer una idea de la cantidad de tiempo que me ha ayudado a ahorrar esta
característica. ¡Se acabó sudar tratando de calcular a ojo la posición de un elemento!
Gracias al modo diseño podrás alinearlos con perfección matemática en pocos segundos
🙂 Cuadros y tablas con datos tabulados, catálogos con diferentes elementos… tardarás
pocos segundos en alinearlo todo.
CONSEJO: Puedes alinear varios elementos a la vez. Selecciona todos los elementos que
quieras poner a la misma altura haciendo clic sobre ellos mientras mantienes la tecla
CTRL pulsada. A continuación escribe el valor deseado en X o Y en «Modo Diseño», ¡y
listo! Pruébalo y verás, lo que antes te llevaba horas, podrás dejarlo listo y perfecto en un
instante.
¡Juega con los diferentes efectos! Todas las opciones son reversibles. Si no te gusta el
resultado, puedes eliminar la máscara haciendo clic en «Ninguno».
Igualmente, si no te gusta como queda una imagen que has recortado, recupera el original
haciendo clic en «Media». O vuelve a hacer clic en «Recortar» para modificar la
selección.
Conclusiones:
Para mí Genial.ly es imprescindible en mi trabajo. Cada vez hay más plantillas y siempre
encuentro enseguida un diseño que se ajuste al contenido en imagen que quiero crear.
¡Y no solamente diseños! Como dije al principio, cada vez se añaden más características,
¡y cada vez tengo que hacer el tutorial más largo!