Como construir um site no Illustrator

Passo 1

Crie um documento do Illustrator com 960 pixels de largura a partir da altura que você escolher, dependendo do conteúdo e do design que você tem em mente. Um site de 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 conta.

Passo 2

Crie um esboço desenhado à mão do design visual do seu site, se ainda não o fez. Isto lhe dará uma referência útil para criar dentro do Illustrator.

Passo 3

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

Passo 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, o que definirá as arestas dos elementos em seu site. Os guias podem ajudá-lo a alinhar objetos com precisão. Clique na régua vertical ou horizontal e arraste o mouse até onde você deseja posicionar o guia.

Passo 5

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

Passo 1

Selecione "Objeto" no menu e selecione "Cortar" e "Criar das guias". Ao criar as guias, você verá pequenas caixas pretas dentro de cada corte com seu 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 no lado direito da tela, abaixo do ícone da mão. Selecione todos os cortes.

Passo 2

Selecione as configurações de otimização entre as opções listadas no lado direito da tela. Você pode escolher configurações predefinidas ou criar um perfil personalizado, dependendo de suas imagens serem JPEG, GIF ou PNG. Você também pode ajustar a qualidade das imagens.

Passo 3

Visualize as diferentes configurações clicando nas guias "2-up" e "4-up". No canto inferior de cada visualização, você verá as informações da otimização, como o tamanho do arquivo e o tempo de renderização do navegador. Clique no botão "Salvar". Decida se você deseja salvar suas imagens e código e navegue para essa área usando a chave "Onde".

Passo 4

Escolha o formato do seu trabalho. Se você controlar o XXXX e quiser apenas as imagens, porque você adicionará um código mais tarde, selecione "Somente imagens". Se você é um iniciante ou prefere que o XXXX seja gerado para você, escolha a opção "XXXX e imagens". Se preferir que o posicionamento dos elementos seja organizado com Folhas de Estilo em Cascata em vez de tabelas, selecione "Configuração padrão" e "Exportar como camadas CSS" na guia "Camadas".

Passo 5

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