Cómo guardar imágenes para la Web en Photoshop

click fraud protection

Una de las funciones más importantes que ofrece Photoshop es la Guardar para Web/Dispositivos característica.

¿Por qué usarlo? Si bien podría simplemente guardar su archivo en un método estándar, como Archivo / Guardar como, la función Guardar para Web/Dispositivos hace tres cosas cruciales.

  • Optimiza las dimensiones del archivo (por ejemplo: 150 px X 150 px) permitiéndole encajar en páginas web más limpias y verse mejor y menos distorsionadas.
  • Optimiza el tamaño del archivo (por ejemplo: 23 kb) permitiendo que se descargue más rápido.
  • Guarda en el formato RGB (o monitor) a diferencia del formato CMYK (impresión).

Esta herramienta funciona muy bien para generar íconos de Twitter, fotos de perfil de Facebook, archivos de productos, imágenes de blogs y archivos fuente para favicons.

Abra su archivo fuente

ArchivoAbrir Photoshop
Archivo/Abrir Photoshop.Captura de pantalla de Bryan Haines

Para comenzar, deberá ir a Archivo/Abrir para abrir su archivo. Puede estar en cualquier formato: jpg, gif, psd, png u otros. Siempre que Photoshop pueda abrirlo, puede enviarlo a la web.

Guardar su archivo para la Web

Archivo Guardar Photoshop CS5
Archivo Guardar Photoshop CS5.Captura de pantalla de Bryan Haines

Vamos a pasar directamente a guardar para la Web, suponiendo que haya realizado los ajustes necesarios. Obviamente, si necesita editar la imagen, hágalo primero y continúe con este paso más tarde.

Ir a Archivo/Guardar para Web/Dispositivos y haga clic Está aproximadamente a la mitad del menú desplegable.

Este proceso no cambia su archivo original en absoluto. Estás creando un nuevo archivo. Una vez que complete este tutorial y regrese a su imagen original en Photoshop, deberá guardar ese archivo si le ha realizado algún cambio. Es importante nombrar su nueva imagen diferente a la original. A menudo simplemente agregando _web al nombre del archivo funcionará bien. (ejemplo: nombre_archivo_web.jpg)

Ajustar la vista de comparación a 2-Up

Comparación lado a lado Photoshop CS5
Comparación lado a lado Photoshop CS5.Captura de pantalla de Bryan Haines

Dependiendo de su configuración, es posible que deba ajustar la vista aquí. Lo que quieres es una comparación izquierda y derecha de tu imagen. El lado izquierdo mostrará el original, el derecho mostrará la calidad de imagen en la configuración actual.

Si observa la parte superior de la ventana, verá las siguientes opciones: Original, Optimizado, 2 en 1, 4 en 1. Para la mayoría de los propósitos, 2-Up es lo que querrá.

Establezca su tamaño de visualización al 100%

Ajustando la vista al 100% en Photoshop CS5
Ajuste de vista al 100% en Photoshop CS5.Captura de pantalla de Bryan Haines

Para asegurarse de que está viendo al 100%, marque la opción en la esquina inferior izquierda de la pantalla.

Es importante recordar que si ve su imagen por encima del 100%, se verá granulada o posiblemente incluso indescifrable. Trabajar siempre con la imagen al 100%.

Elija las dimensiones del archivo

Elegir las dimensiones del archivo en Photoshop CS5
Elección de las dimensiones del archivo en Photoshop CS5.Captura de pantalla de Bryan Haines

Las dimensiones para la web casi siempre están en píxeles (px). Es importante mantener las proporciones correctas. Al lado del cuadro de imagen hay una pequeña imagen de un eslabón de cadena. Lo que hace es escalar el ancho cuando ajustas la altura. Por ejemplo, una imagen de 600 px por 400 px. Si reduce el ancho a 300 px, el archivo se escalará automáticamente a una altura de 200 px. Si no está marcada, la imagen se distorsionará.

También tienes la opción de escalar la imagen por porcentajes.

Elija el tipo de archivo para exportar

Elegir el tipo de archivo para exportar en Photoshop CS5
Elegir el tipo de archivo para exportar en Photoshop CS5.Captura de pantalla de Bryan Haines

En esta opción no importa el tipo de archivo original. Puedes elegir el archivo que necesites.

Nota: Para comenzar el proceso, deberá hacer clic en la imagen de la derecha. La imagen necesita ser seleccionada para ser procesada.

El más común es jpg para la web: es el formato de archivo más pequeño, lo que significa que se descarga más rápido para los visitantes de su sitio. Si tiene transparencia, elija png-24. Si no sabe qué significa transparencia, debe elegir jpg.

Elija la calidad de la imagen

Elija la calidad de imagen en Photoshop CS5
Elija Calidad de imagen en Photoshop CS5.Captura de pantalla de Bryan Haines

Cada una de las tres opciones de jpg (Alto, Medio, Bajo) tiene configuraciones de calidad preestablecidas, que se pueden ajustar manualmente. Si está viendo al 100%, puede decidir qué calidad necesita. Para ajustar el nivel de zoom, consulte el Paso 5. La imagen se verá igual en línea que en la ventana de vista previa.

Si elige algo que no sea jpg, puede omitir este paso.

Guarde su archivo

Guarde su archivo en Photoshop CS5
Guarde su archivo en Photoshop CS5.Captura de pantalla de Bryan Haines

Una vez que haya realizado los ajustes necesarios, estará listo para guardar el archivo. Haga clic en "Guardar" y elija la carpeta y el nombre de archivo que desea para esta nueva imagen.

¡Felicidades! Su nuevo archivo está listo para usarse en línea.

Explicación del código de especialidad de la Fuerza Aérea

En el Ejército y la Infantería de Marina, un trabajo alistado se llama MOS o especialidad ocupacional militar. En la Marina y la Guardia Costera, un trabajo alistado se llama calificación. Pero en la Fuerza Aérea, un trabajo se denomina Código d...

Lee mas

Salario medio de desarrollador de software de sistemas

Los desarrolladores de software de sistemas se encuentran entre los especialistas técnicos mejor pagados en la actualidad, generalmente con más educación que cualquier otro trabajador de TI. Los desarrolladores de software de sistemas crean o mod...

Lee mas

Descripción del puesto de Yeoman de la Guardia Costera: salario, habilidades y más

Los yomen, conocidos familiarmente como YN, son componentes vitales del funcionamiento diario de la Guardia Costera. Trabajan directamente con el personal en la resolución de problemas, asesoramiento y respuesta a preguntas relacionadas con cambi...

Lee mas