Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Cómo preparar las imágenes de tus newsletters

Publicado por Mailrelay en enero 3, 2014

Uno de los aspectos que más debemos de cuidar de nuestras newsletters son sin duda las imágenes, pero en ocasiones editar las imágenes de forma correcta suele ser un poco complejo. En este artículo voy a intentar explicarte los aspectos principales de la edición de imágenes, así como algunas herramientas para tratar las mismas.

El objetivo no es hacer un artículo que trate el tema en profundidad, pero si ver los aspectos clave que te permitan trabajar con imágenes en tus newsletters.

1) Averiguar las medidas de la imagen

Una de las primeras cosas que necesitaremos conocer serán las medidas de la imagen que vamos a emplear en nuestra newsletter, para que se ajusten de forma correcta al diseño de nuestra newsletter.

Por ejemplo imagina que la cabecera de nuestra newsletter es esta:

edicion-imagenes-newsletter-1

Este diseño de newsletter hace uso de una imagen principal ¿Cómo podemos medirla?

Una de las herramientas que podemos utilizar es un complemento para Firefox, «MeasureIt«, que puedes encontrar aquí:

https://addons.mozilla.org/es/firefox/addon/measureit/

Si accedes a esa página encontrarás una pantalla similar a esta:

edicion-imagenes-newsletter-2

Solo tienes que hacer click en el botón «Agregar a Firefox«, probablemente te pedirá que reinicies el navegador.

Una vez hecho esto, al volver a cargar tu navegador, verás arriba a la derecha un icono con forma de regla:

edicion-imagenes-newsletter-3

Luego pincha en el icono, y después en la imagen, arrastra hasta seleccionarla entera:

edicion-imagenes-newsletter-4

Fíjate que al marcar la imagen, alrededor aparece como una regla  y queda remarcada, además arriba a la derecha nos informa del ancho y el alto de la imagen. De este tamaño tendrá que ser nuestra imagen para encajar bien en el diseño de nuestra newsletter.

2) Otra forma de medir la imagen

Otra forma de medir la imagen es utilizando el Software Photoshop, es un proceso igualmente sencillo. Vamos a probar en este caso con otra imagen, para poder medirla primero haremos una captura de pantalla, con la tecla «Imprimir pantalla» de tu teclado.

Luego dentro de Photoshop podemos hacer click en el menú «Archivo» y luego «Nuevo«:

edicion-imagenes-newsletter-5

En la siguiente pantalla haremos click en «Ok«:

edicion-imagenes-newsletter-6

Con esto conseguiremos una pantalla en blanco, donde podemos pegar la imagen que acabamos de capturar, haciendo click en el menú «Edición» -> «Pegar«:

edicion-imagenes-newsletter-7

Ahora tenemos la imagen lista en Photoshop, utilizaremos, por ejemplo, la herramienta de marco rectangular para marcar la zona a medir:

edicion-imagenes-newsletter-8

Verás que la imagen queda rodeada de una línea de puntos, lo que nos indica que la selección está realizada:

edicion-imagenes-newsletter-9

Ahora solo tenemos que consultar el panel de información, «Tecla F8» si no está activo, y tendremos la información de las medidas de la selección que hemos realizado:

edicion-imagenes-newsletter-10

Esta información la da en píxeles si tenemos dicha configuración, y si no, puedes establecer dicha configuración en «Edición» – «Preferencias» – «Unidades y reglas«, menú donde puedes establecer las unidades que prefieras.

3) Modificar el tamaño de las imágenes

Cuando ya conozcamos las medidas podremos modificar nuestra imagen sin equivocarnos, para esto existen herramientas gratuitas y online, como por ejemplo:

http://www.picresize.com/

Esta herramienta nos permitirá modificar la imagen y recortarla según necesitemos, de forma gratuita. Al acceder a esta web veremos una pantalla similar a esta:

edicion-imagenes-newsletter-11

El primer paso es seleccionar la imagen de nuestro equipo que deseamos editar, y después hacer click en el botón «Continue«.

edicion-imagenes-newsletter-12

Una vez que la imagen termine de subirse, accederemos a una pantalla donde se nos permite editar la misma. La opción «Crop Selection» te permite seleccionar solo una parte de la imagen, en caso de que no la necesites entera.

Si mantienes pulsada la tecla «Shift» la selección tendrá forma cuadrada.

Tras seleccionar la porción de la imagen que desees, o en caso de que no desees seleccionar una parte de la imagen, el siguiente paso es redimensionar la imagen.

En los puntos previos de este artículo hemos visto como llegar a conocer las dimensiones que necesitamos, en este punto utilizaremos ese dato.

Despliega el selector que indica «Make My Picture» y selecciona «Custom Size…«, después en «Width» introduce el ancho y en «Height» la altura:

edicion-imagenes-newsletter-13

No vamos a entrar en el tema de los efectos pasaremos directamente al punto cuarto:

edicion-imagenes-newsletter-14

Selecciona el formato en el desplegable «Image Format«, los formatos más habituales son:

JPG -> Para fotografías con muchos colores.

PNG -> Para imágenes que incluyan textos, esquemas y que no incluyan tantos colores.

Es posible utilizar el formato PNG también para fotografías, pero suelen tener un peso mayor que en formato JPG.

En caso de seleccionar JPG, también puedes seleccionar la calidad de la imagen y posteriormente solo queda hacer click en «I’m done, Resize My Picture!«. Eso dará por finalizado el proceso de tratamiento de la imagen.

Para finalizar, podemos previsualizar la imagen resultante «View image» o guardarla en nuestro equipo «Save to Disk«:

edicion-imagenes-newsletter-15

Ya tenemos la imagen lista para ser incorporada de forma perfecta en nuestra newsletter:

edicion-imagenes-newsletter-16

Quedando perfectamente incorporada al diseño de nuestra newsletter.

4) Modificar el tamaño de las imágenes con Photoshop

Otra opción posible para redimensionar las imágenes la tenemos con Photoshop, en este caso una vez conozcamos las medidas objetivo el proceso es muy rápido y sencillo.

Para ello utilizaremos la herramienta «Recortar«:

edicion-imagenes-newsletter-17

Al seleccionar esta herramienta verás que arriba a la izquierda te permite introducir los valores de las medidas:

edicion-imagenes-newsletter-18

Hecho esto, marca en la imagen todo lo que desees recortar, por ejemplo y finalmente haz click en la tecla «Enter«. El proceso producirá una imagen del tamaño adecuado.

Para guardar la imagen resultante de forma adecuada, para utilizar en tu newsletter, haz click en el menu «Archivo» y después en «Guardar para Web y dispositivos«:

edicion-imagenes-newsletter-19

El siguiente paso nos permite seleccionar el formato de la imagen, y en algunos casos la calidad de la misma:

edicion-imagenes-newsletter-20

A mayor calidad, mayor peso de la imagen, por lo que selecciona unos valores razonables. Tras esto podemos guardar la imagen y utilizarla en nuestra newsletter.

5) Bonus: Cropp.me

Si has llegado hasta aquí, voy a mostrarte un tercer método para recortar imágenes de forma fácil, rápida y gratuita.

De este modo dispondrás de una herramienta más para tus ediciones de imágenes, ya no hay excusa para que tus newsletter luzcan perfectas.

Se trata de:

http://cropp.me/

Una vez que accedamos a esta web veremos una pantalla similar a esta:

edicion-imagenes-newsletter-21

El proceso es muy sencillo, haz clic en el botón «Upload Your Images«, y selecciona la imagen de tu equipo que deseas editar.

Puedes subir más de una imagen si así lo deseas.

En la siguiente pantalla puedes seleccionar las medidas de corte, o introducirlas a mano:

edicion-imagenes-newsletter-22

Tras introducir las medidas a mano, o seleccionar las que nos da por defecto, solo queda hacer click en «Cropp Your images«, verás como aparecen unas imágenes a la derecha:

edicion-imagenes-newsletter-23

Si el corte que deseas realizar no es proporcional a las medidas de la imagen, se efectuara el corte lo mejor posible, pero se perderá parte de la imagen.

Puede ser que no te guste el corte realizado, en cuyo caso lo puedes modificar, haciendo click en el pequeño icono de edición de la imagen:

edicion-imagenes-newsletter-24

Veremos una pantalla, donde podremos mover la selección donde deseemos, y finalmente guardar los cambios:

edicion-imagenes-newsletter-25

Y finalmente guardar a nuestro equipo todas las imágenes resultantes.

Como ves el proceso es muy sencillo y resulta en una herramienta muy interesante para recortar imágenes rápidamente.

En definitiva

Hemos visto algunas formas de conocer el tamaño que deben medir las imágenes de nuestra newsletter, y también hemos visto como redimensionar nuestras imágenes para que respondan a estas medidas.

¡Esperamos que este tutorial te sea de utilidad!

¡No te olvides de compartirlo si te ha gustado!


El motivo principal por el que no vendes con tus emails es porque acaban en SPAM. Eso tiene solución, está en este ebook, lo puedes descargar registrándote, abajo







Acepto la política de privacidad.



Comentarios

  1. JoseSalva

    En mi opinión la mejor aplicación para hacer ésto es el «Paint».
    Una utilidad que viene por defecto en Windows y que además es gratuita.
    Saludos!

    15/05/2016 - 17:32:26 Publicar una respuesta
    • Mailrelay

      ¡Hola JoseSalva! La pega el paint creo que es que no reduce demasiado el peso de la imagen, en comparación con otras herramientas.

      16/05/2016 - 08:03:22 Publicar una respuesta
  2. Vicen

    Una buena herramienta de software libre (¡y además gratuita!) para preparar las imágenes y todo lo que explicas aquí (y mucho más) en GIMP: http://www.gimp.org/
    Utilizo GIMP habitualmente, tanto para ajustar el tamaño y formato de las imágenes como para hacer ajustes de color (el balance de blancos en una excelente ayuda) o retoques.
    Creo que estaría bien que le echases un vistazo… ¡y nos lo explicases en un post!

    20/11/2015 - 14:59:34 Publicar una respuesta
    • Mailrelay

      ¡Hola Vicen! Pues lo cierto es que no se me da muy bien el GIMP, soy más de la competencia 🙂 Pero si alguien se anima a hacer un tutorial o dejarnos un enlace a alguno 🙂

      20/11/2015 - 15:08:27 Publicar una respuesta
  3. UD QUART

    Gracias por la información es muy muy interesante.

    13/09/2014 - 15:12:54 Publicar una respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Menu Title