Menu CSS - Imagem (III)

Conseguiu colocar o menu no seu blog? Personalizou os links? Deu tudo certo até agora, mas você quer mudar a cor do menu?
Esse é um passo um pouco mais trabalhoso, mas relaxe que não tem nada de muito complicado, não! Vamos lá!

Se ainda não fez o download de imagem, é hora de fazer! AQUI!

Perceba que a imagem é tem duas, uma em cima e outra embaixo, sendo que a primeira se trata do menu normal e a debaixo do menu selecionado. Preste atenção nisso na hora de mudar de cor, ok?

ATENÇÃO: Para visualizar as imagens de exemplo clique nelas!

1º Passo

Abra com o Photoshop a imagem do seu menu (a imagem maior, tabrightF.gif). Ela estará em .gif, o que nos impede de mexer com ela. Então, é preciso que você a selecione e copie para um arquivo novo.
Para selecioná-la aperte M no teclado e clique com o botão direito em cima da imagem, coloque em Selecionar Todas (a primeira opção). Aperte Ctrl + C.
Abra uma nova imagem e aperte Ctrl + V.

2º Passo

Agora vamos criar uma nova camada de ajuste. Então, embaixo da janela de camadas procure pela 4ª opção (um círculo preto e branco), nela procure por “Cor Seletiva” (2º opção da 3º parte) como mostra a imagem. E vá mexendo nas opções até encontrar a cor que você quer.

3º Passo

Para chegar a cor da imagem eu mexi em NEUTRO (0; 0; +100; +49), como mostra a imagem.

Atenção: Não esqueça de marcar o campo Visualizar ali do lado direito da janela, ou você não verá o que está fazendo! :)

4º Passo

Conseguiu chegar a cor que queria? Então você precisa salvar essa nova camada de ajuste para carregá-la na outra imagem. Se fechou a janela de cor seletiva, clique duas vezes no círculo preto e branco ao lado da camada de ajuste.
Não achou o botão salvar, olhe na imagem:

Atenção para onde está salvando o arquivo, daqui a pouco usaremos ele!

5º Passo

Até aqui tudo bem? Vamos alterar a outra imagem (tableftF.gif), a fininha. Lembre-se que ela está em .gif, logo teremos que refazer o primeiro passo.
Já está com imagem pronta, então repita o 2º passo (criar uma nova camada de ajuste de cor seletiva) só que agora, ao invés de você mexer nos botões vai apenas carregar as definições que salvou. Uma imagem para ajudar:

6º Passo

Pronto, é isso! Agora salve a imagem, de preferência como .gif, porque preservará a transparência e você pode por o menu em qualquer fundo.
Depois é só upar a imagem e substituir nos links do menu. No outro tópico já coloquei isso, mas vou por de novo para ficar mais fácil, ok?

COLOCANDO AS IMAGENS NO MENU

Procure esse trecho do código e coloque a url no lugar indicado.

#menu a {
float:left;
background:url(COLOQUE AQUI O
MENU FINO) no-repeat left top;
margin:0;
padding:0 0 0
4px;
text-decoration:none;
}
#menu a span
{
float:left;
display:block;
background:url(COLOQUE
AQUI O MENU MAIOR) no-repeat right top;
padding:5px 15px 4px
6px;
color:#FFFFFF;
}

E é isso, tomara que você tenha conseguido! Até a próxima!