07 mar

Como guardar una imagen optimizada para la Web en Photoshop CS5

Cuando tenemos una imagen en Photoshop, debemos comprender lo siguiente, existen dos tipos de dimensiones, una es el “peso” que la imagen tendrá que se mide el kb, y por otro lado el tamaño  o sea el alto y ancho que se mide en cm o pixels.

Siempre, lo primero que debemos saber es de que tamaño queremos la imagen (si es para web, la resolución ideal es 72 dpi (dot per inch, o sea punto por pulgada), y el alto y ancho, lo marcara cada uno, según lo que necesite, si es una imagen ilustrativa, y de grandes dimensiones por ej de mas de 700 p x 500 p, o mas tipo “avatar” que si bien mantendrá los 72 dpi de resolución, el tamaño puede tener apenas 60 pixel x 70 pixel.

Lo que debemos hacer, para conseguir optimizar una imagen, es ir a “Image/Imagen”, “Image size/Tamaño de imagen”, y allí aparecerá la siguiente ventana

Lo primero que vemos es Pixel Dimensions/dimensión en pixels donde podrás ver por anticipado cual es el tamaño que tendrá la imagen.

Como ven lo primero que debemos cambiar, es “Resolution/Resolución”, si es para la web 72 dpi (Pixels/inch) será suficiente.

Y el tamaño dependerá como decíamos, de lo que necesitemos (es importante dejar seleccionado Constrain Proportions, para que la imagen no se deforme, sino que mantengan las proporciones).

Y para culminar, y asegurarnos la optimización, podemos ir a “File/Archivo”, “Save for Web & devices/salvar para web)

Acto seguido, se abrirá esta ventana:

Como ven en la ventana, pueden optar por resoluciones pre seteadas (Preset:) donde permite seleccionar el formato jpg, png, gif, y diferentes resoluciones dentro de esos formatos, máxima resolución, mínima, etc, podrán cambiar también el tamaño de la imagen en Image Size (tamaño de imagen), y darle un tamaño nuevo.

Debajo de la imagen podrán ver, el formato (jpg), el peso en kb, y el tiempo estimado que puede tardar en cargar, dependiendo del tipo de conexión.

Finalmente pueden  darle clic en “Save/guardar” y tendrán lista una imagen optimizada para la web.

Esta entrada fue publicada en Blog, Photoshop y etiquetada , , . Guarda el enlace permanente.