Protótipos rápidos em CSS com Photoshop

por Casper Voogt

Você precisa fazer alguns protótipos de site para seu cliente. Você gostaria de encontrar um jeito fácil de mostrar estes protótipos em código XHTML e CSS limpos, porque JPGs chapados não contemplam o senso de design, e tabelas recortadas são más. Na verdade, vamos esquecer que as tabelas recortadas já existiram.

Aviso : este artigo é para as pessoas que precisam produzir protótipos válidos e de acordo com os padrões rapidamente, com as ferramentas gráficas que elas já usam. Esta não é uma técnica de produção para quem quer ter o melhor benefício do XHTML criando código estruturado e semântico. Criar código estruturado e semântico, como a A List Apart e a maioria dos adeptos recomenda, ainda leva tempo, esforço e programação na unha.

Editores gráficos WYSIWYG como o Fireworks, GoLive e ImageReady te permitem gerar código HTML, mas o código exportado tende a ser em tabelas ou com posicionamento absoluto. Isso é muito 1999. Tá, então o que estes programas conseguem fazer em termos de produzir um código válido e aproveitável? Mais do que você imagina. Eu vou lhes mostrar um jeito fácil de criar protótipos com o Photoshop, prepará-los para a web com o ImageReady, e depois limpar o código.

Plano de Fundo

Eu tenho que admitir, o Fireworks era uma peça importante no meu arsenal de design até eu começar a levar acessibilidade e os padrões a sério, e acho que não estou sozinho nessa. O problema que eu tive foi que eu só conseguia exportar código HTML usando tabelas, quando o que eu queria na verdade eram divs posicionadas relativamente. Só com rídiculas horas de codificação e doses absurdas de cafeína você conseguia converter aquela tabela em divs relativas, e isso só te rouba tempo em que você deveria estar desenhando outros protótipos ou dormindo. Então por quê começar com uma tabela recortada? O que eu precisava era um jeito de gerar divs posicionadas relativamente – ou, ao menos, um código que fosse próximo o bastante para que não precisasse de séculos até se dar bem com os padrões do W3C. Hoje em dia, isso é surpreendentemente fácil com o ImagReady.

Deixe o ImageReady pronto para o CSS

O Adobe Photoshop CS vem com um ajudante focado em web: o ImageReady CS. O Fireworks é legal para aplicações em vetor, mas nem tanto para trabalhos em bitmap. Ao contrário, o ImageReady foi criado para trabalhar com bitmap, e menos com vetores (apesar disto estar mudando). Usando o ImageReady, você pode exportar os recortes como divs posicionadas absolutamente, que podem ser facilmente transformadas em divs de posicionamento relativo.

Isto siginifica que você pode começar no Photoshop para fazer todas as máscaras mais complexas, efeitos, vetores do Illustrator, filtros, etc., e depois passar para o ImageReady para recortar seu layout. Você deve ter certeza de que seu layout está alinhado pelo canto superior esquerdo; não tente centralizá-lo ainda – isso é um trabalho para o CSS mais tarde. Usando o ImageReady, você pode estilizar seu menu de navegação (a não ser que o esteja fazendo só com texto e CSS) e definir os rollovers. (Para um layout profissional, você deveria se envergonhar de usar os rollovers e ações da Adobe e usar seu próprio Javascript e CSS, mas para um protótipo, está de bom tamanho.)

Corte e Recorte

Use a ferramenta de Slice para criar seus recortes. Assim que terminar, use a ferramenta Slice Select para selecionar e renomear cada seção. Por exemplo, você pode ter um cabeçalho que se tornará uma div posteriormente. O ImageReady o chamaria de “SeuArquivo_1_01”, mas você vai poupar um pouco do seu tempo e dar um nome lógico desde o começo, como “cabecalho”. Você vai usar isso mais tarde quando for editar o CSS. O mesmo vale para a área de conteúdo, eventuais colunas laterais, rodapé, e outras áreas que queira definir.

Intercale entre o Photoshop e o ImageReady até que esteja pronto para testar seu layout num navegador. Então, no ImageReady, vá em File > Preview In > (coloque seu navegador preferido aqui). Veja se seus recortes estão e se comportam como deveriam, e modifique suas configurações de otimização apropriadamente. Os recortes exportados resultarão em JPGs ou GIFs inseridos em divs com a tag img; depois, você pode querer definir algumas imagens como fundo das divs.

Exportando HTML e CSS

Defina suas configurações de saída: vá em File > Output Setting > HTML e deixe as configurações como preferir. Perceba que você pode optar por gerar código XHTML. Clique em Next e confira as configurações em Saving HTML Files.

Clique em Next novamente; você vai cair em Slices. Aqui você pode escolher “Generate CSS”. Perto de Referenced, você verá um menu dropdown que te deixa escolher By ID, Inline ou By Class. Escolha By ID. Você também pode detalhar as convenções de nomenclatura de recortes se preferir.

Exporte seu layout para XHTML / CSS indo em File > Save Optimized As, e escolha um local que faça sentido para você. Perceba que o ImageReady irá criar uma pasta /images no mesmo local em que você salvou o arquivo HTML.

Exemplo do CSS produzido pelo ImageReady

#header {
  position:absolute;
  left:0px;
  top:0px;
  width:800px;
  height:150px;
}

Exemplo do HTML produzido pelo ImageReady
(Quebras de linhas marcadas com »)

<div id="Table_01">
  <div id="header">
    <img id="header" src="images/header.jpg" width="800" »
 height="150" alt="" />
  </div>
  <div id="navigation">
    <img id="navigation" src="images/navigation.jpg" width="200" »
 height="450" alt="" />
  </div>
  <div id="content">
    <img id="content" src="images/content.jpg" width="600" »
 height="450" alt="" />
  </div>
  </div>

Torrada, alguém quer?

Agora nós temos recortes formados por divs de posicionamento absoluto, com o CSS dentro do próprio arquivo HTML. Talvez divs de posicionamento absoluto sejam o que você precisa – se forem, pegue uma xícara de café e relaxe. Se não, vamos dar mais um passo e converter estas divs para posicionamento relativo.

Primeiro, faça uma cópia do HTML gerado pelo ImagReady e abra-o no seu editor preferido (Dreamweaver, BBEdit, ou qualquer outro). Você provavelmente vai querer jogar suas divs para dentro e para fora de uma div externa para controlar melhor seu protótipo. O ImageReady exporta os recortes de CSS como divs e as coloca numa div externa chamada “Table_01”. Renomeie esta div (para “container”, por exemplo) e coloque um estilo CSS que achar adequado. Se você não precisa de uma div externa, só delete a div “Table_01” e seu código de CSS.

Depois, mude todas sus outras divs para posicionamento relativo tirando as declarações de posicionamento absoluto e deixando-as herdar o primeiro. Preste bastante atenção nos seus floats e clears. Você poderia tentar mudar todas as divs de uma vez, mas uma maneira mais precisa de fazer isto é mudar uma de cada vez e checar o comportamento de cada uma.

Para divs que contenham imagens, decida quais devem ser imagens de fundo em CSS e quais realmente merecem uma tag img. Alguns recortes (uma área de conteúdo, por exemplo) podem ter uma única cor e talvez devam ser configurados com um estilo CSS sem nenhuma imagem. Configure a cor de fundo geral da página usando sua folha de estilos. Se este fosse um layout para produção, você provavelmente moveria seu CSS para uma folha de estilo externa, mas isto pode ser loucura para protótipos de uma única página. Valide seu código e você está pronto para continuar.

Exemplo de CSS convertido e limpo

#header {
  float: left;
  clear: right;
}

Você vai precisar adicionar declarações apropriadas de largura e altura se a imagem deste elemento se tornar uma imagem de fundo numa futura revisão.

Exemplo de HTML convertido e limpo
(Quebras de linhas marcadas com »)

<div id="header">
  <img src="images/header.jpg" alt="" name="headerimg" width="800" »
 height="150" id="headerimg" />
</div> 

Fluxo de Trabalho

Quando você precisar revisar o protótipo, você pode simplesmente fazer suas alterações gráficas no Photoshop e no ImageReady e re-exportar o arquivo HTML, sobrepondo o original e suas imagens na subpasta /images. Mas antes disso, tenha certeza que salvou seu HTML convertido e limpo com um nome diferente para que ele e sua folha de estilo apontem para as novas imagens sem correr o risco de ser sobreposto pelo novo arquivo exportado.

-----

Este artigo foi publicado originalmente na edição 231 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.