Layout para Web no Illustrator CS6 – Socorro!

O photoshop criou um comando de "save for web", salvando em todos os formatos possíveis da internet e faz layouts com navegação, apresentando como um (...)

Autor: Redação Impacta

Pois é, ai vamos nós de novo, falar do Illustrator CS6.

Sou designer gráfico há 30 anos e, com o boom da Internet, chegou um momento da minha carreira que alguns clientes começaram a solicitar layouts para web. Não apenas clientes, mas alguns webdevelopers (Será que ainda existe esse termo?) me solicitavam uma ajuda na programação visual.

Legal, eu fazia umas telas no Photoshop, salvava em JPG, montava um PPT ou um PDF e apresentava ao cliente. No início isso funcionou, mas aos poucos os clientes foram ficando mais exigentes e solicitavam que o layout fosse apresentado em um navegador.

A princípio pensei em chamar Cristóvão Colombo, Bartolomeu Dias e até mesmo Pedro Álvares Cabral, grandes navegadores (Nossa! Essa foi péssima!).

Se você não sabe o que é navegador – relaxa, tem gente que também não sabe! – Eu não sabia! E se esse for o seu caso, é o Internet Explore, ou o Chrome, ou o Safari ou até mesmo o velho Netscape, alguém se lembra dele?

Muito bem! O que eu sei sobre navegação de páginas ou sobre como produzir um site? Quase nada!

Mas ai Adobe lançou no Photoshop, se não me engano na versão CS (só isso, CS) um comando no menu File: Save for Web

O mais legal desse comando, é que além de salvar nos formatos possíveis para Web, inclusive com imagens fatiadas, ele permitia (ainda permite) salvar o HTML, ou seja, mesmo designer com conhecimento zero de programação, eu conseguia produzir layouts com navegação e apresentar como se fosse realmente um site, trazendo toda a dinâmica, ou parte dela, para apresentar o projeto. 

Se aprovado, algum amigo programador cuidava da coisa, graças a Deus!

Mais tarde a Adobe incorporou o comando Save for Web no Illustrator, tudo igualzinho ao que tínhamos (temos) no Photoshop. Mas nem tudo são flores na vida de um ilustrador metido a fazer layout de web – na versão CS6, pasmem, o comando Save for Web não possui mais a opção Imagesand HTML –

– Socorro! Help, i need and HTML!

– Calma, sou um profissional experiente, tem que haver uma saída. Ah! Faço tudo no Photoshop, afinal lá ainda encontramos o comando!

– Não? O programador quer o layout em Illustrator? Que…

– Pois é… perai! Quando clico no botão Preview na janela Save for Web, a página abre no navegador e, logo abaixo tem o código HTML – é só copiar esse código no Bloco de Notas e salvar como HTML, fácil assim.

Para ter certeza que tudo funcionou, é só abrir a pasta onde o arquivo foi salvo e mandar abrir com um navegador.

– Ahhhhhhhhhhhhhhhhhhh! Não funcionou! A página solicitada abriu em branco! Que raiva!

– Calma, calma, pense, pense, calma, pense… – Claro! – Aiki burro! Como diria Maurício Maruo.

Quando clicamos no botão Preview da janela Save for Web, tudo é temporário, ou seja, as imagens da pasta IMAGES ainda não existem. Tenho que concluir o processo de gravação e tenho que informar o novo destino das imagens que serão geradas e depois, informar ao documento HTML onde elas estão. Observe na figura acima que a pasta IMAGES ainda não existe. É lógico! Eu acho!

– Mas como eu farei isso?

Primeiro eu preciso finalizar o processo Save for Web, clicando no botão Save. Essa ação criará a pasta IMAGES .

Feito isso, eu tenho que abrir o arquivo HTML novamente no Bloco de Notas e efetuar um recurso denominado Localizar e Substituir.

Observando a linha original do código temos: <divstyle=”background-image:url(tepeguei_01.gif)

Observe que no endereço da imagem não existe o nome da pasta IMAGES.

Então, ative o meu Editar/Substituir

No campo Localizar: entre com uma cadeia que não seja repetida em outras situações – no nosso exemplo utilizamos (t, que é o início da localização das imagens temporárias; no campo Substituir por: repetimos o início da cadeia inserida em Localizar: e complementamos com o endereço correto, ou seja, (images/t– o t é necessário porque senão mudaríamos o nome das imagens.

Clique em Substituir Tudo e salve o arquivo. Pode fechar.

Agora, na pasta onde os arquivos estão salvos, clique no arquivo HTML e solicite a abertura no navegador. YES! Abriu direitinho.

Adobe, pelo amor aos designers, retornem com o comando SaveImagesand HTML, POR FAVOR! 
Curtiu o post? Deixe seu comentário nos contando se o conteúdo foi relevante para você ou caso tenha ficado alguma dúvida!

2 Comentários

  1. Paulo Cesar disse:

    Meu caro Engelmann, mais uma vez sua experiência é valiosa. valeu!

  2. Mariana disse:

    Isso sim que é informação de qualidade, me deparo fazendo um blog e não entendo nada de programação, mas sei me virar muito bem no Illustrator, decidi fazer todo o layout e depois pagar alguém para lançar na web, até parar aqui hahhaa Grande Engelmann, muito obrigado!!!

Deixe o seu comentário!

Não perca nenhum post!