[Tutorial] Categorias em imagens

Olá geeks, tudo bem com vocês?

Hoje eu vim trazer um tutorial à pedido da Marcela Alessandra. Ela viu a minha aba Categorias e queria saber como fazer.

Vou mostrar como fazer igual à imagem acima. Vamos lá!

Primeiramente você deverá usar marcadores no seu blog. Para quem não sabe os marcadores funcionam como filtros. Você pode aprender a colocar marcadores no seu blog aqui.

Feito isso vamos ao tutorial. O tutorial é para quem usa Photoshop, sendo assim baixe o arquivo para editar aqui (www)

Vai estar mais ou menos assim quando abrirem o arquivo

Na camada onde está o circulo azul clica com o botão direito em cima dele, depois clique em opções de mesclagem.

Ao clicar em Opções de Mesclagem vai aparecer a seguinte janela, marque a opção Sobreposição de cor. Dentro dessa aba você irá encontrar um quadradinho com cor, ali você irá mudar para a cor que você quer. Escolhido clique em Ok, agora o círculo ficará da cor que você quiser.

Agora você deve escolher a imagem que quer que fique dentro do círculo, para isso deverá baixar uma imagem png, neste site aqui tem muitos (www). 

Se a cor que você escolheu for escuro sugiro que baixe uma imagem png branca.

Na imagem que eu enviei tem um livro, vá na camada dela e clique naquele olhinho que ele vai sumir, ou você pode excluir a camada.

Escolhendo o seu ícone você deverá abri-lo no Photoshop.

Selecione toda a imagem, em seguida copie ela e cole na aba onde está o círculo.

A imagem que você colou pode não estar aparecendo porque ela é grande demais, então clique na primeira ferramenta esquerda e marque a opção Mostrar Contr. Transf.

Feito isso usa imagem vai ficar com um gradado envolta dela para que você possa arrastá-la e alterar o seu tamanho. Arrumou do jeito que queria? Agora é exportar:

Depois de escolher o local que quer salvar clique em Salvar.

Prontinho, sua imagem está criada, agora só falta aplicar, né?

Vá no seu blog em Layout>HTML e cole o seguinte código alterando os locais destacados. Lembrando que você precisa fazer o upload das suas imagens você pode postá-las em um blog de teste e pegar a URL delas.

<center>
<a href="LINK DO MARCADOR" target="_blank" title="NOME DA CATEGORIA"><img src="LINK DA IMAGEM" /></a>
<a href="LINK DO MARCADOR" target="_blank" title="NOME DA CATEGORIA"><img src="LINK DA IMAGEM" /></a>
<a href="LINK DO MARCADOR" target="_blank" title="NOME DA CATEGORIA"><img src="LINK DA IMAGEM" /></a>
</center>

Lembrando que se quiser colocar mais que três categorias é só colocar mais uma linha (abaixo) antes de </center>

<a href="LINK DO MARCADOR" target="_blank" title="NOME DA CATEGORIA"><img src="LINK DA IMAGEM" /></a>

Agora é só testar!

Espero que tenham gostado!

Até o próximo post!