Criando Layouts de Sites com Adobe Illustrator


Illustrator

Alguns meses atrás fiz um artigo falando sobre qual ferramenta era melhor para criar layouts de sites, algumas pessoas comentaram, umas acharam interessante a colocação do Illustrator para fazer a tarefa, outros perguntaram como se utiliza o Illustrator para fazer isso?

Por este motivo resolvi fazer este artigo, curto,  mas que talvez esclareça algumas dúvidas de quem quer escolher a ferramenta certa para a tarefa.

Primeiramente como dito anteriormente o Photoshop é uma ótima ferramenta, mas para tratar imagens e não para criar sites, e é justamente para isso que utilizamos apoiando o Illustrator.

Para se criar layouts de sites no Adobe Illustrator não tem erro, abra sua artboard, o palco de trabalho no caso, e escolha uma medida maior

 do que usaremos para a área útil do site, costumo usar 1500 pixels.

Para que eu não me perca já que faço todos os sites em 990 pixels, eu demarco com uma caixa retangular o tamanho de 990px e crio linhas guias nas pontas desta caixa assim sei qual será minha área útil, o que sobrar nas laterais são as áreas que utilizo para backgrounds.

Após ter criado as demarcações, desenho o layout, o que é bem mais fácil que no Photoshop já que não tenho camadas é só arrastar, é claro trabalho juntamente com o Photoshop onde edito imagens, e efeitos que só consigo lá e importo para o Illustrator.

Salvo o arquivo em .ai e em .jpg para mostrar para o cliente.

Após aprovado, é a hora de trabalhar no front-end, chegou a hora de perguntar como exporto o layout que fiz no Illustrator?

Simples, abro o arquivo e vou trabalhando imagem por imagem conforme vou desenvolvendo, apenas copiando com Ctrl + C e ao abrir um arquivo novo no Photoshop Colo Ctrl + V, faço alguma edição se necessário e exporto para web.

Não tem jeito apenas confio no Photoshop para gerar as imagens finais, além de ficarem mais leves se fizermos isso no Illustrator, que por sua vez também dá mais trabalho.

Como falei no artigo anterior cada um tem sua escolha por software, eu prefiro o Illustrator mas não sozinho, ele ira depender do Photoshop para fazer a finalização das imagens, que é justamente a função do programa.

Criar layouts de sites no Illustrator se ganha muito tempo a qual só quem trabalha com o programa sabe.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

9 comentários em “Criando Layouts de Sites com Adobe Illustrator

  1. Liniker Fortunato 10 de junho de 2014 12:05

    Uso o fireworks, acho melhor de trabalhar e sua função é justamente a web, mas também gosto do illustrator

  2. Jonathas Silva 28 de maio de 2013 14:00

    Olha vou correr atras de aprender logo…acho que também na questão de filtros…eu trabalho com design para iOS e acho que o Illustrator pode me dar muito mais resultado…

    • Robson Moulin 28 de maio de 2013 17:14

      Com certeza, eu trabalho com o Illustrator desenhando layout para sites desktop e mobile já faz um tempo e recomendo. Se você já tem conhecimentos de Photoshop é fácil aprender Illustrator.

      • mauro Sebastiao 11 de junho de 2016 15:53

        ola boa tarde Robson.
        eu tenho nocoes basicas de como criar um layout de website mas a minha duvida consiste em saber como publicar o website e dar continuidade na adicao das informacoes do mesmo! por favor ajuda-me pois sou novato nisto!!

  3. Jonathas Silva 28 de maio de 2013 9:42

    Eu qro muito aprender a usar o Illustrator para criar mais layouts… acho que as ferramentas devem ser mais faceis de trabalhar…assim imagino

    • Robson Moulin 28 de maio de 2013 10:45

      São sim, Jonathas a mobilidade que você tem, traz um ganho de tempo incrível.

  4. Alexandre Aguiar 26 de novembro de 2012 9:28

    Também uso o Illustrator para criação de layouts de site e até hoje me pergunto como as pessoas em geral não fazem isso. É mais rapido, mais simples e faz bem mais sentido também do que criar tudo no Photoshop.

    • Robson Moulin 27 de novembro de 2012 9:15

      Eu me pergunto a mesma coisa Alexandre, impossível usar o Photoshop para isso.

      abs

    • eduardo garcia 21 de agosto de 2014 11:06

      Alexandre, após fazer o layout no Illustrator, qual próximo passo?
      Trabalho como publicitário mas na parte impressa apenas, logos, cartões, folders, etc….mas para web não sei oq fazer, fiz um curso básico de html e dreamweaver…atualizo três sites mas bem basicamente, oq indica para fazer?

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>