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 <<