Minha Conta
Recuperar Senha

Digite seu endereço de e-mail que foi cadastrado e enviaremos seus dados de acesso.

Minha Conta

A senha deve conter no mínimo 6 caracteres.

Ao se cadastrar, você concorda com a Política de Privacidade e Segurança

Mudar Data: Photoshop CS6 Módulo I
Preço
15/09 a 26/09 Manhã 4000,00
15/09 a 26/09 Manhã 4000,00
15/09 a 26/09 Manhã 4000,00
15/09 a 26/09 Manhã 4000,00
  Itens Preço
Carrinho de Compras
O carrinho está vazio.
INVESTIMENTO TOTAL:0,00

Esqueci minha senha

Foi enviado um e-mail para com os dados de acesso.

Layout para Web no Illustrator CS6 – Socorro!

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 Cristovã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 menuFile: 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 - só tem Images.

Figura SFW 01

- Socorro! Help, i needand 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.

Figura SFW 02

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

Figura SFW 03

- 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 .

Figura SFW 04

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...

Figura SFW 05

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.

Figura SFW 06

Adobe, pelo amor aos designers, retornem com o comando SaveImagesand HTML, POR FAVOR! Abraços!
  1. Mariana

    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!!!

    Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Artigos Relacionados