¿Cómo escalar imágenes con Photoshop?

Cómo escalar imágenes con Photoshop

Ernesto BarrachinaDiseño Gráfico, Diseño webDeja tu comentario

¿Cómo escalar imágenes con Photoshop?
5 (100%) 3 votos

Cuando nos referimos a escalar imágenes con Photoshop estamos hablando de cambiar el tamaño o redimensionar las imágenes, aunque en este caso también bajaremos la resolución para que se ajuste a las necesidades de las páginas web.

Este es uno de los primeros pasos en el proceso de adecuación de imágenes a una web o blog.

Como redimensionar imágenes con Photoshop, además, sin tener ni idea de usar el programa, nos beneficiará a la hora de intentar posicionar nuestra web en los motores de búsqueda, nos centraremos en ese tema, aunque está claro que escalar una imagen no siempre va a ser con esa finalidad.

Photoshop para escalar imágenes

Photoshop es el programa por excelencia para editar fotos y este caso no va a ser diferente, así que te hará falta instalarlo en el ordenador para seguir el tutorial.

Si no dispones del programa aquí tienes un enlace desde el que puedes descargar Photoshop en su versión de prueba y usarlo de forma gratuita durante 30 días.

Abrir la imagen a escalar desde Photoshop

  1. Abre el programa Photoshop.
  2. En la parte superior verás una barra de herramientas y a la izquierda  está el elemento del menú superior Archivo.
  3. Si lo pulsas, aparecerá un desplegable en el que tienes que buscar Abrir. Se mostrará una ventana emergente por la que podrás navegar hasta encontrar y abrir la foto que quieres.
  4. Haz clic sobre la imagen que te interesa, y clic en Abrir.

Abrir con Photoshop para escalar imágenes

Otras dos formas rápidas de abrir una imagen en Photoshop:

  • Arrastrando el archivo desde la carpeta de imágenes hasta Photoshop.
  • Haciendo clic en el botón secundario del ratón, poniendo el puntero sobre la foto. En el menú desplegable seleccionar: Abrir con > Photoshop.

Abrir directamente para escalar imágenes

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Escalar imágenes con Photoshop

Para el ejemplo partimos de una imagen de 19.200px x 10.880px a 300ppp y un peso de 18.2 Megas.

Por supuesto, como hemos visto en el artículo sobre el optimizado de imágenes para web, es demasiado grande para utilizarla en una página web.

El trabajo de escalar imágenes con Photoshop va a tener dos fases:

  1. Bajar la resolución
  2. Disminuir el tamaño de la imagen.
No tiene mucho sentido que las imágenes de tu web sean más grandes que la pantalla. Redimensiona las imágenes de tu página web con Photoshop Cuéntalo en las redes

Bajar la resolución de la imagen

Si tu imagen tiene 72ppp puedes saltar este paso.

Una vez abierta la imagen en Photoshop, busca en la barra de herramientas superior: Imagen > Tamaño de la imagen.

Saldrá una ventana como esta que te permitirá cambiar el tamaño y la resolución de la imagen.

escalar imagen con ventana tamaño

Asegurándonos de que Remuestrear imagen está chequeado, bajamos de 300ppp a 72ppp de resolución.

En la misma ventana observaremos que los píxeles totales de la imagen se han reducido considerablemente.

Le damos a ok y para ver el resultado obtenido.

Si ves la imagen muy pequeña es porque al abrir la imagen, que es mucho más grande, Photoshop la ha adaptado al tamaño de tu pantalla automáticamente. Al reducir la resolución, y por tanto los píxeles, puede parecer muy pequeña.

Para verla a tamaño real pulsa las teclas Control + numpad 1 (el 1 del teclado numérico) en PC, o Comando + numpad 1 en Mac. También puedes hacerlo desde el menú de herramientas superior desde la ruta Vista > Píxeles reales.

En el caso del ejemplo, la imagen sigue siendo demasiado grande ¡Mide más de 4.500px!.

Para que la imagen se adapte a la pantalla pulsa las teclas Control + numpad 0 en PC, o Comando + numpad 0 en Mac. O recurre al menú superior desde la ruta Vista > Encajar en pantalla.

Bajar la resolución al escalar las imágenes

Imagen banner diseño web valencia

Construimos

Tu Marca

Si necesitas ayuda con tu proyecto de diseño gráfico no tienes más que decirlo.

Solicitar un Presupuesto!

Escalar, redimensionar o cambiar el tamaño de una imagen

Una vez tenemos la imagen a 72ppp es el momento de ajustar el tamaño. Buscamos de nuevo en el menú superior Imagen > Tamaño de la imagen.

Se abrirá de nuevo la ventana anterior.

Con Restringir proporciones chequeado cambiamos los píxeles de la imagen por los que nosotros queramos. Para nuestra web lo más recomendable es que sean 800 ó 900 px de ancho.

Como tenemos seleccionada la opción de restringir proporciones al cambiar el ancho se ajustará la medida en altura de forma automática.

Le damos a ok y habremos finalizado el proceso de escalado de la imagen.

Guardar la imagen redimensionada

Después de escalar las imágenes con Photoshop, solo nos queda guardarlas para web. Lo haremos desde la barra de herramientas superior con la ruta Archivo > Guardar para web y dispositivos.

En el panel tendremos que seleccionar en qué tipo de archivo queremos guardar la imagen.

Si tiene zonas transparentes o texto, la guardaremos en .png (sin compresión), si es una foto normal lo haremos en .jpg dándole una calidad entre el 50% y el 60%. Estaremos reduciendo el peso de la imagen, por consiguiente la estaremos optimizando para web.

Guardar tras escalar imágenes con Photoshop

Guardamos y ya tenemos el archivo almacenado con el nuevo tamaño.

Hemos partido de una imagen que pesaba 18.2 Megas y al escalar tenemos como resultado una de tan solo 90,7 KB, que se va a ver lo suficientemente bien y a cargar a mayor velocidad.

Aún así, yo las comprimo un poco más antes de subirlas a cualquier página web.

Para conseguir la compresión adecuada antes de subir las imágenes a tu web, utiliza la herramienta online Tinypng, que encontrarás en este otro tutorial.

Si después de este artículo he despertado tu curiosidad por el programa, descarga este curso gratuito de Photoshop. Te aportará otras herramientas con las que manipular imágenes destinadas a tu web.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Quieres un Diseño Web Valencia?

« Siguiente
Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.