• English
  • Youtube
  • Facebook
  • Twitter
  • Linkedin
  • Instagram
  • tiktok

Preguntas frecuentes (FAQ)

Operaciones con el gestor

¿Cómo puedo redimensionar las imágenes para ajustarlas a los espacios establecidos?

4 abr 2022 - 16:39 CET

Podemos cambiar el tamaño o la relación de aspecto (proporción entre ancho y alto) de las imágenes para que se ajusten a los espacios establecidos en la Web UCM.

Se requieren los siguientes tamaños (o proporciones) para los distintos espacios de nuestra web:

 

Portada plantilla noticias

  • Imagen carrusel: 798px × 399px
  • Imágenes laterales: 331px × 200px

  Ilustración1

Portada Noticias UCM

 

Portada fotos fijas: 1140px × 400px

 

  Ilustración 2

Portada foto fija Departamento.

 

Widget Noticias y Avisos

El ancho requerido de las imágenes en modo carrusel depende de dónde se sitúe el widget (la altura siempre será 280px.).

Plantillas y anchos disponibles

Según la plantilla seleccionada, podemos encontrar los siguientes anchos disponibles:

 

Ancho 100%
Ancho plantilla área única: 1140px

 

Anchos 50%
Ancho plantilla dos columnas (50%): 555px

 

Anchos 30%-70
Ancho plantilla dos columnas (30% 70%):
Columna 30%:360px - Columna 70%:750px

Anchos 33%
Ancho plantilla tres columnas (33%): 360px

 

Anchos 25%
Ancho plantilla cuatro columnas (25%): 263px

 

 

Ejemplo widget "Noticias y Avisos" como carrusel principal biblioteca: 750px × 280px (plantilla "Dos columnas 70%-30%")

  Ilustración 3

Carrusel principal biblioteca: 750 ×  280

 

 

PHOTOSHOP CS4

PROCEDIMIENTO 1 (Recortar)

  • Abrimos la imagen con Photoshop.
  • Seleccionamos la herramienta "Marco rectangular".

 Ilustración 5

Herramienta marco rectangular

  • Clicamos sobre el desplegable "Estilo" y elegimos "Proporción fija"

 Ilustración 6

Estilo: proporción fija

  • Escribimos los nuevos valores[1] en los cuadros Anchura y Altura de la barra de opciones. La figura superior muestra 750 × 280.
  • Arrastre el cursor sobre la imagen para seleccionar un área (rectángulo con línea discontinua).

 Ilustración 7

Selección rectangular

  • Clique sobre el área rectangular con el botón izquierdo y mueva el área de selección a la zona deseada.

 Ilustración 8

Ajuste de selección

  • En el menú "Imagen" clicamos sobre "Recortar"

 Ilustración 9

Menú imagen. Opción recortar

  • La imagen se recortará según el área seleccionada.

 Ilustración 10

Resultado final. Imagen recortada según proporciones 750 × 280

  • Guarde la imagen (Archivo > Guardar como...) con el formato y calidad deseada.

 

PROCEDIMIENTO 2 (Ampliación del lienzo)

Añade espacio al lienzo del documento. Partimos de una imagen vertical de tamaño 400 × 300 que deseamos adaptar a un espacio de 750 × 280.

  • Abrimos la imagen con Photoshop.
  • En el menú "Imagen" clicamos en "Tamaño del lienzo..."

 Ilustración 11

Menú "Imagen". Opción "Tamaño de lienzo"

  • En la ventana emergente mantenemos la altura en 300px y cambiamos el ancho con el valor resultado de una regla de tres simple directa:

 Ecuación

  Ilustración 12

Ventana emergente "Tamaño de lienzo"

Seleccionamos el color de fondo y pulsamos "OK".

  • Esto nos dará un archivo con nuestra imagen en el centro y los laterales del color de fondo seleccionado.

 Ilustración 13

Resultado final (803 × 300). Lienzo ampliado siguiendo proporciones 750 × 280

  • Guarde la imagen (Archivo > Guardar como...) con el formato y calidad deseada.

  

PROCEDIMIENTO 3 (Cambiar proporción de imagen)

 Adobe Photoshop CS4 incorpora una nueva función que nos va a permitir, de forma casi mágica, cambiar la relación de aspecto de muchas de nuestras imágenes.

  • Abrimos la imagen con Photoshop.
  • Doble clic sobre la capa para que deje de ser fondo y se convierta en Capa 0.

 Ilustración 14

Capa fondo inicial

  Ilustración 15

Menú emergente "Nueva Capa"

 

 Ilustración 16

Capa 0 final

 

  •  Ampliamos el lienzo según la técnica anterior. Esto nos dará un archivo con nuestra imagen en el centro y los laterales transparentes.

 Ilustración 17

Imagen en el centro con los laterales transparentes

  • Clicamos en el menú "Edición" y seleccionamos "Escala según contenido".

 Ilustración 18

Menú edición. Escala según contenido.

  • Van a aparecer unos manejadores, tirando de los centrales laterales la imagen se estirará horizontalmente con un resultado parecido a este.

 Ilustración 19

Resultado final (803×300)

Como se puede ver la canasta y el balón no se han deformado.

Photoshop ha buscado las zonas en las que la deformación se notará menos y sólo modifica esas partes.

  • Guarde la imagen (Archivo > Guardar como...) con el formato y calidad deseada.

  

PAINT.NET

PROCEDIMIENTO 1 (Recortar)

  • Abrimos la imagen con Paint.net.
  • Seleccionamos la herramienta "Rectángulo".

 Ilustración 20

Herramienta " Seleccionar un rectángulo".

  • Clicamos sobre el desplegable "Normal" y elegimos "Proporción"

 Ilustración 21

Herramienta "Proporción"

  • Especificamos los nuevos valores en los cuadros Anchura y Altura de la barra de opciones. La figura muestra 750 × 280.

 Ilustración 22

Anchura y Altura de la proporción

  • Arrastre el cursor sobre la imagen para seleccionar un área (rectángulo con línea discontinua). Para una correcta selección evite seleccionar los bordes de la imagen (de esta manera se mantienen las proporciones deseadas).

 Selección rectangular

Selección rectangular

  • Clicamos sobre  Mover la selección (moveremos la selección pero sin modificar la imagen). Después clique sobre el área rectangular con el botón izquierdo y mueva el área de selección a la zona deseada.

 Ilustración 24

Ajuste de selección

  • En el menú "Imagen" clicamos sobre "Recortar según la selección"

 Ilustración 25

Menú Imagen. Opción "Recortar según la selección"

  • La imagen se recortará según el área seleccionada.

 Ilustración 26

Resultado final. Imagen recortada según proporciones 750 × 280.

  • Guarde la imagen (Archivo > Guardar como...) con el formato y calidad deseada.

  

PROCEDIMIENTO 2 (Ampliación del lienzo)

Añade espacio al lienzo del documento. Partimos de una imagen vertical de tamaño 400 × 300 que deseamos adaptar a un espacio de 750 × 280.

  • Abrimos la imagen con Paint.net.
  • En el menú "Imagen" clicamos en "Tamaño del lienzo..."

 Ilustración 27

Menú "Imagen". Opción "Tamaño de lienzo"

  • En la ventana emergente mantemos la altura en 300px y cambiamos el ancho con el valor resultado de una regla de tres simple directa:

 Ecuación

 

 Ilustración 28

Ventana emergente "Tamaño de lienzo"

En el desplegable "Ancla" seleccionamos Centro y pulsamos "Aceptar".

  •  Esto nos dará un archivo con nuestra imagen en el centro y los laterales del color de fondo seleccionado.

 Ilustración 29

Resultado final (803 × 300). Lienzo ampliado siguiendo proporciones 750 ×  280

  • Guarde la imagen (Archivo > Guardar como...) con el formato y calidad deseada.


[1] Los cuadros "Anchura y Altura" no admiten valores superiores a "999". Podemos dividir los dos valores por un mismo número (por ejemplo, dividir por 10) e introducir esos nuevos valores (la proporción, que es lo que nos interesa, se mantiene).