Introdução

Os assuntos que serão tratados nesta disciplina fazem parte de uma área da informática conhecida como Web Design. Essa área está relacionada com a computação gráfica e é fortemente utilizada na elaboração de interfaces gráficas digitais, layout de páginas na Web, material de publicidade e marketing, entre outros. Toda a estrutura do curso será abordada utilizando o Para baixar a versão mais recente do Inkscape, disponível no site da Inkscape.

Objetivos

Conhecendo os principais formatos de representações vetoriais para Web

As imagens digitais estão muito presentes em nossas vidas, através de fotos nas redes sociais, emojis em programas de bate-papo, páginas Web, outdoors nas ruas, entre outros. Essas imagens podem ter como ponto de origem um computador (geralmente esse tipo de imagem é vetorial) ou um dispositivo eletrônico como por exemplo um tablet, celular ou câmera fotográfica digital (na maioria das vezes esse tipo de imagem é bitmap.

Imagens Bitmap

As imagens bitmap são também conhecidas como imagens matriciais ou raster. Esse tipo de imagem recebe esse nome, bitmap (que significa mapa de bits), porque são imagens que são constituídas de conjuntos de bits. Elas são compostas por vários pixels.

Mas o que são pixels?

A palavra pixel é a abreviação da expressão picture element (que significa elemento de uma imagem) e, como o próprio nome diz, representa o menor elemento que compõe uma imagem digital, ou seja, quando as imagens bitmaps são ampliadas é possível observar que os pixels são diversos quadrados muito pequenininhos (pontinhos) que juntos formam uma determinada imagem, como um mosaico composto por várias peças bem pequenas.

Dica importante! Resumidamente, um pixel é considerado a menor parte de uma imagem.

Fonte: Adaptado de https://www.palamin.com.br/post/as-diferen%C3%A7as-entre-arquivos-bitmap-e-vetor

Descrição da Imagem: Imagem bitmap em alta resolução de duas peras verdes, uma caída e outra em pé. A pera da esquerda possui um círculo com contorno azul ampliando uma parte dela, de forma a salientar os pixels existentes.

Diferentes perspectivas de uma imagem bitmap

a
a

(a)imagem de um círculo (b) imagem de alguns pixels do círculo
Fonte: https://www.rickardo.com.br/apresentacoes/!AP_IntroMulti_FormatDig_bx.pdf

Descrição da Imagem: Duas figuras identificadas pelas letras a e b. A primeira figura, letra a, apresenta um círculo inserido em uma matriz, contornado por outro círculo laranja. Já a segunda figura, letra b, mostra uma parte do círculo.

Imagens Vetoriais

Diferentemente das imagens bitmaps que são compostas por pixels, as imagens vetoriais são constituídas de cálculos ou expressões matemáticas que produzem figuras por meio de formas geométricas, como por exemplo, retângulos, círculos, triângulos, polígonos, linhas, elipses, pontos, além de outras formas geométricas irregulares que são mais complexas.

importante saber!

Imagem vetorial, vetorizada, gráfico vetorial, forma vetorial, objeto vetorial ou desenho vetorial significam o mesmo tipo de imagem.

Fonte: https://www.palamin.com.br/post/as-diferen%C3%A7as-entre-arquivos-bitmap-e-vetor

Descrição da Imagem: Imagem vetorial de três peras verdes, duas em pé e uma caída. Observando da direita para a esquerda, a primeira pera está inteira, a segunda pera está partida pela metade e a última pera está partida, mostrando apenas 1/4 dela. A pera do meio possui um círculo com contorno azul ampliando uma parte dela, de forma a salientar que mesmo após ampliá-la esta não sofre deformidade.

É bom saber que!

As equações ou objetos matemáticos que produzem as formas geométricas das imagens vetoriais são chamados de vetores matemáticos. Esses vetores descrevem uma imagem conforme as características geométricas dela.

Desenho vetorial da igreja do país gratuito Fonte: https://pt.vecteezy.com/arte-vetorial/88447-desenho-vetorial-da-igreja-do-pais-gratuito

Descrição da Imagem: Imagem vetorial de uma igreja localizada em um campo com árvores e gramado, em um dia ensolarado com uma pipa sendo empinada no céu.

Imagens Vetoriais - coordenadas

As formas geométricas das imagens vetoriais possuem coordenadas e pontos de controle, também chamados de alças. As coordenadas definem a posição no espaço, os pontos de controle estabelecem quais são os limites de manipulação das formas geométricas, além de determinar as curvas Béziers.

Curvas Bézier

Exemplos da aplicação das curvas de Bézier Fonte: Adaptado de https://www.maxwell.vrac.puc-rio.br/26530/26530.PDF

Descrição da Imagem: Imagem vetorial das letras a, g e r em minúsculo, com as curvas de Bézier.