[Tutorial] Categorias em imagens

sexta-feira, fevereiro 12, 2016 6 Comentários A+ a-


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!

Tenho 21 anos, sagitariana e apaixonada por livros. Atualmente estou cursando Design Gráfico na UFG. Meus Hobbies são escrever, ler, ver Doramas, animes, filmes e séries. Gosto muito de filmes e séries de terror, mas em questão de livros e mangás eu prefiro os de romances. Em 2016 publiquei meu conto "Lilith - A Princesa das Trevas" na antologia Demontale e fechei contrato com a Young Editorial para publicar o meu livro "Porcelana: Rubrum Luna"

O animal que me representa é o lobo.




6 comentários

Escreva um comentários
Bruna Guedes
EQUIPE GEEK
12 fevereiro, 2016 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
12 fevereiro, 2016 Deletar

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

Beijinhos.

Responder
avatar
Karina Erika
EQUIPE GEEK
12 fevereiro, 2016 Deletar

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.

Responder
avatar
Géssica Marques
EQUIPE GEEK
12 fevereiro, 2016 Deletar

Oiee!
Dá preguicinha mesmo kkkkkk

Beijinhos!

Responder
avatar
Amora
EQUIPE GEEK
25 janeiro, 2017 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
26 janeiro, 2017 Deletar

Editar é bem simples, só olhar tutorias como este!

Responder
avatar

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.