Las infografías interactivas, aprender jugando

Hoy queremos compartir con vosotros una infografía interactiva extraída del diario "El Mundo" sobre  La fragata Nuestra Señora de las Mercedes. Buena estructura, información detallada y exhaustiva, colores elegantes y armoniosos; uso de ilustraciones 3D y una labor documental amplia; lo convierten en un ejemplo de lo que significa una buena infografía.

Pulsa sobre la imagen o el nombre de la infografía el para acceder al contenido interactivo. La fragata Nuestra Señora de las Mercedes. El Mundo, Emilio Amade.

Infografía y novela gráfica

Si bien la infografía parece haber tomado un rumbo más analítico y científico; durante mucho tiempo bebió de elementos próximos al cómic, sobre todo en cuanto a expresión visual, estilo y un cierto lenguaje común.
Hoy no vamos a hablar de infografía, sino de ficción, de novela gráfica basada en trabajos escrupulosamente documentados de la mano de Hugo Pratt (1927-1995) y su personaje Corto Maltés.
Marinero y aventurero romántico, os recomiendo que estas vacaciones descubráis junto a él a una época de grandes cambios políticos, sociales a caballo entre el siglo XIX y el XX.

Corto Maltés

Truco: Poner texto en Gimp

En nuestra serie de trucos o de mini-tutoriales no podía faltar la inclusión de texto en Gimp.
¡Aquí os dejamos el vídeo!

Truco: Insertar color de ColourLovers o Adobe Color CC en CANVA

Hoy nos adentramos en Canva y en cómo incluir los colores elegido y seleccionados bien de ColourLovers o de Adobe Color CC. El sistema es el mismo con ambas aplicaciones.

PASO A PASO

1.- Pulsar en el nombre de la paleta de ColourLovers elegido.

2.- Aparece la paleta. Descender haciendo scroll. Aparecen detallados los colores con los valores HEX, copiar.

3.- En Canva, eligir el objeto, texto... que se desea cambiar de color, pulsar en la muestra de pintura, selecciona +

4.- Introduce el código HEX en la caja de introducción de texto junto a Colour Code

Felices fiestas!!!

Bueno. Que se nos acaba el año y empezamos uno nuevo. Desde la tutoría del curso os queremos desear lo mejor para este 2015 que viene. Queríamos preparar algo más personalizado, con materiales del curso pero no nos ha dado tiempo, así que hemos hecho uso de una plantilla gratuita, pero aún así... FELIZ 2015!!!

Gráfico con generador de gráficos y Gimp

Seguimos la serie dedicada a la exploración espacial. Hoy abundamos en las posibilidades que nos dan los gráficos estadísticos. A continuación os presentamos un ejemplo muy sencillo que hemos preparado basándonos en la mítica imagen del hombre en la Luna, cortesía de la NASA, de la información contenida el blog: "Simplemente el universo" y de la tipografía "Boom Box" de Dafont.

Infografía realizada con Gimp y Generador de Gráficos

Truco: Silueta calada con GIMP

El truco de hoy es muy útil cuando queremos integrar una imagen con un fondo nuevo, más acorde con nuestra infografía. En ocasiones, en lugar de realizar un recorte detallado de ésta, basta con realizar un silueteo poco definido y ligeramente alejado de la figura de nuestro interés, darle un calado, eliminar el fondo y guardar en formato png o psd; si usamos Photoshop.

He aquí los pasos:
1.- En la ventana de Capas/layers nos colocamos sobre la imagen y con el botón derecho se abre un nuevo menú. Elegimos: Add layer Mask / Añadir máscara de capa
2.- En la barra de herramientas / Toolbox elegimos el lazo y realizamos nuestra selección, sin olvidarnos de cerrarla haciendo doble click sobre nuestro punto inicial.
3.- Selección / Select < Calado / Feather. Aquí los valores son según vuestro gusto personal, en nuestro caso, 20 px.
4.- Edición / Edit < Eliminar / Clear
5.- Archivo / File < Exportar como / Export as < PNG (de este modo se conserva la transparencia)
6.- Quedaría integrar esta imagen con el nuevo fondo.

Archive.org

Esta entrada está dedicada a aquellos que sois más lanzados y os interesan los proyectos multimedia. A veces nos encontramos con la dificultad de no disponer de vídeos libres de derechos de autor para nuestras realizaciones. Para poder paliar de alguna forma esta desventaja os presentamos la página archive.org que contiene una categoría llamada vídeos donde podemos encontrar organizados por categorías miles de documentos, desde las primeras películas de Melies y su fantástico y fantasioso Le voyage dans la lune a retransmisiones deportivas como el campeonato de la NFL de 1957,  o proyecciones creadas por ordenador para poner de fondo como las de la Oveja Eléctrica.

Mezclando fragmentos tomados de esta página y de la librería The Commons de Flikr, Ioseba Elorza, creó un vídeo musical excepcional.

Así que os invitamos a bucear en la cantidad de recursos de ésta página, los archivéis en vuestro equipo o vuestra cuenta de Google Drive y lo cataloguéis para poder buscarlo de forma rápida. Una forma de ver qué contiene un vídeo es pulsar en la ventana de la izquierda View Movie y nos mostrará una imagen cada x minutos o fotogramas.

Un proyecto: distintas infografías

A continuación os presentamos un proyecto en el que vamos a explorar con el uso de distintas infografías: La luna y la conquista de ésta por el hombre.
Intentaremos adaptar la información a cada tipología. Hoy os presentamos la primera: fotoinfografía con Gimp.

Gimp: Crea un dibujo con unos simples pasos

A veces queremos dar un toque artístico y con aspecto de dibujo abocetado, en estas situaciones una forma rápida de lograrlo es usando los filtros de Gimp. En este minitutorial os enseñamos cómo lograrlo. Se trata de una receta que en la que los valores necesitan probarse y quizá modificar ligeramente para que el resultado sea el deseado.

Nuestra receta paso a paso:
1.- Duplica la capa / Layers< duplicate layer
2.- Filtros < Detección de bordes / Filters < Edge-Detect < Difference of Gaussians
3.- Colores < Ajustar los niveles de color / Colors < levels
4.- Colores < Desaturar  (elegir o Claridad o luminosidad) / Colors < Desaturate
5.- Duplicar la capa original
6.- Filtros< Artísticos < Fotocopia / Filters < Artistic< Photocopy
7.- Colores < Ajustar los niveles de color / Colors < levels
8.- Capa Primera: Bajar opacidad / opacity en torno al 50% - Modo/ Mode: Multiplicar / multiply
9.- Capa segunda: Bajar opacidad / opacity en torno al 80% - Modo/ Mode: Disolver / Dissolve
10.- Guardar cambios

Minitutorial GIMP: Cómo hacer una sombra

Ayer veíamos cómo utilizar los modos de fusión como una alternativa rápida en nuestros diseños al silueteo, con la ventaja de que muchas veces, ese efecto de superposición-semi tranlúcido que genera puede dar un aspecto de mayor integración a las imágenes. Hoy utilizando las mismas fotografías, vamos a crear la sensación de profundidad creando una sombra paralela en GIMP.

Para los usuarios de Photoshop, el programa funciona de forma similar

Trucos de Gimp

Hoy os queremos mostrar un truco que puede suponer un gran ahorro de tiempo. Muchas veces, necesitamos poner dos fotos caladas una sobre otra, pero para que queden bien tenemos que eliminar el fondo de una de ellas. Bien, un truco rapidísimo consiste en usar el modo de fusión de las capas. En el vídeo que os mostramos, necesitamos poner sobre la foto de unos niños, el logotipo del Nafarroa Oinez que tiene un fondo blanco. Al usar el modo de fusión Multiplicar, lo que conseguimos es que los colores claros desaparezcan, mientras que los oscuros se intensifican. Este truco funciona sólo cuando se desean eliminar fondos blancos o muy claros y el resto de la imagen tiene colores muy intensos, cuando se desea crear fusiones entre fotografías que suavicen las uniones o para poner sombras que den realce y profundidad a dos imágenes.

En este vídeo se muestra cómo cambiar el modo de fusión de una imagen en Gimp, algo que se podría trasladar a Photoshop, ya que funciona exactamente igual.

S.O.S, las texturas al rescate

Uno de los recursos más utilizados en diseño es el uso de texturas. Se trata de imágenes de papeles desgastados, piedras, arena, hojas... Todo lo que puedas imaginar y que se usa como fondo sutil sobre el que poner textos, imágenes, ilustraciones. Es una buena práctica cuando este fondo, ayuda a construir una imagen bella, sutil y por ello no se pierde legibilidad, además de que está íntimamente ligada con el tema. Se convierte en un bote salvavidas, cuando las ideas nuevas o frescas no aparecen... spuede ser una forma atractiva de renovar quizá diseños no muy originales.
Nosotros mismos podemos crear nuestras texturas, únicamente con un scanner o con una cámara digital, pero en internet hay cientos de páginas que ofrecen estos recursos, pero una de las más útiles es: cgtextures.com.

Hermoso ejemplo de uso de texturas, extraído de infografistas.blogspot. El infografista ha usado la textura de un libro antiguo y desgastado para construir sobre ella su gráfico.

Flickr: The Commons

El 16 de enero de 2008, Flickr y la Biblioteca del Congreso de los EEUU lanzaron un proyecto piloto para compartir de forma pública y libre acceso los medios que tenían digitalizados. Fruto de este piloto nació The Commons.

A esta iniciativa se unieron múltiples instituciones que han añadido sus fondos a "Patrimonio público" con una extensa colección de fotografías libres de derechos para poder usar en todo tipo de soportes.

Por ejemplo, podemos buscar fotografías de María Montessori, primera mujer doctora en Italia. Y de la lista que nos ofrece tomar la que más nos guste o se adapte a nuestro diseño.

En el siguiente vídeo mostramos cómo buscar, por ejemplo, Darwin, seleccionar una imagen y descargarla al tamaño adecuado. En este caso hemos escogido la más grande.

Otra infografía multimedia

Hace unos días una de los participantes del curso me planteó la posibilidad de hacer el trabajo final mediante una infografía multimedia. Es un campo en el que no tengo ninguna experiencia, pero me parece apasionante.

Crear una infografía con Moovly o Wevideo tiene una dificultad añadida debida al peso de los vídeos y los caudales de conexión actuales. Así que me propuse realizar una con una herramienta de escritorio, no online.

Rebuscando entre los programas que acompañaban a una tableta digitalizadora que compré hace tiempo descubrí un disco con una versión de prueba de Adobe After Effects, a diferencia de las versión Trial, sí que permite guardar y exportar los proyectos que se realizan, pero... no tenía ni idea de cómo usar un programa tan complejo.

A lo largo de varios días visioné un montón de videotutoriales en Youtube y volviendo a usar los datos de la primera tarea, creé el siguiente vídeo con música del editor de Youtube.

Más sobre tipografías... Dingbats

Una tipografía Dingbat ofrece caracteres y formas especiales que difícilmente encontramos en otro estilo de tipografías. Existen multitud de ejemplos de tipo matemático, fonético, ornamental... Al seguir un orden alfabético, se convierten en una forma rápida de incluir ilustraciones o elementos decorativos en nuestros diseños. Dentro de este grupo encontramos también Caps-Fontbats, se trata de letras capitulares y especiales construidas con dibujos.

Fuentes extraídas de Dafont

Fuente: 
Fuentes Tipográficas
Wikipedia

¿Qué es una tipo Script?

Las fuentes caligráficas son caracteres con un toque personal que imita la escritura caligráfica o manuscrita. Generalmente se reservan para acentuar el título principal, o la firma del autor, pues los trazos más finos pueden desaparecer, comprometiendo la legibilidad. Son perfectas para invitaciones, postales, titulares o textos breves y expresivos. Su variedad abarca desde fuentes caligráficas clásicas para diseños elegantes, a caracteres desenfadados para un aspecto informal y alegre, e incluso imitando los trazos de los graffitti. Son populares en el mundo publicitario.

Ejemplos de tipografías Script de Dafont

Fuente: 
Linotype 
Fuentes Tipográficas
Dafont