Exploración de tipos y formatos de imagen para el diseño web

paquetes de software de gráficos no son baratos, por lo que antes de tomar una decisión sobre cuál usar, es necesario determinar qué tipo de obra gráfica que va a hacer para sus proyectos de diseño web. Los diseñadores Web pueden clasificarse en tres categorías estándar, y su estilo de diseño pueden caer en uno, dos, o las tres cosas:

• Diseñador grafico: Puede considerarse un ilustrador, porque se crea todos los gráficos que se utilizan desde cero. Se empieza con una pizarra en blanco, ya través de diferentes herramientas y técnicas utilizadas en el software de edición de imágenes favorito, crear sus propios gráficos únicos.

• manipulador gráfico: Usted es un maestro en el que toman gráficos o fotografías, que otra persona crea y manipularlos para su uso en sus proyectos de diseño web. Mediante el uso de diferentes herramientas y técnicas, puede hacer cosas como ajustar los colores y tamaños, e incluso cambiar las formas y posiciones de los diferentes elementos de un gráfico (sobre todo si se trabaja con gráficos vectoriales, cubierto en la siguiente sección) .

• Gráfico del consumidor: Descargar imágenes de los recursos en la web, y utiliza esas imágenes para agregar color y elementos de diseño visual para sus proyectos web.

Puede adaptarse a una, dos o las tres de estas categorías, y eso es perfectamente aceptable en el diseño de temas para los sitios web, siempre y cuando respete las restricciones de derechos de autor y licencias en los gráficos que usa (si usted es un manipulador de gráficos y / o consumidor) . Además, es importante entender los tipos de gráficos que se pueden 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 ayudarle a entender qué tipos de gráficos que necesite utilizar para diferentes propósitos.

La comparación de imágenes raster y vectoriales

Como diseñador gráfico, lo más probable es trabajar con dos tipos de gráficos - raster y vectorial. Como diseñador de páginas web, que sin duda trabajar con imágenes de mapa de bits, y es posible trabajar con imágenes vectoriales. El programa de software que se utiliza para editar y crear gráficos depende del tipo de archivo de imagen que está trabajando. Aquí está un breve resumen de las diferencias entre las imágenes de mapa de bits y vectoriales:

• raster: Estas imágenes se componen de cientos de pequeños puntos, o píxeles. Cada píxel puede ser de un color diferente, lo que permite ricos, imágenes a todo color y fotografías. Creación y edición de una imagen de trama llama a un programa de edición basada en la trama, como PaintShop Pro de Corel o Photoshop.

• Vector: Estas imágenes se componen de curvas en lugar de píxeles. las imágenes vectoriales tienen cuatro puntos vectoriales, uno en cada esquina de la imagen, y que conectan los puntos con curvas. A continuación, las curvas se pueden llenar de colores y efectos.

Las imágenes de trama

Las imágenes de trama, como fotografías y gráficos utilizados en el diseño de sitios web, el tema son los más utilizados para el diseño web y la visualización de sitios web. Las imágenes de trama no se adaptan bien si se intenta cambiar el tamaño de la imagen más grande o más pequeño, se ve una notable pérdida en la calidad de la imagen ya que los píxeles consiguen cambiar el tamaño y la imagen no es nítida. Las imágenes de trama son plano - sólo hay una capa a los elementos de imagen - por lo que es difícil (ya veces imposible) para editar algunos de los diferentes elementos de imagen dentro del archivo gráfico. Para su uso en la web, sin embargo, las imágenes de mapa de bits se cargan rápidamente, ya que por lo general tienen un tamaño de archivo pequeño y no requieren una gran cantidad de ancho de banda para transferir.

las imágenes vectoriales

las imágenes vectoriales se utilizan para el diseño de impresión, tales como tarjetas de visita, folletos, anuncios en revistas y vallas publicitarias. Como las imágenes vectoriales se componen de curvas en lugar de píxeles estáticas, imágenes vectoriales pueden cambiarse de tamaño sin pérdida de calidad. Por lo tanto, se puede reducir una imagen vectorial con el tamaño de un sello de correos o aumentar su tamaño para ajustarse al lado de un camión grande, y la calidad de la imagen sigue siendo el mismo. Es por eso que las imágenes vectoriales son ideales para logotipos y el trabajo de impresión. Por lo general, imágenes vectoriales en capas - cada elemento de la imagen tiene su propia capa - que le permite utilizar el editor de imágenes vectoriales favorito, como Illustrator, manipular y cambiar los diferentes elementos dentro del archivo de imagen vectorial.

Los tamaños de los archivos de imágenes vectoriales pueden llegar a ser muy grande, así que no son ideales para la visualización en una página web- que querrá utilizar las imágenes de mapa de bits 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 de trama que se optimiza para la web.

En cuanto a los formatos de archivo de imagen

Es importante entender los tipos de formatos de archivo de imagen que va a trabajar para el diseño de la web. Las imágenes - ya sea fotos o logotipos - guardar y utilizar en su sitio web debe ser los tipos de archivo de mapa de bits, debido a la menor tamaño de archivo y la pantalla a color rico. En las siguientes secciones, se entera de cómo la compresión afecta al tamaño de las imágenes de mapa de bits y descubrir qué tipos de formatos de archivo que puede utilizar en sus propios proyectos.

compresión de la comprensión

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

El tamaño del archivo de la imagen más grande, más tiempo tardará para esa imagen a cargar en su página web.

La compresión de archivos de imágenes se pueden utilizar dos algoritmos diferentes, dependiendo del formato de archivo que ha elegido para su archivo de imagen. Para archivos de imagen digital, la compresión ocurre en una de dos maneras:

• La compresión sin pérdidas: Todos los datos del archivo de imagen se conserva durante y después de la compresión, por lo general resulta en la pérdida de calidad de cero desde el archivo de imagen original.

• La compresión con pérdida: Esto reduce el tamaño de un archivo de imagen mediante la eliminación de ciertos bits de datos del archivo original o mediante la combinación de partes de la imagen que son similares entre sí. Esto usualmente resulta en la pérdida de calidad de imagen del archivo original.

La determinación de los tipos de archivo a utilizar para sus proyectos

La siguiente tabla enumera seis formatos de archivo comunes que trabaja para el diseño web y el tipo de archivo y compresión. Aunque los archivos de imágenes finales que guardar y utilizar en su trabajo de diseño web debe ser la trama, es posible comenzar con las imágenes del vector para editar y manipular gráficos para adaptarse a las necesidades de sus proyectos de diseño web.

* las imágenes vectoriales no experimentan compresión.

Estos son los tres principales formatos de imagen vectorial que es probable que venir a través de su trabajo con el diseño gráfico:

• AI: Adobe Illustrator, un archivo de propietario desarrollado por Adobe para la representación de imágenes vectoriales

• EPS: formato de imagen PostScript encapsulado vectorial

• CDR: CorelDRAW, un archivo gráfico propietario desarrollado por Corel para la representación de imágenes vectoriales

Al decidir qué formato de archivo de imágenes de trama a utilizar en su proyecto, tenga en cuenta las características de cada formato. Además de los diferentes tipos de compresión, los formatos de archivos contienen cantidades variables de color. Las características de los tres formatos más comunes de archivos de imagen de trama incluyen los siguientes:

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

• PNG: Este formato es adecuado para grandes gráficos utilizados en el diseño web, tales como el logotipo o gráfico de encabezado principal que identifica la marca y el aspecto general, visual de la página web. PNG utiliza la compresión de imágenes sin pérdida y, por tanto, no sufre ninguna pérdida de datos durante la compresión, creando una imagen más limpia y nítida. Los archivos PNG también se pueden crear y guardar en un lienzo transparente, mientras que los archivos JPG no puede. archivos JPG deben tener al menos un blanco lona (Fondo), o algún otro color que se haya designado.

• GIF: La compresión de un archivo GIF es sin pérdidas, representación de la imagen exactamente como usted lo diseñó sin pérdida de calidad. Sin embargo, los archivos GIF se limitan a 256 colores. Para las imágenes de mayor de color, GIF no es el mejor formato de usar-utilizar el formato PNG en su lugar.