60 Aprenda Fácil Especial – PhotoshopAgora, é só adaptar a galeria ao projeto inicial. Uma dica interessante é capturar a tela, adicionar a fi gura e depois
recortá-la no HTML para somente copiar e colar o conteúdo com o tamanho já defi nido.
Essas dicas são relevantes para desenvolver seus sites no Photoshop. No Image Ready, você pode criar animações para
seus banners, e diversifi car efeitos e funções das imagens. Para isso, basta clicar sobre a barra de ferramentas destinada
à interação entre os dois programas. Quem sabe em um outro momento não trabalhemos somente essa interação? Por
enquanto, cabe a você pensar que, acima de tudo, o site deve ser agradável aos olhos e funcional à sua navegabilidade.
O Photoshop facilita o desenvolvimento dessas funções mas, no fi nal, o responsável por qualquer uma das fun-
cionalidades, dimensões e bom gosto será você. Não tenha medo, brinque e arrisque. Vários sites grandes surgiram
assim, de uma idéia que um dia alguém resolveu desenvolver.A melhor parte é que o Photoshop ainda faz a paginação de todos os documentos HTML. O arquivo
final fica da seguinte forma:■ Projeto visual de sites
No trabalho com a Web, o funcionamento do Photoshop é muito semelhante ao do Fireworks, da Adobe: com
diversas ferramentas de desenhos, cores, efeitos e formatos, você tem muita liberdade para criar o site da maneira que
bem entender. E quando o layout está fi nalizado, basta utilizar uma ferramenta que “fatia” o site, separando a imagem
maior em pequenas fi guras. Assim como no Fireworks, o Photoshop também dá as opções de salvar somente a imagem
ou de salvar as fi guras já encaixadas em um arquivo HTML formado por tabelas.
Feito isto, bastará abrir o HTML em um programa de edição de sites, como o Dreamweaver, e fazer todas as altera-
ções que você julgar necessárias. Muitos preferem tirar todas as tabelas do site e criar uma estrutura tableless, em CSS,
um formato de site mais compatível com os diversos browsers, e que abre mais rapidamente que aqueles construídos com
tabelas. Outros preferem manter a estrutura original, mas gostam de usar o editor de código para “limpá-lo”, uma vez
que arquivos HTML gerados por programas gráfi cos costumam trazer muitos resíduos que deixam o código confuso.
Os profi ssionais da área têm alguns macetes para deixar mais fácil esse trabalho: constroem o layout do site, mas
fatiam somente as partes que realmente precisarão entrar como imagens. Um exemplo: se você fatiar todo um layout
com fundo azul, terá várias imagens com essa mesma cor azul sólida. A melhor coisa a fazer seria deletar as fi guras e
aplicar a cor ao plano de fundo.
Outra dica é anotar e ter total controle sobre as medidas em pixels de cada elemento para um encaixe perfeito na
montagem fi nal do site. Se você criar um botão que muda de cor no momento em que o mouse passa sobre ele, terá
de criar dois modelos com cores diferentes, mas com exatamente o mesmo tamanho. Para poupar tempo, você pode
economizar o fatiamento dos botões. Se tiver seis botões laterais com o mesmo tamanho, por exemplo, pode fatiar
apenas um e replicá-lo posteriormente no arquivo HTML. Claro que isso só vale se o texto do botão for incluído no
formato texto, algo que é possível somente com a utilização de CSS. Para HTML simples, as imagens devem vir com
o texto junto, o que criaria a necessidade do fatiamento de todos os botões.
O fato de permitir a visualização do layout inteiro antes de mandá-lo para o HTML e exportar as imagens de uma
maneira muito mais fácil é agil faz do Photoshop uma das melhores ferramentas também para imagens web.46-63 - ok.indd 6046-63 - ok.indd 60 9/12/2008 16:01:399/12/2008 16:01:39