Preparación básica de imágenes para tienda online

Cualquier tienda online siempre tiene unas cuantas imágenes de publicidad en la portada de su tienda, vamos a ver como configurar las imágenes para que tengan la resolución adecuada para que queden bien en la configuración instalada por defecto en yatienda. Lo primero es descargarnos un programa de edición de imágenes, en este tutorial vamos a utilizar Gimp. Para descargarlo, si tenemos windows, podemos ir a: http://gimp.uptodown.com/ hacemos click en descargar y lo instalamos en nuestro ordenador. Si tenemos linux, podemos instalarlo desde el market de aplicaciones de nuestra distribución. Una vez instalado, empezamos…

Una vez abierto el programa nos vamos a “archivo->abrir” y seleccionamos la imagen que queremos colocar en nuestra tienda:

Abrir archivo

Hacemos click en Archivo->abrir

Antes de seguir, os pongo aquí una imagen con las resoluciones recomendadas para la tienda online que instala yatienda por defecto:

Resoluciones de imágenes de tienda online

Resoluciones de imágenes por defecto

Podemos apreciar como en la parte de arriba el banner de publicidad tiene que tener una resolución de 1170 x 65 y más abajo tenemos el slider de imágenes con una resolución de 779 x 448 y dos imágenes más a la derecha de 381 x 219 cada una. Si quisiéramos quitar las dos imágenes de la derecha y dejar solamente el slider, el slider tendría que tener una resolución de 1170 de ancho para ocupar todo el ancho de la portada de la tienda, aquí os dejo un enlace donde se explica como hacerlo: Como poner slider en grande en nuestra tienda

Seguimos con Gimp, al abrir la imagen, nos aparecerá la imagen y en la parte de arriba encima de la barra de menús nos aparece la resolución de la imagen:

Información resolución de imagen

Resolución-imagen

Vemos como la imagen tiene una resolución de 1280×717 y nosotros necesitamos una resolución de 779×448 para colocarla en el slider de nuestra tienda, para ello os mostramos aquí dos formas de hacerlo, estos métodos son válidos si la imagen es más grande de la resolución de 779×448 si es más pequeña la imagen aparecerá pixelada y con mala calidad:

1-Escalar la imagen, nos vamos en la barra de menús y hacemos click en “imagen->escalar la imagen”  y nos aparecerá una pantalla como la siguiente:

Escalar imagen con Gimp

Escalar imagen

En Anchura ponemos 779, el programa automáticamente nos pondrá la resolución para la altura para que la imagen no se deforme. Si al poner 779 la altura es inferior a 448, es mejor que dejemos la anchura como está y pongamos en altura 448(siempre podemos hacer click en cancelar y volver a elegir “imagen->escalar la imagen” para volver a empezar). Después hacemos click en “Escala” y ya tenemos nuestra imagen escalada. Ahora la resolución es de 779×519, para pasar a tener una resolución de 779×448 podemos utilizar el siguiente método que vamos a explicar:

2-Recortar imagen: Para recortar imagen hacemos click en la ventana de herramientas de Gimp en la herramienta de arriba a la izquierda (herramienta selección rectángulo) tal como se muestra en la imagen:

Elegimos la herramienta selección

Herramienta selección

Hacemos click con el ratón en la imagen y arrastramos para crear el rectángulo de selección, en la parte de abajo de la ventana, nos aparecerá la dimensión del rectángulo, si pinchamos y arrastramos en las zonas resaltadas en amarillo en la imagen, podremos agrandar o reducir el tamaño del rectángulo de selección solamente en ese lado y eje, mientras que si lo hacemos en las esquinas lo haremos en ese lado pero en ambos ejes:

Seleccionando para recortar imagen

Con la herramienta de selección seleccionamos la parte de la imagen que queremos

Una vez que tengamos un tamaño de 779×448, hacemos click en la fila de menús en “Editar->Copiar” y posteriormente en “Editar->Pegar como->Imagen nueva” y nos aparecerá una ventana con la nueva dimensión de la imagen. Para guardar la imagen nos vamos a “Archivo->Exportar como” y ponemos un nombre para nuestra imagen acabado en .jpg para que la imagen se guarde en ese formato, elegimos la carpeta donde queremos guardar la imagen y ya está.

Ya tenemos nuestra imagen, ahora solo queda subirla a nuestra tienda, nos vamos al panel de control de la tienda y subimos la imagen que nos quedará así:

Imagen colocada en tienda online

Imagenes de publicidad tienda una vez subida la imagen

Y con esto terminamos esta entrada de nuestro blog, esperamos que os sea útil.

 

Posted in Cursos and tagged , , , , .

Deja un comentario

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

3 + 3 =