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 !

Barra de rolagem personalizada #2

Salve Salve penguins como vão ?

Lembram do tutorial da Barra de Rolagem Personalizada ? Então,ela está de volta em uma nova forma !
Antes a barra antiga era oval,sem chance para mudar o formato dela,agora a nova barra é mais bonita,com um estilo retangular para seu blog.

Bom,vamos começar !

Abra seu blog, vá em Modelo>Editar HTM> CTRL+F e procure por:   ]]></b:skin> 
Quando encontrar,cole o seguinte código ACIMA da tag que você procurou:


*{
scrollbar-face-color:#FF69B4;
scrollbar-highlight-color:#FF69B4;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#FF69B4;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; } 

Para mudar a cor da barra,edite apenas os seguintes trechos:


::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; } 

Na primeira linha,mude o #343434 para a cor de sua preferencia. (isso definirá o fundo da barra)
Na segunda linha,mude o #FF69B4 para a cor de sua preferencia. (isso definirá o botão da barra)
Se você não souber as cores em HTML, clique >>AQUI<< e veja !
Se estiver tudo certo visualize e salve .

Espero que tenham entendido a dica,se ficar alguma dúvida posta nos comentários que eu irei te ajudar.

Até a próxima !

Gerador de caixinha Link-me

Salve rapaziada tudo bem ? Nescauh aqui !

Em todos os blogs há sempre uma área com o banner do blog escrita "Link-nos", e embaixo do banner uma caixinha com um código para linkar o blog, hoje vou encinar como criar essa caixinha e por em seu blog !

Para começar, digite o link do seu site no primeiro espaço,depois ,pegue o link do seu banner e cole no segundo espaço:

No terceiro espaço não escreva nada,apenas clique em Gerar Código.

Na caixinha maior aparecerá o código do seu link-me, copie e cole na sua página.

Quando terminar ficará deste formato:

<a href="http://connectpenguin.blogspot.com/" target="_blank"><img src="http://i46.tinypic.com/ofshuv.png" border="0" /></a>

Bom,espero que tenham gostado,qualquer dúvida deixe nos comentários !

Criando e linkando um menu

Olá Designers ! Tudo bem ? Nescauh aqui !

Uma dúvida frequente entre os iniciantes,é como linkar partes do cabeçalho. Para isso devemos usar coordenadas e como isso seria muito complicado,o site Image-Maps criou um sistema para facilitar nossa vida.

Bom vamos lá.

Abra o Fireworks e crie um cabeçalho qualquer e escolha o lado do seu menu (em cima ,embaixo ,etc) e crie o menu junto:

Ok,agora que o cabeçalho está feito, entre no site : http://image-maps.com/ , esse site é que vai nos ajudar a linkar o cabeçalho.

No site,faça upload de seu cabeçalho,ou cole o url dele na caixinha,em seguida clique em Start Map your Image.
Depois de carregar,clique em Next Step,então clique no botão escrito "Retangle" e crie o retângulo sobre o seu menu igual a imagem:

 Coloque o link aonde mostra a imagem,e clique em Save .

Depois de linkar todo seu menu, desmarque todas as caixinhas laterais conforme a imagem:
(elas servem para dar divulgação)

Quando terminar,clique em Get Your Code.
Espere carregar e selecione a aba HTML CODE, copie todo código e vá para seu layout.

Copie todo o código,e vá em Modelo>Editar HTML> De CTRL+F e procure por:

<div id='header-wrapper'>

Quando encontrar,cole o código DEPOIS disso,visualize e salve.

Espero que tenham ajudado a vocês.Até mais.

Efeito Brilho

Salve rapaziada tudo bem ? Nescauh aqui.

Nessa postagem vou encinar a vocês fazerem um dos meus efeitos favoritos, o efeito Brilho.
Como o próprio nome já diz,esse efeito da um brilho em imagens e textos e é super fácil de fazer.
Vamos começar.

Para começar abra um novo documento,imagem ou texto no Fireworks e coloque alguma imagem ou texto.

Clique com o botão esquerdo nela,selecione o + em efeitos, e clique em Photoshop Live Effects,depois disso clique em Brilho Externo e configure desse jeito:

Clique em OK e veja o resultado.

Esse efeito serve tanto para fotos,como para textos:

E ai o que acharam desse efeito ? 

Qualquer dúvida deixa nos comentários.

Efeito Espelho

Olá galera !

Hoje venho encinar um efeito super legal para vocês, o nome dele é Efeito Espelho !
O efeito espelho é um efeito que aparece o reflexo do texto embaixo dele,como se tivesse um espelho embaixo do texto.

Para começar crie um texto qualquer,depois clique no texto e selecione CTRL+C e CTRL+V (copiar e colar) e deixe um embaixo do outro, conforme a imagem:

Agora clique com o botão direito do mouse no segundo texto,e clique em Transform,depois clique em Rodate 180° .
Seu texto ficará assim:

Para finalizar e dar o ar de espalhado,clique no segundo texto, e em opacidade selecione 50%.

Espero que tenham gostado do efeito,qualquer dúvida deixe nos comentários !

Até mais.

Como criar e colocar um botão Leia Mais no blog

Salve Salve Penguins, como vão ?

Ter um blog limpo,rápido, e com uma navegação fácil é muito importante para agradar os leitores, quando um post fica grande de mais para ser exibido na página principal,é recomendável usar o Jump Break do blogger para isso.
O Jump Break para quem não sabe,é uma função do blogger para você apenas exibir um link ou imagem escrito "Clique e veja o resto do post", para a pessoa ser redirecionada ao post completo, assim mantendo sua área principal limpa.

Então,hoje vamos encinar como criar um botão Jump Break, e como coloca-lo no blogger

Criando o Botão

Para começar a criar o botão,abra um arquivo do tamanho de sua preferência no Fireworks,e faça um retangulo/base para seu botão. O meu botão tem o tamanho de 200x65 px.

(a parte cinza não é um contorno,apenas saiu no print na área de desenho)

Agora adicione os efeitos,e o contorno do seu botão. Se quiser coloque alguma textura e deixe do jeito que você quer.

Agora para finalizar o botão,coloque alguma imagem e um texto informando que o post ainda não acabou.

Quando terminar,hospede o seu botão em algum lugar e pegue o link dele.

Editando o HTML

Clique em Modelo e, depois em Editar HTML.
Marque a caixa Expandir Modelos de Widget e procure por:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Na parte em laranja, substitua por 

<img src='URL_DA_IMAGEM_AQUI'/>

Novamente em laranja, altere URL_DA_IMAGEM_AQUI pela url de sua imagem.

Bom,é isso,qualquer dúvida poste nos comentários, até a próxima.

Como criar parcerias rolantes

Olá amigos tudo bem ? Nescauh Here !

Uma das formas mais adquiridas por blogs para ganhar mais números de visitas é a troca de links,mais conhecida como "Parceria", a troca de links funciona quando dois blogs colocam um banner do blog oposto em seu site,promovendo assim a divulgação de tal site.
Então,hoje estarei ensinando como colocar essas Parcerias com uma lista de banner rolando na sidebar.

Para começar vá em Layout>Adicionar Gadget>HTML/JavaScript e cole o seguinte código:


<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" width="150" height="100" direction="down" scrollamount="3">

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

</marquee>

Explicando as cores

Vermelho: Aqui são definidas as larguras do scroll, em Width , você pode mudar 150 para o número que corresponde a largura da sidebar. 
Em Height você pode mudar para a altura da sidebar.

Verde: Corresponde ao lado em que o scroll vai, ex: Se você quiser que os banners rolem para cima,altere "Down" para "UP", você pode usar Down,up,right e left.

Laranja: Corresponde aos link,e a url da imagem dos banners.

Para adicionar mais um banner,basta acrescentar mais uma linha igual a essa:

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

Espero que tenham gostado da dica.

Qualquer dúvida,poste nos comentários, até mais !

Como girar imagens no Fireworks

Olá designers tudo bem ?

Bom,uma dúvida muito frequente entre os iniciantes,é como girar imagens no Fireworks.
Para começar abra sua imagem no fireworks, e clique nela. 

Agora aperte CTRL+T ou clique na ferramenta de rotacionar,embaixo do ponteiro Preto em Selecionar.
Irá aparecer várias bordas na imagem,clique na parte de cima, e gire com o mouse.

 Gire conforme você quer,e quando acabar apenas solte o click.

Espero que tenham gostado da dica, e isso serve também para textos !
Até a próxima .

Xat dentro da caixa de regras

Olá penguins !

Hoje irei mostrar como criar uma caixa de regras para o seu xat,e como colocar o xat dentro dela, vamos começar !

Para começar crie um novo documento transparente de 590x780 px, em seguida clique com a tecla CTRL junto com a tecla - (menos) até o zoom ficar em 50%, ou clique em 50% no canto da tela como mostra a imagem:

Agora faça uma base para ser a caixa de regras mas lembre-se você só poderá ocupar uma parte de cima da base ,por que a parte de baixo ficará o xat !
Adicione cores,contornos,efeitos, etc personalize a seu gosto.

Acrescente o texto com suas regras,e se quiser adicione alguma imagem para personalizar mais a caixa de regras.
Dicas para regras:

-Sem Flood.
-Sem palavrão.
-Sem DV / Spam.
-Sem pedir cargos.
-Sem assunto para +18.
-Sem excesso de CAPS LOOK.

Quando terminar sua caixa de regras estará mais ou menos assim:

Dica: Para o xat ficar "transparente" , coloque o fundo dele com as mesmas cores/texturas da caixa de regras.

Implantando no Xat

Para implantar no xat,vá em Layout:Adicionar Gadget>HTML/JavaScript> E cole o seguinte código na área de texto:


<div class="widget html" id="html1">
<div class="widget-content">
<center>
<div style="background-image: url(COLOQUE O LINK DO FUNDO); width: 590px; height: 780px; line-height: 13px;"><span style="color: rgb(255, 255, 255);">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img style="visibility:hidden;width:0px;height:0px;" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMzEwNDQ2NjU5NzcmcHQ9MTMzMTA*NDY3NTUwMyZwPTUzMTUxJmQ9Jmc9MSZvPWYxNjZhMzk*MTM5ZDRiMWRiNmQ2/NjJmMzZkZjk1YmU4.gif" border="0" height="0" width="0" />COLE O CÓDIGO DO SEU XAT AQUI


Edite as partes em negrito,depois salve.

Atenção: Coloque esse gadget dentro da área de postagem,pois de colocar na sidebar não caberá.
(Nós colocamos no rodapé,confira ! )


Qualquer dúvida deixe nos comentários, até a próxima.

Como fazer Botão de Voltar ao topo

Olá penguins tudo bem ?

A pedidos,estarei ensinando como criar um botão de voltar ao topo,e como inseri-lo no blog ! Mãos na massa !

Criando o Botão

Abra seu Fireworks CS6 e crie um novo documento com o tamanho de 130x60 px; (sua preferência) com o fundo Transparente !
Faça uma base para seu botão e adicione cor e textura.

Agora adicione o texto,ou imagens no seu botão, e para finalizar adiciona um contorno.

Salve sua imagem,vá em Layout>Adicionar Gadget>HTML>Javascript.

Então cole este código no seu gadget substituindo o LINK DA IMAGEM pelo link do seu botão.

<div style="position:fixed; bottom: 0px; margin-right: 6px; right: 0px;"><a href="#" title=""><img src="LINK DA IMAGEM" border="0" /></a></div>

Entendendo as cores

Vermelho: Apague o que está escrito em vermelho,e cole o link da sua imagem ali,sem remover as aspas.
Laranja: Você pode alterar ou deixar assim mesmo,em laranja define o comprimento para a margem alterando o 6px para o tanto que você quer.

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

Programas e Fontes

Olá penguins !

Nesta postagem vou mostrar os programas mais populares e mais usados para design quando se fala de Club Penguin !

Programas de Edição

Fireworks CS6
http://www.adobe.com/cfusion/tdrc/index.cfm?product=fireworks&loc=pt_br

Photoscape
http://www.baixaki.com.br/download/photoscape.htm

Photoshop CS6
http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop&loc=pt_br

Paint Net
http://www.baixaki.com.br/download/paint-net.htm

Fontes / Packs

Bumbastika: (logotipos)
http://pt.ffonts.net/Bumbastika.font

Pack do Club Penguin:
http://www.multiupload.com/UDFIPJPRWZ


ATENÇÃO:  Sempre nos estaremos disponibilizando um novo Pack de imagens para ajudar vocês !