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
- Abre el programa Photoshop.
- En la parte superior verás una barra de herramientas y a la izquierda está el elemento del menú superior 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.
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.
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:
- Bajar la resolución
- Disminuir el tamaño de la imagen.
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.
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.
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.
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.
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.
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
About the Author
