Como criar um site no Illustrator

O Adobe Illustrator é um programa de design que cria gráficos vetoriais para uma ampla variedade de usos, incluindo impressão, movimentação e sites. Os gráficos vetoriais usam fórmulas matemáticas para apresentar imagens, em oposição a outros formatos, como GIFs, que usam um conjunto de pontos. Embora não tenha sido projetado especificamente como um programa de web design, o Illustrator possui ferramentas avançadas para exportar gráficos criados dentro do programa para uso em páginas da web e também gera o código necessário para exibição em um navegador.

Passo 1

Crie um documento do Illustrator com 960 pixels de largura na altura escolhida, com base no conteúdo e no design que você tem em mente. Um site com 960 pixels de largura se ajusta à largura de resolução de monitor mais popular de 1.024 pixels quando a barra de rolagem e as bordas da janela são levadas em consideração.

Etapa 2

Crie um esboço desenhado à mão do design visual do seu site, se você ainda não o fez. Isso fornecerá uma referência útil para criar no Illustrator.

Etapa 3

Crie seu design usando as ferramentas de imagem e texto para um cabeçalho elaborado. Se você incluir nele textos como mensagens em um blog, deixe o espaço nessa área em branco ou crie uma borda que o rodeia para um contorno simples.

Etapa 4

Adicione guias ao seu design para demarcar as diferentes seções do design. Isso é muito importante porque você usará esses guias para fazer cortes, que definirão as arestas dos elementos em seu site. Os guias podem ajudá-lo a alinhar os objetos com precisão. Clique na régua vertical ou horizontal e arraste o mouse para onde deseja que o guia seja posicionado.

Etapa 5

Verifique novamente a localização dos seus guias quanto à precisão e exatidão. Arraste-os ainda mais, se necessário, para separar cada item, como as imagens de navegação que serão os links para o seu site.

Passo 1

Selecione “Objeto” no menu e selecione “Recortar” e “Criar a partir de guias”. Ao criar as guias, você verá pequenas caixas pretas dentro de cada corte com o número correspondente. Selecione “Arquivo” no menu e, em seguida, “Salvar para web e dispositivos”. Selecione a ferramenta para selecionar o corte, que é o segundo ícone no menu de ferramentas localizado à direita da tela, abaixo do ícone de mão. Selecione todos os cortes.

Etapa 2

Selecione as configurações de otimização nas opções no lado direito da tela. Eles podem escolher configurações pré-estabelecidas ou criar um perfil personalizado, dependendo se você deseja que suas imagens sejam arquivos JPEG, GIF ou PNG. Você também pode ajustar a qualidade das imagens.

Etapa 3

Visualize as diferentes configurações clicando nas guias “2 páginas por folha” e “4 páginas por folha”. No canto inferior de cada visualização, você pode ver as informações de otimização, como tamanho do arquivo e tempo de renderização do navegador. Clique na tecla “Salvar”. Decida se você deseja salvar suas imagens e código e navegue até essa área usando o “Onde”.

Etapa 4

Escolha o formato do seu trabalho. Se você dominar XXXX e quiser apenas as imagens, porque adicionará um código posteriormente, selecione “Somente imagens”. Se você é iniciante ou prefere que o XXXX seja gerado por você, escolha a opção “XXXX and images”. Se você preferir posicionar os elementos, seja organizado com Folhas de estilos em cascata, em vez de tabelas, selecione “Configurações padrão” e “Exportar como camadas CSS” na guia “Camadas”.

Etapa 5

Abra o arquivo XXXX de dentro de um navegador para ver seu trabalho. Edite os arquivos com um programa de web design.

Referências

 

Você pode estar interessado:

Deixe um comentário