Setores de Photoshop
É provável que em alguma ocasião já tenhamos encontrado com a necessidade de dividir uma imagem em vários pedaços por diversos motivos. Por exemplo, para realizar um desenho de página avançado ou para dividir uma imagem muito grande em vários pedaços, com o objetivo de que se carregue mais rapidamente. Este é justamente o assunto que tratamos neste artigo, que descrevemos mais detalhadamente a seguir.
Às vezes temos uma imagem muito grande, com o logotipo da empresa e uma composição de fotografias ou outros elementos gráficos. Essa imagem muito grande pode demorar muito para carregar e se está, por exemplo, na página inicial, poderia ocorrer de um visitante ficar impaciente e não chegar a ver carregar a imagem, abandonando o site web por culpa de um carregamento muito lento. Uma das possibilidades para melhorar o carregamento e fazer com que o visitante possa ver alguma coisa antes da imagem terminar de carregar por completo, consiste em partir a imagem em vários pedaços. Deste modo, é muito provável que alguns pedaços se carreguem antes de outros e que o visitante possa ver partes da imagem que vão aparecendo, mesmo que a imagem completa ainda não possa ser visualizada.
Esta é uma técnica bastante habitual que com certeza muitos já devem ter visto em diversas páginas web. Quando eu vejo uma destas imagens partidas, muitas vezes, espero até que se carregue inteira, para ver o resultado completo. Outras vezes, graças a uma imagem que se descarrega partida em vários pedaços, também entendo que a página está carregando corretamente e pode que não seja necessário visualizá-la inteira antes de clicar qualquer link de meu interesse.
Como partir uma imagem em vários pedaços facilmente com Photoshop
Adobe Photoshop, um dos melhores programas de retoque fotográfico, contem uma ferramenta para fazer setores que nos pode servir para partir uma imagem facilmente. Na imagem seguinte podemos ver qual é esta ferramenta.
Com a ferramenta de setor podemos definir diversos pedaços ou setores em uma imagem. Para isso faremos um ou vários quadrados com a ferramenta, de maneira similar como fazemos uma seleção. Os setores se configurarão automaticamente para que a imagem fique dividida como desejamos. Por exemplo, se fazemos um setor com a metade de uma imagem, automaticamente se criará outro setor para a outra metade da imagem.
Vale a pena experimentarmos um pouco com a ferramenta para criar setores de distintas formas. Quanto mais simples seja a configuração dos setores, mais simples será o código fonte da página resultante. Por exemplo, na imagem seguinte podemos ver como definiram 8 setores, dispostos em 4 filas e 2 colunas.
Continuamos com o passo “salvar a imagem otimizada como”, que se encontra no menu de arquivo. Então nos aparecem 4 cópias da imagem, uma a original e as outras 3 com distintas configurações da imagem, otimizadas mais ou menos em tamanho, cores, qualidade, etc. Nessa janela podemos selecionar uma das 3 possíveis otimizações, configurada como nós desejarmos, e selecionar a opção que põe “salvar HTML e imagens *.html”. Com isso se salvará um código HTML e um diretório com as imagens geradas para cada um dos setores, otimizadas tal como nós escolhemos. Este passo pode ser visto na seguinte imagem.
Com isso vamos conseguir, tal como havíamos adiantado, um código HTML que terá uma tabela e em cada campo da tabela uma imagem com cada setor, tal como foi configurado com a ferramenta de setores.
A tabela terá esta forma. Este código foi gerado com Photoshop, o escrevemos tal como aparece.
<TABLE WIDTH=580 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC=”Images/exemplosetores_01.jpg” WIDTH=294 HEIGHT=123 ALT=””></TD>
<TD>
<IMG SRC=”Images/exemplosetores_02.jpg” WIDTH=286 HEIGHT=123 ALT=””></TD>
</TR>
<TR>
<TD>
<IMG SRC=”Images/exemplosetores_03.jpg” WIDTH=294 HEIGHT=127 ALT=””></TD>
<TD>
<IMG SRC=”Images/exemplosetores_04.jpg” WIDTH=286 HEIGHT=127 ALT=””></TD>
</TR>
<TR>
<TD>
<IMG SRC=”Images/exemplosetores_05.jpg” WIDTH=294 HEIGHT=139 ALT=””></TD>
<TD>
<IMG SRC=”Images/exemplosetores_06.jpg” WIDTH=286 HEIGHT=139 ALT=””></TD>
</TR>
<TR>
<TD>
<IMG SRC=”Images/exemplosetores_07.jpg” WIDTH=294 HEIGHT=111 ALT=””></TD>
<TD>
<IMG SRC=”Images/exemplosetores_08.gif” WIDTH=286 HEIGHT=111 ALT=””></TD>
</TR>
</TABLE>
Como otimizar os distintos setores
Como dizíamos, Photoshop oferece a possibilidade de otimizar a imagem a mostrar em base a vários fatores, por exemplo poderemos decidir entre utilizar o formato GIF ou JPG, assim como definir as cores a utilizar no GIF ou na qualidade do JPG.
Para isso, uma vez dentro da opção “salvar otimizada como” devemos selecionar qual setor queremos otimizar (isto se faz com a ferramenta de selecionar setor, que se encontra acima à esquerda) e definir as opções de otimização na parte de cima à direita.
É muito habitual que desejemos aplicar a mesma otimização a toda à imagem, ou seja, salvá-la toda, por exemplo, como JPG e com qualidade 20. Para isso deveríamos selecionar setor a setor e aplicar os mesmos valores de formato, ou também selecionar todos os setores de uma vez para aplicar uma vez só os valores de otimização da imagem. Este último pode ser visto passo a passo na imagem a seguir.
Passo 1: selecionamos a ferramenta de zoom para tornar a imagem menor. Com o botão direito podemos marcar que desejamos que a imagem seja um 25% do tamanho original, ou o que for necessário para ver a imagem inteira na pré-visualização.
Passo 2: com a imagem de tamanho reduzido, para que se possa selecionar todos os setores de uma vez, marcamos a ferramenta de setor, que se encontra na parte esquerda da janela.
Passo 3: com a ferramenta de selecionar setores fazemos uma seleção de todos os setores da imagem. Com isso poderemos aplicar de uma só vez as propriedades de todos os setores da imagem.
Passo 4: Marcamos os valores de otimização desejados para todos os setores.
Uma vez definidas as características de otimização para todos os setores vamos ao botão de “salvar” e selecionamos a opção “salvar HTML e imagens *.html”.
Com isso terminamos o trabalho. Obteremos um código e imagens que logo poderemos incorporar facilmente dentro de nossa página web. Nós otimizamos esta imagem a JPG, para poupar espaço, apesar desta imagem -dadas suas características- teria ficado com maior qualidade otimizada como GIF, mesmo que na prática nos ocupe mais espaço se utilizamos uma posição de cores alta.