Fazendo e colocando faixinhas na sidebar

Então amores, vai ficar assim (clica). Eu vou ensinar esse estilo por enquanto, mas se me pedirem mais eu até posso fazer outros. Veja os prints clicando nos (x)

1. Abra um novo documento no Photoshop (eu usei os tamanhos 240x70) (x

2. Com a ferramenta rectangle tool, faça um retângulo que vai desde a parte superior até a metade do espaço, deixando um espaço dos dois lados (x)

3. Agora com a ferramenta rounded rectangle tool, faça um retângulo arredondado que vai desde o topo até um pouco antes do final da imagem, sem ultrapassar os limites do retângulo anterior (x)

4. Dê Rasteryze Type nos dois layers (x) e depois dê merge layers (x)

5. Crie um novo layer (x) e o arraste para baixo (x)

6. Dê Ctrl+K. Vai aparecer uma janela. Clique em Guides, Grid & Slices e deixe igual ao meu  (x)  Depois dê Ctrl ’ e vai aparecer uma gradezinha na imagem (x)

7. Selecione a ferramenta Polygonal Lasso Tool, e repare que a grade vai atraí-la. Trace uma forma que nem a minha  (x)  E preencha com o pincel, em um tom mais escuro que o primeiro layer. Dê Ctrl D para ocultar a seleção e Ctrl ’ para ocultar a grade (x)

8. Crie um layer de texto e escreva o que quiser.

9. Personalização dos layers:

Layer 1 (a parte grande)

  • Dê dois cliques no layer, e selecione Inner Shadow, e deixe assim  (x)
  • Depois selecione drop shadow e deixe assim  (x)
  • Depois vá em Filter > Noise > Add Noise e deixe assim  (x)

Layer 2 (triângulos menores do lado, a “dobra”)

  • Clique no layer e Dê Ctrl F para adicionar o mesmo noise que você usou no layer 1  (x)

Layer 3 (layer de texto)

  • Dê dois cliques no layer, selecione drop shadow e deixe assim  (x)

Prontinho! Agora é só salvar em formato png (x)

Vamos colocar as faixinhas no theme. Coloque isso no CSS:

/*** Faixinha da sidebar by MT waitingmiracles ***/
#faixinhamt {width: 240px; height: 70px; background: url('URL_DA_FAIXINHA'); margin-top: -24px; position: absolute;}

Substitua o URL_DA_FAIXINHA pela URL da sua faixinha, que você pode pegar aqui.

Agora, coloque isso na caixinha da sua sidebar:

<center><div id="faixinhamt"></div></center>
<br><br><br><br>

(*Se a div não aparecer pela dash por causa do pre, entre no making para ver o código)

Deu Update Preview. Tudo certinho? Nada fora do lugar? Agora é só creditar ao making-themes e ao waitingmiracles pelo tutorial em algum lugar do seu theme e dar like nesse post ♥

Qualquer coisa, venham na ask ^.^

{Carol}

  1. making-themes posted this