Exploración Tipos de imágenes y formatos para diseño web: los paquetes de software gráficos dummy

Los paquetes de software de gráficos no son baratos, por lo tanto, antes de realizar una decisión sobre cuál usar, debe determinar qué tipo de trabajo gráfico hará para sus proyectos de diseño web. Los diseñadores web se dividen en tres categorías estándar, y su estilo de diseño puede clasificarse en uno, dos o tres:

• Diseñador gráfico: Puede considerarse ilustrador porque crea todos los gráficos que utiliza desde cero. Empiezas con una pizarra en blanco y, a través de diferentes herramientas y técnicas utilizadas en tu software favorito de edición de imágenes, creas tus propios gráficos únicos.

• Manipulador de gráficos: Eres un experto en tomar gráficos, o fotos, que alguien más creó y manipuló para usarlos en tus proyectos de diseño web. Mediante el uso de diferentes herramientas y técnicas, puede hacer cosas como ajustar colores y tamaños, e incluso cambiar las formas y posiciones de los diferentes elementos de un gráfico (especialmente si está trabajando con gráficos vectoriales, que se tratarán en la siguiente sección)..

• Consumidor gráfico: Descargue imágenes de recursos en la web y las usa para agregar elementos de diseño visual y de color a los proyectos de su sitio web.

Puede caber en una, dos o las tres categorías, y eso es perfectamente aceptable cuando diseña temas para sitios web, siempre y cuando respete las restricciones de derechos de autor y licencias sobre los gráficos que utiliza (si es manipulador de gráficos y / o consumidor). Además, es importante comprender los tipos de gráficos que puede utilizar para lograr sus objetivos para sus proyectos de diseño web. Las siguientes secciones cubren diferentes tipos de gráficos y formatos de archivo para ayudarlo a comprender qué tipos de gráficos necesita usar para diferentes propósitos.

Comparación de imágenes ráster y vectoriales

Como diseñador gráfico, lo más probable es que trabaje con dos tipos de gráficos: ráster y vector. Como diseñador web, definitivamente trabajará con imágenes ráster y puede trabajar con imágenes vectoriales. El programa de software que utiliza para editar y crear gráficos depende del tipo de archivo de imagen con el que está trabajando. Aquí hay un resumen breve de las diferencias entre las imágenes ráster y vectoriales:

• Ráster: Estas imágenes están formadas por cientos de pequeños puntos, o píxeles. Cada píxel puede tener un color diferente, lo que permite obtener imágenes y fotografías a todo color. La creación y edición de una imagen ráster requiere un programa de edición basado en ráster, como PaintShop Pro o Photoshop de Corel.

• Vector: Estas imágenes están formadas por curvas en lugar de píxeles. Las imágenes vectoriales tienen cuatro puntos vectoriales, uno en cada esquina de la imagen, y conecta los puntos con curvas. Entonces las curvas se pueden llenar con colores y efectos.

Imágenes de mapa de bits

Las imágenes de mapa de bits, como las fotografías y los gráficos utilizados en el diseño del tema del sitio web, se utilizan con mayor frecuencia para el diseño web y la visualización en sitios web. Las imágenes de trama no se escalan bien; si intenta cambiar el tamaño de la imagen más grande o más pequeña, verá una pérdida notable en la calidad de la imagen porque los píxeles se redimensionan y la imagen se vuelve granulada. Las imágenes ráster son planas , solo hay una capa para los elementos de la imagen, lo que dificulta (y algunas veces imposibilita) editar algunos de los diferentes elementos de imagen dentro del archivo gráfico. Sin embargo, para su uso en la web, las imágenes ráster se cargan rápidamente porque generalmente tienen un tamaño de archivo pequeño y no requieren mucho ancho de banda para transferir.

Imágenes vectoriales

Las imágenes vectoriales se utilizan para el diseño de impresión, como tarjetas de visita, folletos, anuncios de revistas y vallas publicitarias. Debido a que las imágenes vectoriales están formadas por curvas en lugar de píxeles estáticos, las imágenes vectoriales pueden redimensionarse sin pérdida de calidad. Por lo tanto, puede reducir una imagen vectorial al tamaño de un sello postal o aumentar su tamaño para que se ajuste al lateral de un camión grande, y la calidad de la imagen sigue siendo la misma. Es por eso que las imágenes vectoriales son ideales para logotipos y trabajos de impresión. Normalmente, las imágenes vectoriales tienen capas , cada elemento de la imagen tiene su propia capa, lo que le permite usar su editor de imágenes vectorial favorito, como Illustrator, para manipular y cambiar los diferentes elementos dentro del archivo de imagen vectorial.

Los tamaños de archivo de las imágenes vectoriales pueden ser bastante grandes, por lo que no son ideales para mostrar en un sitio web; querrá usar imágenes de trama en su lugar. Sin embargo, puede comenzar a trabajar con un archivo vectorial para su trabajo de diseño web y luego guardar el archivo final en un formato ráster que está optimizado para la web.

Ver formatos de archivo de imagen

Es importante comprender los tipos de formatos de archivo de imagen con los que trabajará para diseñar en la web. Las imágenes, ya sean fotos o logotipos, que guarde y use en su sitio web deben ser tipos de archivos de mapa de bits debido al tamaño de archivo más pequeño y la rica pantalla en color. En las siguientes secciones, descubrirá cómo la compresión afecta el tamaño de las imágenes ráster y descubrirá qué tipos de formatos de archivo puede usar en sus propios proyectos.

Comprensión de la compresión

Cuando utiliza imágenes ráster en su diseño web, necesitan tener una cierta cantidad de compresión , o una disminución en el tamaño total del archivo. La compresión de imagen ocurre cuando guarda un archivo de imagen ráster como JPG, GIF o PNG. Comprimir un archivo disminuye el tamaño del archivo de imagen para que la imagen se cargue más rápido en una página web.

Cuanto mayor sea el tamaño del archivo de imagen, más tiempo tardará esa imagen en cargarse en su página web.

La compresión de archivos de imagen puede usar dos algoritmos diferentes, según el formato de archivo que haya elegido para su archivo de imagen.Para los archivos de imágenes digitales, la compresión ocurre de una de estas dos formas:

• Compresión sin pérdida: Todos los datos del archivo de imagen se conservan durante y después de la compresión, lo que generalmente produce una pérdida de calidad del archivo de imagen original.

• Compresión perdida: Esto reduce el tamaño de un archivo de imagen al eliminar ciertos bits de datos del archivo original o al combinar partes de la imagen que son similares entre sí. Esto generalmente resulta en la pérdida de calidad de imagen del archivo original.

Determinando qué tipos de archivos usar para sus proyectos

La siguiente tabla enumera seis formatos de archivo comunes con los que trabajará para el diseño web y el tipo de archivo y compresión. Aunque los archivos de imágenes finales que guarde y use en su trabajo de diseño web deberían ser ráster, puede comenzar con imágenes vectoriales para editar y manipular gráficos para satisfacer las necesidades de sus proyectos de diseño web.

Formato de archivo de imagen	Tipo de archivo de imagen	Tipo de compresión
JPG	Trama	Pérdida
GIF	Trama	Sin pérdida
PNG	Trama < Lossless	AI
Vector	N / A *	EPS
Vector	N / A *	CDR
Vector	N / A * > *	Las imágenes vectoriales no experimentan compresión.

Estos son los tres formatos principales de imágenes vectoriales que probablemente encontrará en su trabajo con diseño gráfico: AI:

Adobe Illustrator, un archivo propietario desarrollado por Adobe para representar imágenes vectoriales

• EPS: Formato de imagen vectorial PostScript encapsulado

• CDR: CorelDRAW, un archivo gráfico patentado desarrollado por Corel para representar imágenes vectoriales

• Al decidir qué formato de archivo de imagen ráster usar en su proyecto, considere las características de cada formato. Además de los diferentes tipos de compresión, los formatos de archivo contienen cantidades variables de color. Las características de los tres formatos de archivo de imagen ráster más comunes incluyen lo siguiente: JPG:

Este formato es adecuado para fotografías e imágenes más pequeñas utilizadas en sus proyectos de diseño web. Aunque el formato JPG se comprime con compresión con pérdida, puede ajustar la cantidad de compresión que se produce al guardar el archivo. Puede elegir un nivel de compresión de 1 a 100; por lo general, no se ve una gran pérdida de calidad de imagen con los niveles de compresión 1 a 20.

• PNG: Este formato es adecuado para gráficos más grandes utilizados en diseño web, como el logotipo o el gráfico del encabezado principal que identifica la marca y el aspecto general y visual del sitio web. PNG utiliza compresión de imágenes sin pérdida y, por lo tanto, no sufre pérdida de datos durante la compresión, creando una imagen más nítida y clara. Los archivos PNG también se pueden crear y guardar en un lienzo transparente, mientras que los archivos JPG no pueden. Los archivos JPG deben tener al menos un fondo blanco

• lienzo (fondo) o algún otro color que haya designado. GIF: La compresión de un archivo GIF es

• sin pérdida , lo que hace que la imagen sea exactamente igual a como la diseñó sin pérdida de calidad. Sin embargo, los archivos GIF están limitados a 256 colores. Para imágenes de mayor color, GIF no es el mejor formato para usar; use el formato PNG en su lugar.