PSD Sweet

Bom, eu estava sem nada para fazer, então resolvi mexer um pouco no Photoshop, aí resolvi criar um PSD. O PSD é o seguinte: 

Coloquei nele o nome ''sweet'', porque não tinha criatividade para outro.

Gostou? Então baixe aqui.

Pack de fontes

                                       




Bom, estava vendo o DeviantART e vi essas fontes super lindas.  Elas são boas para design, para dar um ar bonito a seu design.

                               As fontes:

                            DOWNLOAD



                      DOWNLOAD



                      DOWNLOAD


                      DOWNLOAD

Criando borda no PS

   

Primeiro abra uma imagem no Photoshop, depois duplique a camada (CTRL+J).

Clique duas vezes sobre a camada 1. Irá abrir uma janela ''estilos de camada'',

a configure assim: 

Pronto! Sua borda já está pronta: 

Colocando slide no cabeçalho

                       

Vá em > Layout > Adicionar um Gadget > HTML/JavaScript
Cole este código:

<style type="text/css"> 
#slider {
width: 550px; /* Largura do slide */
height: 100px; /* Altura do slide */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 550px; /* Largura das as imagens, mesma largura do slide */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width: 550px; /* Largura das as imagens */
height: 100px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 100%;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
display: none;
}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px;}
.top {top: 0px;left: 0px;}
.bottom {bottom: 0px;left: 0px;}
ul { list-style-type: none;}
</style>
<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3slider.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000 /*Representa em milesimos de segundo o tempo de troca de imagem (neste caso temos 3 segundos)*/
});
});
</script>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/>
<span class="top"></span></a>
</li>
<li class="sliderImage">
<a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/>
<span class="top"></span></a>
</li>
<li class="sliderImage">
<a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/>
<span class="top"></span></a>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>>

Onde está escrito ''LINK AQUI'', você coloca o link do post, e em ''URL DA IMAGEM'' você coloca a URL da imagem e salve.
Cole o código abaixo acima do código do slide:
<div style="position: absolute; margin-top: -100px; left: -200px;">

Coloque isto no final do código:
</div>

Agora, salve.

Colocando efeito sépia nas imagens do seu blog

O meu primeiro tutorial aqui no blog será de como colocar efeito sépia nas imagens de seu blog.

Primeiro, vá em: modelo > editar HTML > tecle CTRL e digite na caixa de pesquisa: </b:skin>. Acima de ''</b:skin>'', coloque este código:

                                                             img {

-webkit-filter: sepia(0%);

transition:All 0.4s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

}

img:hover {

-webkit-filter: sepia(100%);

transition:All 1s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;}

Agora, salve. Pronto! Já está o efeito sépia nas imagens do seu blog.