Como construir um site em ilustrador

Criar um documento do Illustrator que é 960 pixels de largura com uma altura de sua escolha, dependendo do conteúdo e design que tem em mente. Um site 960 px de largura está de acordo com a largura da resolução do monitor mais popular de 1024 px uma vez a barra de rolagem e janelas bordas são tidos em conta.

Criar um esboço desenhado mão do layout visual básico de seu site, se você não tiver feito isso. Isto irá lhe fornecer uma referência útil para a criação no Illustrator.

Crie o seu layout usando as ferramentas de imagem e texto para um cabeçalho estilizado. Se o seu projeto inclui espaço para o texto, como posts, deixar o espaço em que a área em branco ou criar uma borda em torno dela para facilitar a delimitação.

Adicionar guias para o seu projeto para demarcar as diferentes seções do layout. Isto é muito importante porque você vai usar essas guias para fazer fatias, que definem as fronteiras dos elementos em seu site. As guias podem ajudá-lo a alinhar objetos com precisão. Clique na régua vertical ou horizontal e arraste o mouse para onde deseja que o guia para ser localizado.

Verifique a colocação de seus guias para precisão e exatidão. Chamar mais se necessário para separar cada elemento, como as imagens de navegação que serão links em seu site.

selecionar "Objeto" a partir do menu, selecione "Fatia" e escolha "Criar a partir de Guias." Quando as fatias são criados, você verá pequenas caixas pretas dentro de cada setor com um número correspondente. selecionar "Arquivo" a partir do menu e escolha "Salvar para a Web e Dispositivos." Selecione a ferramenta Seleção de fatia, que é o segundo ícone no menu de ferramentas na parte direita da tela abaixo do ícone do lado. Selecione todas as fatias.

Selecione as configurações de otimização das opções no lado direito da tela. Você pode escolher as configurações predefinidas ou criar um perfil personalizado, dependendo se você quer suas imagens para ser JPEGs, GIFs ou PNG. Você também pode ajustar a qualidade das imagens.

Visualizar configurações diferentes, clicando no "2-up" e "4-up" tabs. No canto inferior de cada pré-visualizar, você pode visualizar as informações de otimização tais como tamanho do arquivo e navegador o tempo de renderização. Clique no "Salvar" botão. Decida onde você quer suas imagens e código para ser salvo e navegue até que a área usando o "Onde:" botão.

Escolha o formato para o seu trabalho. Se você é proficiente em HTML e só deseja que as imagens, porque você vai adicionar o código para eles mais tarde, escolha "Apenas imagens." Se você é um principiante ou preferem ter o HTML gerado para você, escolha o "HTML e imagens" opção. Se você preferir para o posicionamento dos elementos a ser organizado com Cascading Style Sheets em vez de tabelas, selecione o "Configurações padrão" botão e escolha "Exportar como camadas CSS" no "Camadas" aba.

Abra o arquivo HTML de dentro de um navegador para visualizar o seu trabalho. Editar os arquivos com um programa de web design.