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?!
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
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.
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. 
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.
Cadastre-se no blog e faça o download do arquivo final em PNG.
Na 2ª e última parte deste tutorial, criaremos o menu e faremos ele funcionar bem no CSS.
Até lá.
CarlosHPS Webdesigner 
Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO
Não deixem de me fazer uma visita:
Assine o Feed de Comtentários ou URL de Trackback
Cara muito legal esse Tutorial, como sou novo nessa área de web design e com isso tbm sou iniciante no Fireworks, achei bastante legal e não sabia dessas técnicas ai.
