Cómo crear imágenes gratis para tu blog

Tabla de contenidos

1. ¿Quién necesita crear imágenes gratis para su blog?
2. Imágenes y Posicionamiento Web
3. Los 9 pasos para crear imágenes en 15 minutos
4. Conclusiones

¿Quién necesita crear imágenes gratis para su blog?

Antes de entrar en faena, una aclaración (aunque los impacientes 😉 se la pueden saltar e ir directamente al proceso de creación de imágenes en 9 pasos)… Se podría decir que todos “necesitamos” imágenes gratis para nuestro blog, pero no es del todo cierto.

Detrás del proceso de concepción y diseño de una imagen no sólo hay tiempo de trabajo, sino años de preparación y estudio para concebir esas imágenes capaces de transmitir mucho más de lo que los ojos ven. Aspectos como proporcionalidad, espacio, colores, distribución, y tantos otros conceptos que ni siquiera he leído hablar de ellos, son los que hacen bueno aquello de que “una imagen vale más que mil palabras”.

Dicho esto, pretender que una imagen obtenida o elaborada de forma gratuita tenga el mismo efecto o calidad que la realizada por un diseñador profesional es poco menos que una quimera o autoengañarse.

Por supuesto, nunca debemos olvidarnos que hay que optimizar todas las imágenes, sean propias o externas, para evitar que retarden la carga de la página web, con el consiguiente abandono del usuario.

Sin embargo, también es cierto que, en muchos casos, o no se puede afrontar la minuta de un diseñador profesional, o el alcance del sitio web o blog no es tan amplio como para necesitar este tipo de servicios profesionales (dicho de otra forma: sería como matar moscas a cañonazos 🙂 ).

Por tanto, más que quién necesita crear imágenes gratis para su blog o sitio web, habría que responder quién no utilizaría exclusivamente imágenes gratuitas:

• Sitios web corporativos. El objetivo de una imagen no es simplemente “decorar” o hacer más atractivo el sitio web (o, ya puestos, que Google no nos penalice nuestro Posicionamiento Web), sino también transmitir una serie de mensajes o sensaciones. Cuando una pyme o gran empresa dispone de una imagen y una identidad corporativa, éstas también deben transmitirse a través del diseño y las imágenes del sitio web. Este logro no lo puede conseguir un aficionado con imágenes y herramientas gratuitas (y falta de preparación, todo hay que decirlo… y me incluyo 😉 ).
• Blogs de reconocido prestigio o difusión. En este caso no existe necesariamente una imagen corporativa, pero estos blogs normalmente tienen un estilo característico que los diferencia e identifica respecto del resto. Estilo que no solo incluye el diseño de las páginas web, sino también de sus imágenes, manteniendo una identidad visual coherente y uniforme a lo largo del sitio web. Ejemplos que ilustran este aspecto a la perfección son los prestigiosos blogs de Matthew Woodward o de José Facchin: basta ver una de sus imágenes para saber que estamos ante un artículo suyo. En otros casos, sin haber una identidad visual tan evidente o reconocible, sus imágenes siguen mostrando originalidad y total concordancia con el post al que acompañanan. Por ejemplo, los blogs Search Engine Journal o Search Engine Land.
• Profesionales asentados. Aunque incidiré en este punto en las conclusiones del artículo, un profesional o freelance que ya haya superado las dificultades iniciales del arranque de su actividad tampoco debería confiar su escaparate al exterior solamente en imágenes gratuitas. Un buen nombre, un prestigio de marca, trabajado durante meses puede venirse abajo por detalles así… En realidad, lo correcto sería decir que difícilmente se puede conseguir una marca personal potente basada en la utilización exclusiva de recursos gratuitos, ya sean imágenes o cualquier otro tipo de herramienta.

 

Imágenes y Posicionamiento Web

Ahora bien, el resto de mortales (y, fundamentalmente, en los primeros meses de actividad, sean blogueros, freelances o pequeñas empresas), con un campo de acción o repercusión bastante limitado o menos ambicioso, debe depender en muchos casos de las imágenes gratuitas que tiene a su alcance.

Habiendo como hay tantos bancos de imágenes gratuitos (en el artículo Bancos de imágenes gratis para tu blog o web tenéis una magnífica recopilación realizada por Rubén Alonso) y dado que nuestro tiempo es tan escaso y valioso, ¿tiene sentido que lo dediquemos a diseñar nuestras propias imágenes? La respuesta viene de manos del Posicionamiento Web… Bueno, más concretamente, de la Experiencia de Usuario.

Pero, ¿qué tienen que ver Posicionamiento Web y Experiencia de Usuario con la calidad de las imágenes? Veamos algunos casos concretos:

• Imágenes con solo texto. Sabemos que las personas escanean más que leer realmente: ¿cuál creéis que será su sensación si observan que todas las imágenes son prácticamente transcripciones del propio texto del artículo? ¿Les incitará a seguir leyendo? ¿O se limitarán a mirar rápidamente las imágenes, coger la idea principal… e irse? Este sistema puede venir muy bien para los periódicos, pero nosotros queremos que se queden un poco más de tiempo (tasa de rebote, duración de la sesión… ya sabéis). Aunque puede estar bien colocar estratégicamente imágenes con solo texto para destacar algo o llamar la atención (tal como un destacado o sumario en argot periodístico), no se debe abusar de esta técnica.
• Imágenes de relleno. Una de las cosas que me echa para atrás cuando entro en una página es que utilicen las “imágenes de siempre” para las situaciones que describen. Por ejemplo, lo que me ha pasado hace un par de horas: buscando información sobre estrategias y técnicas de negociación, he llegado a algunas páginas de sólo texto (“vaya tostón”… lo primero que pensé). Otras páginas con las sempiternas imágenes de personas sentadas alrededor de una mesa sonriéndose, o dándose la mano en un ambiente de alegría, cordialidad, panderetas y pájaros de colores…, que le hacen dudar a uno si estamos en plena negociación o asistiendo a una boda, y que aportan lo mismo que si no hubiera imágenes. Y, finalmente, páginas con imágenes, esquemas o gráficos que guardan alguna relación con el texto o lo evocan… ¿Con cuál de estos tres tipos de página creéis me quedé al final?
• Imágenes como pretexto. Todos sabemos que una imagen, y su correspondiente texto alternativo, son factores de posicionamiento de un post, así que hay meter una imagen “como… sea…”. A veces, sobre todo para los artículos cortos, con menos variedad argumental, o para temas muy abstractos, puede ser difícil concebir una buena imagen, y se recurre a pegar casi cualquier imagen. Aunque no tenga nada que ver con el texto, con tal de meter una imagen, con un nombre de fichero con jugosas palabras clave y, por supuesto, un super mega texto alternativo optimizado… El bot del buscador no lo percibirá, pero el usuario sí, que será plenamente consciente del parche y no se llevará una buena impresión. La primera vez puede que nos lo perdone, pero a partir de la segunda…
• Pantallazos por doquier. En realidad, esto tiene poco que ver con la creación de imágenes (copiar, pegar y recortar no se puede considerar “crear”), pero quería mencionar que no se debe abusar de los pantallazos. También afecta a la Experiencia de usuario. Por ejemplo, en este artículo se explica cómo configurar Internet Explorer y, aunque son seis pasos, todo está condensado en un solo pantallazo. De esta forma, no se carga innecesariamente la página con hasta 6 imágenes y el lector no tiene que estar desplazándose arriba y abajo por la página.

Como vemos, el uso inadecuado de imágenes puede repercutir negativamente en la experiencia de usuario, lo que también afectará a la tasa de visitas, al porcentaje de rebotes y a la duración de la sesión, arruinando nuestro posicionamiento.

Ahora sí, después de un poco de rollo teórico, veamos, por fin, …

 

Los 9 pasos para crear imágenes en 15 minutos

Un aspecto fundamental cuando diseñemos una imagen es que debe estar relacionado con el artículo del que forma parte y que sea significativo para el lector. Como ejemplo, voy a basarme en un artículo en el que estoy trabajando y que publicaré próximamente, y que tratará de la configuración del fichero robots.txt en un servidor con el gestor de contenidos WordPress.

La imagen que diseñaremos será la de cabecera; es decir, la imagen principal que aparece al principio del artículo y que sería su tarjeta de presentación en los listados, búsquedas o al compartir.

A continuación se describen los pasos para diseñar la nueva imagen, junto con el tiempo que deberíamos dedicar a cada uno de ellos como máximo. Estos tiempos son orientativos, por supuesto, pero solo por el hecho de poner un tiempo límite estaremos obligándonos a concentrarnos, a no procrastinar y a ser más eficaces y productivos.

 

1. Decidir qué elementos podrían encajar en la imagen que queremos diseñar acordes con la temática del artículo (1 min)

Del tema de dicho artículo cuatro conceptos: robot (por el fichero robots.txt), wordpress (el gestor de contenidos), spider (como se suele denominar en inglés a los crawlers de los buscadores) e Internet (puesto que los crawlers acceden a través de la red de redes).

En principio, estos serán los cuatro elementos con los que voy a formar la imagen, combinándolos de alguna forma. Recordad, tenemos un minuto: seamos osados y arrojados.

 

2. Hacer una búsqueda de imágenes en google con los términos relacionados con la temática del artículo, por si nos pudiera inspirar alguna idea adicional (1 min)

Una especie de tormenta de ideas, pero enfocado en imágenes en vez de ideas. El propósito es ver qué imágenes ya hay diseñadas, con el fin de ampliar nuestra selección inicial en el punto anterior. No se trata de copiar o plagiar, pero tampoco hace falta que reinventemos la rueda, ¿no?

Como la temática es bastante concreta, en este caso no obtengo ninguna idea nueva, aunque sí una variación que me gusta: un nombre alternativo a Internet es Web, por lo que es habitual que se represente como una especie de malla o telaraña. Telaraña y Spider: una combinación perfecta. Así que en vez del término «Internet», me quedo con «Web».

 

3. Hacer un boceto preliminar a mano alzada que incluya esos elementos (1 min)

Aquí empieza realmente el diseño. No se trata de ser unos artistas y hacer un dibujo perfecto, sino de coger los elementos que hemos elegido y pensar cómo combinarlos. La búsqueda del paso anterior posiblemente nos haya dado alguna idea también.

Yo dibujo realmente mal, así que mejor explico lo que imaginé 😉

Por un lado, pongo el logo de Worpress junto a un monigote que representa al robot, como si fuera su guardián. Por otro lado, pongo una telaraña (Internet) a través de la que viene una araña (el spider del buscador). Con mis evidentes limitaciones artísticas, lo que intento simbolizar es que el fichero robots.txt vigila o protege de alguna forma al wordpress contra el acceso indiscriminado del spiderbot desde la web.

 

4. Buscar en al menos tres sitios de imágenes gratuitas (2 min)

Ahra tenemos que buscar imágenes que sean o contengan uno o algunos de los elementos que hemos identificado (2 min por sitio); es decir, robots, arañas (spiders), telarañas (web o network también serían términos válidos) y WordPress.

Para WordPress la elección es sencilla: su logo será más que suficiente. Para la búsqueda del resto de imágenes, he utilizado los siguientes bancos de imágenes, que me suelen dar buenos resultados:

http://www.freeimages.com/

http://www.stockfreeimages.com/

https://pixabay.com/

http://www.freeimages.co.uk/

http://www.freedigitalphotos.net/

Un consejo. Las búsquedas, normalmente, están ordenadas por relevancia; es decir, primero muestra las que más concuerden con el significado de las palabras de búsqueda. Por este motivo, no suele ser necesario pasar de la cuarta o quinta página y, si hemos llegado a la quinta, lo mejor es que busquemos en otro banco de imágenes. Aunque cuidado: algunos de estos bancos de imágenes tienen varias opciones de ordenación (freedigitalphotos, por ejemplo) y también habría que tenerlo en cuenta.

Finalmente, me decido por estas imágenes de pixabay, freeimages y freedigitalphotos, más el logo de Worpress:

 

Un aspecto importante en ese punto. A medida que vayamos buscando y creando nuevas imágenes, también deberíamos iremos generando nuestro propio banco con estas imágenes. De esta forma, además de buscar en los bancos de imágenes en Internet, también podemos comprobar lo que tengamos en nuestro banco de imágenes personal.

En apenas unos minutos, ya hemos conseguido darle algo de forma a nuestra imagen.

 

5. Recortar los elementos con la varita mágica de Paint.net (2 min)

Paint.net (http://www.getpaint.net/index.html) es una herramienta maravillosa. Es fácil de utilizar, tiene múltiples opciones de diseño, soporta plugins y, por si fuera poco, es gratuita. Con ella construiremos nuestra imagen gratuita definitiva.

Si nunca habéis utilizado paint.net, os recomiendo este videotutorial, muy detallado e ilustrativo, y esta referencia rápida de los comandos más usados. También podéis utilizar los tutoriales del desarrollador, pero sólo están disponibles en inglés (aunque la aplicación sí que está disponible en español).

Si estáis acostumbrados a utilizar otros programas de diseño, las siguientes instrucciones no deberían suponeros mucho problema y las captaréis a la primera. Pero si nunca los habéis utilizado, sería interesante que os vieráis primero el videotutorial. Aunque los siguientes puntos son sencillos, manejan conceptos que, si nunca los habéis usado antes, pueden hacer que os sintáis perdidos.

Ahora, para cada una de nuestras imágenes seleccionadas, haremos los siguientes puntos:

• Cargar la imagen en el paint.net. En nuestro ejemplo, la del robot.
• Seleccionar la «varita mágica» en la barra de herramientas:

• Pinchar con la varita mágica en algún punto externo de la figura que queremos aislar. Veremos que la figura de la imagen se rodea por una línea punteada, quedando sombreado el exterior:

• Podemos utilizar la barra de tolerancia para ajustar el perfil alrededor de nuestra figura. Normalmente, factores entre el 15% y 25% dan buenos resultados:

• Cuando hayamos ajustado la tolerancia a nuestro gusto, pulsamos la tecla Suprimir. Nuestra figura se queda entonces sobre un fondo transparente. Este punto es muy importante, porque si el fondo no es transparente, después no podremos integrarla con el resto de imágenes:

• Guardamos la imagen en un formato sin compresión o con compresión sin pérdida de calidad. Yo suelo elegir PNG: no ocupa demasiado y tiene la máxima calidad. Es importante que nuestros originales siempre tengan la máxima calidad: la compresión ya la haremos en la imagen definitiva.

Y ya está. ¿A que no era tan difícil?

Ahora, debemos repetir estos puntos para cada una de las imágenes elegidas (y que pasarían a formar parte de nuestro banco de imágenes personal que mencionaba antes).

 

6. Montar el collage con las imágenes recortadas, ajustando tamaños, colores, transparencias, textos, etc. (4 min)

Pongámonos primero en situación… En este momento, tenemos varias imágenes, de distintos tamaños y orientaciones, que queremos integrar en una única imagen.

Ahora lo que toca es decidir el tamaño de esta nueva imagen. En mi caso, el tamaño recomendado para las imágenes de cabecera es de 853 por 398 píxeles. Creo, por tanto, una nueva imagen en Paint.net de ancho 853 píxeles y 398 píxeles de alto.

Importantísimo: trabajaremos por capas, puesto que cada una de las imágenes que hemos recortado en el punto anterior las iremos colocando en diferentes capas.

Además, también añadiremos una capa adicional para el fondo (background), una capa para el texto que queramos añadir y otra capa por si queremos incluir nuestra URL u otros datos. La utilización de capas es crucial, puesto que nos permite operar con cada imagen por separado sin afectar al resto: cambiarla de tamaño, moverla, retocarla, etc.

Así es como quedaría el selector de capas para todas las imágenes:

 

Creadas las capas, tan solo debemos ir copiando cada una de las imágenes anteriores en su capa correspondiente, dimensionarla en el tamaño adecuado y colocarla en la posición que queramos. El orden de las capas es importante: las capas superiores se superponen sobre las inferiores. Como hemos creado nuestras imágenes con fondo transparente (¿recordáis el paso 5?), podemos solaparlas a nuestro antojo sin que se tapen o que sólo se tapen parcialmente.

A partir de aquí, toda la dinámica se hace a través de las capas, copiando, pegando o cambiando de tamaño, primero marcando en el selector de capas la capa de la figura que queramos modificar.

Un detalle importante: para cambiar de tamaño una figura, primero hay que seleccionarla, y entonces se pulsa la tecla Mayúsculas (shift) al mismo tiempo que se redimensiona, para que la proporción de la figura se mantenga (es decir, que no se deforme a lo largo o a lo ancho).

Punto crucial para guardar la nueva imagen: hacedlo en formato PDN. Es el único formato del paint.net que guarda la información de las capas. Si lo hiciéramos en otro formato, sin capas, cualquier modificación posterior sería muy complicada o incluso imposible, y deberíamos volver a empezar con las imágenes originales.

Una vez guardada en formato PDN, podemos guardarla también en un formato gráfico estándar. Yo suelo crear dos, con formatos PNG y JPG. Después elijo uno de ellos en función del espacio que ocupan y la calidad visual de la imagen.

Bueno, y así es cómo quedaría la imagen final, con un poco texto y un gris claro de background:

 

No es exactamente cómo lo había concebido al principio, pero ha quedado bastante resultona, ¿no? 😉

 

7. Optimizar la imagen (1 min)

En este punto, ya tenemos creada nuestra imagen y sólo nos queda optimizarla para la web.

Yo utilizo estas dos herramientas gratuitas online:

https://kraken.io/web-interface

https://compressor.io/

Suelo comprimir con pérdida para las imágenes PNG (que prácticamente no se aprecia pérdida de calidad) y con y sin pérdida para las JPG. Entonces comparo tamaños de cada fichero y el aspecto visual, decidiéndome por una de ellas.

En general, siempre prefiero las imágenes PNG con pérdidas: mantienen una gran calidad y suelen pesar menos que un JPG sin pérdidas (aunque depende de las características de las imágenes; para los fotos, casi indiscutiblemente es mejor JPG).

 

8. ¡Respetad las condiciones de uso! (¡¡ni 20 segundos!!)

Indicar en el texto o en la imagen el reconocimiento de autoría. No todos lo requieren, pero hay que ser agradecidos y soportar a quien nos soporta, devolviéndoles el favor con un enlace (por ejemplo, al final de artículo).

 

9. Admira el trabajo realizado y disfruta de unos segundos de gloria.

Que te lo mereces 🙂

 

Conclusiones

Con los bancos de imágenes gratuitas existentes y utilizando una aplicación gratuita de diseño gráfico como el Paint.net, es posible crear nuestras propias imágenes sin coste alguno en unos pocos minutos, adaptándolas al contenido de nuestros posts y así mejorando la experiencia de usuario. A medida que vayamos adquiriendo más destreza en el manejo de la aplicación gráfica y conozcamos mejor los bancos de imágenes, nos irá resultando cada vez más fácil y rápido.

Sin embargo, nuestra estrategia no debería basarse exclusivamente en recursos gratuitos. Por dos motivos:

1. Aunque haya muchas imágenes gratuitas disponibles, su adaptabilidad a nuestros intereses no siempre es posible y en muchas ocasiones no tendremos más remedio que optar por imágenes que, sin ser malas, no son las perfectas para el contenido de nuestro post.
2. Aunque solo nos lleve 10-15 minutos crear cada una, puede llegar un momento en que nos pueda costar más dinero del que nos ahorraríamos, puesto que nuestro tiempo también tiene un precio.

Con respecto al segundo punto, supongamos que creamos una media de 6 posts al mes y que para cada uno creamos dos imágenes, una de cabecera y una en el texto. Esto significa que deberíamos crear 12 imágenes al mes. Si nos lleva 15 minutos cada imagen, son un total de 3 horas de trabajo.

Multipliquemos ahora nuestra tarifa por hora por este número de horas y hagámonos la siguiente pregunta: ¿me cuesta más hacerme las imágenes yo mismo que si contratara un servicio de imágenes de pago o incluso llegara a un acuerdo con un diseñador profesional?

Por eso, mi recomendación es que a medida que nuestras posibilidades (ingresos) lo vayan permitiendo, empecemos por contratar servicios de pago. Por ejemplo, primero sólo imágenes de pago, que en algunos casos quizás sigamos combinando nosotros mismos, pero que tendrán mayor variedad y calidad. Y, si seguimos mejorando, llegar a un acuerdo con un diseñador profesional para que nos haga las imágenes a medida.

 

Crear nuevas imágenes gratuitas, con nuesto «toque» personal, puede ser bastante rápido y con un resultado relativamente bueno. ¿Qué te parece este método? ¿Crees que vale la pena dedicar estos 15 minutos y que mejora la calidad del artículo y la experiencia de usuario? ¿Qué otras posibilidades se te ocurren?

Imágenes: freedigitalphotos, freeimages, pixabay, elaboración propia.