img-buscador

Web

Guía para optimizar una imagen online

Por: Comunidad EME

Septiembre 12 de 2013
2137
0
Guía para optimizar una imagen online

Fuente imagen: www.picmonkey.com

Gracias a la herramienta PicMonkey, veremos cómo editar una imagen para nuestros contenidos en la web.

Si ya hiciste un recorrido por nuestro portal, posiblemente notaste que la mayoría de imágenes tienen el mismo tamaño (menos la galería). Como sabemos que te vas a animar a escribir un artículo para la comunidad, es importante que ese contenido esté apoyado de una imagen que lo relacione, por eso a continuación, explicamos de manera muy sencilla cómo cargar y editar una imagen para web.

Selecciona la imagen que va a acompañar tu contenido, recuerda usar una imagen que no tenga derechos de autor, si usas un banco de imágenes verifica que puedas usarla libremente o si usas una imagen de tu autoría, puedes cargar la imagen con tu nombre como “pie de página”.

Sabemos que hay programas para edición de imágenes que se deben instalar en nuestro equipo, pero la idea aquí, es facilitar ese proceso a nuestra comunidad y que cargar contenidos tanto para este sitio como para cualquier página web, sea un proceso muy sencillo.

Comencemos:

Vamos a usar una herramienta online muy amigable para este propósito, se trata de www.picmonkey.com, al ingresar no nos exige registro para usar el editor, solo hacemos clic en “Edit a photo” y seleccionamos la imagen desde nuestro equipo.



Una vez seleccionemos la imagen, nos aparece el editor con todas las opciones y herramientas en la columna izquierda, en este caso tenemos por ejemplo una imagen de 880 x 587 pixeles y necesitamos que al final quede de 700 x 350 pixeles, que es el tamaño de las imágenes que usamos en este portal.



La primera herramienta que encontramos a la izquierda se llama “Crop”, la seleccionamos y nos va a desplegar unas opciones para cortar la fotografía, en este caso solo vamos a tomar un área exacta de 700px de ancho por 350px de alto, estos valores los podemos digitar en la zona que dice “Actual size” y a la derecha nos aparece un cuadro con el tamaño que digitamos, lo podemos mover por cualquier zona de la fotografía para seleccionar la parte de la imagen que queremos, oprimimos “Apply” para que realice el corte.
 


Ya cortada la fotografía, si queremos un poco más de producción en la misma, el editor nos ofrece otros servicios como:

  • Rotate: Funciona para  girar en algún ángulo la fotografía.
  • Exposure: Nos permite trabajar la exposición de la fotografía, es decir, si quisiéramos más contraste, brillo o saturarla, lo debemos hacer por aquí.
  • Color: Aplica tonos monocromáticos sobre la fotografía
  • Sharpen: Aplica efectos sobre siluetas de la fotografía
  • Resize: Es otra función que puede ser muy útil para editar nuestras imágenes, ya que si queremos conservar una fotografía completa y no un área determinada, aquí especificamos la medida en la que necesitamos la imagen siempre fijando el ancho primero y conservando las proporciones para no estirarla.

En nuestro caso, decidimos usar la fotografía en blanco y negro, así que usamos la herramienta “Color” y la función “Saturation” que por defecto aparece en “0”, pero la vamos a arrastrar hacia la izquierda hasta “-100”, así obtenemos la fotografía en este tono.
 


Hasta ahora nuestra fotografía funciona, suponiendo que fuera de nuestra autoría y que deseamos que lleve nuestro nombre, vamos a marcarla con un texto, y eso lo podemos hacer con este editor. Para ello, usamos la función que se ubica a la izquierda con un ícono de la letra “P”, allí nos habilita un listado de fuentes (bastante amplio), recomendamos seleccionen una fácil de leer. Adicional a la derecha, podemos ver que nos carga una caja de texto para escribir, el cual podemos desplazar en cualquier espacio de la imagen, también nos muestra otra ventana con varias opciones para personalizar aún más nuestro texto, como tamaño de la fuente, color, intensidad, alineación etc,.
 


Nuestra imagen ya está  lista, este editor nos permite guardar la fotografía en nuestro equipo, compartirla en redes sociales o enviarla por correo, por ahora tomamos la opción “Save” que se ubica en el menú superior, y a la izquierda nos despliega varias opciones para guardar la imagen, escribimos el nombre para guardarla, como es para web, verificamos que el formato sea “.jpg”, y la calidad “pierce”, ya que el peso es ideal para nuestros artículos.
 


Definitivamente PicMonkey es un editor muy completo, ideal para trabajar imágenes en línea y para web, como ven, solo trabajamos unas funciones básicas, pero pueden explorar con detenimiento todas las herramientas que trae y elaborar imágenes un poco más producidas e impactantes. Aquí nuestro resultado:



Esperamos que con base en este tutorial, puedas trabajar fotografías para cualquier página web, y lo más importante, que te animes a compartir con nosotros, contenidos, tutoriales o manuales sobre temas relacionados con e-marketing, e-commerce, social media, tecnología, móvil y web 2.0.

Califica este contenido:

feliz

00

triste

00

Reportar

00

Ir a Web IR

Comunidad EME

Especie de apariencia elegante, grandes habilidades sociales y de comunicación, dispuestos a compartir experiencias, conocimientos y adaptarnos al ecosistema virtual, para aprender del mundo digital.


comments powered by Disqus

Publicidad:

Ingresa tu correo y recibe lo mejor de nuestros contenidos:

Enviar
Subir

El Sistema de gamificación para impulsar la experiencia del consumidor