Preparando una imagen y dimensionándola para la web. Guardar para módulo web. Funciones para guardar imágenes para Internet.

En esta lección verá cómo guardar imágenes desde un archivo PSD para la Web.

Por ejemplo, desea cambiar este eslogan azul y el nombre escrito en grandes letras negras.

Como puede ver, este texto no se puede seleccionar y, por lo tanto, no se puede cambiar en el archivo HTML. Estas dos frases son imágenes. Editémoslos.

1. Abra el archivo PSD

Tenga en cuenta que para procesar texto en un archivo PSD, debe instalar las fuentes necesarias, que se enumeran en el archivo fonts_info.txt.

Lo mismo debería hacerse con el eslogan. Está cubierto por otros fragmentos. Muévalo también hacia el frente.

3.Ahora debes mantener presionada la tecla "Shift" y seleccionar todos los fragmentos que deseas guardar.

4.B menú superior ir a Archivo > Guardar para Web y dispositivos(archivo > guardar para Web y dispositivos)

5.Seleccione la herramienta de selección de sectores y nuevamente, mientras mantiene presionada la tecla "Shift", seleccione los fragmentos. Haga clic en el botón Guardar

Tenga en cuenta que las imágenes deben guardarse en la carpeta Sitio y no en Imágenes. Asegúrate de tener la misma configuración nuevamente:

• — Guardar como tipo: solo imágenes
• — Configuración/Configuración: Configuración predeterminada/Configuración estándar
• — Sectores/Fragmentos: Sectores seleccionados/Seleccionar fragmentos (¡Importante!)

6. Verá los archivos que serán reemplazados. Haga clic en el botón "Reemplazar"

7. Actualice la página y verifique la imagen que acaba de cambiar.

Mire el video instructivo detallado a continuación.

La mayoría de los usuarios novatos no pueden preparar una foto para publicarla en Internet. Intentan "empujar" una foto enorme en su sitio y luego se preguntan por qué la página del sitio tarda tanto en cargarse o por qué las proporciones de la foto están distorsionadas.

Al preparar una fotografía para Internet, es necesario reducir el tamaño del archivo tanto como sea posible para que los visitantes no abandonen el sitio antes de la descarga final de la fotografía y, al mismo tiempo, para que la calidad de la imagen no disminuya. sufren mucho durante la compresión.

Entonces, primero decidimos qué tamaño tendrá nuestra foto.

Miremos el tamaño original. Es decir, en el menú. Imagen, seleccione el elemento Tamaño de imagen.

Se abre la ventana Tamaño de imagen


Como puede ver, el tamaño de la foto de muestra que proporcioné es demasiado grande; el tamaño del archivo tampoco será pequeño. Desde el más común en este momento La resolución de la pantalla es de 1024x768 píxeles, por lo que no deberías tomar una foto más grande que este tamaño.

En lugar de 2048 (lo más probable es que tenga otros números allí), ingrese 1024 en el cuadro "ancho" y el número 768 aparecerá automáticamente en el cuadro "Alto" (porque hay una marca de verificación delante de la frase Mantener proporciones).

Haga clic en el botón "Aceptar" - ¡ahora su foto tiene el tamaño deseado!
Por cierto, si en la primera lección recortaste la foto al tamaño deseado, puedes saltarte este párrafo.

Nota: Si el tamaño de la imagen original es inferior a 1024x768, no debe ampliarla. Por supuesto, se estirará hasta alcanzar el tamaño requerido, pero la calidad de la imagen se deteriorará. Por lo tanto, si la foto no cubre toda la pantalla, déjela complacer la vista con belleza y no con tamaño. Después de todo, Lenin también dijo sobre esto: “¡Menos es mejor!”

Hemos decidido las dimensiones, pasemos directamente a guardar.

Guardar una foto para Internet

En el menú Archivo, seleccione Guardar para Web.

Se abre un cuadro de diálogo Guardar para Web


Como puedes ver, aparecen 2 imágenes para comparar la calidad de la imagen: la original y la imagen que se obtendrá con los parámetros que establezcas.

Quizás te preguntes: ¿qué parámetros configurar?

Primero, en el cuadro 2, seleccione el formato GIF o JPEG.

El formato GIF no admite más de 256 colores y solo es adecuado para guardar imágenes y dibujos (las figuras 6 a 8 de esta página están guardadas en formato GIF compatible con 64 colores, por lo que pesan entre 7 y 11 kb; una pequeña cosa, pero ¡lindo!)

Ciertamente, hermosa foto No puedes guardarlo en este formato, por eso elegimos el formato JPEG.

En la ventana 3, seleccione la calidad de la foto: baja, media, alta, máxima. Dices: ¿por supuesto el máximo?

Sí, si estuviéramos hablando de guardar en un disco duro, entonces sería así. ¡Pero vas a publicar estas fotografías en Internet para que las descarguen los admiradores de tu talento! ¿Y a quién le gusta esperar mucho tiempo para que se abra una página? Así es, ¡nadie!

La foto presentada está guardada en calidad media y pesa 36 kb. En alta calidad pesaría unos 100 kb y, como máximo, ¡200! En general, no veo mucha diferencia entre el promedio y alta calidad No lo veo, pero veo una gran diferencia en el tamaño del archivo resultante.

Y puedes experimentar. Al cambiar los valores, verás cómo la calidad de la imagen correcta cambia ante tus ojos. Además, debajo de la imagen de la derecha verás cómo cambia el tamaño K (en kilobytes) de la imagen, dependiendo de la calidad.

Finalmente, cuando la elección tamaño imágenes, formato Y calidad terminado, presione el botón Ahorrar(Ahorrar). Como de costumbre, deberá nombrar el archivo (ya que está preparando el archivo para Internet, escríbalo inmediatamente en letras latinas) y determine la carpeta para guardar. Cuando hayas hecho esto, presiona el botón nuevamente. Ahorrar.

Si un Photoshop muy competente te advierte que "algunos nombres de archivos son incompatibles con algunos navegadores web", diga que sabe todo sin él y haga clic en Aceptar.

Eso es todo, ¡la foto está lista!

¡Atención! Hasta que termines de trabajar en la foto, guárdala en el formato PSD "nativo" de Photoshop. Porque la recompresión repetida en formatos GIF y JPEG produce una pérdida permanente de calidad.

Has creado tu pequeña obra maestra en Photoshop y quieres mostrársela a tus amigos. Para hacer esto, debe guardarlo para publicarlo en Internet.
En el menú Archivo, seleccione Guardar para Web y dispositivos. Se abre un cuadro de diálogo grande, diseñado para optimizar las imágenes guardadas, es decir, para encontrar la relación óptima entre la calidad de la imagen y el tamaño del archivo resultante.

· 1. Barra de herramientas.

· 2. Opciones de visualización

· 3. Área de comentarios

· 4. Escala

· 5.Información de color

· 6. Ver en el navegador

· 7. Paleta de optimización

· 8. Metadatos

· 9. Carta de colores

· 10. Tamaño de la imagen

· 11. Controles de animación

· 12. Botones para confirmar la cancelación de la operación

· 13. Área de vista previa

Área de vista previa

Si cree que la imagen es demasiado grande para colocarla en una página web, abra la pestaña "Tamaño de imagen" (número 10 en la descripción del cuadro de diálogo) y reduzca su ancho y alto.

Configuración y optimización para formato GIF.

 1. Menú "Optimizar"

 2. Menú "Formato de archivo"

 3. Algoritmo de reducción de color

 4. Algoritmo de tramado

Nota:Guardar imágenes utilizando el cuadro de diálogo "Guardar para Web y dispositivos" (a menudo llamado "exportar") implica crear una copia "más ligera" y algo "degradada", destinada específicamente a publicarse en la Web. ¡Nunca guardes una copia optimizada sobre la imagen original!

Adobe ha realizado algunos cambios menores en una característica popular y muy querida. Guardar para la web en Photoshop CC 2015. Esta función se utiliza para muchas tareas, desde preparar recursos para publicarlos en un sitio web hasta optimizar fotografías. resolución alta para crear GIF animados. Debido a que el comando Guardar para Web se basa en un producto ImageReady lanzado anteriormente (final de su vida útil), su código está técnicamente demasiado desactualizado para un mantenimiento continuo y el desarrollo de nuevos elementos.

¿Se ha eliminado el comando Guardar para Web de Photoshop CC 2015?

Utilizo el comando Guardar para Web todos los días. ¿Mi flujo de trabajo se verá ralentizado por los cambios en el sistema de menús?

Puede omitir este menú por completo utilizando el método abreviado de teclado existente:

(ventanas) Ctrl + Alt + Mayús + S
(Impermeable) Cmd + Opción + Mayús + S

Puede personalizar los atajos de teclado si es necesario. Para hacer esto, seleccione Editar > Atajos de teclado.

¿Se ha eliminado alguna característica del comando Guardar para Web?

¿La marca "Obsoleto" significa que el comando Guardar para Web se eliminará en el futuro?

Tal vez. Sin embargo, tenga la seguridad de que Adobe no eliminará el comando Guardar para Web sin proporcionar la funcionalidad correspondiente en un formato de flujo de trabajo nuevo y mejorado. Por ejemplo, sabemos que muchos usuarios requieren funciones como ver 2 arriba, tamaño del archivo de destino, conversión sRGB, opciones de metadatos y GIF animados. El comando Guardar para Web no se eliminará sin proporcionar la funcionalidad adecuada en un formato de flujo de trabajo nuevo y mejorado.

Para muchos webmasters optimización de imágenes para el entorno WEB es procesar imágenes y guardarlas en diferentes formatos: gif (1-256 colores), png-8 (1-256 colores), png, jpeg. Después de optimizar las imágenes, su peso debe ser mínimo. Normalmente, la página de un sitio web que incluye imágenes no debe tener más de 600 KB. El tamaño de las imágenes depende directamente de su calidad. Cuanto menor sea el peso de la imagen, peor será su calidad y viceversa. Si la imagen contiene 2-3 colores, se puede guardar en los siguientes formatos: gif, png-8. Si el sitio contiene muchas imágenes no optimizadas, entonces carga pesada al servidor y un usuario con una conexión lenta a Internet puede no esperar a que se cargue la página. En tales casos, el usuario accede a otro sitio con páginas "ligeras". Uno de los principales objetivos de cualquier webmaster es mantener a los visitantes en su sitio.

Puede ajustar la calidad de la imagen y la cantidad de colores. Cuantos menos colores, menor será el peso de la imagen. Pero no te dejes llevar. Las fotos no deben guardarse en formatos gif y png-8. Para ellos, son adecuados jpeg con algoritmos de compresión y png-24 con soporte para áreas transparentes. Guardemos la imagen para el entorno web. En la barra de menú, seleccione " Guardar para WEB y dispositivos" o "guardar para web".

Seleccione "jpeg" de la lista desplegable. Marquemos la casilla junto al modo "Progresivo". En el campo calidad, establezca el valor en 80%. Este tipo de optimización es bueno para los sitios web. Los algoritmos de compresión JPEG estropean la calidad de la imagen., pero son los que permiten reducir el peso de la imagen. Al optimizar, observe detenidamente cómo se verá su imagen con los algoritmos de compresión. Para hacer esto, busque la pestaña "2 opciones" en la ventana. Si la imagen no contiene fotografías, entonces se puede guardar en diferentes formatos y las opciones resultantes se pueden comparar entre sí en términos de calidad y peso.

Tendrás que buscar aquí. media dorada entre la calidad y el peso de la imagen. Los formatos GIF, png-8, png-24 le permiten utilizar transparencia. El formato jpeg no admite transparencia. Si está intentando guardar una imagen con transparencia en formato jpeg, Photoshop guardará automáticamente la imagen con un fondo blanco. Aparecerá un campo blanco en el lugar donde planificó el área transparente. Todas las imágenes que planee subir al sitio deben tener una resolución de 72 ppp. Esta es exactamente la resolución que deberían tener las imágenes.