Explorando tipos de imagem e formatos para web design
Video: Em que formato devo salvar a imagem? Entenda PNG JPG GIF PSD no photoshop
Conteúdo
pacotes de software de 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:
Video: Imagens em HTML - 9ª Hora
Designer gráfico: Você pode considerar-se um ilustrador porque você criar todos os gráficos que você usa 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 fotografias, 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ê estiver 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 dessas 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 entender os tipos de gráficos que você pode usar para realizar seus objetivos para seus projetos de web design. As seguintes seções 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 raster e vetores imagens
Como 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 exige um programa de edição baseadas em raster, como o PaintShop Pro da Corel ou Photoshop.
Vetor: Estas imagens são compostas de 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 podem ser preenchidos com 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 e a 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 usados para design de impressão, tais como cartões de visita, folhetos, anúncios em revistas e outdoors. Porque imagens vetoriais são compostas de curvas em vez de pixels estáticos, imagens vetoriais podem ser redimensionados sem perda de qualidade. Portanto, você pode reduzir uma imagem vetorial para o tamanho de um selo postal ou aumentar seu tamanho para caber ao lado de um grande caminhão, e a qualidade da imagem permanece a mesma. É por isso que as imagens vetoriais são ideais para logotipos e trabalhos de impressão. Tipicamente, as imagens são vetor em camadas - cada elemento da imagem tem sua própria camada - permitindo que você use seu editor de imagem vector 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 vez. No entanto, você pode começar a trabalhar com um arquivo do vetor para o seu trabalho de web design e, em seguida, salvar o arquivo final em formato raster que é otimizado para a web.
Olhando para formatos de arquivo de imagem
É importante entender os tipos de formatos de arquivo de imagem que você irá trabalhar com para projetar na web. As imagens - seja fotos ou logos - você salvar e usar em seu site deve ser tipos por causa do tamanho menor e display colorido rico arquivo 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.
Video: Web design tutorial - How to create a hero image
compressão compreensão
Quando você usa imagens raster em seu web design, eles precisam ter uma certa quantidade de compressão, ou uma diminuição no tamanho total do arquivo. compressão da imagem ocorre quando você salva 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.
O maior tamanho de 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 uns aos outros. Isso geralmente resulta em perda de qualidade de imagem do arquivo original.
Video: Photoshop Web Design Tutorials
Determinar quais tipos de arquivo para usar para seus projetos
A tabela a seguir lista seis formatos de arquivo comuns que você vai trabalhar com para web design e o tipo de arquivo e compressão. Embora os arquivos de imagem final 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 vetor principais que você provavelmente vai se deparar em seu trabalho com design gráfico:
AI: Adobe Illustrator, um arquivo proprietário desenvolvido pela Adobe para representar 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 de diferentes tipos de compressão, os formatos de arquivo contêm quantidades variáveis 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 comprime 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ê normalmente 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 ea 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 podem ser criados e salvos em uma tela transparente, enquanto que os arquivos JPG não pode. arquivos JPG deve ter pelo menos um branco tela de pintura (Background), ou alguma outra cor que você designado.
GIF: Compressão de um arquivo GIF é sem perdas, tornando a imagem exatamente como você projetou-lo sem perda de qualidade. No entanto, os arquivos GIF são limitadas a 256 cores. Para imagens de maior de cores, GIF não é o maior formato de usar-use o formato PNG em seu lugar.