Una de las funciones más importantes que Photoshop ofrece es la función Guardar para Web / Dispositivos .
¿Por qué usarlo? Si bien puede guardar su archivo en un método estándar, como Archivo / Guardar como , la función Guardar para Web / Dispositivos tiene tres cosas cruciales.
- Optimiza las dimensiones del archivo (por ejemplo: 150 px X 150 px) lo que permite que se ajuste a las páginas web más limpias y se vea mejor y menos distorsionado.
- Optimiza el tamaño del archivo (por ejemplo: 23 kb) lo que permite que se descargue más rápido.
- Se guarda en formato RGB (o monitor) en oposición al formato CMYK (impresión).
Esta herramienta funciona muy bien para generar iconos de Twitter, fotos de perfil de Facebook, archivos de producto, imágenes de blog y archivos de origen para favicons.
01 - Abra su archivo de origen
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 generarlo para la web.
02 - Guardar su archivo para la Web
Vamos a saltarnos para guardar para la Web, suponiendo que ha realizado los ajustes que necesita. Obviamente, si necesita editar la imagen, hágalo primero y continúe con este paso más adelante.
Vaya a Archivo / Guardar para Web / Dispositivos y haga clic. Está a mitad de camino del menú desplegable.
Este proceso no cambia su archivo original en absoluto. Usted está creando un nuevo archivo. Una vez que complete este tutorial y regrese a su imagen original en Photoshop, deberá guardar ese archivo si ha realizado algún cambio en él. Es importante nombrar su nueva imagen diferente a la original. A menudo, simplemente agregar _web al nombre del archivo funcionará bien. (ejemplo: filename_web.jpg)
03 - Ajustar la vista de comparación a 2-Up
Dependiendo de su configuración, es posible que deba ajustar la vista aquí. Lo que quiere es una comparación izquierda y derecha de su imagen. El lado izquierdo mostrará el original, el derecho mostrará la calidad de imagen en la configuración actual.
Si mira a lo largo de la parte superior de la ventana, verá las siguientes opciones: Original, Optimizado, 2 arriba, 4 arriba. Para la mayoría de los propósitos, 2-Up es lo que querrás.
04 - Configure su tamaño de visualización al 100%
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 visualiza su imagen a más del 100% se verá granulada o posiblemente indescifrable. Siempre trabaje con la imagen al 100%.
05 - Elija las dimensiones del archivo
Las dimensiones de 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 ajusta la altura. Por ejemplo, una imagen que es de 600px por 400px. Si reduces el ancho a 300px, el archivo escalará automáticamente a una altura de 200px. Si no está seleccionado, la imagen se distorsionará.
También tiene la opción de escalar la imagen por porcentajes.
06 - Elija el tipo de archivo para exportar
En esta opción, el tipo de archivo original no importa. Puedes elegir el archivo que necesites.
Nota: para comenzar el proceso, deberá hacer clic en la imagen de la derecha. La imagen debe 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 descarga más rápido para los visitantes de su sitio. Si tiene transparencia, elija png-24. Si no sabes qué significa transparencia, debes elegir jpg.
07 - Elegir calidad de imagen
Cada una de las tres opciones de jpg (alta, media, baja) tiene configuraciones de calidad preestablecidas, que pueden ajustarse 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.
08 - Guarde su archivo
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.
¡Felicitaciones! Su nuevo archivo está listo para ser utilizado en línea.