Barra de Novidades

Olá Pinguins, Gugalincon2 Aqui!

Vim ensinar a como fazer a barra de Novidades. Bom, primeiramente abra seu Fireworks e em seguida clique em New  Document e coloque as seguintes dimensões:

Width: 982

Height: 71

Após feito isso, clique em Rectangle tool e faça um retângulo preenchendo o espaço em branco. Em clique em Rounded Rectangle e faça o espaço onde as Novidades irão passar. Veja como está ficando:

Feito isso, coloque a palavra Novidades ou Notícias no começo da imagem que criamos, veja:

Agora que nossa imagem está pronta, iremos colocar-la no Blog. Para isso, clique em Adicionar um Gadget e depois em HTML/JavaScript. Nele iremos coloca o seguinte código:

<img alt="" src="LINK DA IMAGEM" />

 

<div style="left: 220px; top: 47px; width: 627px; position: absolute;">

<span style="font-family:arial;font-size:small;color:darkred;">

<marquee bgcolor="transparent" behavior="scroll" width="100%" loop="infinite">Novidades: ESCRITA SOBRE A POSTAGEM.(<a href="LINK DA POSTAGEM">LEIA</a>) 

- -/\- - ESCRITA SOBRE A POSTAGEM (<a href="LINK DA POSTAGEM">LEIA</a>)- -/\- - Desça a página para ler mais notícias!

</marquee>

</span>

</div>

Bom, ali onde está  "LINK DA IMAGEM", vocês vão fazer upload da imagem que fizemos no http://tinypic.com/ ou em outro lugar que conheça. Onde está "top: 47px no 47 é a altura que vai ficar a escrita". Onde está "left: 220px;" no 220 é o posicionamento dos lados e onde está "width: 627px;" é  onde as novidades vão começar a sair e terminar. 
Bom pinguins é isso! Espero que gostem da postagem e se você ficou com alguma duvida, comente nesta postagem. 

~Gugalincon2

Como fazer efeito Xadrez no Fireworks

Olá pinguins!

Tudo bom? Sou eu, o Ploogh.

Bom, primeiro abra seu Fireworks, logo em seguida crie uma forma geométrica de seu gosto, depois coloque o efeito diagonal como na imagem abaixo, vejamos;

(clique na imagem para ampliar)

Logo em seguida, você cria outra imagem com o efeito diagonal, mas agora, com as listras invertidas, como na imagem abaixo, não se esqueça, a segunda imagem tem sempre que ficar alinhada com a primeira! 

 Depois de ter feito isso, você devera colocar a opacidade nas seguintes medidas;

• 54

Logo em seguida, ela vai ficar com um tom estranho, mas você pode regular o xadrez com a opacidade, coloque as medidas de acordo com sua vontade! Veja como irá ficar;

(clique na imagem para ampliar)

Como podem ver, ela ficou com um charme todo especial, esse efeito vai lhe ajudar muito na carreira de designer! Obrigado pela escolha! Continuem encomendando!

Ploogh, Penguins Designer!

Como fazer uma marca d'agua no Fireworks

Olá pinguins, aqui é o novo postador KevinGaldino. Hoje irei ensinar vocês a como fazer uma Marca d'agua no Fireworks. Vamos lá!


Requerimentos:

• Logo do Club Penguin ( http://i49.tinypic.com/12149ow.png ) 
• Fonte Bumbastika.(  http://pt.ffonts.net/Bumbastika.font )

Primeiramente abra o Fireworks, é claro. Depois de abrir o Fireworks clique em "File", depois em "Open" e abra o logo do Club Penguin, apague a palavra "Disney" e as letras "TM", depois que fazer isso, ficará mais ou menos assim:

Depois disso podemos começar a fazer a marca d'agua, vamos lá. Vá na opção "Text Tool" e Escreva o nome do seu blog no Tamanho 68 Com a fonte "Bumbastika", no caso eu escrevi "KevinGaldino Club Penguin" Ficará assim:

Agora vamos deixar igual a letra do Club Penguin, vamos lá! Primeiramente, mude a cor da letra para #FFCD40, depois vá até "Filters", clique em "Shadow and Glow", e depois em "Inner Shadow". Depois disso configure para deixar igual a do Club Penguin, Mude a cor para #FF9A00 e Configure assim:

Ficará deste jeito: 

Ok? Agora vamos as bordas pretas. Clique novamente em "Filters", Depois vá até "Bevel and Emboss" e clique em "Outer Bevel", feito isso configure assim:

A cor deve ser preta, entendido? Agora vamos ao ultimo passo: A Borda Azul, é muito fácil! Clique mais uma vez em "Filters", depois vá novamente até "Bevel and Emboss" e em "Outer Bevel" ! Configure assim:

A Cor é #0864AF ! Você Conseguiu? Minha marca d'agua ficou assim:

Você gostou? Espero que tenha aprendido, fiquem ligados no PD para aprender a ser um grande designer!

- @KevinGaldinoCp !

Como fazer Template

Olá gente!!
Eu sou Mouro 001 (dono deste blog com o Guga) e venho ensinar a vocês como fazer um template (até parece que deixaram para eu fazer)
Bem, vamos lá começar abrindo o Fireworks. (Eu uso o CS4 mas o CS5 que tem aqui no blog também dá clique aqui)
Aqui tem uma mini tabela com as dimenões para cada parte do template:
Cabeçalho:           982 x 400
Fundo sidebar      982 x 200
Título sidebar       208 x 35
Fundo para blog   200 x 200
Rodapé                982 x 100

Agora alguns exemplos para não fazer errado:
Cabeçalho:

(atenção o cabeçalho está diminuido pois não cabe na postagem)

Fundo sidebar:

(atenção o fundo da sidebar está diminuido pois não cabe na postagem)

Título sidebar:

(o título de sidebar não está diminuido)

Fundo para blog:

(o fundo de blog não está diminuido)

Rodapé:

(atenção o rodape está diminuido pois não cabe na postagem)

(se por acaso não sabe como fazer cabeçalho ou rodapés clique nos nomes de cima)
Para ter um HTML venha aqui e copie o que manda lá e nunca altere nada só o que está a CAPS LOCK.
Bem espero que tenham gostado e se não conseguiu fazer clique aqui para ir para as encomendas.
~>Mouro 001

Linkar Menu...

Olá gente,
Lucas falando!
Bom... Como muitas pessoas já me pediram, eu vou ensinar como linkar um menu com truque básico de coordenadas (Image-Maps). Bem, primeiramente, vocês devem fazer um menu (ou ter um já feito). Observem um exemplo de um menu já alinhado ao cabeçalho:

(Clique para ampliar)

Bem, agora, vamos linkar cada parte que está no Menu (Home | Parceria | Contato | Equipe | Sobre). Primeiramente, vocês devem hospedar as imagens... São vários os sites de hospedagens existentes, Tinypic, Imm.io, Imgur, Imageshack, entre ouras. (Clique em cima de cada um para acessar).

Com a sua imagem hospedada, Clique Aqui para ir diretamente ao Image-Maps, e começar a Linká-la. Chegando no site, coloque o "Direct Link" no espaço que se encontra em branco. Mas, se não quiserem hospedar a imagem, no Image-Maps tem como pegar as imagens do computador. Observem:

(Clique para ampliar)

Logo após, uma mensagem aparecerá. Se ela disser que a imagem foi hospedada com sucesso, você deve clicar em:Ir para o Próximo Passo, que irei explicá-lo.

Pois bem, esse próximo passo é onde serão colocados os links. Na barra lateral, terá umas ferramentas para você. Se quiser linkar o menu mesmo, clique em Rectangle. Depois, aparecerá um quadrado, que é onde você bota o link que deverá aparecer quando clicar na imagem.

(Clique na imagem para ampliar)

Lembrando que deve-se fazer este processo do Rectangle em todas as partes do menu (Home, Parceria, Contato, Equipe, Sobre).

(Clique para ampliar)

Bem, depois que fizer em todas as partes do menu, você só deve pegar o código HTML. Para isso, clique em "Get Your Code", que se localiza na Barra Lateral. Depois, você deverá clicar em HTML Code.

Um código completo de HTML para página aparecerá. Você deve fazer umas alterações nele para ficar completamente ajustado para o blog. Apague o que foi destacado nesta imagem:

(Clique na imagem para entendê-la melhor)

Bom, agora, abram o Painel do Blogger na versão ANTIGA. Clique em Design, depois em Editar HTML, e, aperte CTRL + F e, procure pela seguinte Tag: div id='header'. E, cole ao lado, como mostra a imagem:

Agora, você deve terminar de ajustar o seu cabeçalho. Procure pela tag: /* Header e desça procurando por height. Ajuste para a altura do seu cabeçalho. Exemplo, se for 982x350, coloque a Height para 350.

Bem, depois disso é só salvar e visualizar seu blog.

Recomendo que faça tudo antes em um blog de testes, caso não dê certo!!!

Bem, até a próxima! Feliz Dia da Terra, e Preparai-vos para uma Festa Épica!

>> Lucas, Penguins Designer <<

Fazendo Custom Penguin

Hey Pessoas,

Quem fala aqui é a... Moralix! Yup, venho vos ensinar como fazer um Custom Penguin no Photoshop (eu uso CS5, mas acho que dá em qualquer versão :P). Vamos começar:

O que você precisa:

- Photoshop (qualquer versão)

- Qualquer penguin cutout pack (Packs com Penguins, Roupas e muito mais. Eu uso o Sensei4856 Cutouts V.2 Beta Version)

Passo-a-Passo:

1. Abra o ficheiro com o penguin recortado de seu pack (eu escolhi um já com um moletom preto):

2. Abra mais ficheiros do pack, as roupas e os acessórios que quer botar em seu penguin:

3. Copie-os para o ficheiro que você abriu do penguin, e ajuste-os conforme você quer, selecionando a ferramenta Lasso Tool e clicando com o lado direito de seu mouse na imagem que deseja ajustar e clicar em "Free Transform":

4. Para terminar e deixar seu penguin mais bacana, mude as cores conforme você gostar mais, ou dê um toque com o feather:

5. Tadah! Seu custom penguin está pronto!

Fácil, né? Espero que tenham gostado, e que tenham entendido, óbvio.

Até mais, então.

~ Moralix, Penguins Designer ♥

Fazendo fundo de chat!

Olá gente,
Lucas falando!
A pedido do Mouro001, estou aqui para fazer um tutorial de Fundo de Chat. Bem, já que alguns não conseguem baixar o FireWorks e Photoshop (não sei por quê), esse tutorial será todo em Photoscape e Paint.net, os programas mais fáceis de se achar e de baixar. Mas, nem tudo pode ser substituído, eu ainda vou fazer tutoriais usando o FireWorks!
Pois bem, vamos agora iniciar nossas atividades!

1- Modelo de Fundo de Chat

Bem, eu facilitarei e muito a vida de algumas pessoas... Dando um fundo editável para Fundo de Chat. Entrem nesse link (podem clicar, ele vai abrir outra aba):

http://i.imm.io/mJVN.png

2- Fazendo...

Bom, abram seu Paint.net e comecem a dar uma de Picasso... Usem a ferramenta Lata de Tinta para mudar a cor do modelo de fundo de chat que passei. Usem a roda de cores para alterar a cor.

(Clique na imagem para ampliar)

Clicando com o botão esquerdo do mouse, escolhe a cor principal, clicando com o botão direito, a secundária. Para fazer uma mistura bem legal, você pode alterar a Cor Sólida, podendo mudar para quadriculado, listrado, enfim, fazendo bom uso das duas cores. Vejam:

Depois que você colorir bem muito, ele deverá ficar mais ou menos assim (eu escolhi dois azuis, um mais escuro como cor principal, e mais claro como secundária):

(Clique na imagem para ampliar)

Bom, você deve salvar essa imagem, e depois abrir o Photoscape. É aí a parte que você adiciona imagens ao seu fundo de chat! E também as partes de USUÁRIOS e o DIGITE AQUI.

Abrindo o Photoscape, você deve clicar em Editor, depois, abrir a imagem salva, observem:

(Clique na imagem para ampliar)

Bem, agora, é a parte que você usa toda sua criatividade! Adicione penguins, fundos, puffles, objetos, tudo o que quiser com os packs de Club Penguin, que podem ser adquiridos no CP Cutouts. (Clique Aqui). Para adicionar imagens, clique em "Objeto" e depois em uma imagem de uma paisagem, e depois no primeiro ícone (que tem escrito: Foto).

(Clique na imagem para ampliar)

Depois de adicionar fundos, penguins, objetos, puffles, seu fundo de chat deverá ficar mais ou menos assim (utilizem toda a criatividade possível!):

(Clique para ampliar)

Bom, espero que tenham tido bom proveito dessa postagem! Façam seus melhores fundos de chats!

Até a próxima, galerinha! Feliz Dia da Terra para todos!

>> Lucas, Penguins Designer <<

Como fazer um template - Fireworks CS5

Olá Pinguins!

Tudo bom? Sou eu, o Ploogh.

Hoje, a pedidos de varias pessoas, vocês nem imaginam quantas, me pediram essa postagem, não me pediram, exigiram, por um tutorial de como se fazer um template! Neste tutorial, vai ser apenas de como se fazer a "Imagem" do template, no proximo tutorial, que provavelmente será depois de amanha, postarei a segunda parte, de como coloca-lo no blog! Vejamos o video:

(creditos; mcbruzinho)

Bom, postei apenas a primeira parte, pois nela já da para ver uma boa parte de como se fazer a "Imagem"! 

Logo depois de ter criado a imagem, abra seu fireworks, "linke" cada parte de seu template, do Header (cabeçalho) até ao Footer (rodapé), logo em seguida, você gera o Html! Veja abaixo:

• Clique em arquivos! Logo em seguida clique em atualizar HTML, escolha uma opção com augo escrito salvar com o dreamweaver, clique em okay, e pronto! Vai aparecer augo indicando para salvar, você salve-o! 

E pronto, sua "imagem" está pronta!

Atenção, não tente colocar a imagem no blogger, no proximo tutorial a aula continua!

Bom foi isso! Comentem oque acharam!

E para vocês aquele beijo!

Ploogh, Penguins Designer!

Como por regras junto com o Chat

Olá Pinguins!

Tudo bom? Sou eu, o Ploogh.

Ontem, me deparei, com bastante pessoas me perguntando como se coloca regras "Junto" com o chat, e hoje estou aqui, preparado para fazer o tutorial! Vamos lá né?

Primeiro você deverá criar uma imagem no Fireworks (de preferencia). Logo em seguida use essas medidas:

• Largura 647
• Altura 762

Não será nescessariamente por essas medidas, escolha uma do seu gosto, mas tome cuidado, pois ela não poderá ser menor do que o chat!

Depois de ter feito a imagem, você poderá acrescentar as regras de chat, os designs etc!


Agora, utilize esse html junto com o html do chat! Veja:

<div class="widget html" id="html1">
<div class="widget-content">
<center>
<div style="background-image: url(http://i39.tinypic.com/2u7azy9.jpg); width: 649px; height: 764px;"><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 />
<center><span style="font-size: 100%;"><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMzM3NjI5MjI4MjgmcHQ9MTMzMzc2Mjk*OTczNCZwPTUzMTUxJmQ9Jmc9MSZvPTdkYWY4Yzc1ZDQ2ZjQ1MmJiNDE5/MDcxYzJlMDJiNjEy.gif" /><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width="600" height="405" name="chat" flashvars="id=155003238&amp;gn=CPOficialBR" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml"></embed></span>
<span>
</span><center></center></center><span style="color: rgb(42, 42, 42); font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17px; text-align: -webkit-auto; background-color: rgb(255, 255, 255); ">
</span>


</span></div></center></div></div>

Como fazer parceria rolando! #2

Olá Gente!!

Tem pessoas me perguntando de como fazer mais do que uma parceria rolando!!
O Gapy fez uma postagem mas aquela só diz para uma! Vamos ver a postagem dele:

Olá Pinguins,Gapy aqui.
Perguntaram pra mim, como faz as parcerias rolantes.
E hoje estarei ensinando fazer isso.
A Base de tudo é HTML.
Vejam o HTML:


<marquee direction="up" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
<a href="" target="_blank"><img src="" border="0" /></a>
<a href="Link do Blog da Parceria" target="_blank"><img src="Imagem" border="0" /></a>

Esse é o link,depois vão em adicionar um Gadget depois colocam em HTML/JavaScript.
Depois coloquem o link e a imagem.
O Que acharam ?
Ajudou vocês?
Se quiserem algo,pedir nos comentários e eu tentarei fazer.
Até Mais e Pinguinando.


TheGapyCp(@TheGapyCp)

Bem este código:

<marquee direction="up" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">

<a href="" target="_blank"><img src="" border="0" /></a>

<a href="Link do Blog da Parceria" target="_blank"><img src="Imagem" border="0" /></a>

É só para uma parceria eu agora vou passar o código para colocar mais que uma!

<marquee direction="up" scrollamount="4" onmouseover="this.stop();"  onmouseout="this.start();"><center>

<a href="Link do Blog" target="_blank"><br/><img src="Link da Imagem"/></a>

</center></marquee>

Bem o que estiver a vermelho é para criar mais que uma parceria, pode Copiar e Colar até ter parcerias suficientes!
~>Mouro 001 ;)

Como Botar Efeitos Em Seu Cabeçalho.

E aí Pinguins! Quanto tempo!

Hoje estou aqui justamente para ensinar a vocês botarem um efeito de listras em seu cabeçalho. Primeiro, nós botamos uma imagem de fundo. Observem:

Pronto, já temos nosso fundo! Depois clique na opção "Rectangle Tool" e faça um quadrado do tamanho de seu cabeçalho! Observem como irá ficar:

(clique para visualizar melhor)

Já temos o quadrado, agora, para aplicar o efeito, temos que diminuir a visibilidade do quadradinho, observem:

Virão? Agora para aplicar as listras clique em Texture e escolha seu efeito. No meu caso botei listras no vertical, observem:

E pronto, já temos nosso cabeçalho com o efeito, espero que eu tenha ajudado vocês. Até o próximo tutorial! Até mais & Pinguinando! Comentem!


Darth - Penguins Designer

Como fazer listras (fireworks)

Olá Pinguins!

Tudo bom? Sou eu, o Ploogh.

Hoje, o Peninha6, me pediu um tutorial de como se fazer listras no fireworks, então aqui vai!

Primeiramente, abra seu fireworks! Logo em seguida crie uma imagem nestas medidas:

• Largura 100
• Altura 100

(clique na imagem para ampliar)

Bom, de acordo com a imagem, você pode conferir os minimos detalhes, porem, vamos começar.

Depois de ter criado a imagem, você devera ir em estilos (styles). Veja na imagem:

(clique na imagem para ampliar)

Logo em seguida, você clica em Documento atual (current Document). Logo em seguida vai aparecer uma aba onde vai ter varias opções, clique na Estilos diagonais (styles diagonal). Escolha o tamanho da diagonal que mais agrade você, vejá mais na imagem:

(clique na imagem para ampliar)

Viu como é facio? Atenção, logo depois de ter escolhido a diagonal, ela vai ficar preta, é só você escolher uma cor e ela vai mudar! Espero ter ajudado vocês! 

Não conseguiu fazer? Encomende uma nos comentarios da minha postagem!

E para vocês aquele beijo!

Bom foi isso! Comentem oque acharam!

Ploogh, Penguins Designer!

Como fazer rodapé (fireworks)

Olá Pinguins!

Tudo bom? Sou eu, o Ploogh.

É com muito prazer que venho trazer, "Como Fazer um Rodapé" Prestem muita atenção! 

Primeiramente abra seu fireworks, crie uma imagem, nas seguintes medidas: 

• Largura 980.

• Altura 139.

(clique para ampliar)

Com base na imagem obtida, podemos ver, que está com listras, é normal acharmos blogs com ela, no proximo tutorial eu posto como fazel-as! Mas voutando ao assunto, veja como vai ficar!

Logo depois acrescente uma linha reta como na imagem abaixo:

(clique para ampliar)

Se quiser não precisa colocar, mas se não colocar vai ficar estranho! Agora vem a parte principal, os creditos! Bom vamos lá!

(clique para ampliar)

Pronto, esse estilo de texo eu vou explicar como se fazer na proxima aula, junto com a das listras! Lembre-se nem todas as medidas são usadas em todos os blogs, essa por exemplo é a do meu! Então se quiserem uma só encomendar pelos comentarios! 

E para vocês aquele beijo!

Bom foi isso! Comentem oque acharam!

Ploogh, Penguins Designer!