Web design: bitmaps compreensão e gráficos vetoriais

Todos os gráficos que você encontrar na web são ou bitmap ou gráficos vetoriais. A diferença básica entre os dois é como eles são desenhados na tela. Este detalhe simples afeta tudo, desde a resolução da imagem ao tamanho e formato de arquivo.

Bitmaps: um tecido de pixels

Ao explicar as imagens bitmap, pense no Lite Brite. Aqueles de vocês que foram mimados o suficiente como as crianças brinquem com este brinquedo lembre-se que você conectou pequenos pinos coloridos em uma grade e, em seguida, ligou o interruptor para iluminar-los.

Video: 0103 Imagens Vetoriais e Matriciais

Bitmaps funciona praticamente da mesma maneira. Em termos simplistas, um bitmap gráfico é uma grade repleta de minúsculos pixels coloridos. Para desenhar uma tela gráfico de bitmap, o computador estabelece uma grade, dizer 100 por 100 pixels, e em seguida mapas uma cor para cada pixel individual. Isso é 10.000 pixels para desenhar! Lembre-se, um pixel é 1/72 de polegada de diâmetro. Portanto, se uma imagem tem uma resolução de 72 dpi e é de 100 pixels de largura, parece pouco mais de uma polegada de largura na tela do computador. A figura seguinte é típica de um mapa de bits.

as imagens vetoriais na Internet

Se você não se lembra o Lite Brite, então certamente você se lembra “ligar os pontos.” Os gráficos vetoriais empregar uma estratégia similar. A matemáticas lugares fórmula pontos na tela e, em seguida, conecta-los com caminhos. Por exemplo, para desenhar um vetor na tela gráfica em forma de triângulo, o computador simplesmente estabelece três pontos, conecta-los, e, em seguida, preenche-los com uma cor. No segundo exemplo, você pode ver um punhado de pontos - alguns com alças saindo deles. Estas alças controlar a curva do caminho entre os dois pontos - conhecido como um curva de Bézier para aqueles que a conhecem. A figura a seguir iria funcionar bem como um vetor.

Se você está pensando que vetores podem desenhar gráficos na tela muito mais eficiente do que bitmaps, você está certo. Os gráficos vetoriais ter tamanhos de arquivo extremamente pequenas, tornando-os ideais para a entrega online. Gráficos vetoriais e de bitmap, no entanto, tem seus prós e contras.

O confronto do vetor-bitmap

Como um web designer, você deve saber algumas coisas sobre os altos e baixos de vetores e bitmaps antes de empurrar o seu primeiro pixel:

• Bitmaps são altamente prevalentes na web. Todos os gráficos JPEG, GIF e PNG que você encontrar na web são bitmaps. Ironicamente, muitos destes gráficos começou a vida como vetores antes de serem convertidos em bitmaps. Por que desenhar com vetores? Porque desenhar gráficos e efeitos interessantes com vetores é muitas vezes mais rápido e mais fácil do que criar o mesmo efeito com gráficos de bitmap. É também muito mais fácil de fazer alterações em vetores, porque você só mover um ponto ea linha segue. E se você precisa para escalar o gráfico para cima ou para baixo, gráficos vetoriais pode fazê-lo sem perder qualidade de imagem. Para fazer alterações para bitmaps, muitas vezes você precisa redesenhar partes deles.

  Video: Curso Illustrator CS5 - Aula 30 - Vetor x Bitmap

• Bitmaps não pode manter a qualidade se eles são redimensionados. Bitmap fixaram resoluções. Gráficos de bitmap são dispostos em uma grade de pixels. Como o fio de galinha meia polegada-grade, a grade é um tamanho fixo. E como o fio de galinha, se você esticar a imagem, você acaba com uma bagunça contorcido. Embora seja possível usar o código HTML para inserir novas alturas e larguras para uma imagem, tudo isso faz é esticar e distorcer a sua imagem. Melhor fazer suas imagens no tamanho correto em primeiro lugar.

• Os gráficos vetoriais podem ser facilmente redimensionada. Os gráficos vetoriais, por outro lado, são resolução-independente. Porque eles são desenhados de acordo com uma fórmula matemática de pontos que colocam na tela, o tamanho da grade (Resolução) não importa. Isto significa que você pode infinitamente esmagar e esticar gráficos vetoriais para cima, para baixo e para os lados, sem perder qualidade de imagem: Eles são o Play-Doh® da web. Veja as duas figuras a seguir.

  Video: Curso Adobe Illustrator CC - Vetor Vs Bitmap Cap 4

  
  É fácil mudar as cores ou alterar a forma desta imagem vetor-tirado movendo seus pontos sem qualquer perda de qualidade.
  
  Se você esticar e esmagar uma imagem bitmap, ele começa a perder a qualidade de imagem e pode olhar embaçado.