Parceiro GOLD

Mostrando postagens com marcador Tutoriais e Codigos. Mostrar todas as postagens

Deixe sua foto com um efeito Entrelaçado

Anônimo
1 - Abra sua imagem e comece duplicando duas vezes a sua camada apertando Ctrl + J.
2 - Selecione a camada de background e pinte-a de preto. Você pode pintar usando o pincel, o balde ou qualquer outra ferramenta responsável por pinturas e preenchimentos.
3 -Utilize a grade para delimitar o efeito traçado. Clique na camada do meio e vá em visualizar > Mostrar. Selecione a grade.

4 - Para ajustar sua grade com o tamanho da sua foto, pressione Ctrl + K e clique em Guias, Grades e Fatias e coloque o tamanho que achar necessário para a sua foto.


5 - Em seguida, clique na ferramenta letreiro retangular e com o Shift, selecione as três primeiras linhas que estão na vertical, sempre pulando uma fileira
6 - Crie uma máscara com essa seleção que você fez.
7 - Faça o mesmo do passo 5 e 6, mas lembre-se de clicar na 3º camada que você fez e, dessa vez, selecione na horizontal.



8 - Clique na 2ª camada com o Ctrl e note que isso vai fazer com que a máscara criada fique marcada. Clique agora em Ctrl + Shift + Alt e clique na 3ª camada, assim, todos os quadrados estarão selecionados.


9 - Com a miniatura da sua 2º camada clicada, pressione o Alt e tire a seleção dos quadros alternadamente. Quando acabar, aperte Ctrl + J para fazer uma camada.
10 -Faça exatamente o mesmo do 9º passo com a outra camada, no caso, a 3º
11 -Com o botão direito nesta última camada que você fez, clique em Criar máscara de corte e faça o mesmo com a outra camada que apenas os quadradinhos estão selecionados.



12 - Para fazer o efeito, clique 2 vezes em cima da última camada feita e clique em Brilho externo. Ajuste corretamente de modo que o Modo de Mesclagem seja Multiplicação, troque a cor para preto e de acordo com o seu gosto pessoal, mude o brilho. No caso, ficou em Expansão 5 e Tamanho 18 e selecione Técnica Precisa e dê OK.


13 - Com o botão direito nessa última camada, selecione Copiar Estilo de Camada e clique na outra camada com o botão direito para Colar o Estilo de Camada.


14 - Para visualizar o efeito pronto, vá em visualizar de novo e tire a grade que foi selecionada no início do tutorial.


Sem comentários

Insolamento de Cor

Anônimo
Nesse tutorial iremos aprender como a fazer um efeito bem legal, quer dar aquela cara bacana na sua foto das redes sociais?

Agora vai ficar fácil! Vamos la.



1- - Abra a imagem na qual você pretende fazer o isolamento de cor. Neste tutorial utilizei a imagem abaixo.


2- Primeiro devemos duplicar a nossa camada e renomeá-la para grayscale.


3 - Com a camada grayscale selecionada preciona Ctrl+U para abrir as opções de Hue/Saturation e coloque a opção Saturation em -100 como na imagem abaixo


4 - Agora que nossa imagem ficou totalmente em preto e branco, vamos usar a ferramenta Erase Toll para apagar o local no qual nós queremos que a cor deva aparecer. O que está acontecendo aqui é que estamos criando um “vazamento” na nossa camada grayscale consequentemente mostrando partes de nossa imagem original que ainda está colorida.


5 - Veja o nosso resultado, espero que tenham gostado do tutorial, é um efeito simples mas bem legal.


Sem comentários

Adicionar Ir Para Topo

Desenho




Demo: www.tecno-samp.net

Para instalar no seu blog, vá em “Design” – “EditarHTML” e procure por:


]]></b:skin>
Acima dessa tag cole o seguinte código CSS:

#toTop {
width:110px;  /* Largura do botão * /
background: #FF0000; /* Cor do botão*/
border:1px solid #000; /* Cor da borda */
text-align:center; /* Alinhamento do texto */
padding:5px; /* Distancia entre texto e borda */
position:fixed; /* Posição que faz com que ele corra por toda a página*/
bottom:5px;
right:5px;
cursor:pointer;
color:#555; /* Cor da letra */
background:#fff; /* Cor da letra */
text-decoration:none;
font-weight:700;  /* Tamanho da letra */
-moz-border-radius:5px;  /* Definições para o angulo do botão */
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Agora procure por:

</body>
Acima dessa tag cole esse outro código.

<a href='#' id='toTop'><span class='Apple-style-span' style='font-family: Arial, Helvetica, sans-serif;'>&#9650; Ir para Topo</span></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    /*-----------------------
    * jQuery Plugin: Scroll to Top
    * by Craig Wilson, Ph.Creative http://www.ph-creative.com
    *
    * Copyright (c) 2009 Ph.Creative Ltd.
    * Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.
    * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
    *
    * Version: 1.0, 12/03/2009
    -----------------------*/
    $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
      $(function() {
                    $(&quot;#toTop&quot;).scrollToTop();
                });
            </script>
Depois salve e pronto!

Sem comentários

Colocar Efeito Neon Sombra nos Links

Desenho
venho encinar a vocês como inserir efeito neon com sombra nós links do seu site, esse efeito deixa seu site mais moderno e eficaz, dando assim melhor aparecencia. 

É bem simples adicionar isso, acesse seu painel do blogger, vá em design > editar html 
Agora procure por: 


]]></b:skin>

& antes dessa linha insira: 

a:hover{ color: #FF000;text-shadow:0 0 .3em #FF000; 
}

OBs: Onde tem #FF000 Você pode está alterando a cor, para uma de sua preferencia.. vlw 
Unrated


Sem comentários

Adicionando um avatar no seu Post

Desenho
1. Edite a imagem que deseja utilizar. Use Faceyourmanga Click aqui; 
2. Abra o painel do Blogger e clique em Layout — HTML; 
3. Marque a opção Expandir modelos de widgets; 
4. Ctrl+F  Procure a linha <b:if cond='data:post.title'> .
5. Acima dela, digite o Codigo:
<div class='avatar'><b:if cond='data:post.author == &quot;Nome Postador&quot;'><img height='71' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXezLrVRrbKEd801mK4lCfAEaQA8o4wYOz_XFpdNQur59fzb5lfrWt8mKi4XBc2cpguN7GIoeo7w63t5d7aPt4TglrveWYhPlAWOfGhHgaBAHcrzITZZSfHWfHHmYXS5lory1-9a9mF_Y/s220/20110504233745_mario_YRDZJTAQ0INVWKH57F6MGL2P4XUS9OCE3B81.jpg' width='79'/></b:if></div>
6. Ctrl+F  Procure a linha ]]></b:skin> .
7. Acima dela, digite o Codigo:

.avatar { margin:7px 0px 0px 465px;position:absolute;}

Duvidas:
Como saber o Nome Postador?
1. Abra o painel do Blogger e clique em Configurações;
Click na Imagem para ampliar!


Sem comentários

Titulo do Blog em rolagem

Desenho
Veja que nem vai tomar muito do seu tempo. Como vamos mexer no código-fonte do blog, é importante fazer um backup do modelo para não perder nada e ser fácil de recuperar modificações desastradas.

1. Abra “Layout” e clique em “Editar HTML”. Nem precisa clicar em “Expandir modelo de widget”.
2. Ache a linha “</head>”.
3. Abaixo dela cole o seguinte script somente modificando o que está em vermelho:
<script language='JavaScript'>
var txt=" Título do Blog ";
var espera=90;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);}
rotulo_title(); </script>
Não escreva algo longo para não atrapalhar o entendimento do texto ou do título. O mais importante é dar destaque ao nome do seu blog e não pode confundir o visitante. 
Outro detalhe é que não funciona com acentuação nas palavras.
Unrated


Sem comentários

Colocando Menu Horizontal No blogger

Desenho
Atenção: Salve o seu template antes de começar!

1º Passo: 

Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]></b:skin>


#navigation{
height:30px;
width:auto;
position:relative;
line-height:2.9em;
margin:0px auto 0px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background: url(link da sua imagem) repeat-x;
}

#navigation li{
float:left;
display:block;
float:left;
margin:0;
pading:0;
}

#navigation li a{
display:block;
padding:0 10px;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}


#navigation li a:hover{
background:transparent url(endereço da sua imagem) repeat-x;
text-decoration:none;
}

Modifique os valores de "width, margin, color" conforme o seu template, visualize e salve!

2º Passo:

Vá em design >> Editar HTML (Não precisa Expandir modelos de widgets).
Para deixar o menu abaixo do cabeçalho, procure por:

<div id='header-wrapper'>
</div>


E cole este código logo abaixo:
<div id='navigation'>
  <ul>
<li><a href='inserir link aqui' title='Edit'>Nome da pagina1</a></li>
<li><a href='inserir link aqui' title='Edit'>Nome da pagina2</a></li>
<li><a href='inserir link aqui' title='Edit'>Nome da pagina3</a></li>
<li><a href='inserir link aqui' title='Edit'>Nome da pagina4</a></li>
<li><a href='inserir link aqui' title='Edit'>Nome da pagina5</a></li>
<li><a href='inserir link aqui' title='Edit'>Nome da pagina6</a></li>
</ul>
</div>

Adicione os links, altere o nome das páginas, visualize e salve!

Sem comentários