Diseño de imágenes para tu web con photoshop

  • Autor Autor xaviheta
  • Fecha de inicio Fecha de inicio
xaviheta

xaviheta

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
1.1 Resolución de imágenes.
La resolución de una imagen digital se define por el número de píxeles por pulgada (ppp o ppi), por tanto, si las dimensiones son pequeñas y la resolución alta, tendremos una imagen de buena calidad. Las imágenes de mayor resolución pueden reproducir más detalle.
Hay que tener en cuenta que un píxel no tiene un tamaño real (en centímetros). Depende de la resolución de pantalla con la que se muestre

IMAGEN.webp
Imagen con resolución alta

imagen2.webp

Por eso una imagen medida en píxeles es más apropiada para la publicación en web. Queremos saber el espacio real que ocupará en pantalla, y no el espacio que tendría si la imprimiésemos.
Es preferible trabajar con medidas reales en píxeles.

Tipos de imagen.

- Existen diferentes tipos de archivos con los que trabajar en Photoshop, los más comunes, sontif, psd, jpg, png, etc.
Con el formato PSD guardamos un documento válido para realizar cambios en el futuro, conserva las propiedades de edición con las que lo hayamos guardado. (este formato solo es válido en Photoshop)

- Con el formato JPG guardamos una imagen cerrada y acabada. Es un formato que comprime el tamaño de la imagen para que ésta ocupe menos pero conservando su calidad. Este es el formato óptimo para usar en nuestra página web.
Una forma de generar un JPG apropiado para la web es utilizar la opción de Guardar para web. Este recurso nos permite definir las cualidades del jpg.
-GIF,muy utilizado para web. Permite utilizar transparencia, y salvarlo como entrelazado para que al cargarlo en la web lo haga en varios pasos. Admite hasta 256 colores.
- PNG, la misma utilización que los GIF, pero con mayor calidad. Soporta transparencia y colores a 24 bits. Solo las versiones recientes de navegadores pueden soportarlos.

ESPACIO DE TRABAJO

espacio.webp


Abrir y guardar un documento.

guardar.webp

Abrir.Para abrir un nuevo documento debemos clicar en la barra de menú Archivo>Nuevo… o teclear Ctrl+N. Y surge la siguiente ventana

guar.webp

gu1.webp

Guardar.Una vez tengamos nuestro documento acabado y listo para guardar, disponemos de varias opciones dependiendo del uso que vayamos a darle.
El modo de disponer de estas posibilidades es clicar en Archivo>Guardar Como

gu2.webp

Si queremos volver a modificarlo algún día, el formato ideal es Photoshop PSD, este tipo de archivo conserva las capas del documento con las mismas propiedades con que lo hemos guardado.
En el espacio -Nombre, debemos indicar el nombre con que queremos guardar el archivo. Y en -Formato elegimos el tipo de archivo que queremos guardar.

Para identificar un tipo de imagen en una carpeta de nuestro ordenador, se utilizan las siglas del formato al final del nombre del archivo, por ejemplo:
Imagen.psd, Imagen.tif, Imagen.jpg.
Si queremos guardar una imagen terminada y lista para utilizar en nuestra web, el formato ideal es JPEG. Es el formato universal más utilizado en fotografía digital. Para guardar un JPEG realizamos la misma acción que guardando el PSD pero esta vez seleccionamos JPEG.
Existe otra forma de guardar un JPEG específica para web. Si clicamos en Archivo>Guardar para web y dispositivos, se despliega un menú como el siguiente:

gu3.webp


EN BREVE SEGUIRÉ .....


MUCHAS GRACIAS!!!
 
Gracias por el aporte :encouragement:
 
Atrás
Arriba