Como deixar um objeto colorido

Olá Designers!
Voltamos a ativa com novos tutoriais para você ! Agora usando o programa Photoshop CS6 !

Bom,vamos começar. No tutorial de hoje ensinarei como deixar um objeto colorido usando o Photoshop CS6, e com todo resto preto e branco. 

1. De CTRL+O e abra sua imagem no PS. (clique para ampliar)

2. Do lado direito,em Layer, clique nele e de um CTRL+J (multiplicar)

3. Clique no Layer 1 copy (o primeiro) e de um CTRL+U. 
Irá abrir o Hue/Saturation. Diminua o Saturation para 0 ficando desse jeito:
De Ok.

4. Aperte a tecla E ou selecione easer (borracha), e passe por cima do objeto que você quer colorir.

De zoom para pegar os detalhes mais precisamente.

Quando terminar,terá o seguinte resultado:

Espero que tenham gostado da dica, até a próxima penguins !

Postagens com Photoshop

Fala galera tudo bem ? 
Nessa postagem não vim mostrar um tutorial e sim dar um aviso.

Recentemente meu Fireworks deu um erro interno no qual não poderei usa-lo para mais nada, e as versões anteriores não estão disponíveis para download.
Sendo assim,começarei a postar tutoriais com o Photoshop CS6 !

Espero que gostem do aviso, qualquer dúvida podem deixar nos comentários. Até mais.

Pack de Fontes

Olá pessoal, esta é minha primeira postagem aqui no  Club Penguins Designers e estarei disponibilizando um Pack de Fontes para vocês usarem no seu blog/site.

Este Pack contém 365 fontes!

Clique Aqui para baixar!

            Mateus2604, OFFLINE!

Criando e colocando imagem no título de gadget

Salve Salve penguins ! Tudo bem ? Nescauh aqui !

Hoje estarei ensinando como criar uma imagem e coloca-la no título de cada gadget para deixar seu blog bem mais bonito. Bom vamos lá.

Para começar abra seu Fireworks e crie um novo documento de 232x40 px.

Faça um retângulo cobrindo todo espaço de desenho,em seguida coloque um contorno e comece a colocar a imagem,reduzir ou aumentar ela para ficar posicionada no lugar certo.

Agora adicione alguma imagem do lado ou mesmo no meio de sua sidebar,personalize-a a seu gosto e salve.

Editando o HTML

1. Vá em Modelo.

2. Clique em Editar HTML.

3. De CTRL+F e procure pelo seguinte trecho:

h2 {

Em h2 { terá vários códigos dentro,no final do código cole o seguinte trecho:

background-image: url(endereço da imagem);}

Seu código ficará parecido com isso:

h2 {background-color: #6699FF;
background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}

Agora visualize, e salve se estiver tudo OK.

Espero que tenham gostado da dica, até a próxima !

Imagem ao lado título do post

Olá Designers ! Tudo bem ?

Um sistema muito bom,é colocar a foto do autor ao lado do post,substituindo a apresentação dele etc...
O bom do sistema,é que a foto pode ser personalizada com vários tipos de imagem !

Vamos começar !

Criando a Imagem

1. Abra o seu programa de edição de imagens,eu por preferencia,utilizarei o Fireworks CS6 !

2. Crie um novo documento do tamanho de sua preferencia,o meu será 100x100 pixels.

3. Crie uma base para a sua imagem,pode ser um quadrado,circulo,fica a sua preferencia.
Coloque um fundo,ou pinte de alguma cor mesmo.

4. Agora coloque algum penguin,ou algum texto para personalizar a sua imagem,edite a seu gosto.

Editando o HTML

1. Vá em Modelo, selecione Editar HTML e marque a caixinha Expandir Modelos de Widget .

2. De CTRL+F e procure pelo seguinte trecho:

<b:if cond='data:post.title'>;

3. Quando achar,cole o seguinte código ACIMA do trecho que você procurou fazendo as suas alterações:

<b:if cond='data:post.author == "NOME"'><img src='URL DA IMAGEM' height='50' width='60' alt='DESCRIÇÃO DA IMAGEM'/></b:if>

NOME - Coloque aqui o seu nome de perfil no blogger. Se você tiver mais de um autor,adicione esse código duas veze,um com o seu nome para as Suas postagens, e o outro para as postagens do outro autor.
(cada autor deverá ter um código)
URL DA IMAGEM - Coloque aqui o link da sua imagem.
LARGURA - Coloque aqui o tamanho da largura da imagem.
DESCRIÇÃO DA IMG - Coloque o texto que irá aparecer ao passar o mouse por cima. (se não quiser texto,apenas apague)

Depois disso salve.

A imagem ficará ao lado do título,você pode alterar o lugar dela pesquisando no seu código e trocando o lugar do segundo código.

Se ficou alguma dúvida deixe nos comentários !

Efeito tecla ALT nas imagens

Olá penguins tudo bem ?

Hoje vim trazer um efeito super legal para vocês personalizarem suas imagens,deixando seu blog bem sofisticado !

O nome do efeito é Efeito tecla Alt , ele faz aparecer uma caixinha de texto colorida,ao passar o mouse na imagem.
Clique >>AQUI<< para conferir o efeito. (vá na parte do "Como ser um...", e passe o mouse sobre uma imagem.

Bom,vamos começar !

1. Vá em Layout no seu painel,clique em Adicionar Gadget.
2. Selecione o HTML/JavaScript e cole o seguinte código dentro dele:

<style type="text/css">
<!--
#tt {
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
position:absolute;
display:block;
}
#tttop {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
#ttcont {
display:block;
padding:2px 7px 3px 7px;
margin-left:5px;
background:#fda61f;
color:#FFF;
}
#ttbot {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
-->
</style>
<script language='javascript' type='text/javascript'>
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>
<a href="LINK DA PÁGINA" target="_blank" onmouseover="tooltip.show('Texto da box');" onmouseout="tooltip.hide();" ><img src="Link da imagem" border="0" /></a>

Altere apenas as partes em Vermelho escritas LINK DA PÁGINA,Texto da box, e Link da imagem.
Visualize, e salve. 

Qualquer dúvida deixe nos comentários !

Como por o blog em manutenção

Olá Designers !

Sempre estamos fazendo alterações no layout,assim alguns designers preferem por o blog em manutenção para os leitores não verem o blog todo bagunçado e desorganizado.
Hoje vou encinar como deixar seu blog em manutenção.

1. Vá em Modelo, e depois em Editar HTML.
2. De CTRL+F e procure pela tag <body>
3. Depois de <body> cole o seguinte código:

<div id ="manutencao"><center><h3>Blog em manutenção</h3><br/>MENSAGEM</center></div><span class='item-control blog-admin'>

Altere apenas aonde está escrito MENSAGEM, uma dica é colocar o código do seu xat ali, para os membros poderem conversar,ver quando o novo layout irá ficar pronto etc...

4. De CTRL+F novamente e procure pela tag </body> 
5. Antes de </body> cole o seguinte trecho:

</span>

Agora só os administradores logados irão ver o blog !

Se você quiser adicionar algum estilo a sua mensagem, você poderá usar o código abaixo,fazendo suas alterações;

<style type='text/css'>
#manutencao {
background-color: #ffffff;
-webkit-border-radius: 15px; 
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px; 
 }
</style>

Cole o código acima, ANTES de <body> e salve.

Espero que tenham gostado da dica, até a próxima penguins !