Como Criar um Topo de Site com Menu CSS: Parte 1

Olá, pessoal

No tutorial de hoje veremos como criar um topo de site estilizado (1ª parte) e aplicar a técnica de sprites CSS para a navegação (2ª parte). Sendo assim, dividiremos esta postagem em duas partes, ok?!

Pré-Requisitos

• Familiaridade com o Fireworks CS3 ou CS4.

  Download das imagens do tutorial
(1,7 MiB, 566 downloads)

Objetivos

• Criar um topo de sites estilizado.

  Download do Arquivo-Final em PNG
(2,5 MiB, 100 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

PARTE 01 – Criação do Topo do Site

1º  Passo – Dimensões e Importação da Imagem 1

Vamos ser bastante generosos. Criemos um arquivo com as dimensões 960 x 400 pixel, com cor de background (fundo) #000000.

Em seguida, vamos importar (CTRL+R ou File > Import) a nossa primeira imagem (bloco de notas). Após a importação e com ele selecionada, vamos redimensioná-la proporcionalmente, evitando que a mesma fique distorcida. Para isso, aplicaremos o comando Transform Numeric (transformação numérica), através do atalho CTRL + SHIFT + T ou pelo menu Modify > Transform > Nemeric Transform…

Apliquemos a seguinte transformação:

Fig. 01: Transformação Numérica

Aposto que alguns de vocês exclamaram:

Uai, oxente, bah tchê, vixi, nooooossa… a imagem sumiu!

Muita calma nessa hora…rsrs

O problema é que ao redimensionarmos uma imagem um tanto grande, ela “some” da nossa área de edição. Mas a solução está a seguir:

Fig. 02: Posicionamento da imagem

2º Passo – Inserir e Trabalhar com a Imagem 2

Vamos trabalhar agora a imagem da caneca de café que ficará sobre o bloco de notas.

Primeiramente, vamos abri-la (CTRL+O). Se você estiver vendo apenas um fundo branco, pressione CTRL + 0 (zero) que a imagem caberá totalmente na área de edição do Fireworks.

Agora vamos redimensioná-la (CTRL+SHIF+T) para 800 x 531 pixel.

Em seguida, com a varinha mágica (W) vamos retirar o fundo branco da imagem. Lembrando que, existem outras técnicas mais precisas para retirarmos o fundo, mas como a imagem não é complexa, esta ação é a mais indicada.

Fig. 03: Retirando o fundo branco da caneca.

E por fim, aplicando o velho e conhecido CTRL + C e CTRL+V, insiramos a caneca sobre a imagem do bloco de notas tratado anteriormente.

Fig. 04: Caneca importada e posta sobre o bloco de notas.

3º Passo – Inserindo a Mancha de Café Sob a Caneca

Bom, uma montagem bem bacana para o nosso topo é a inserção de uma mancha de café sob a caneca. Aí que trataremos a imagem 3.

Como já aprendemos como redimensionar e retirar o fundo da imagem, aplicaremos este mesmo procedimento para a imagem da mancha, tendo o seguinte resultado:

Fig. 05: Inserção da mancha de café

Eu nem preciso dizer que está meio grosseiro essa mancha, não é verdade? Então vamos aplicar um Blend Mod > Multiply para deixá-la mais real.

Fig. 06: Tratamento da mancha de café.

Agora melhorou.

4º Passo – Refinamento do Topo

Para finalizarmos a 1ª parte deste tutorial, vamos fazer um refinamento no topo, inserindo uma borda e recortando a imagem para termos o resultado ideal.

Fig. 07: Tratamento das bordas

E o resultado final deverá ser este:

Resultado Final

Após eu ter publicado esta imagem final, com certeza terá gente que vai perguntar:

Carlos, como você fez o efeito do seu logotipo?

É bem simples, pessoal.

Com a logo selecionada (a original do blog são das cores roxo e verde), basta aplicarmos um tratamento de matiz e saturação na mesma.

Falei grego? rsrs

Seguinte:

Fig. 08: Tratamento no Logotipo

É isso, povo.

  Download do Arquivo-Final em PNG
(2,5 MiB, 100 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

Na 2ª e última parte deste tutorial, criaremos o menu e faremos ele funcionar bem no CSS.

Até lá.

CarlosHPS Webdesigner

Webtutoriais:50C203A7