Image Map

20.8.12

Tutoriais: Como fazer Ribbon + Colocar Ribbon no título dos gadgets

Oooooooi!! Mais um tutorial :) Eu estarei ensinando como você  fazer ribbon e coloca-lo no titulo do gadget do seu blog!!
Vamos começar? Continue lendo ;)
Para iniciar, vamos aprender a fazer o ribbon, eu faço pelo photofiltre studio, 
vamos começar!!!
Primeiramente você precisa tirar o print da sua barra lateral  para que o ribbon fique no tamanho certo ok?!
depois abra um arquivo de 300x300 para facilitar e clique em transparência automática.
Cole o seu print dentro da imagem que você abriu e coloque até a sua barra lateral, assim:

Vamos começar a montar !!!
(NÃO JUNTE AS CAMADAS)
Comece fazendo um retângulo um pouco maior que a barra lateral, depois  escolha a cor e pinte dentro com a ferramenta "ferramenta do pincel"  veja o exemplo aqui [www] 
Com a imagem ainda selecionada copie e depois desfaça o retângulo feito, agora cole para que ele abra em uma camada ;)
Depois disso, vá até esta ferramenta > clique aqui < , escolha agora o mesmo tom de cor que você está usando, porém, mais escuro. Faça o seguinte :
Depois de ter feito isso, com a imagem ainda selecionada copie, desfaça e cole novamente!
Repita o processo com o outro lado

Reta final :
EXCLUA  a camada onde está a sua barra lateral e junte as camadas 1,2,3 em ctrl Enter 
Vá até seleção> selecionar camada e depois até a ferramenta de degradê abaixo:
Ajuste desta maneira > clique aqui para ver a imagem
Na cor dois, coloque a cor que você escolheu. claro rsrs

 Depois junte as camadas, selecione apenas a parte desejada (o ribbon) clique no botão direito do mouse e escolha a opção Camada Rente e salve.
Deu para entender até aí? tentei explicar da melhor forma rsrs

Agora vamos aprender a colocar o ribbon no título do gadget !

Vá até o HTML do seu blog, clique em Ctrl F e pesquise por:
/* Mobile
Antes do código body.mobile  , cole o código abaixo:

.sidebar .widget h2{
background: url(LINK DO SEU RIBBON) no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}
Você precisa hospedar a imagem do seu ribbon  e substituir no espaço  LINK DO SEU RIBBON pelo link da sua faixinha!! Veja como hospedar aqui.

Entenda os códigos Margin-top e Margin-left !

O código margin top é para SUBIR sua faixinha, se você quiser mais para cima substitua o valor até chegar no seu ideal.
O código Margin-left é para colocar sua faixinha mais para esquerda. Vá modificando até chegar no seu ideal.
Lembrando que o tutorial para colocar as faixinhas na barra lateral, vi neste blog CupCake
Visualize e se estiver tudo certo salve!
Beijos e até o próximo post ;)

16 comentários:

  1. Que chique! Gostei ;)
    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir
  2. Olhe como o meu ribbon ficou: http://i47.tinypic.com/2642uz6.png

    ResponderExcluir
  3. Adorei o tuto, só que sou um c* pra mexer com o photofiltre KKKKK
    Adorei o layout do seu blog u-u

    Amei o blog, já estou seguindo ! *u*
    OPS, lembrei, estou fazendo um bloco de afiliação lá no Blog, quer ser afiliar? Só seguir de volta e comentar em algum post que quer a afiliação, simples assim ;p
    Espero sua visita, xoxo, Almost 18
    A L M O S T 1 8 ~*

    ResponderExcluir
  4. Ameii...Mas que ta um tuto de:Como fazer Ribbon no Photoscape?

    ResponderExcluir
  5. Com o photoshop cs3 é a mesma coisa?

    ResponderExcluir
  6. Amei o tutorial, só assim consegui entender como colocar o ribbon (:
    -> Magia Teen ( Em reforma ) & Always Dreeam

    ResponderExcluir
  7. Legal, visite meu blog: http://black---cherry.blogspot.com.br/. Bjss

    ResponderExcluir