Trabalhando com templates (modelos)

Template básico no Photoshop

1. Para começar, abra o Photoshop e escolha o tamanho do template com o qual você vai trabalhar. Em Preset, estão disponíveis alguns tamanhos de resolução de tela padrão. Se este é seu primeiro template, escolha um tamanho que dê menos problemas, como 800 x 600.

2. Crie uma nova camada e use a ferramenta Marquee para criar um cabeçalho. Mude o Style para Fixed Size e coloque as dimensões do seu cabeçalho em pixels.

3. Dê um clique com o botão direito do mouse no quadrado pontilhado e acesse a função Fill Edit > Fill) para preencher o background. Você pode escolher a cor primária e configurar opções de mistura de cores em Blending.

4. Use View > Show > Grid para prever o layout e puxe as linhas-guia. Aqui você pode fazer o diagrama do seu tamplate. Esboçe onde ficarão os elementos do seu site com as linhas-guia.

5. Crie uma nova camada e repita o uso da ferramenta Marquee. Desta vez, você pode criar caixas laranjas apenas para servir de guia da distância entre os elementos. Lembre-se de apagar as camadas desta caixa depois.

6. Crie uma nova camada e repita o uso da ferramenta Marquee. Termine agora de criar as caixas de conteúdo, seções e navegação. As caixas de seções e navegação podem ser simétricas. A caixa de conteúdo terá um tamanho maior.

Menus e elementos do seu template

1. Adicione menus que terão links para áreas no site. Delimite o espaço com a ferramenta Rectangle e suavize a cor com efeitos como Overspray e Radius de 2 pixels.

2. Você pode testar a sobreposição dentro dos menus. O efeito fará sentido quando você fizer o slicing do template e mapeá-lo em uma página HTML

3. Caso você esteja trabalhando com muitas guias (as linhas-guia azuis), você pode desligar a exibição em View > Show > Guides. É importante manter o seu menu simétrico para um melhor mapeamento.

4. Faça caixas de tamanhos diferentes para seus menus, prevendo espaço para botões ou minibanners. Um pouco de quebra da simetria pode ser interessante para o visitante do seu site.

5. Aproveite para colocar o logo. Coloque uma imagem ou utilize uma fonte que será a padrão dos menus. Caso queira utilizar a mesma fonte de texto, pense em um tipo-padrão, como Arial.

6. O Photoshop já cria novas camadas para texto. Mantenha-as, pois você pode querer mudar nomes de seções do seu site. Nesse caso, em vez de alterar manualmente o site inteiro, basta mudar o texto no PSD.

Banner, barra de navegação e outras dicas

1. Para incluir um banner no  seu site, volte à ferramenta Marquee.  Atenção: o IAB ( Interactive  Advertising Bureau) determinou  o tamanho- padrão de  banners para 468 x 60. Os tamanhos  de minibanners e botões  são mais flexíveis.

2. Utilize a ferramenta Polygonal  Lasso e faça uma barra  de navegação para o conteúdo  do site com tabs ou  abas; o resultado será próximo  ao das paletas do Photoshop.  Você pode utilizar as  linhas- guia; lembre-se de reservar  um espaço para o recorte  da aba.

3. Terminada a barra de navegação, clique com o botão direito em Fill e preencha com a cor que achar melhor. É possível, por exemplo, deixar como padrão a cor do primeiro plano na sua barra de ferramentas.

4. Sempre que for trabalhar com cor, lembre-se de que, é possível usar a mesma cor de qualquer outra área do seu site com a ferramenta Eyedropper. O Photoshop, por padrão, torna ativa a Eyedropper na escolha de cores.

5. Para suavizar ainda mais o contorno dos tabs, selecione a barra com a Magic Wand. Em seguida, vá até a paleta Layer, clique com o botão direito e, em Blending Options, você terá acesso às opções de mistura de cores no Layer. Finalmente, tente modificar o Gloss Contour.

6. Para deixar o template ainda mais completo, como, por exemplo, pela inclusão de títulos nas abas, você pode rever alguns dos passos indicados. Para concluir o trabalho e iniciar o mapeamento em HTML, salve seu template e abra-o em outro programa, como o Image- Ready CS (Ctrl + Shift + M).