Como diseñador gráfico o diseñador web, es posible que se le solicite entregar imágenes listas para la web, como fotos para un sitio web o anuncio publicitario. La herramienta Photoshop Save for Web es una forma fácil de preparar sus archivos JPEG para la web, ayudando con el intercambio entre el tamaño del archivo y la calidad de la imagen.
Para este tutorial, estás guardando imágenes JPEG. La herramienta Guardar para Web también está diseñada para guardar archivos GIF, PNG y BMP.
¿Qué hace que un gráfico esté listo para la web?
La mayoría de los gráficos listos para la web comparten características comunes:
- La resolución es de 72 dpi.
- El modo de color es RGB.
- Los archivos tienen un tamaño reducido para cargar páginas web más rápido.
Abrir una imagen
Para practicar con la herramienta Guardar para Web, abra una imagen en Photoshop.
Hacer clic Expediente> Abierto, busque la imagen en su computadora y haga clic en Abierto. Para propósitos de práctica, una foto funciona bien, aunque cualquier tipo de imagen servirá.
Cambia el tamaño de la foto a un tamaño pequeño que puedas usar en un sitio web. Para ello, haga clic en Imagen> Tamaño de la imagen, ingrese un nuevo ancho en el campo Ancho, y seleccionePixeles. En este caso, introduzca 400 píxeles y haga clic en DE ACUERDO.
Abra la herramienta Guardar para Web
Supongamos que alguien le pidió que entregara una foto a 400 píxeles de ancho, lista para ser publicada en un sitio web.
Hacer clic Expediente > Guardar para Web para abrir el Guardar para Web caja de diálogo. (En versiones posteriores de Photoshop, el camino es Expediente > Exportar > Guardar para Web.)
Navega por las diferentes configuraciones y herramientas en la ventana.
03 de 07Configurar la comparación
En la parte superior de la Guardar para Web ventana son una serie de pestañas etiquetadas Original, Optimizado, 2-Upy 4-Up. Al hacer clic en estas pestañas, puede cambiar entre una vista de su foto original, su foto optimizada con la configuración de Guardar para Web aplicada o una comparación de dos o cuatro versiones de su foto.
Escoger 2-Up para comparar la foto original con la optimizada mostrando copias en paralelo de la imagen.
04 de 07Establecer la vista previa original
Haga clic en la foto en el lado izquierdo para seleccionarlo. Escoger Original desde el Programar menú en el lado derecho de la Guardar para Web Ventana (si no está ya seleccionada). Esto pone una vista previa de la foto original, sin editar en el lado izquierdo.
05 de 07Establecer la vista previa optimizada
Haga clic en la foto en el lado derecho para seleccionarlo. Escoger JPEG alto desde el Programar menú. Ahora puede comparar la foto optimizada a la derecha, que será su archivo final, con la original a la izquierda.
06 de 07Editar la calidad JPEG
El ajuste más importante en la columna de la derecha es el Calidad valor. A medida que disminuye la calidad, su imagen se ve más confusa, pero el tamaño del archivo disminuye, y los archivos más pequeños significan que las páginas web se cargan más rápido.
Intenta cambiar la calidad a 0 y observe la diferencia en las fotos de la izquierda y la derecha, así como el tamaño del archivo más pequeño, que se encuentra debajo de la foto.
El objetivo es encontrar un medio feliz entre el tamaño del archivo y la calidad. Una calidad entre 40 y 60 suele ser un buen rango, dependiendo de sus necesidades. Trate de usar los niveles de calidad preestablecidos (JPEG medio, por ejemplo) para ahorrar tiempo.
07 de 07Guarda tu imagen
Una vez que esté satisfecho con la foto de la derecha, haga clic en Salvar botón. los Guardar optimizado como ventana se abre. Escriba un nombre de archivo, busque la carpeta deseada en su computadora y haga clic en Salvar. Ahora tienes una foto optimizada, lista para la web.
