Criar elementos para um site

Quer aprender os truques de como criar layouts e elementos de site bem-feitos? Você está no lugar certo!

O Adobe Illustrator fornece um ambiente de criação completo para criar elementos da Web flexíveis e fluidos. Ele oferece tudo para criar um layout da Web bem-feito e definido: gráficos vetoriais, ícones de mídia responsivos, componentes dimensionáveis, geração de CSS, exportação de SVG, wireframes e símbolos reutilizáveis.

Design de sites

Não deixe de experimentar

Adobe XD: a solução completa de interface/experiência do usuário com base em vetor da Adobe para design de sites, aplicativos para dispositivos móveis e muito mais.

Os cinco princípios para layouts da Web eficazes

Para criar uma experiência online de qualidade, preste atenção especial aos seguintes elementos de Web design:

  • Navegação fácil com poucos cliques
  • Uso otimizado e equilibrado do espaço na tela, exibição independente do dispositivo
  • Estrutura minimalista e bem-definida - uso de grades, blocos, cartões
  • Gráficos visuais atraentes e envolventes
  • Tipografia simples e artística

Antes de começar

As ilustrações criadas no Illustrator normalmente envolvem os seguintes temas de design:

  • Formas e demarcadores
  • Cores e padrões
  • Texto e fontes
  • Imagens e efeitos especiais

Quer saber mais? Consulte Componentes essenciais de um site.

Configurar um documento da Web

Para configurar um documento da Web:

  • Escolha Arquivo > Abrir. Na caixa de diálogo Novo documento, clique na guia Web. Na lista de predefinições, escolha um tipo de documento da Web que atenda às suas necessidades.
  • Visualize e baixe um modelo de amostra. 
Escolher um documento da Web
Escolher um documento da Web

Criar páginas da Web responsivas

Com a tecnologia em constante evolução, é importante criar um site que responda com facilidade em qualquer plataforma de sistema operacional, tamanho de tela e orientação de dispositivo.

Para criar um layout da Web responsivo, considere os seguintes elementos:

  • Grades e layouts flexíveis, para criar um layout de site que possa ser redimensionado para qualquer largura de tela, como desktops, tablets e dispositivos móveis.
  • Mídia dimensionável, que inclui imagens, vídeos e formatos semelhantes.
  • Consultas de mídia dinâmica, para adicionar estilos específicos a navegadores e dispositivos.

Criar um wireframe ou uma estrutura de site

Um site bem-definido e estruturado atrai mais visitantes. Ao criar um layout de site:

  • Comece com o design do wireframe do site para visualizar diferentes elementos de tela e colocá-los de maneira organizada na sua página da Web.
    Dica: você pode adicionar blocos ou cartões para facilitar a navegação e garantir um visual moderno.
  • Quando a interface do usuário de primeiro nível for criada, continue preenchendo o conteúdo e outros elementos artísticos.
Estrutura do site
Alguns modelos de site para telas diferentes

Dicas e truques para um layout da Web organizado

  • Para ter um visual mais suave, segmente o site em seções relevantes. Escolha Objeto > Fatia.
  • Use réguas, grades e guias para verificar e testar áreas de referência e ajustar elementos de tela.
    • Escolha Exibir > Guias.
    • Escolha Exibir > Mostrar grade.
    • Escolha Exibir > Réguas.
  • Para criar um contorno visual preciso, coloque objetos de retângulo ou componentes de texto na página da Web para dividir a tela em seções relevantes.
  • Enquanto você se concentra no conteúdo principal da página da Web, não se esqueça de adicionar um logotipo criativo, uma imagem principal inspiradora, um slogan, uma declaração de missão ou qualquer elemento relevante.
  • Para salvar a estrutura do site, escolha Exportar > Salvar para a Web (antigo). Você também pode escolher as fatias que deseja exibir no arquivo salvo.

Consulte também:

Fatias e mapas de imagens

Criar um banner da Web

Veiculando uma campanha de marketing para promover e anunciar produtos ou serviços no seu site? Crie um banner atraente em questão de minutos!

Para criar um banner da Web, faça o seguinte:

  • Escolha o tamanho certo do documento. Em geral, o tamanho A4 funciona bem para banners.
  • Crie um contorno de banner com a ajuda da ferramenta Retângulo e especifique as dimensões apropriadas.
  • Adicione gráficos, textos, gradientes e expresse sua criatividade o quanto quiser.
Banner da Web

Recursos relacionados

Logotipo da Adobe

Fazer logon em sua conta