{"id":1762,"date":"2013-01-10T15:43:46","date_gmt":"2013-01-10T18:43:46","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=1762"},"modified":"2013-01-10T15:43:46","modified_gmt":"2013-01-10T18:43:46","slug":"layout-para-web-no-illustrator-cs6-socorro","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/layout-para-web-no-illustrator-cs6-socorro\/","title":{"rendered":"Layout para Web no Illustrator CS6 \u2013 Socorro!"},"content":{"rendered":"

Pois \u00e9, ai vamos n\u00f3s de novo, falar do Illustrator CS6<\/strong>.<\/span><\/p>\n

Sou designer gr\u00e1fico h\u00e1 30 anos e, com o boom<\/em> da Internet, chegou um momento da minha carreira que alguns clientes come\u00e7aram a solicitar layouts<\/em> para web<\/em>. N\u00e3o apenas clientes, mas alguns webdevelopers<\/em> (Ser\u00e1 que ainda existe esse termo?) me solicitavam uma ajuda na programa\u00e7\u00e3o visual.<\/span><\/p>\n

Legal, eu fazia umas telas no Photoshop<\/strong>, salvava em JPG, montava um PPT ou um PDF e apresentava ao cliente. No in\u00edcio isso funcionou, mas aos poucos os clientes foram ficando mais exigentes e solicitavam que o layout<\/em> fosse apresentado em um navegador.<\/span><\/p>\n

A princ\u00edpio pensei em chamar Crist\u00f3v\u00e3o Colombo, Bartolomeu Dias e at\u00e9 mesmo Pedro \u00c1lvares Cabral, grandes navegadores (Nossa! Essa foi p\u00e9ssima!). <\/span><\/p>\n

Se voc\u00ea n\u00e3o sabe o que \u00e9 navegador \u2013 relaxa, tem gente que tamb\u00e9m n\u00e3o sabe! \u2013 Eu n\u00e3o sabia! E se esse for o seu caso, \u00e9 o Internet Explore<\/strong>, ou o Chrome<\/strong>, ou o Safari<\/strong> ou at\u00e9 mesmo o velho Netscape<\/strong>, algu\u00e9m se lembra dele?<\/span><\/p>\n

Muito bem! O que eu sei sobre navega\u00e7\u00e3o de p\u00e1ginas ou sobre como produzir um site? Quase nada! <\/strong><\/span><\/p>\n

Mas ai Adobe<\/strong> lan\u00e7ou no Photoshop<\/strong>, se n\u00e3o me engano na vers\u00e3o CS (s\u00f3 isso, CS) um comando no menu\u00a0File<\/strong>: Save for Web<\/strong>.\u00a0<\/span><\/p>\n

O mais legal desse comando, \u00e9 que al\u00e9m de salvar nos formatos poss\u00edveis para Web<\/em>, inclusive com imagens fatiadas, ele permitia (ainda permite) salvar o HTML<\/em>, ou seja, mesmo designer com conhecimento zero de programa\u00e7\u00e3o, eu conseguia produzir layouts<\/em> com navega\u00e7\u00e3o e apresentar como se fosse realmente um site, trazendo toda a din\u00e2mica, ou parte dela, para apresentar o projeto.\u00a0<\/span><\/p>\n

Se aprovado, algum amigo programador cuidava da coisa, gra\u00e7as a Deus!<\/span><\/p>\n

Mais tarde a Adobe incorporou o comando Save for Web<\/strong> no Illustrator<\/strong>, tudo igualzinho ao que t\u00ednhamos (temos) no Photoshop. Mas nem tudo s\u00e3o flores na vida de um ilustrador metido a fazer layout<\/em> de web \u2013 na vers\u00e3o CS6, pasmem, o comando Save for Web<\/strong> n\u00e3o possui mais a op\u00e7\u00e3o Imagesand HTML – <\/strong><\/span><\/p>\n

– Socorro! Help, i need\u00a0and HTML<\/strong>!<\/span><\/p>\n

– Calma, sou um profissional experiente, tem que haver uma sa\u00edda. Ah! Fa\u00e7o tudo no Photoshop, afinal l\u00e1 ainda encontramos o comando!<\/span><\/p>\n

– N\u00e3o? O programador quer o layout em Illustrator? Que…<\/span><\/p>\n

– Pois \u00e9… perai! Quando clico no bot\u00e3o Preview<\/strong> na janela Save for Web<\/strong>, a p\u00e1gina abre no navegador e, logo abaixo tem o c\u00f3digo HTML<\/strong> \u2013 \u00e9 s\u00f3 copiar esse c\u00f3digo no Bloco de Notas<\/strong> e salvar como HTML<\/strong>, f\u00e1cil assim.<\/span><\/p>\n

Para ter certeza que tudo funcionou, \u00e9 s\u00f3 abrir a pasta onde o arquivo foi salvo e mandar abrir com um navegador.<\/span><\/p>\n

– Ahhhhhhhhhhhhhhhhhhh! N\u00e3o funcionou! A p\u00e1gina solicitada abriu em branco! Que raiva!<\/span><\/p>\n

– Calma, calma, pense, pense, calma, pense… \u2013 Claro! – Aiki burro! Como diria Maur\u00edcio Maruo.<\/span><\/p>\n

Quando clicamos no bot\u00e3o Preview<\/strong> da janela Save for Web<\/strong>, tudo \u00e9 tempor\u00e1rio, ou seja, as imagens da pasta IMAGES<\/strong> ainda n\u00e3o existem. Tenho que concluir o processo de grava\u00e7\u00e3o e tenho que informar o novo destino das imagens que ser\u00e3o geradas e depois, informar ao documento HTML<\/strong> onde elas est\u00e3o. Observe na figura acima que a pasta IMAGES ainda n\u00e3o existe. \u00c9 l\u00f3gico! Eu acho!<\/span><\/p>\n

– Mas como eu farei isso?<\/span><\/p>\n

Primeiro eu preciso finalizar o processo Save for Web<\/strong>, clicando no bot\u00e3o Save<\/strong>. Essa a\u00e7\u00e3o criar\u00e1 a pasta IMAGES .<\/span><\/p>\n

Feito isso, eu tenho que abrir o arquivo HTML novamente no Bloco de Notas e efetuar um recurso denominado Localizar e Substituir<\/strong>.<\/span><\/p>\n

Observando a linha original do c\u00f3digo temos: <divstyle=”background-image:url(tepeguei_01.gif)<\/strong><\/span><\/p>\n

Observe que no endere\u00e7o da imagem n\u00e3o existe o nome da pasta IMAGES.<\/span><\/p>\n

Ent\u00e3o, ative o meu Editar<\/strong>\/Substituir<\/strong>…<\/span><\/p>\n

No campo Localizar:<\/strong> entre com uma cadeia que n\u00e3o seja repetida em outras situa\u00e7\u00f5es \u2013 no nosso exemplo utilizamos (t<\/strong>, que \u00e9 o in\u00edcio da localiza\u00e7\u00e3o das imagens tempor\u00e1rias; no campo Substituir por:<\/strong> repetimos o in\u00edcio da cadeia inserida em Localizar:<\/strong> e complementamos com o endere\u00e7o correto, ou seja, (images\/t<\/strong>\u2013 o t<\/strong> \u00e9 necess\u00e1rio porque sen\u00e3o mudar\u00edamos o nome das imagens.<\/span><\/p>\n

Clique em Substituir Tudo<\/strong> e salve o arquivo. Pode fechar.<\/span><\/p>\n

Agora, na pasta onde os arquivos est\u00e3o salvos, clique no arquivo HTML e solicite a abertura no navegador. YES!<\/strong> Abriu direitinho.<\/span><\/p>\n

Adobe, pelo amor aos designers, retornem com o comando SaveImagesand HTML<\/strong>, POR FAVOR!\u00a0<\/span>
\nCurtiu o post? Deixe seu coment\u00e1rio nos contando se o conte\u00fado foi relevante para voc\u00ea ou caso tenha ficado alguma d\u00favida!<\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>