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 e trabalhar com o Device Central para garantir a exibição satisfatória dos seus arquivos na Web.

Sobre gráficos da 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.

Observação:

Existem vários modelos do Illustrator criados especificamente para a Web, incluindo páginas e banners da Web. Selecione Arquivo > Novo a partir do modelo, para escolher um modelo.

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áficorasterizado.

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 zoomde 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, fazerajustesmuito pequenos podem afetar a forma como o objeto é rasterizado.

Visualização de pixels desativada (acima) e ativada (abaixo)
Visualização de pixels desativada (acima) e ativada (abaixo)

Observação:

A grade de pixels é sensível à ordem da régua (0,0). Mover a origem da régua irá alterar a forma como o Illustrator rasteriza o trabalho artístico.

Utilização do Adobe Device Central com o Illustrator

O Device Central habilita os usuários do Illustrator a visualizarem a aparência dos arquivos do Illustrator em uma variedade de dispositivos móveis.

Por exemplo, um artista gráfico pode usar o Illustrator para projetar um papel de parede para celulares. Depois de criar o arquivo, o artista pode facilmente testar o arquivo em uma ampla variedade de telefones. Em seguida, o artista pode fazer ajustes, como alterar o arquivo para que ele tenha uma boa aparência em diversos telefones, ou criar dois arquivos separados que abrangem um intervalo de tamanhos de tela de telefones populares.

Acessar o Illustrator a partir do Adobe Device Central

  1. Inicie o Device Central.
  2. Selecione Arquivo > Novo documento no > Illustrator.

    No Device Central, o painel Novo Documento é exibido com as opções corretas para criar um novo documento móvel no aplicativo selecionado.

  3. Faça qualquer alteração necessária, como selecionar uma versão Player, tamanho de exibição, versão Flash ou tipo de conteúdo.
  4. Siga um destes procedimentos:
    • Selecione a opção Personalizar Tamanho para Todos os Dispositivos Selecionados e adicione uma largura e uma altura.

    • Selecione um dispositivo ou vários dispositivos na lista Conjuntos de dispositivos ou Dispositivos disponíveis.

  5. Se forem selecionados vários dispositivos, o Device Central selecionará um tamanho. Se quiser escolher um tamanho diferente, clique em outro dispositivo ou conjunto de dispositivos.
  6. Clique em Criar.

    O aplicativo selecionado é aberto com o novo documento móvel pronto para ser editado.

Criação de conteúdo móvel com o Adobe Device Central e o Illustrator

  1. No Illustrator, selecione Arquivo > Novo.
  2. Em Novo Perfil de Documento, selecione Móvel e Dispositivos.
  3. Clique em Device Central para fechar a caixa de diálogo no Illustrator e abrir o Device Central.
  4. Selecione um tipo de conteúdo.

    A lista Dispositivos Disponíveis à esquerda é atualizada e mostra os dispositivos que oferecem suporte o tipo de conteúdo selecionado.

  5. No Device Central, selecione um dispositivo, vários dispositivos ou um conjunto de dispositivos.

    Com base no dispositivo selecionado e no tipo de conteúdo, o Device Central sugere um ou vários tamanhos de tela de pintura a serem criados. Para criar um documento por vez, selecione um tamanho de documento (ou selecione a opção Tamanho Personalizado para Todos os Dispositivos Selecionados e insira valores personalizados para Largura e Altura).

  6. Clique em Criar.

    Um arquivo AI em branco do tamanho especificado é aberto no Illustrator. Um novo arquivo tem os seguintes parâmetros definidos por padrão:

    • Modo de Cor: RGB

    • Resolução de Rasterização: 72 ppi

  7. Preencha o arquivo AI em branco com conteúdo no Illustrator.
  8. Ao concluir, selecione Arquivo > Salvar para Web e dispositivos.
  9. Na caixa de diálogo Salvar para a Web e Dispositivos, selecione o formato desejado e altere outras configurações de exportação conforme desejado.
  10. Clique no Device Central.

    Um arquivo temporário com configurações de exportação especificadas é exibido na guia Device Central Emulator. Para continuar o teste, clique duas vezes no nome de um dispositivo diferente nas listas Conjuntos de dispositivos ou Dispositivos disponíveis.

  11. Se, depois de visualizar o arquivo no Device Central, for necessário fazer alterações no arquivo, volte ao Illustrator.
  12. Na caixa de diálogo Salvar para a Web e Dispositivos do Illustrator, faça ajustes, como a seleção de um formato ou de uma qualidade diferente para exportação.
  13. Para testar o arquivo novamente com as novas configurações de exportação, clique no Device Central.
  14. Quando estiver satisfeito com os resultados, clique em Salvar na caixa Salvar para a Web e Dispositivos do Illustrator.

    Observação:

    Para abrir o Device Central no Illustrator, em vez de criar e testar um arquivo, selecione Arquivo > Device Central.

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. Normalmente, 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.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online