[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!

Compartilhe este post:

Comentários
6 Comentários

6 comentários :

  1. Ótimo tutorial *-*
    Acho lindo, dependendo da imagem casa lindamente com o restante do layout haha
    beijos e adorei o post ♥
    Ganurb

    ResponderExcluir
    Respostas
    1. Oi Bruna!
      Fico feliz em saber que tenha gostado. Sim, são lindinhos *o*

      Beijinhos.

      Excluir
  2. Oi, muito massa seu tutorial. Já sabia como fazer, mas tô com uma preguiça danada de editar tudo. Essa preguiça minha acompanha todos os dias hahaha!

    Abraços,
    Karina do blog Eu e Minha Cultura.

    ResponderExcluir
    Respostas
    1. Oiee!
      Dá preguicinha mesmo kkkkkk

      Beijinhos!

      Excluir
  3. oi eu queria muito criar um blog e tals mais n consigo editar

    ResponderExcluir
    Respostas
    1. Editar é bem simples, só olhar tutorias como este!

      Excluir

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.

 
Copyright © Cantinho Geek. Designed by OddThemes