{ Pasión por el código }

© Blog Ailon Webs

Recortar una imagen para el gestor de contenidos web

Publicado el 28/04/2020, por M. Soutto

Recortar imagen gestor contenidos web

Como recortar una imagen, puede ser una tarea fácil para quien tiene destreza con un programa editor de imágenes, pero para usuarios que no suelen usar este tipo de programas puede ser un poco lioso. Este artículo va dirigido a usuarios no expertos, y vamos a explicar como recortar una imagen para que se adapte a unas dimensiones determinadas y así poder añadirla a través del gestor de contenidos a tu web.

Recortar una imagen con forma rectangular

La finalidad de este artículo es explicar, como recortar una imagen con forma rectangular, en nuestro caso destinada a ser usada en un gestor de contenidos web para añadirla a tu web ya sea tipo tienda online, catálogo online, inmobiliaria, o tu de tu empresa a medida.

Como ya hemos indicado en nuestro artículo redimensionar o cambiar el tamaño a una imagen para un gestor de contenidos web, hay muchos programas para editar imágenes, algunos ya instalados en nuestros dispositivos. Otras opciones son las herramientas online para la edición de imágenes.

Con un ejemplo se ve más claro

Algunas veces tenemos que redimensionar y recortar la imagen, aquí te explicamos como recortarla para no complicar el aprendizaje. Una vez que comprendas el mecanismo, podrás conjuntar ambos.

Píxel (px)

Abreviaremos píxel como 'px' (píxel según la Wikipedia, 'es la menor unidad homogénea en color que forma parte de una imagen digital' y las imágenes están formadas por un conjunto de píxeles).

Supongamos una imagen que quieres usar en tu web, la llamamos 'imagen A' cuyas dimensiones son: ancho 3000px y alto 2000 px (abreviado 3000x2000 px). Y el gestor de contenidos de tu web requiere que subas una imagen con las siguientes dimensiones: ancho de 1180px y alto de 200px (abreviado 1180x200 px), que llamaremos 'imagen B'.

Debo recordar que:

  • Tengo una 'imagen A' con dimensión de 3000x2000 px
  • La recortamos y obtengo la 'imagen B' con dimensión de 1180x200 px

Vamos a proceder a recortar la imagen una vez que sabemos las dimensiones requeridas por nuestro gestor de contenidos web.

Abrimos nuestro editor de imágenes:

1. Abrimos en el programa la 'imagen A' (dimensión: 3000 x 2000 px).

2. Activamos la herramienta de para recortar (Fig. 1 -  Símbolo herramienta de recorte).

Recortar imagen gestor contenidos web
Fig.1 - Símbolo herramienta recorte

3. Investiga si tu programa ofrece la posibilidad de recortar manteniendo el aspecto original, personalizarlo, etc.. (Fig. 2: Modos de recorte). Si has activado el recorte verás una cuadrícula dividida por lineas en tercios, ver fig.3  (Recorte rectangular de una imagen). En este caso no te interesa un recorte que mantenga el ratio.

Modos de recorte según sus dimensiones
Fig.2 - Modos de recorte según sus dimensiones
Recorte rectangular de una imagen
Fig. 3 - Recorte rectangular de una imagen

4. Cambiando las dimensiones a 1180 x 200 px (tal como se ve en la fig.4, selecciona el  recorte). Vemos como el área de recorte cambia y muestra un área más pequeña con la cuadrícula de tercios. Esa área es la que necesitamos para tener nuestra imagen B, ahora podemos moverla dentro del área de la imagen A para obtener la imagen que con el fondo adecuado.

Recorte de una imagen
Fig. 4 - Selección área de recorte de una imagen

5. Haz clic en 'cambiar tamaño' (o botón similar), a veces basta con pulsa tecla 'enter' (retorno de carro) y obtendrás la imagen recortada (Fig.5 - Imagen  recortada).

Imagen recortadan
Fig. 5 - Imagen recortada

Consejos

  • Seleccionar las unidades adecuadas, en nuestro caso 'px'
  • A la ahora de aplicar el recorte, asegúrate cambiar el ancho y alto por separado. Haz clic en el icono de candado (para desbloquear) normalmente situado entre los cuadros de ancho y alto.

Categorías: Diseño de páginas web, Gestor de contenidos web

Etiquetas: gestor de contenidos web, tienda online