Desenvolvendo Layout Sites

Exemplo 1
• 1 – Crie um documento com o tamanho de
900 x 845 pixels e fundo branco.
• 2 – Crie um novo documento com o tamanho
de 4 x 4 pixels e fundo transparente.
• 3 – Utilizando a ferramenta Zoom aumente para
1600%. Obs: Utilize a janela Navegador ou a barra
de Status para verificar o valor do zoom.

• 4 – Selecione a ferramenta Lápis e atribua 1 pixels

no tamanho e faça o desenho conforme abaixo:
• 5 – Clique no menu Editar e selecione a opção
Definir Padrão.

• 6 – Digite o nome Linhas, por exemplo.

• 7 – Feche o documento sem salvar.

• 8 – Selecione a ferramenta Balde de Tinta e
selecione o Padrão Linhas que criamos
anteriormente.
• 9 – Pinte a tela.
• 10 – Crie um nova camada com o nome Rodapé.
• 11 – Selecione a ferramenta retângulo arredondado
com um raio de 10 pixels e desenhe o rodapé.
• 12 – Rasterize a camada. Clique com o botão direito
do mouse na camada Rodapé e em seguida clique
na opção Rasterizar Camada.
• 13 – Selecione a ferramenta Letreiro
Retangular e selecione parte superior do
retângulo que iremos apagar.

• E em seguida pressione delete.

• Retire a seleção (CTRL+D)

• 14 – Selecione a camada Rodapé e aplique o
efeito Sobreposição Degradê. Clique sobre o
degradê e altere as cores para #f0f0f0 e ffffff.
• 15 – Crie uma nova camada e coloque o nome de
Conteúdo.
• 16 – Selecione a ferramenta Retângulo arredondado
e desenhe a área de conteúdo, preencha com a cor
branca.
• Corte a parte inferior.
• 17 – Crie uma nova Camada e defina como Barra
Lateral.
• Selecione a ferramenta Retângulo e crie um
retângulo na parte esquerda do seu site.
• Rasterize a camada e preencha com a cor #e2e2e2
• Crie uma nova Camada e defina como Navegação.
• Selecione a ferramenta Retângulo e crie um
retângulo na parte superior do seu site.
• Rasterize a camada.
• Selecione a camada Rodapé e aplique o efeito
Sobreposição Degradê.
• Clique sobre o degradê e altere as cores para
#f0f0f0 e #000000.
• Aplique o efeito Trançado. Tamanho 1 px e cor
#c9c9c9
• Crie uma nova camada com o nome de
Navegação Shine e Opacidade 10%.

• Crie um retângulo com a metade do tamanho da

barra de navegação e sobre a mesma.
• Preencha com a cor branca.

• Rasterize a camada.
• Agora crie outra camada com o nome
Cabeçalho.
• Repita os procedimentos feitos no rodapé.
– Crie um retângulo.
– Rasterize a camada.
– Corte parte inferior do retângulo arredondado. 10px
– Aplique efeito degradê. #f0f0f0 e #000000
– Aplique efeito trançado. 1 px e c9c9c9
• Adicione o Título do Site na camada Cabeçalho.
• Adicione o Texto do Rodapé na camada Rodapé.
Tamanho 2pt. Ex:
Copyright Alunos IFMG 2010 | Todos os direitos
reservados
• Digite os menus na barra de navegação top.
Home | Serviços| Portfólio | Downloads | Produtos |
Contato
• Digite os menus na barra lateral.
– Mensagem
– Links
• Infoexame
• iMasters