Cómo guardar correctamente para la web en Photoshop. Cómo guardar correctamente una imagen para la Web en Photoshop. Las ventajas y conveniencia de usar este módulo son características tan útiles y necesarias como

Para muchos webmasters optimización de imágenes para el entorno WEB es el procesamiento de 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 al usuario con internet lento Es posible que nunca espere 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. Algoritmos compresión jpeg estropear 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, luego 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.

Ahorrar para Web Guardar para Web JPG, GIF, PNG. La conveniencia de utilizar este módulo radica en la posibilidad de visualizar simultáneamente varias opciones (de 1 a 3) de la imagen final.

Para el diseño web en Photoshop existen características especiales, implementado como un módulo de ahorro Guardar para Web. Este es un módulo muy poderoso para gestionar el proceso de guardar documentos, que le permite seleccionar ajustes óptimos imagen guardada (optimizar imagen). Módulo Guardar para Web soporta los formatos más comunes para Internet - JPG, GIF, PNG. La conveniencia de utilizar este módulo radica en la posibilidad de visualizar simultáneamente varias opciones (de 1 a 3) de la imagen final. Para una visión más detallada de este módulo, sugiero usarlo. Para hacer esto, necesita tener algún documento abierto. Puedes ejecutar este programa con el comando Guardar para Web desde el menú Archivo. La siguiente ventana aparecerá en su pantalla:

El principio general de trabajar con este módulo es el siguiente. Photoshop le ofrece varias opciones de optimización (diferentes proporciones de configuración de formato) para elegir, que se muestran en ventanas especiales. Debajo de la imagen hay comentarios del siguiente tipo: el tamaño del archivo después de la optimización, el tiempo de carga a una determinada velocidad del módem y las características del formato (como el factor de compresión JPG o la cantidad de colores para GIF). Si le gusta una de las opciones de optimización, puede seleccionarla haciendo clic en ella con el botón izquierdo del mouse. A continuación, haga clic en Aceptar y se guardará su archivo optimizado. Pero si no está satisfecho con las opciones propuestas, entonces dirija su mirada hacia el lado derecho de la ventana porque ahí es donde se concentran todas las configuraciones principales de optimización. Pero antes de considerarlos, estudiemos la configuración preliminar del módulo.

La configuración del módulo se concentra en un pequeño botón redondo ubicado en la parte superior de la ventana. Allí podrá seleccionar los siguientes modos:

• Tramado del navegador- El suavizado del navegador (interpolación) le dará la oportunidad de evaluar su imagen en la paleta Segura del navegador.
• Color no compensado- visualización sin restricciones.
• Color estándar de Windows- colores estándar de Windows (256 colores)
• Color estándar de Macintosh- colores estándar de Mac (Mac).
• Usar perfil de color del documento- visualización teniendo en cuenta perfil de color equipo.

Las pestañas en la parte superior de la ventana le permiten cambiar entre diferentes modos visita. Existen los siguientes modos:

• Original- el original de tu foto se muestra en una sola ventana.
• Optimizado- en una sola ventana se muestra el "mejor" resultado de optimización según Photoshop. Observo que a veces tiene mucho éxito.
• 2 arriba- Aparecen dos ventanas: una contendrá el original de su dibujo y la otra contendrá el resultado de la optimización.
• 4 arriba- Podrás elegir entre tres opciones de optimización y el tipo de original.

Pero elegir cualquier opción entre las tres propuestas es, en cualquier caso, cosa de aficionados. En esta etapa consideraremos opciones para optimizar "manualmente", es decir. Configuraremos todos los parámetros de optimización nosotros mismos. En primer lugar, debes ser consciente de la dependencia del tamaño. archivo final(espacio ocupado en HD) del tamaño de su imagen (cuántos píxeles). Cómo más foto, cuanto más significativo ( mas espacio ocupa HD) archivo final. Para controlar el tamaño de la imagen en la gestión de optimización, aparece toda una pestaña llamada Tamaño de imagen.

Las dimensiones cambiadas se aplican con el botón. Aplicar a todas las imágenes optimizadas y no se aplica al original. En cuanto al parámetro Calidad, luego se discutió en el capítulo anterior de esta lección. Intenta abrir cualquier imagen y jugar con su tamaño. Como consejo diré lo siguiente: gran tamaño Las imágenes (en píxeles) no obedecen a la relación "cuanto más grande, mejor". Aquí debemos buscar un compromiso en forma de un justo medio. En primer lugar, debes decidir dónde quieres colocar esta imagen. Tenga en cuenta que no todos en este mundo tienen buenos monitores, que mantienen una resolución de 1280X960. La mayoría de la gente tiene monitores de 15 pulgadas con una resolución de 800x600 píxeles. Teniendo en cuenta todo lo anterior, puedes adivinar que las dimensiones de tu imagen no deben exceder los 800 por 600 píxeles, con excepción de ocasiones especiales. Si estás preparando imágenes para el diseño de tu sitio web, debes tener en cuenta que la ventana que nos proporciona el navegador es pequeña, nuestra conexión es frágil, Internet apenas se arrastra y sólo el usuario más paciente esperará hasta que tu imagen esté lista. cargado por completo, y todo ello con el fin de admirar tu trabajo, que no cabe en su pantalla. Esta situación disuadirá a cualquiera de visitar su sitio nuevamente.

Abre el archivo Flor.psd(el archivo se encuentra en la carpeta \\Program Files\\Adobe\\Photoshop\\Samples). Continuaremos con la optimización según el formato de archivo de imagen específico:

Es fácil comprobar la exactitud de la configuración realizada cargando la imagen terminada en el navegador. Para hacer esto, ni siquiera es necesario salir de la ventana del módulo de exportación. Haga clic en el botón Vista previa en(Ver en) \"Su navegador\", y el módulo abrirá el navegador con la imagen cargada en él. Debajo de la imagen verá el código HTML generado por el exportador para demostrar esta página. El color de fondo de la página se puede preestablecer usando la lista mate(Borde). La configuración del borde es simple. Si seleccionó la opción Ninguno(no), entonces no habrá fronteras, parámetros Blanco(blanco) y Negro(negro) te dará negro y blanco y en consecuencia. Parámetro Otro(otro) le permite elegir cualquier color. Párrafo Color del cuentagotas le permite seleccionar un color con un cuentagotas directamente desde la imagen. Si se dedica al diseño web, lo más probable es que tenga al menos dos navegadores instalados en su computadora: Explorador de Internet y Comunicador Netscape. Abriendo la lista al lado del botón Vista previa en(Ver en), puede elegir ver cualquiera de los navegadores instalados en su computadora.

Procesamiento en línea gran cantidad archivos gráficos, configurar todos los parámetros enumerados para cada imagen por separado llevará demasiado tiempo. Es mucho más racional guardar la configuración que ha realizado para reutilizarla.

1. abrir menú Menú Optimizar(Menú de optimización) haciendo clic en el botón con una flecha triangular en el área Ajustes(Opciones).
2. Seleccione un equipo Guardar configuración(Guardar configuración). Abre un cuadro de diálogo Guardar como(Guardar como) le permite guardar la configuración en un archivo. Ingrese en el campo Nombre del archivo(Nombre de archivo) algún nombre, por ejemplo, \"JPEG 18\", y haga clic en el botón Ahorrar(Ahorrar).

Ahora en la lista Ajustes(Opciones) Aparece el nombre ingresado. Durante el procesamiento siguiente archivo Bastará con seleccionar este nombre de la lista. Tenga en cuenta que la lista ya contiene varias de las opciones de configuración más típicas predefinidas por los desarrolladores. Los conjuntos de configuraciones innecesarios que alargan la lista de configuraciones se pueden eliminar fácilmente con el comando Eliminar configuración Menú (Eliminar configuración) Menú Optimizar(Menú de optimización). Este comando elimina el conjunto actual de configuraciones. Haga clic en el botón DE ACUERDO(Sí). Esto abrirá el cuadro de diálogo estándar para guardar el archivo. De forma predeterminada, se sugiere el nombre del documento original de Photoshop. Elige el tuyo carpeta de trabajo y presione el botón Ahorrar(Ahorrar). La ventana del módulo de exportación se cerrará y aparecerá un archivo JPEG optimizado en la carpeta seleccionada, listo para colocarse en una página web.

Como ya hemos señalado, para colocar imágenes con áreas transparentes en una página web se utiliza el formato GIF, que solo admite colores indexados. Módulo de exportación Guardar para Web(Guardar para Web) le permite guardar imágenes en este formato popular.

1. abrir un documento Patito.psd.
2. Convierta la capa de Fondo de la imagen en una capa normal.
3. Destacar fondo blanco y borrarlo.
4. Seleccione un equipo Guardar para Web(Guardar para Web) desde el menú Archivo(Archivo).
5. en la lista Formato de archivo optimizado(Formato de archivo optimizado) seleccione formato GIF.
6. El parámetro más importante de una imagen indexada es la cantidad de colores en su paleta. Está ambientado en el campo. Bandera(Colores) y debe crear un compromiso entre calidad y compacidad. La imagen del patito contiene muy pocos colores y una paleta de 32 colores será suficiente para ello.
7. Lista Algoritmo de reducción de color(Algoritmo de reducción de color) contiene una lista de algoritmos para generar una paleta de imágenes indexada. Todos ellos ya han sido discutidos en la lección No. 7. Sólo tengamos en cuenta que por defecto se ofrece la opción Selectivo(Selectivo), dando mejores resultados para imágenes que contienen un espacio significativo lleno de colores similares. La imagen de un patito entra en esta categoría. Está dominado por sombras. amarillo.
8. Los colores que faltan en la paleta de imágenes están limitados por una combinación de varios píxeles vecinos de colores similares. El algoritmo de simulación se selecciona de la lista. Algoritmo de tramado(Algoritmo de suavizado). En la mayoría de los casos se utilizan las opciones. Ruido(Ruido) y Difusión(Difusión), que no dan un patrón tan regular como Pattern. Opción Difusión(Difusión) se utiliza mejor para imágenes fotográficas, una Ruido(Ruido): para texturas de fondo y degradados. Seleccione un algoritmo de la lista Difusión(Difusión).
9. El grado de suavizado se establece con el control deslizante. Vacilar(Suavizado) ubicado a la derecha. Configúrelo de modo que los tonos se reproduzcan satisfactoriamente. Recuerde que cuanto mayor sea el suavizado, mayor tamaño más grande el archivo resultante.
10. Módulo Guardar para Web(Guardar para Web) sugiere algoritmo único pretratamiento imágenes, aumentando la eficiencia de la compresión. Está controlado por un control deslizante. con pérdida(Pérdida de calidad). Valores grandes Este parámetro reduce significativamente la calidad de la imagen. Si lo configura en el rango del 5 al 15%, la disminución de la calidad será casi imperceptible y el tamaño del archivo se podrá reducir entre un 5 y un 40%. Establecer el control deslizante con pérdida(Pérdida de calidad) en alrededor del 30%.
11. Caja Transparencia(Transparencia) convierte áreas transparentes de una capa de Photoshop en transparencia GIF. Configúrelo; de lo contrario, las áreas transparentes se rellenarán con un relleno sólido.
12. Lista mate(Borde) proporciona una transición perfecta entre el borde de la imagen y el color de fondo de la página. Los píxeles del borde de un objeto seleccionado suelen ser semitransparentes, lo que no es compatible con el formato GIF. Como resultado, al exportar una imagen a formato GIF, aparece un ruido característico alrededor de los objetos sobre un fondo transparente. Para evitar su aparición, configúrelo en la lista. Estera(Tratamiento de bordes) El color de fondo de la página web. Los píxeles translúcidos serán coloreados por el programa de este color. Cuando la casilla de verificación está desactivada Transparencia Color (Transparencia) especificado en la lista. Estera(Procesamiento de bordes), se considera fondo y rellena todas las áreas transparentes de la imagen.

Edición de la paleta de imágenes.

Al comienzo de este capítulo, ya mencionamos que la misma reproducción en color de imágenes en diferentes plataformas Las computadoras se pueden proporcionar usando la paleta Web estándar. Photoshop le permite ajustar este aspecto de la creación de imágenes con una paleta limitada. Puede traer todos los colores de una imagen a la paleta Web, o sólo algunos de los más importantes.

1. En el modo semiautomático, los colores se ajustan a la paleta web mediante un control deslizante Ajuste web(Paleta Transmitir a Web). Especifica el porcentaje de los colores dados en la paleta de imágenes. Intente mover este control deslizante y observe cómo cambian los colores de la imagen. La paleta de imágenes actual se muestra en la pestaña Tabla de colores(Tabla de colores) ubicada en la esquina inferior derecha de la ventana Guardar para Web(Guardar para Web). Al cambiar el valor del parámetro Ajuste web(Transmisión a la paleta Web) los cambios que se producen también se muestran en la paleta de imágenes. Observas un cambio en algunos colores de la paleta y la aparición de círculos blancos en sus muestras. Estos últimos marcan los colores asignados a la paleta Web. Pestaña Tabla de colores(Carta de colores) es útil para algo más que la observación. Le permite controlar colores individuales en una imagen. Es mucho más problemático, pero forma flexible gestión.
2. Recupera el control deslizante Ajuste web(Paleta Transmitir a Web) a cero para permitir la edición manual del color.
3. Si desea evitar cambios de color significativos en cualquier navegador, pero no desea hacer coincidir todos los colores con la paleta Web, entonces tiene sentido hacerlo de forma selectiva. Es especialmente importante preservar los colores que dominan la imagen. Para determinar qué colores son, configure el modo de clasificación Ordenar por popularidad(Ordenar por frecuencia) usando el mismo comando del menú del panel. Los colores más comunes se encuentran a la izquierda.
4. Haga clic en la quinta muestra desde la izquierda en la paleta. Se recibirá la muestra marco blanco, indicando que está seleccionado. En la barra de estado ubicada en la parte inferior de la ventana, observe el valor de los componentes del color seleccionado. Evidentemente, se acerca al blanco, que, por supuesto, forma parte de la paleta Web.
5. Para evitar cambios de color, llevemos el color al blanco. Photoshop puede elegir el color más cercano a la selección de la paleta Web. Para hacer esto, haga clic en el ícono del cubo en la parte inferior del panel o seleccione el comando Cambiar/desplazar los colores seleccionados hacia/desde la paleta web(Desplazar/Desplazar los colores seleccionados a la paleta Web) desde su menú. La muestra se volverá blanca y aparecerá un círculo blanco, lo que indica que el color es parte de la paleta Web. Un cuadrado blanco en la esquina inferior izquierda de la muestra indica que el color está bloqueado. Los colores bloqueados permanecen intactos al reducir los colores en la paleta de imágenes y cuando se ven en el navegador. Para quitar el candado, haga clic en el icono del candado en la parte inferior del panel.
6. La incorporación de colores a la paleta web se puede realizar de forma completamente manual utilizando la ventana Selector de color (Paleta de colores). Seleccione todos los colores de la paleta con el comando Seleccionar todos los colores(Seleccione todos los colores) en el menú del panel y haga clic en el icono de combinación de colores. Todos los colores de la imagen se ajustarán a la paleta Web.
7. Llevar la imagen completa a la paleta Web hizo transición suave La imagen del monitor es demasiado nítida. Arreglaremos este defecto manualmente. Haz la muestra de naranja más oscura de la paleta. doble clic con el ratón. Una ventana familiar aparecerá frente a ti. Selector de color(Paleta de colores). Asegúrate de que la casilla de verificación Sólo colores web(Solo colores web) está instalado en él. Seleccione el color más cercano al color actual sombra clara y cerrar la ventana presionando el botón DE ACUERDO(Sí). El color será editado. Si tampoco encuentra éxito, abra la ventana nuevamente. Selector de color(Paleta de colores) y elige otra.
8. Editar todos los tonos color naranja en la paleta de colores para que sus colores se acerquen entre sí. Esto eliminará la transición de color nítida en la imagen.

Numerosos comandos del menú del panel Tabla de colores(Tabla de colores) le permite resaltar rápidamente los indicados ( Seleccione todos los colores seguros para la Web(Seleccione todos los colores Web Safe)), no listado ( Seleccione todos los colores no seguros para la Web(Seleccione todos los colores que no sean Web Safe)) y en general todos los colores ( Seleccionar todos los colores(Seleccione todos los colores)). Comandos de bloqueo Bloquear/desbloquear colores seleccionados(Bloquear/Desbloquear colores seleccionados) y Desbloquear todos los colores(Desbloquear todos los colores) desbloquea los colores seleccionados o todos los colores de la paleta, respectivamente. Similar a los comandos Web Shift/Unshift colores seleccionados(Desplazar/Desplazar los colores seleccionados a la paleta Web) y Desplazar todos los colores(Cancelar cambio de todos los colores) devuelve, respectivamente, los colores seleccionados o todos los colores reducidos a valores originales. Los modos de ordenar colores en la paleta no se limitan al criterio de prevalencia ( Ordenar por popularidad(Ordenar por prevalencia)). Se pueden dejar sin clasificar ( sin clasificar(No ordenar)), y también ordenar por color ( Ordenar por tono(Ordenar por tono)) o brillo ( Ordenar por luminosidad(Ordenar por brillo)).

Optimización del formato PNG.

El último formato discutido es PNG. eso es suficiente nuevo formato, pero ya es compatible con la mayoría de los navegadores modernos. Le permite almacenar imágenes indexadas y a todo color. El algoritmo de compresión utilizado no produce pérdidas. información gráfica, por lo que la densidad de compresión de las imágenes a todo color es significativamente menor que la de JPEG. Módulo Guardar para Web(Guardar para Web) implementa la exportación a formatos PNG-8 para imágenes indexadas y PNG-24 para todo color. Opciones de exportación PNG-8 absolutamente similar GIF, y no te resultará difícil descubrirlos por tu cuenta. PNG-24 En general, solo ofrece modos de transparencia cambiantes ( Transparencia(Transparencia)), Entrelazado ( entrelazado) y parámetros Estera(Procesamiento de bordes).

Una vez más llamo su atención sobre la importancia de esta información. Sin conocer las capacidades de los formatos de archivos y Capacidades de Photoshop Al trabajar con ellos, no podrá trabajar profesionalmente.

Hemos aprendido cómo cargar fuentes en Photoshop; recomiendo que todos los que aún no hayan leído este artículo lo lean.

Hoy continuaremos aprendiendo los conceptos básicos de Photoshop, el tema de la lección de hoy. Cómo preparar fotografías para Internet. Quizás inmediatamente tenga preguntas sobre por qué y por qué debería preparar fotografías para Internet. Puedes descargarlo y listo.

Sí, efectivamente, en algunos casos puedes simplemente descargarlo y listo, pero esto conlleva muchos problemas e inconvenientes. A continuación he dado 5 razones Por qué necesitas preparar fotos para Internet:

5 razones para preparar imágenes para WEB

Gran peso de imagen. Si, por ejemplo, coloca una foto en su sitio web que pesa varios megabytes, en primer lugar, sobrecargará e interrumpirá el trabajo de su servidor y, en segundo lugar, la página donde publicó su foto tardará mucho en cargarse. Y esto afecta en gran medida el tráfico del sitio. Recuerde, a la gente no le gusta visitar sitios que son lentos y tardan mucho en cargarse.

Durante el diseño del sitio web, todos los elementos del diseño del sitio futuro (imágenes en formato .png y .jpg) deben estar preparados para Internet; sin esto, el diseño es imposible;

Proporciones incorrectas de la fotografía, lo que provoca distorsión. Este punto, creo, no necesita aclaración.

Alta pérdida de calidad de imagen. Cuando subes tus nuevas fotografías, por ejemplo, a redes sociales o subastas online, probablemente hayas notado que no son tan claras, coloridas o contrastantes como originalmente. El punto es que cuando subes tus imágenes a
cualquier recurso de Internet, comprimen y degradan automáticamente la calidad de sus imágenes.

En algunas situaciones, es posible que sea necesario cargar una imagen. cierto tamaño y formato. Por ejemplo, debe cargar un ícono de 16x16 píxeles en el formato .png para su sitio. Todo esto se puede hacer fácil y sencillamente en Photoshop.

Nuestro programa favorito hace frente a todas estas tareas a la perfección. Adobe Photoshop CC. A los desarrolladores de Photoshop se les ocurrió una herramienta muy útil y módulo requerido con la función de guardar imágenes para Internet ( Guardar para Web ) .Este es un poderoso módulo para administrar los procesos de optimización y guardar documentos, que selecciona automáticamente la configuración óptima para el archivo guardado. Este módulo admite y funciona con los formatos de archivos más comunes para Internet. .jpg, .gif, .png.

Las ventajas y conveniencia de utilizar este módulo son características tan útiles y necesarias como:

Seleccione múltiples modos de visualización mientras optimiza las imágenes para la web

Seleccionar el formato en el que se guardará la imagen

Seleccionar la calidad y el tamaño de la imagen guardada

seleccionando el método de optimización, compresión y viendo el peso de la imagen optimizada.

Aquí termina toda la teoría, pasemos a la práctica. Primero, abramos una imagen o fotografía que guardaremos para Internet. Estaré trabajando con esta imagen:

Para proceder a guardar para la web, vaya a menú superior Archivo/Guardar para web o usar teclas de acceso rápido Ctrl+Alt+Mayús+S.

Debería abrirse una ventana con la configuración frente a nosotros, como se muestra en la captura de pantalla a continuación. No hay por qué tener miedo de una gran cantidad de botones y configuraciones, usaremos solo algunos de ellos en detalle a continuación;Veamos para qué sirven y cómo utilizarlos.

Descripción de opciones:

1. Opciones de vista previa de cuatro pestañas.

- Original - aquí es cuando ves tu actual imagen original

- Optimización - aquí es cuando ves en avance solo imagen optimizada

- 2 opciones - aquí es cuando ves tu imagen original en la parte superior y la optimizada en la parte inferior. Esta opción es la más conveniente y la que más me gusta, por eso la elegí.

- 4 opciones - aquí es cuando ves en la vista previa la imagen original, la imagen que has seleccionado, la imagen en calidad 22 y la imagen en calidad 11.

2. Formato de archivo guardado. En nuestro caso elegimos JPEG.

-PNG — formato de archivo para guardar gráficos web. Hay dos tipos, 8 bits: imágenes indexadas, 24 bits: “todos” los colores. Normalmente, las imágenes prediseñadas y los logotipos sobre un fondo transparente se guardan en este formato.

- GIF - un formato de archivo obsoleto para guardar gráficos web. La mayoría de las veces, los archivos con un número limitado de colores, tablas, diagramas y logotipos se guardan en este formato. El formato también admite animación y; fondo transparente. Este formato se utiliza cada vez menos, porque más mejor formato PNG.

-JPEG — El formato más popular. Perfecto para guardar fotografías e imágenes con muchos colores, sombras y efectos.

3. El significado de calidad. Me gusta "Alto".

Promedio

Alto

muy alto

El mejor

4. Aquí marcamos el valor “ Mejoramiento « . Considere y concéntrese en las opciones " Progresivo " Y " Perfil incorporado ", no lo haremos ya que la mayoría de los navegadores web no los admiten.

5. Marque la casilla para habilitar la opción “ Convertir a sRGB «. Esto es necesario para que nuestra imagen se muestre correctamente en el sitio web y se guarde en el espacio de color sRGB.

6. Establezca el tamaño de imagen deseado. En mi caso, tiene un ancho de 500 píxeles y un alto de 281 píxeles.

7. Tamaño de la imagen original.

8. Tamaño de imagen optimizado para la web..

Creo que ahora entiendes el tema. Cómo preparar fotografías para Internet en Photoshop y ahora puedes hacerlo tú mismo. Recuerde, la mejor gratitud para el autor son los me gusta y las publicaciones en redes sociales y comentarios en el sitio web ¡Nos vemos en las próximas lecciones!

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?

Se puede omitir por completo este menú usando un atajo 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.

La mayoría de los usuarios novatos no pueden preparar una foto para publicarla en Internet. Están intentando “colar” una foto tamaño enorme a su sitio web y luego se preguntan por qué la página del sitio web 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 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 para el tamaño correcto, entonces 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 veo, pero veo gran diferencia en el volumen 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, escriba inmediatamente en letras latinas) y especifique una 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 por completo, guárdala en tu Photoshop "nativo" formato PSD. Debido a la recompresión repetida en Formatos GIF y JPEG da como resultado pérdida irrecuperable calidad.