Adobe Illustrator é um programa de design que cria gráficos de vetor para uma ampla variedade de usos, incluindo impressão, movimento e web. Os gráficos vetoriais usam fórmulas matemáticas para apresentar imagens , ao contrário de outros formatos, como GIFs , que usam um conjunto de pontos. Embora não seja especificamente concebido como um programa de web design, Illustrator tem ferramentas avançadas para exportar gráficos criados dentro do programa para o uso do site e também gera o código necessário para a exibição em um browser. Coisas que você precisa
software de edição Web design
Show Mais instruções
Criando um Layout
1

Criar um documento do Illustrator , que é de 960 pixels de largura, com uma altura de sua escolha , dependendo do conteúdo e design que você tem em mente. Um site de 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 bordas da janela são levados em conta.
2

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

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

Adicione guias para o seu projeto para demarcar as diferentes seções do o layout. Isto é muito importante porque você vai usar essas guias para fazer fatias , que definem as fronteiras dos elementos em seu site. 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 a guia para ser localizado.
5

Confira a colocação de seus guias para precisão e exatidão. Desenhe mais se necessário para separar cada elemento, como imagens de navegação que serão links em seu site.
Gerando código
6

Selecione "Objeto" a partir do menu , em seguida, selecione " Slice" e escolha a opção " Criar a partir de Guias ". Quando as fatias são criados, você verá pequenas caixas pretas dentro de cada fatia com um número correspondente . Selecione "Arquivo " no menu e escolha "Salvar para Web e Dispositivos". Selecione a ferramenta de 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.
7

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

as configurações de visualização diferentes , clicando sobre o "2 -up " e guias "4 -up" . No canto inferior de cada visualização , você pode visualizar as informações de otimização , tais como tamanho do arquivo eo tempo de renderização do navegador. Clique no botão "Salvar" . Decida onde você quer suas imagens e código para ser salvo e navegar para essa área, utilizando o " Onde: " botão
9

Escolha o formato para o seu trabalho . . Se você é proficiente em HTML e só querem as imagens , porque você vai adicionar o código para eles mais tarde , escolha "Somente imagens ". Se você é um novato ou preferem ter o HTML gerado para você, escolha a opção " HTML e imagens " de opções . Se você prefere para o posicionamento dos elementos a serem organizados com Cascading Style Sheets em vez de tabelas , selecione o botão " Default Settings " e escolha " Exportar como Camadas CSS ", na aba " Layers " .
10

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