Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

2/17/2013

Como codificar sidebar's em PSD/PNG


Como pediram na c-box, irei ensinar a vocês a como codificar as sidebar's em psd/png que disponibilizei ontem (16/02).
Vamos começar?

Bom, para este tutorial eu usei o código base da Ana Carolina. Clique aqui para ter acesso a ele. E também usei a sidebar da Lindsay como exemplo. Mas o tutorial é o mesmo para a sidebar da Ashley e da Katy!

Para ajustar certinho ao código dela, eu tive que redimensionar o tamanho das minhas sidebar's em psd. Eu deixei na resolução de 300x435 pixels a sidebar completa.

Depois de fazer isso, cortei cada pedaço dela e deixei da cor do background do meu blog. Deixando topo, meio e fim separados...Veja a imagem para entenderem melhor...

(clique para ampliar)

Como corte a imagem da sidebar completa obviamente diminiui o tamanho de cada pedaço. Ficando assim...
Topo em: 300x187 pixels
Meio em: 300x51 pixels
Fim em: 300x165 pixels

Depois eu upei as imagens e coloquei no código da Ana.
Clicando no link que deixei no começo do post vocês poderão encontrar um tutorial explicando como colocar as partes da sidebar no código.

Bom não foi fácil, mas o resultado saiu perfeito...Confiram!

(clique na imagem para amplia-la)

Gostou ou tem alguma dúvida?...Deixe seu comentário!

Tutorial feito exclusivamente ao Sugoi Tutoriais, se copiar de os devidos créditos.

Nenhum comentário:

Postar um comentário

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.