Explorando tipos de imagem e Formatos para Web Design
pacotes de software gráficos não são baratos, por isso antes de tomar uma decisão sobre qual usar, você precisa determinar que tipo de trabalho gráfico que você vai fazer para seus projetos de web design. Web designers caem em três categorias padrão, e seu estilo de design pode cair em um, dois ou todos os três:
Menu
Designer gráfico: Você pode considerar-se um ilustrador porque você criar todos os gráficos que você usar a partir do zero. Você começa com uma lousa em branco, e através de diferentes ferramentas e técnicas usadas em seu software de edição de imagens favorito, você criar seus próprios gráficos originais.
manipulador gráfico: Você é um mestre em tomar gráficos ou fotos, que alguém criou e manipulá-los para uso em seus projetos de web design. Através da utilização de diferentes ferramentas e técnicas, você pode fazer coisas como ajustar as cores e tamanhos, e até mesmo alterar as formas e as posições dos diferentes elementos de um gráfico (especialmente se você está trabalhando com gráficos vetoriais, coberto na próxima seção) .
consumidor Gráfico: Você download de imagens a partir de recursos na web, e você usar essas imagens para adicionar cor e elementos de design visual para seus projetos de site.
Você pode encaixar um, dois ou todos os três destas categorias, e isso é perfeitamente aceitável ao projetar temas para sites, desde que você respeitar restrições de copyright e licenciamento em gráficos que você usa (se você é um manipulador gráficos e / ou consumidor) . Além disso, é importante compreender os tipos de gráficos que você pode usar para realizar seus objetivos para seus projetos de web design. As seções seguintes cobrem diferentes tipos de gráficos e formatos de arquivo para ajudar você a entender quais tipos de gráficos que você precisa para usar para fins diferentes.
Comparando vetoriais e raster, imagens
Como um designer gráfico, você provavelmente vai trabalhar com dois tipos de gráficos - raster e vetor. Como um web designer, você definitivamente vai trabalhar com imagens raster, e você pode trabalhar com imagens vetoriais. O programa de software que você usa para editar e criar gráficos depende do tipo de arquivo de imagem que você está trabalhando. Aqui está um breve resumo das diferenças entre as imagens raster e vetores:
raster: Estas imagens são compostas de centenas de pequenos pontos, ou píxeis. Cada pixel pode ser uma cor diferente, permitindo imagens e fotografias ricas e coloridas. Criar e editar uma imagem raster apela a um programa de edição baseados em raster, tais como PaintShop Pro da Corel ou Photoshop.
Vetor: Estas imagens são constituídas por curvas em vez de pixels. as imagens vetoriais têm quatro pontos do vetor, um em cada canto da imagem, e você ligar os pontos com curvas. Em seguida, as curvas pode ser enchido com as cores e efeitos.
As imagens raster
As imagens raster, tais como fotografias e gráficos utilizados no projeto do tema website, são mais frequentemente usado para web design e exibição em sites. As imagens raster não escala bem se você tentar redimensionar a imagem maior ou menor, você vê uma perda notável na qualidade de imagem, porque os pixels se redimensionado ea imagem se torna granulada. As imagens raster são plano - há apenas uma camada para os elementos de imagem - o que torna difícil (e às vezes impossível) para editar alguns dos diferentes elementos de imagem dentro do arquivo gráfico. Para uso na web, no entanto, imagens raster carga rapidamente, porque eles geralmente têm um tamanho de arquivo pequeno e não exigem muita largura de banda para transferir.
as imagens vetoriais
as imagens vetoriais são utilizados para design de impressão, tais como cartões de visita, brochuras, anúncios em revistas e outdoors. Como as imagens vetoriais são compostas de curvas, em vez de pixels estáticos, imagens vetoriais podem ser redimensionadas sem qualquer perda de qualidade. Portanto, é possível reduzir uma imagem de vector para o tamanho de um selo ou aumentar o seu tamanho para caber ao lado de um grande camião, e a qualidade da imagem continua a ser a mesma. É por isso que as imagens vetoriais são ideais para logotipos e trabalhos de impressão. Normalmente, as imagens vetoriais são em camadas - cada elemento da imagem tem sua própria camada - permitindo que você use seu editor de imagem do vetor favorito, como o Illustrator, para manipular e alterar os diferentes elementos dentro do arquivo de imagem do vetor.
Os tamanhos de imagens vetoriais de arquivos podem ficar muito grande, por isso eles não são ideais para exibir em um site-você vai querer usar imagens raster em seu lugar. No entanto, você pode começar a trabalhar com um arquivo do vetor para o seu trabalho de web design e salve o arquivo final em formato raster que é otimizado para a web.
Olhando para formatos de arquivo de imagem
É importante compreender os tipos de formatos de arquivo de imagem que você irá trabalhar com para projetar na web. As imagens - sejam fotos ou logos - você salvar e usar em seu site deve ser tipos por causa do tamanho de arquivo menor e exibição de cores ricas de arquivos raster. Nas seções seguintes, você descobre como a compactação afeta o tamanho das imagens raster e descobrir que tipos de formatos de arquivo que você pode usar em seus próprios projetos.
compressão de entendimento
Quando você usa imagens raster em sua web design, eles precisam ter uma certa quantidade de compressão, ou uma diminuição no tamanho total do ficheiro. compressão da imagem ocorre quando você salvar um arquivo de imagem raster como JPG, GIF ou PNG. Compactar um arquivo diminui o tamanho do arquivo de imagem para que as cargas de imagem mais rápido em uma página web.
A maior o tamanho do arquivo de imagem, o que leva mais tempo para essa imagem para carregar na sua página web.
Comprimir ficheiros de imagem pode usar dois algoritmos diferentes, dependendo do formato de arquivo que você escolheu para o seu arquivo de imagem. Para arquivos de imagem digital, a compressão acontece em uma de duas maneiras:
compressão sem perdas: Todos os dados do arquivo de imagem é mantida durante e após a compressão, geralmente resultando em zero, perda de qualidade do arquivo de imagem original.
A compressão com perdas: Isto reduz o tamanho de um ficheiro de imagem através da remoção de certos bits de dados a partir do ficheiro original, ou através da combinação de partes da imagem que são semelhantes um ao outro. Isso geralmente resulta em perda de qualidade de imagem do arquivo original.
Determinar quais tipos de arquivo para usar para seus projetos
A tabela a seguir lista seis formatos de arquivo comuns que você vai trabalhar para web design e o tipo de arquivo e compressão. Embora os arquivos de imagem finais que você salvar e usar em seu trabalho de web design deve ser raster, você pode começar com imagens vetoriais para editar e manipular gráficos para atender as necessidades de seus projetos de web design.
| Image File Format | Tipo de Arquivo de Imagem | Tipo de compressão |
|---|---|---|
| JPG | raster | Com perdas |
| GIF | raster | Sem perdas |
| PNG | raster | Sem perdas |
| AI | Vetor | N / D* |
| EPS | Vetor | N / D* |
| CDR | Vetor | N / D* |
*as imagens vetoriais não experimentam compressão.
Aqui estão os três formatos de imagem vector principais que você provavelmente vai se deparar no seu trabalho com design gráfico:
AI: Adobe Illustrator, um arquivo proprietário desenvolvido pela Adobe para a representação de imagens vetoriais
EPS: formato de imagem PostScript vector encapsulado
CDR: CorelDRAW, um arquivo gráfico proprietário desenvolvido pela Corel para representar imagens vetoriais
Ao decidir o formato de arquivo de imagem raster para usar em seu projeto, considere as características de cada formato. Além disso a diferentes tipos de compressão, os formatos de arquivo conter quantidades variadas de cor. As características dos três formatos mais comuns de arquivo de imagem raster incluem o seguinte:
JPG: Este formato é adequado para fotografias e imagens menores usados em seus projetos de web design. Embora o formato JPG compressas com compressão com perdas, você pode ajustar a quantidade de compressão que ocorre quando você salvar o arquivo. Você pode escolher um nível de compressão de 1 a 100- você geralmente não ver uma grande quantidade de imagem Perda de qualidade com níveis de compressão de 1 a 20.
PNG: Este formato é adequado para gráficos maiores usados em web design, como o logotipo ou cabeçalho gráfico principal que identifica a marca e a aparência geral, visual do site. PNG utiliza compressão de imagem sem perdas e, portanto, não sofre nenhuma perda de dados durante a compressão, criando uma imagem mais limpa, mais nítida. Os arquivos PNG também pode ser criado e gravado em uma tela transparente, enquanto que os arquivos JPG não pode. arquivos JPG deve ter pelo menos um branco lona (Background), ou de outra cor que você designado.
GIF: A compressão de um arquivo GIF é sem perdas, tornando a imagem exatamente como você desenhou-lo sem perda de qualidade. No entanto, os arquivos GIF são limitados a 256 cores. Para imagens de maior de cores, GIF não é o maior formato de usar-use o formato PNG em seu lugar.