Preparar fotos para productos de comercio electrónico

Cuando nos disponemos a crear productos para nuestra página web avanzada o de comercio electrónico online, o bien para hacer galerías de fotos atractivas en nuestras webs básicas o estándar, un aspecto fundamental es elegir y trabajar las fotografías que vamos a emplear.

Si lo que queremos es crear portadas para la web o imágenes genéricas descriptivas, existen diversos bancos de imágenes en los que podremos encontrar recursos gráficos. Eso sí, deberemos tener siempre presente que algunas de estas imágenes pueden estar sujetas a derechos de autor, por lo cual infringiremos la ley si las usamos en nuestra web.

Algunos de estos bancos de imágenes son los siguientes:

Google. No es un banco de imágenes como tal, pero es una fuente de recursos muy empleada y muy sencilla de usar.

1

Imaginemos que queremos cambiar la portada de una web de ropa juvenil. En el buscador podríamos poner los términos “moda joven“. Indicaremos además que queremos buscar Imágenes y en las Herramientas de búsqueda podremos indicar que nos muestre solamente los resultados que de imágenes Etiquetadas para reutilización. Con esto nos aseguraremos que las imágenes que aparecen no están sometidas a derechos de autor. Está claro que los resultados serán mucho más pobres que si buscamos Sin filtrar por licencia, pero así cumpliremos con la legislación vigente.

Además podemos usar más filtros, como por ejemplo el Tamaño. Por ejemplo, una imagen para ser empleada como portada debe ser mayor de 1024×768 píxeles. Si en ese campo le indicamos el tamaño que queremos que tengan las imágenes resultantes, nos servirá de gran ayuda.

2

Además, nuestra web tendrá unos colores predominantes, por lo que también podemos establecer cómo queremos que sea el Color de las imágenes que buscamos.

3

 

Pixabay. Es un sistema de búsqueda de imágenes sencillo y muy intuitivo, donde además se indica si la imagen está sujeta o no a derechos de autor.

Freepik. Se trata de un motor de búsqueda que ayuda a localizar fotos de alta calidad, imágenes vectoriales, ilustraciones, etc.

 

Otra posibilidad es realizar capturas de pantalla de imágenes que vemos en nuestro ordenador, pero con ese aspecto debemos ser cuidadosos por los problemas jurídicos que nos puede plantear usar imágenes sujetas a derechos de autor.

En el mercado existen diversas aplicaciones de captura de pantalla. Una muy sencilla, potente y gratuita es FastStone Capture. Instalando esta aplicación podremos capturar una pantalla con la tecla Impr Pant del ordenador, seleccionar la porción de imagen que necesitamos y hacer un Crop (recorte) de la parte que necesitamos. El resultado lo podremos guardar como una imagen para cargarla en nuestra web. También nos permite realizar ediciones sencillas de la imagen obtenida, como rotaciones, redimensionamientos de la imagen y del lienzo.

 

Hagamos un ejemplo:

Para nuestra web de comercio electrónico, necesito preparar las imágenes para un producto que pretendo crear. Ese producto será un carrito de bebé de la marca Bogaboo cuyo modelo es el Runner. Por lo tanto, lo primero que podemos intentar es ir a la web del fabricante e intentar descargar de ahí las imágenes. Si las encuentro, una solución es pulsar sobre ellas con el botón derecho del ratón y poner Guardar imagen como para almacenarlas en nuestro equipo.

5

Pero CUIDADO… A veces las imágenes que descargamos son miniaturas, o bien tienen muy baja resolución, por lo que al emplearlas en los productos de la web tendremos imágenes pixeladas que dan un efecto muy malo a nuestra web. Otras veces la proporción de la imagen no será la correcta, ya que necesitaremos formas cuadradas cuando en realidad las obtenidas son rectangulares. Con el editor FastStone Editor incluido en la citada aplicación FastStone Capture podemos editar de forma simple y sencilla las imágenes obtenidas para que se ajusten a lo que necesito. Más adelante veremos como hacer esto…

Otras veces directamente no conseguimos poder descargar la imagen, por lo que optamos por realizar capturas de pantalla. En este ejemplo concreto lo haremos usando FastStone Capture.

Los productos por lo general suelen representarse de forma cuadrada, por lo que en este ejemplo realizaremos unas capturas de pantalla directamente de la web de Bugaboo.

4

Una vez dentro de la web, pulsaremos la tecla Impr Pant de nuestro teclado.

Aparecerá la imagen capturada en el FastStone Editor. Seleccionaremos un área cuadrada que englobe la porción del carrito que queremos mantener. En la parte inferior de la pantalla del editor nos muestra el tamaño del área de selección en tiempo real. En este caso fijaremos un tamaño de 485×485. Una vez marcado el área pulsaremos el icono Crop para eliminar la imagen que queda por fuera del área marcada. En el icono Save as podremos guardar la imagen en una carpeta de nuestro sistema. De esta forma obtendremos lo siguiente:

6

Voy a capturar también alguna imagen más, como una vista frontal, una trasera y una perspectiva, así como un detalle de la rueda. Intentaré que todas las áreas de selección midan 485×485. Un truco para obtener un buen encuadre es que, una vez marcado el área de selección, se puede pulsar sobre él con el ratón y arrastrarlo a una nueva posición. Guardamos todas las imágenes y ya podremos comenzar a crear nuestro producto.

7  98  10 

Desde el propio FastStone Editor se puede cambiar el tamaño de las imágenes de forma proporcional. Pulsaremos Impr Pant para que nos abra un editor, iremos al icono Open (abrir) y seleccionaremos la imagen que queremos editar. En el icono Resize podremos cambiar los valores de Width (ancho) o Height (alto). Cuando cambiamos un valor, el otro se modifica para mantener su proporción.

Si lo que queremos es cambiar el tamaño del lienzo debemos ir al menú Edit y seleccionar la opción Canvas Size. Indicaremos el nuevo tamaño de Width (ancho) o Height (alto), pero teniendo en cuenta que la imagen se recortará por los extremos. Es posible indicar qué parte del lienzo de la imagen permanecerá fijo. Por defecto, se mantiene fijo el centro del lienzo y se recorta alrededor de sus cuatro lados, pero es posible poner fija, por ejemplo, la parte superior derecha del lienzo y entonces se recortará por la parte inferior y por la izquierda.

Espero que os haya servido de ayuda este artículo y que podáis empezar a preparar imágenes atractivas para vuestra web.

Como curiosidad, os indico que todas las imágenes de este tutorial han sido obtenidas con FastStone Capture de forma muy sencilla…