Exploración de los tipos de imágenes y formatos para el diseño web

Paquetes de software de gráficos no son baratos, así 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 se dividen 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 a partir de cero. Se comienza con una pizarra en blanco, ya través de diferentes herramientas y técnicas utilizadas en su 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 fotos, que otra persona crea y manipularlas 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) .

• Consumidor gráfico: 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 uno, dos o los 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 de licencia 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 metas para sus proyectos de diseño web. Las siguientes secciones cubren diferentes tipos de gráficos y formatos de archivos para ayudarle a entender qué tipos de gráficos que usted necesita utilizar para diferentes propósitos.

Comparando raster y vectoriales imágenes

Como diseñador gráfico, lo más probable es trabajar con dos tipos de gráficos - raster y vectoriales. Como diseñador de páginas web, que sin duda trabajar con imágenes de mapa de bits, y puede 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 requiere 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 con 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 en los sitios web. Las imágenes de trama no escalan bien si intenta cambiar el tamaño de la imagen más grande o más pequeño, se ve una pérdida notable en la calidad de la imagen, porque los píxeles consiguen cambiar el tamaño y la imagen no es nítida. Las imágenes de trama son apartamento - sólo hay una capa a los elementos de imagen - lo que hace difícil (ya veces imposible) para editar algunos de los diferentes elementos de imagen en el archivo gráfico. Para su uso en la web, sin embargo, las imágenes de mapa de bits de carga rápida, 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 puede cambiar el 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 los logotipos y el trabajo de impresión. Típicamente, las imágenes vectoriales son capas - cada elemento de la imagen tiene su propia capa - lo que le permite utilizar su editor de imágenes vectoriales favorito, como Illustrator, para 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 un sitio web- que querrá utilizar las imágenes de mapa de bits en su lugar. Sin embargo, usted puede comenzar a trabajar con un archivo vectorial para su trabajo de diseño web y luego guardar el archivo final en un formato raster que está optimizado para la web.

Mirando los formatos de archivo de imagen

Es importante entender los tipos de formatos de archivo de imagen que va a trabajar con para el diseño de la web. Las imágenes - ya sea fotos o logotipos - guardar y utilizar en su sitio web debe ser tipos de archivos raster debido al tamaño de archivo más pequeño y la pantalla a color rico. En las siguientes secciones, se entera de cómo la compresión afecta el 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.

Comprensión de compresión

Cuando utilice imágenes raster en el diseño de su 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. La compresión de un archivo disminuye el tamaño del archivo de imagen de modo que la imagen se carga más rápido en una página web.

Cuanto mayor sea el tamaño del archivo de imagen, más tiempo se necesita para que esa imagen para cargar en tu página web.

Comprimir 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 imágenes digitales, 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 cero de la calidad del archivo de imagen original.

• 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 que se utilizará para sus proyectos

La siguiente tabla muestra los seis formatos de archivo comunes que usted trabaja para el diseño web y el tipo de archivo y compresión. Aunque los archivos de imágenes finales que guarda y utiliza en su trabajo de diseño web debe ser de trama, puede comenzar con imágenes vectoriales para editar y manipular gráficos para satisfacer las necesidades de sus proyectos de diseño web.

* Las imágenes vectoriales no experimentan la compresión.

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

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

• EPS: Formato de imagen vectorial PostScript encapsulado

• CDR: CorelDRAW, un archivo gráfico patentado 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 de archivo más comunes de imagen de trama son los siguientes:

• JPG: Este formato es ideal para fotografías e imágenes más pequeños utilizados en sus 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. Usted puede elegir un nivel de compresión de 1 a 100- 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 gráficos más grandes utilizados en el diseño web, como el logotipo o principal cabecera gráfica que identifica a 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 lo tanto, no sufre ninguna pérdida de datos durante la compresión, la creación de una imagen más limpia, más nítida. Archivos PNG también se pueden crear y guardar en un lienzo transparente, mientras que los archivos JPG no se puede. Archivos JPG deben tener al menos un blanco lona (fondo), o algún otro color que usted ha designado.

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