Guia do Usuário Cancelar

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

  1. Guia do Usuário do Illustrator
  2. Conheça o Illustrator
    1. Introdução ao Illustrator
      1. Novidades no Illustrator
      2. Perguntas frequentes
      3. Requisitos de sistema do Illustrator
      4. Illustrator para Apple Silicon
    2. Área de trabalho
      1. Princípios da área de trabalho
      2. Crie documentos
      3. Ferramentas
      4. Personalizar atalhos de teclado
      5. Pranchetas
      6. Personalizar a área de trabalho
      7. Painel Propriedades
      8. Definir preferências
      9. Área de trabalho sensível ao toque
      10. Suporte ao Microsoft Surface Dial no Illustrator
      11. Operações de recuperação, desfazer e automação
      12. Girar visualização
      13. Guias, grades e réguas
      14. Acessibilidade no Illustrator
      15. Modo de segurança
      16. Exibir a ilustração
      17. Usar a Touch Bar com o Illustrator
      18. Arquivos e modelos
      19. Sincronizar configurações usando a Adobe Creative Cloud
    3. Ferramentas no Illustrator
      1. Seleção
        1. Visão geral
        2. Seleção
        3. Seleção direta
        4. Laço
        5. Prancheta
      2. Navegação
        1. Visão geral
        2. Aplicar Zoom
        3. Girar visualização
      3. Pintura
        1. Visão geral
        2. Degradê
        3. Construtor de formas
      4. Texto
        1. Visão geral
        2. Texto
        3. Texto no caminho
  3. Illustrator no iPad
    1. Introdução ao Illustrator no iPad
      1. Visão geral do Illustrator no iPad
      2. Perguntas frequentes sobre o Illustrator no iPad
      3. Requisitos de sistema | Illustrator no iPad
      4. O que você pode ou não fazer no Illustrator no iPad
    2. Área de trabalho
      1. Área de trabalho do Illustrator no iPad
      2. Atalhos de toque e gestos
      3. Atalhos de teclado para o Illustrator no iPad
      4. Gerenciar as configurações do seu aplicativo
    3. Documentos
      1. Trabalhar com documentos no Illustrator no iPad
      2. Importar documentos do Photoshop e do Fresco
    4. Selecionar e organizar objetos
      1. Criar objetos repetidos
      2. Mesclar objetos
    5. Desenho
      1. Desenhar e editar caminhos
      2. Desenhar e editar formas
    6. Texto
      1. Trabalhar com texto e fontes
      2. Criar designs de texto em um caminho
      3. Adicionar suas próprias fontes
    7. Trabalhar com imagens
      1. Vetorizar imagens rasterizadas
    8. Cor
      1. Aplicar cores e degradês
  4. Documentos na nuvem
    1. Noções básicas
      1. Trabalhar com documentos na nuvem do Illustrator
      2. Compartilhar e colaborar em documentos na nuvem do Illustrator
      3. Atualizar armazenamento na nuvem para o Adobe Illustrator
      4. Documentos na nuvem do Illustrator | Perguntas comuns
    2. Solução de problemas
      1. Solucionar problemas ao criar ou salvar documentos na nuvem no Illustrator
      2. Solucionar problemas de documentos na nuvem do Illustrator
  5. Adicionar e editar conteúdo
    1. Desenho
      1. Noções básicas sobre desenho
      2. Editar caminhos
      3. Desenhar artes com pixels perfeitos
      4. Desenhar com a ferramenta Caneta, Curvatura ou Lápis
      5. Desenhar linhas e formas simples
      6. Traçado de imagem
      7. Simplificar um caminho
      8. Definir grades de perspectiva
      9. Ferramentas de simbolismo e conjuntos de símbolos
      10. Ajustar segmentos de caminho
      11. Criar uma flor em cinco etapas fáceis
      12. Desenho em perspectiva
      13. Símbolos
      14. Desenhar caminhos alinhados a pixels para fluxos de trabalho da Web
    2. Efeitos 3D e materiais do Adobe Substance
      1. Sobre efeitos 3D no Illustrator
      2. Criar gráficos 3D
      3. Criar objetos 3D
      4. Criar texto 3D
    3. Cor
      1. Sobre cores
      2. Selecionar cores
      3. Usar e criar amostras
      4. Ajustar cores
      5. Usar o painel Temas do Adobe Color
      6. Grupos de cores (harmonias)
      7. Painel Temas do Color
      8. Recolorir sua ilustração
    4. Pintura
      1. Sobre pintura
      2. Pintura com preenchimentos e traçados
      3. Grupos de Pintura em tempo real
      4. Gradientes
      5. Pincéis
      6. Modos de transparência e mistura
      7. Aplicar traçado a um objeto
      8. Criar e editar padrões
      9. Malhas
      10. Padrões
    5. Selecionar e organizar objetos
      1. Selecionar objetos
      2. Camadas
      3. Agrupar e expandir objetos
      4. Mover, alinhar e distribuir objetos
      5. Empilhar objetos    
      6. Bloquear, ocultar e excluir objetos
      7. Duplicar objetos
      8. Girar e refletir objetos
    6. Remodelar objetos
      1. Cortar imagens
      2. Transformar objetos
      3. Combinar objetos
      4. Cortar, dividir e aparar objetos
      5. Distorção de marionete
      6. Dimensionar, inclinar e distorcer objetos
      7. Mesclar objetos
      8. Remodelar usando envelopes
      9. Remodelar objetos com efeitos
      10. Criar formas com as ferramentas Shaper e Construtor de formas
      11. Trabalhar com Cantos ativos
      12. Fluxos de trabalho de remodelagem aprimorados com suporte para toque
      13. Editar máscaras de corte
      14. Formas em tempo real
      15. Criar formas usando a ferramenta Construtor de formas
      16. Edição global
    7. Texto
      1. Criar texto
      2. Fontes e tipografia
      3. Formatar texto
      4. Importar e exportar texto
      5. Formatar parágrafos
      6. Caracteres especiais
      7. Criar texto em um caminho
      8. Estilos de caracteres e parágrafos
      9. Guias
      10. Texto e tipo
      11. Localizar fontes ausentes (fluxo de trabalho do Typekit)
      12. Atualizar texto do Illustrator 10
      13. Texto árabe e hebraico
      14. Fontes | Perguntas frequentes e dicas de solução de problemas
      15. Criar efeito de texto em 3D
      16. Designs tipográficos criativos
      17. Dimensionar e girar texto
      18. Espaçamento entre linhas e caracteres
      19. Hifenização e quebras de linha
      20. Aprimoramentos de texto
      21. Dicionários de verificação ortográfica e idiomas
      22. Formatar caracteres asiáticos
      23. Compositores para scripts asiáticos
      24. Criar designs de texto com objetos de mistura
      25. Criar um pôster de texto usando o Traçado da imagem
    8. Criar efeitos especiais
      1. Trabalhar com efeitos
      2. Estilos de gráfico
      3. Criar uma sombra projetada
      4. Atributos de aparência
      5. Criar croquis e mosaicos
      6. Sombras projetadas, brilhos e difusão
      7. Resumo de efeitos
    9. Gráficos da Web
      1. Práticas recomendadas para a criação de gráficos da Web
      2. Gráficos
      3. SVG
      4. Criar animações
      5. Fatias e mapas de imagens
  6. Importar, exportar e salvar
    1. Importar
      1. Importar arquivos de arte
      2. Importar imagens de bitmap
      3. Importar trabalho artístico do Photoshop
      4. Inserção de vários arquivos  | Illustrator CC
      5. Desincorporar imagens
      6. Importar arquivos Adobe PDF
      7. Importar arquivos EPS, DCS e AutoCAD
      8. Informações sobre Vínculos
    2. Bibliotecas da Creative Cloud no Illustrator 
      1. Bibliotecas da Creative Cloud no Illustrator
    3. Salvar
      1. Salvar o trabalho artístico
    4. Exportar
      1. Usar arte do Illustrator no Photoshop
      2. Exportar o trabalho artístico
      3. Coletar ativos e exportar em lotes
      4. Compactar arquivos
      5. Criar arquivos Adobe PDF
      6. Extrair CSS | Illustrator CC
      7. Opções para Adobe PDF
      8. Informações de arquivos e metadados
  7. Impressão
    1. Preparar para imprimir
      1. Configurar documentos para impressão
      2. Alterar o tamanho e a orientação da página
      3. Especificar marcas de corte para aparar ou alinhar
      4. Introdução à tela grande
    2. Impressão
      1. Superimposição
      2. Imprimir com gerenciamento de cores
      3. Impressão PostScript
      4. Predefinições de impressão
      5. Marcas da impressora e sangrias
      6. Imprimir e salvar arte transparente
      7. Trapping
      8. Imprimir separações de cores
      9. Imprimir gradientes, malhas e misturas de cores
      10. Superimposição de branco
  8. Automatizar tarefas
    1. Mesclagem de dados usando o painel Variáveis
    2. Automação com scripts
    3. Automação com ações
  9. Solução de problemas 
    1. Problemas de falha
    2. Recuperar arquivos após falha
    3. Problemas em arquivos
    4. Problemas no driver de dispositivo de GPU
    5. Problemas no dispositivo Wacom
    6. Problemas em arquivos DLL
    7. Problemas na memória
    8. Problemas no arquivo de preferências
    9. Problemas em fontes
    10. Problemas na impressora
    11. Compartilhar relatório de falha com a Adobe

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.

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.

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.

Logotipo da Adobe

Fazer logon em sua conta