Cargando

Ir a contenido

X



Cómo guardar para web Photoshop

Te mostramos cómo guardar para web Photoshop y cómo exportar para web Photoshop.


Escrito por jun 30 2022 12:12 photoshop

La edición fotográfica digital cuenta con diferentes elementos que son esenciales para hacer una buena postproducción y composición. Al igual que debemos trabajar bien la luz, el color es muy necesario para que nuestras fotografías tengan una calidad óptima y puedan verse con buena resolución cuando las usemos en nuestras plataformas web. Por eso hoy veremos como elegir el color y la calidad final de nuestras imágenes en Photoshop en función de la plataforma donde acaben esas imágenes.

 

El color Photoshop
La gestión del color es importante cuando editamos fotografía digital ya que en función del fin final de nuestra imagen necesitaremos trabajar en uno u otro. El espacio de color RGB es el que se usa por defecto en imágenes de Photoshop y suele ser el que viene también preestablecido en cámara y demás dispositivos. Cuando trabajamos con imágenes en Photoshop con un perfil distinto, la herramienta nos preguntará acerca de ello.

 

21--exportar-recursos-de-imagen.png

 

Por otro lado el espacio Adobe RGB es más amplio que el sRGB incluyendo mayores tonos. El espacio de color sRGB es el estandarizado y más usado en los navegadores web, monitores y demás pantallas digitales como teléfonos móviles o tablets. Sin embargo este especto sRGB es algo más reducido que el Adobe RGB y es que se creó para poder reproducir los colores de imágenes en internet de forma óptima ya que los diferentes dispositivos y monitores no pueden reproducir tantos colores como el Adobe RGB.

 

Cuando nuestra imagen vaya a acabar en un dispositivo de visualización digital como monitor o móvil contamos con dos opciones para que la gestión de color sea lo más óptima posible. Podemos trabajar desde un inicio en un espacio sRGB y trabajar la saturación del color o bien podemos transformar el perfil de color cuando vayamos a exportar la imagen.

 

 

 

Te mostramos cómo guardar Photoshop en JPG o PNG.

 

Además del color es importante saber gestionar la calidad y el tamaño de las imágenes que vamos a exportar para web desde Photoshop y por eso vamos a ver cómo guardar y exportar para web en Photoshop.

 

 


1. Cómo guardar para web en Photoshop


Cuando exportamos para web necesitaremos configurar nuestras imágenes en Photoshop para que la calidad no se comprometa demasiado en función del uso final de las imágenes.

 

Paso 1

Lo primero que haremos será cambiar el perfil de nuestra imagen para que esté acorde al color que se mostrará en nuestros monitores. Para ello iremos a “Edición – Convertir en perfil”.

 

1-Cómo-guardar-para-web-en-Photoshop.png

 

Paso 2

Aquí veremos nuestro Perfil de origen y el de destino. En este caso como tenemos un perfil de partida RGB lo cambiaremos a uno con entorno sRGB ya que será un espacio de color que se verá en monitores digitales.

 

2-Cómo-guardar-para-web-en-Photoshop.png

 

Paso 3

Veremos algún cambio de color en nuestra imagen respecto al espectro de color inicial. Ahora será más cercano al color que se verá en pantalla. En muchas ocasiones quizás no se aprecie demasiado el cambio de color.

 

 

Paso 4

Para entrar en el guardado para web iremos a la siguiente ruta:

 

  • Archivo
  • Exportar
  • Guardar para Web “heredado”

 

También podemos usar esta combinación de teclas para poder abrir el guardado para web:

 

 

Shift + Alt + Ctrl + S

 

 

 

 

4 Cómo guardar para web Photoshop.png

 

Paso 5

En la parte superior vamos a poder elegir un “Ajuste preestablecido” como punto de partida si queremos y así escoger un ajuste de formato predefinido.

 

 

Paso 6

También tenemos la posibilidad de elegir el Formato así como su Calidad final en función del uso que vayamos a darle a nuestra imagen. Los formatos JPG y PNG suelen ser los más usados. Tienes que tener en cuenta que a menos calidad, mayor compresión y pérdida de detalle asociado.

 

 

Paso 7

A la hora de elegir el formato y la calidad tenemos que pensar para qué fin queremos la imagen. No será lo mismo una imagen para Redes Sociales con buena calidad que una imagen de acompañamiento en nuestra página web donde la calidad no es tan reseñable.

 

En este caso queremos que la imagen acabe en nuestra Red Social por lo que vamos a darle una Calidad Máxima donde conserve el mayor detalle posible:

 

 

Paso 8

En las opciones para activar, dejaremos pulsada y activada la opción de “Optimizado” así como “Incrustar perfil de color”

 

La opción de “Convertir en sRGB” podemos dejarla activada aunque se corresponde con el paso que hemos hecho previamente de reasignación de perfil.

 

 

Paso 9

Por último, el “Tamaño de imagen” será importante cuando exportemos para web ya que en función de su uso podría cambiar. Las Redes Sociales además cuentan con tamaños predefinidos que van variando pero que marcan los límites de tamaño de imagen máximo que podrán tener las imágenes en su plataforma. Para comprobarlo te recomendamos que visites sus páginas oficiales ya que cambian con el tiempo.

 

Por ejemplo, el tamaño de imagen para publicaciones verticales en Instagram será de 1080 x 1350 píxeles mientras que para la foto de publicación de Facebook será de 1200 x 630 px. Si la imagen es para tu propia web tendrás que saber cuáles son las medidas que necesitas.

 

Puedes poner el ancho o el alto y que con la proporción automática se ajuste para no deformarla.

 

 

 


2. Cómo exportar para web en Photoshop


Cuando creamos imágenes para nuestra página web muchas veces necesitamos todos los archivos relacionados con la composición de una imagen que hemos creado previamente en Photoshop. Por eso vamos a ver cómo podemos exportar una imagen como todas sus capas para web en Photoshop.

 

Paso 1

Vemos que tenemos un proyecto donde hay una composición con diferentes capas y grupos organizados.

 

 

Paso 2

Lo primero que vamos a hacer será renombrar los archivos o capas correspondientes añadiendo una extensión de formato (.jpg, .png o .gif o .svg) al nombre. Por ejemplo vamos a cambiar “Elipses” y “Texto” a “Elipses.png” y “Texto.png”. También renombraremos la capa individual añadiéndole el formato .JPG.
Sustituye los espacios del nombre de cada elemento por “_”

 

11-Cómo-guardar-para-web-Photoshop.png

 

Nota
Los nombres que apliquemos a las capas no admiten los caracteres especiales : y *.

 

Paso 3

Una vez ya hemos asignado estos formatos de extensión nos aseguramos que hemos guardado nuestro proyecto PSD.

 

En caso de no ser así los recursos de imagen que crearemos a continuación se generarán en una carpeta en el escritorio.

 

Iremos a “Archivo – Generar – Recursos de imagen” y activamos la opción.

 

12-Cómo-guardar-para-web-Photoshop.png

 

Paso 4

Ahora se creará una carpeta de recursos junto al PSD en la ruta donde esté ubicado este proyecto PSD. En caso de no estar guardado previamente, esta carpeta de recursos se creará en el escritorio.

 

13-Cómo-guardar-para-web-Photoshop.png

 

Paso 5

Si la abrimos veremos nuestros recursos generados individualmente:

 

14-Cómo-guardar-para-web-Photoshop.png

 

 

Paso 6

En la imagen anterior veremos que al poner la extensión únicamente en el nombre del grupo, se ha creado una imagen final con las capas que incluye combinadas.

 

Si queremos además que se genere un recurso de imagen por cada capa, tendremos que renombrarlas individualmente:

 

15-Cómo-guardar-para-web-Photoshop.png

 

Paso 7

Después veremos que se han generado recursos individuales en nuestra carpeta:

 

16-Cómo-guardar-para-web-Photoshop.png

 

 

Paso 8

Otras opciones que Podemos a la hora de generar recursos de imagen a usar son:

 

Crear varios recursos a partir de una capa o grupo de capas
Para crear diferentes recursos sobre uno, pondremos nombres con su extensión separado por comas. Por ejemplo:
Elipe3.png, elipse3b.png, elipse 3c.png

17-exportar-recursos-de-imagen.png

 

 

Veremos los recursos de imagen creados:

 

18--exportar-recursos-de-imagen.png

 

 

Guardado de recursos en subcarpeta
Para crear una sibcarpeta con las capas que queramos incluiremos el nombre de la subcarpeta en el nombre de la capa o de grupo de capas.
Nombre subcarpeta/Elipse_2.png

19--exportar-recursos-de-imagen.png

 

Veremos la subcarpeta creada dentro de la carpeta principal de recursos de imagen:

 

20--exportar-recursos-de-imagen.png

 

 

 

De esta forma podremos guardar una imagen para web o exportar una imagen para una página web en Photoshop de forma completa.

 

Tutorial con vídeo para saber cómo corregir color en Photoshop ráipdamente.


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!


  Información

  •   Publicado jun 30 2022 12:12
  •   Actualizado jun 30 2022 14:05
  •   Visitas 345
  •   Nivel
    Intermedio


X