30 março 2014

Como fazer barrinha serrilhada de topo


今日はOlá, meus seguidores e visitantes!
Onde estão vocês mesmo? Apareçam, ok?
Senti falta de vocês nos comentários no post anterior ... nem me falaram se gostaram ou não do novo layout do blog.
Sobre a postagem de hoje, confesso que há  2anos procurei tutoriais que ensinassem a fazer essas cortinas/barrinhas serrilhadas pra por no alto do blog. Mas, só achava tuto pra PS e muito difícies. Ou então achava prontas as bases ou as barrinhas  editadas. Porém, queria aprender a fazê-las. Ano passado aprendi a fazê-las no PIXLR Editor e até coloquei no blog por algum tempo mas, como ganhei um layout, deixei  de lado essa idéia.
Querem saber como fazê-las? No final ainda dou o código de colocar no blog e disponho também, de algumas barrinhas. Clica rápido em "Leia Mais" !

A barrinha serrilhada que vou ensinar é tipo essa do print abaixo:


1º Abra o editor on line nesse link pixlr.com/editor
Abrindo o site, clique na opção "Criar uma nova imagem"



2º Regule as dimensões como na figura abaixo, marcando transparente
OK



3º Na barra de ferramentas, clique no seletor de cor e deixe na cor preta mesma.
Assim, você pode salvar essa barrinha como base.



4º Ainda nas ferramentas, escolha o balde de tinta e leve até a imagem xadrezinha pintando-a de preto

5º Vá na ferramenta da borrachinha e abaixo do menu do site clique na setinha do tamanho do pincel.
Clique em Criar pincel


6º Escolha como na figura abaixo: escolha o losango ♦  e regule  as seguintes modificações:
Raio 5
Dureza 100
OK com tudo já regulado

Escolha o pincel do Losango que você acabou de criar e clique fora, longe da imagem preta


ATENÇÃO: Aumentando o tamanho do raio, o serrilhado ficará mais largo
Aqui, nesse print a barrinha já instalada no topo do blog com serrilhado de Raio 5
Fica os "dentinhos" serrilhados bem pequenos e delicados



No outro print a barrinha com serrilhado de Raio 10
Fica bem mais largo. Então você altera o raio conforme você deseja que fique no seu blog


7º Para visualizar melhor o corte serrilhado aumente a visualização no navegador
Altere até 320
E depois estique a janela da imagem que você vai cortar serrilhado


8º Volte à barrinha de ferramentas  na ferramenta da Borrachinha
E clique no pincel do Losango que você criou e clique fora
Agora, posicione a borracha do Losango na base de baixo da imagem preta, bem no começo do lado esquerdo.
Veja abaixo como posicionar : a metade pra cima para que corte apenas um triângulo da imagem preta


Você vai posicionado a borracha do losango de modo a recortar a imagem preta, fazendo cortes triangulares um ao lado do outro. Caso você "borre" e não fique os triângulos iguais dê "CTRL + Z" e tente cortar de modo igual até o final



9º Vá à barrinha de ferramentas e clique no ícone de cortar. É o 1º ícone
Recorte a base preta, já serrilhada, de modo as duas pontas fiquem terminadas o serrilhado igual.


O site vai perguntar  se "Deseja salvar as alterações", clique em SIM


10º Volte à janela do Navegador e regule a visualização para o normal de 100%

Diminua também, o tamanho da janela da imagem segurando a ponta do mouse e minimizando a janela para o normal

11º Voltando à ferramenta de corte, clique nela
Acima da barra de ferramentas regule a ferramenta de cortar como está na figura abaixo


Leve a ferramenta de corte até a base serrilhada preta e segure e estique até o corte proporcional
Posicione o corte na parte debaixo, onde tem os "dentinhos" serrilhados e clique fora.


O site vai perguntar  se "Deseja salvar as alterações", clique em SIM

Pronto! Se você quiser salvar a base para editar a cor, aplicar textura.... ela já está pronta.

12º Caso queira editar a cor, vá na barrinha de ferramentas no Seletor de cores
Abrindo o Seletor de cores, digite (ou cole) no quadrinho depois de o código da cor que deseja pra combinar no seu blog e dê OK


13º Clique no Balde de tinta, na barrinha de ferramentas e pinte a base serrilhada com a cor que você escolheu.

 14º Para que não fique sombras pretas nos dentinhos da base serrilhada, vá no menu do site e clique em Camada. Escolha a opção Estilos de camada


Abrindo a janela de Estilos de Camadas clique na opção Brilho interno
Clique no quadrinho da cor que abrirá o seletor de cores
Aparecerá um conta-gotas. Leve-o até dentro da barrinha já colorida com a cor que você escolheu e dê OK

Para salvar sua barrinha, vá novamente no menu do site e  clique em Arquivo,na opção  Salvar que abrirá como essa janelinha abaixo:
Dê nome a sua barrinha
Escolha o formato PNG(Transparente, qualidade total)
OK e salve na sua pasta.


Seguem abaixo algumas barrinhas de topo pra você usar. São serrilhadas e outras simples.




Para você por no seu blog alguma destas barrinhas, basta pegar o link da imagem e colocar no seguinte código substituindo em LINK DA SUA IMAGEM



<div style='background-image:url(LINK DA SUA IMAGEM);background-repeat:repeat-x;top:0;left:0;width:100%;height:50px;z-index:100;position:center;'/>

Depois cole todo esse código antes de <head>, no seu Modelo de blog.
Esse código eu peguei no blog da Eloísa do  Having Cherry

11 comentários:

  1. Adorei eu não sabia como fazer eu sempre uso algum de um blog desculpa não ter te colocado lá de afiliados >3< já te coloquei na sidebar de Blogs amigos de utilitários okay?? e só passar um por um e vai achar o seu *3* bjkss
    http://thing-of-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ah, Bea sem problemas! Acontece isso qdo. trocamos o layout.
      Já aconteceu comigo, perdi os afiliados e tive que refazer tudo!
      Valeu! Bjs! (*^3^)/~☆

      Excluir
  2. Respostas
    1. Que bom que gostou, Yasmim!
      Coisas japonesas de novo rsrs Bjs (^з^)~chu

      Excluir
  3. Adorei Isa. Super amo esses tutoriais! Mas nunca consigo fazer :( triste fim haha. Um beijo!

    transbordandoglitter.blogspot.com

    ResponderExcluir
    Respostas
    1. Esse já é um nível acima de iniciante. Eu sempre pratico algumas vezes até melhorar. Quem sabe um dia vc fazendo suas edições consiga fazer coisas linda pro teu blog!
      Valeu! ( ^^)人(^^ )

      Excluir
  4. Realmente esse tuto é de nível um pouquinho acima do nível iniciante. Porque precisa de mais atenção e habilidade. Mas, tudo possível pra quem quer aprimorar nas ferramentas do PIXLR. Espero q um dia tu consigas!
    Bjs (ɔˆ ³(ˆ⌣ˆc)

    ResponderExcluir
  5. eu adorei!quer ser minha afiliada?eu adoro fazer tutoriais!

    ResponderExcluir
    Respostas
    1. Hey, Alanis! Procurei seu blog no ser perfil Google+ e não achei, já que não colocou o link da página pra sermos afiliadas. Só achei seu canal de vídeo. Se quiser ser afiliada do meu blog com o seu canal de vídeo e só me dizer. Se não, espero saber como seremos afiliadas ou só parceiras com troca de banner e links, ou comentários trocados.
      Kissus~♥ aguardo sua resposta

      Excluir