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

Neste tutorial você verá como criar um topo de site com menu CSS com o Fireworks, HTML e utilizando a técnica de sprites CSS.

E, para que tudo ocorra bem e você possa criar um topo de site com menu CSS, é preciso que tenha familiaridade com o Adobe Fireworks a partir da versão CS3. Com isso, ao final você terá o seguinte resultado:

Resultado final do tutorial Como Criar um Topo de Site com Menu CSS

Antes de iniciar o tutorial, baixe as fontes que serão utilizadas para criar os itens do menu:

[wpdm_file id=36]

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

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

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.

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.

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é

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é.

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

Fig. 07: Tratamento das bordas

E o resultado final deverá ser este:

Resultado final do tutorial Como Criar um Topo de Site com Menu CSS

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

Fig. 08: Tratamento no Logotipo

É isso, povo.

[wpdm_file id=37]

Na 2ª e última parte deste tutorial – Como Criar um Topo de Site com Menu CSS: Parte 2 , criaremos o menu em HTML e faremos ele funcionar bem no CSS.

Até lá.

CarlosHPS Webdesigner 8)

Webtutoriais:50C203A7


Posts Relacionados
Deixe uma resposta
Captcha Clique para atualizar o código