Montar uma web apartir de uma imagem com Photoshop

Na hora de desenhar uma página web, é muito cômodo fazer as provas de criatividade utilizando um programa de desenho gráfico, no lugar de realizar a montagem diretamente em HTML.



Um dos programas mais úteis para realizar o desenho da página é Adobe
Photoshop, que oferece muitas utilidades para o retoque fotográfico, mas
também para o desenho gráfico em geral. As últimas versões do programa
ademais dispõem de ajudas muito interessantes para desenhar as páginas
web, como os setores ou a opção Salvar para web.

Nota: Já explicamos algumas coisas das quais vamos utilizar neste exercício em um artigo anterior: Setores de Photoshop

Vamos ver neste artigo uma amostra sobre como podem ser utilizados os setores para montar uma página web em HTML.



Por exemplo, em Photoshop poderíamos ter desenhado a seguinte imagem que vamos utilizar para o cabeçalho da página:





Podemos partir esta imagem em setores. Os setores são áreas da imagem
que logo vamos salvar em arquivo independente, otimizado para se
visualizar na Internet. Realizamos os setores ao nosso gosto.
Possivelmente nos interesse que o logotipo ou o banner principal se
encontrem em uma imagem separada, ou possivelmente temos pensado colocar
uma barra de navegação que desejamos que esteja em um mesmo setor, que
logo vamos encher com o texto da barra.



Os setores podem ter ficado de forma similar a como aparece nesta imagem:






Uma vez realizados os setores, selecionamos a opção "Salvar para web" do
menu de arquivo. Isto nos permite acessar uma janela onde se podem
escolher as opções de otimização das imagens, selecionando as
características de todos os setores ou então definindo umas propriedades
específicas para cada setor.



Uma vez selecionadas todas as opções necessárias, salvamos o trabalho,
com o que obteremos um arquivo HTML com uma tabela, que contem por sua
vez as distintas imagens geradas a partir de cada setor e salvas com as
opções de otimização selecionadas previamente.






Eliminar uma imagem de um setor e substituí-la por um texto



Possivelmente alguma das partes ou setores gerados, onde temos uma
imagem, queremos que disponha um texto, para poder escrever o que se
deseja, ao invés de visualizar uma imagem, que sempre é muito mais
estática.



Por exemplo, pode haver um espaço para o título da página e, já que o
título pode mudar em cada página do web, pode ser que seja interessante
que esse título seja um texto, que possa ser editado, ao invés de uma
imagem. Ou também, pode ser que tenhamos um espaço para situar o
endereço da empresa dona do site web, tal como fizemos no desenho que
estamos trabalhando, e desejamos que o endereço apareça como um texto no
lugar de uma imagem, já que os textos são indexados pelos buscadores e
queremos que possam se indexar as palavras do endereço da empresa como
palavras-chave da página.



Então, necessitamos substituir a etiqueta da imagem por um texto. Para
isso, simplesmente há que localizar a etiqueta que corresponde à imagem
que desejamos substituir e apaga-la, mudando-a pelo texto que tem que
ir, no lugar da imagem. Porém atenção, porque isto pode mudar o desenho
da tabela e deslocar as imagens que vão dentro. Para evitar isso,
simplesmente ajustamos os valores width e height da célula onde estava a
imagem, aos que tinha a própria imagem que desejamos substituir.



Por ejxmplo, este é o código HTML gerado por Photoshop para a composição anterior. Cada setor está em uma imagem independente.

Código:

<TABLE WIDTH=697 BORDER=0 CELLPADDING=0 CELLSPACING=0>

   <TR>

      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=214 HEIGHT=1></TD>

      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=233 HEIGHT=1></TD>

      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=34 HEIGHT=1></TD>

      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=1></TD>

      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=215 HEIGHT=1></TD>

      <TD></TD>

   </TR>

   <TR>

      <TD ROWSPAN=3>

         <IMG SRC="imagens/cabeçalho-original_01.gif" WIDTH=214 HEIGHT=85></TD>

      <TD ROWSPAN=2>

         <IMG SRC="imagens/cabeçalho-original_02.gif" WIDTH=233 HEIGHT=25></TD>

      <TD COLSPAN=2>

         <IMG SRC="imagens/cabeçalho-original_03.gif" WIDTH=35 HEIGHT=16></TD>

      [b]<TD>

         <IMG SRC="imagens/cabeçalho-original_04.gif" WIDTH=215 HEIGHT=16></TD>

      <TD>[/b]

         <IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=16></TD>

   </TR>

   <TR>

      <TD>

         <IMG SRC="imagens/cabeçalho-original_05.gif" WIDTH=34 HEIGHT=9></TD>

      <TD COLSPAN=2>

         <IMG SRC="imagens/cabeçalho-original_06.gif" WIDTH=216 HEIGHT=9></TD>
      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=9></TD>

   </TR>

   <TR>

      <TD COLSPAN=4 ROWSPAN=2>

         <IMG SRC="imagens/cabeçalho-original_07.gif" WIDTH=483 HEIGHT=87></TD>

      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=60></TD>

   </TR>

   <TR>

      <TD>

         <IMG SRC="imagens/cabeçalho-original_08.gif" WIDTH=214 HEIGHT=27></TD>
      <TD>

         <IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=27></TD>

   </TR>

</TABLE>



Observamos que está em negrito a célula e a imagem onde aparece o
endereço da suposta empresa que encarregou o projeto. Esta imagem é a
que vamos substituir pelo texto do endereço:



<TD width=215 height=16>

         <font size=1 face=verdana>C/ Mayor nº 23, 3B - 28230 Madrid</font></TD>

      <TD>

Cabe remarcar que aplicamos à célula a mesma largura e altura da imagem
que ia dentro. Ademais, colocamos o texto em uma fonte de tamanho
pequeno porque se o texto superasse o espaço reservado para a tabela se
desenquadraria o desenho.