Práticas recomendadas para a criação de gráficos da Web

O Illustrator fornece uma grande variedade de ferramentas para criar layout de páginas da Web, ou criar e otimizar gráficos da Web. Por exemplo, use cores seguras para Web, equilibre a qualidade da imagem com o tamanho do arquivo e escolha o mesmo formato de arquivo para seu gráfico. Gráficos da Web podem tirar proveito de fatias e mapas de imagem, e você pode usar várias opções de otimização para garantir a exibição satisfatória dos seus arquivos na Web.

Ao projetar gráficos para a Web, você precisa levar em consideração fatores diferentes daqueles que são aplicáveis ao design de gráficos para impressão. 

Para ajudá-lo a tomar decisões inteligentes sobre gráficos da Web, lembre-se das três orientações a seguir:

Use cores seguras para a Web.

A cor é frequentemente um aspecto essencial de um trabalho artístico. Entretanto, as cores que você vê na sua prancheta não são necessariamente as cores que aparecerão no navegador da Web do sistema de outro usuário. É possível evitar o pontilhamento (o método de simular cores não disponíveis) e outros problemas de cor tomando duas medidas preventivas ao criar gráficos da Web. Em primeiro lugar, sempre trabalhe no modo de cores RGB. Em segundo lugar, use uma cor segura para a Web.

Equilibre a qualidade da imagem com o tamanho do arquivo.

A criação de arquivos de gráficos de pequeno tamanho é essencial para a distribuição de imagens na Web. Com tamanhos de arquivo menores, os servidores da Web podem armazenar e transmitir imagens com mais eficiência, e os visualizadores podem fazer o download de imagens mais rapidamente. É possível visualizar o tamanho e o tempo de download estimado de um gráfico da Web na caixa de diálogo Salvar para Web e dispositivos.

Selecione o melhor formato de arquivo para o seu gráfico.

Diferentes tipos de gráficos precisam ser salvos em diferentes formatos de arquivos para otimizar sua exibição e criar um tamanho de arquivo adequado para a Web. Para obter mais informações sobre formatos específicos, consulte Opções de otimização de gráficos da Web.

Sobre o modo de visualização de pixels

Para permitir que Web designers criem designs precisos para pixels, a propriedade de alinhamento a pixels foi adicionada no Illustrator. Quando a propriedade de alinhamento a pixels está habilitada para um objeto, todos os segmentos horizontais e verticais nesse objeto são alinhados à grade de pixels, o que proporciona uma aparência nítida aos traçados. Em qualquer transformação, desde que essa propriedade esteja definida para o objeto, este é realinhado à grade de pixels de acordo com suas novas coordenadas. É possível habilitar essa propriedade, selecionando a opção Alinhar à grade de pixels no painel Transformar. O Illustrator também fornece a opção Alinhar novos objetos à grade de pixels em nível de documento, que é habilitada por padrão para documentos da Web. Com essa propriedade habilitada, todos os novos objetos desenhados terão a propriedade de alinhamento a pixels definida por padrão.

Para obter mais informações, consulte Desenhar caminhos alinhados a pixels para fluxos de trabalho da Web.

Quando um trabalho artístico é salvo em um formato de bitmap, como JPEG, GIF ou PNG, o Illustrator rasteriza-o a 72 pixels por polegada. É possível visualizar como os objetos aparecerão quando forem rasterizados, escolhendo Exibir > Visualização de pixels. Isso é especialmente útil quando você deseja controlar precisamente o posicionamento, o tamanho e a suavização de serrilhado de objetos em um gráfico rasterizado .

Para compreender como o Illustrator divide objetos em pixels, abra um arquivo que contenha objetos de vetor, escolha Exibir > Visualização de pixels e amplie o trabalho artístico para poder visualizar seus pixels individuais. O posicionamento dos pixels é determinado pela grade de pixels que divide a prancheta em incrementos de 1 ponto (1/72 polegada). É possível visualizar a grade de pixels se você der zoom de 600%. Se você mover, adicionar ou transformar um objeto, este irá aderir à grade de pixels. Como resultado, qualquer suavização de serrilhado aplicada às bordas "aderidas" do objeto (geralmente, as bordas superiores e esquerdas) desaparece. Agora, cancele a seleção do comando Exibir > Aderir ao pixel e mova o objeto. Dessa vez, você poderá posicionar o objeto entre as linhas de grade. Perceba como isso afeta a suavização de serrilhado do objeto. Como você pode ver, fazer ajustes muito pequenos podem afetar a forma como o objeto é rasterizado.

Dicas de criação de imagens para dispositivos móveis usando o Illustrator

Para otimizar o conteúdo gráfico para dispositivos móveis, salve a arte-final criada no Illustrator em qualquer formato SVG, incluindo o SVG-t, que é projetado especificamente para dispositivos móveis.

Use as seguintes dicas para garantir que as imagens criadas no Illustrator sejam exibidas corretamente em dispositivos móveis:

• Use o padrão SVG para criar conteúdo. Usar o SVG para publicar elementos gráficos vetoriais em dispositivos móveis resulta em um tamanho de arquivo menor, independência de exibição, controle de cores superior, recurso de zoom e texto editável (no código-fonte). Além disso, como o SVG tem base em XML, é possível incorporar interatividade às imagens, como o realce, as dicas de ferramentas, os efeitos especiais, o áudio e a animação.

• Trabalhe nas dimensões finais do dispositivo móvel de destino desde o início. Embora o SVG seja dimensionável, o trabalho no tamanho correto garante que os elementos gráficos finais sejam otimizados em qualidade e tamanho para o dispositivo de destino.

• Defina o modo de cor do Illustrator para RGB. SVG é visualizado em dispositivos de exibição rasterizados de RGB, como um monitor.

• Para reduzir o tamanho do arquivo, experimente reduzir o número de objetos (incluindo grupos) ou torná-los menos complexos (menos pontos). Usar menos pontos reduz significativamente a quantidade de informações textuais necessárias para descrever a arte-final no arquivo SVG. Para reduzir pontos, selecione Objeto > Demarcador > Simplificar e experimente combinações diferentes para encontrar um equilíbrio entre a qualidade e o número de pontos.

• Use símbolos quando possível. Os símbolos definem os vetores que descrevem um objeto uma vez, em vez de diversas vezes. Isso é útil se a arte-final contiver objetos, como planos de fundo de botões que são reutilizados.

• Ao animar elementos gráficos, limite o número de objetos usados e experimente reutilizar objetos sempre que possível para reduzir o tamanho do arquivo. Aplique animações a grupos de objetos, em vez de aplicá-las a objetos individuais para evitar a repetição de códigos.

• Considere o uso de SVGZ, a versão gzip compactada de SVG. A compactação pode reduzir drasticamente o tamanho do arquivo, dependendo do conteúdo. Geralmente, o texto pode ser muito compactado, mas o conteúdo com codificação binária, como rasterizados incorporados (arquivos JPEG, PNG ou GIF), não podem ser muito compactados. Os arquivos SVGZ podem ser descompactados por qualquer aplicativo que expanda arquivos compactados com gzip. Para usar o SGVZ com êxito, verifique se o dispositivo móvel pode descompactar arquivos gzip.