¿Cómo escalar imágenes con Photoshop?

Escalar imágenes con Photoshop

Cuando nos referimos a escalar imágenes estamos hablando de cambiar su tamaño, aunque en este caso también bajaremos la resolución. Tendremos que variarlos en función de su destino porque todo proyecto gráfico o web va a requerir de algún tipo de ajuste a la hora de adecuar sus imágenes.

Este es uno de los primeros pasos a dar durante el proceso de adecuación de imágenes a una web.

Escalar imágenes con Photoshop y además sin tener ni idea de usar el programa, nos va a beneficiar en gran medida a la hora de intentar posicionar nuestra página en los motores de búsqueda. 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, para escalar te va a hacer falta tenerlo instalado en tu ordenador.

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

Abrir la imagen a escalar con Photoshop

Abre Photoshop.

En la parte superior verás una barra de herramientas. A la izquierda está el elemento de menú Archivo.

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.

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 a 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 y como hemos visto en el artículo sobre el optimizado de imágenes, es demasiado grande para utilizarla en una web.

El proceso de escalado de imágenes va a tener dos fases: bajar la resolución y disminuir el tamaño de la imagen.

Bajar la resolución de la imagen

Si tu imagen no tiene más de 72ppp puedes saltar al siguiente paso.

Una vez la imagen abierta 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 esa imagen.

escalar imagen con ventana tamaño

Teniendo remuestrear imagen chequeado, bajamos los 300ppp a 72ppp.

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

Le damos a ok y veremos el resultado obtenido.

Al abrir la imagen que es mucho más grande, Photoshop la ha adaptado al tamaño de tu pantalla de forma automática. 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. Para encajarla en la pantalla pulsa las teclas Control + numpad 0 en PC, o Comando + numpad 0 en Mac.

Igual que antes puedes recurrir 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!

Cambiar el tamaño (escalar) 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 de 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 900px 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 escalada

Después del proceso de escalar imágenes solo nos queda guardar 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 la guardaremos en .png, 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 que necesitábamos escalar guardado.

Hemos partido de una imagen que pesaba 18.2 Megas y al escalar tenemos como resultado una imagen de tan solo 90,7 KB, que se va a ver lo suficientemente bien y va a cargar a muy buena velocidad. Ya puedes subir esa imagen a tu página web.

Si después de este artículo Photoshop ha despertado tu curiosidad puedes descargar un curso gratuito que te iniciará en el programa y te aportará las herramientas para el optimizado de imágenes de tu web.

Si después de todo esto te ha quedado alguna duda dispones de un formulario de comentarios un poco más abajo. Tu pregunta puede solucionar las dudas de otros.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

¿Quieres ver mi biografía?

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.

¿Lo hacemos?

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.