Código - Relógio do CP!

Oi galera aqui quem digita é o Gcl, vou passar o código do relógio que tem o horário oficial do club penguin:

<embed allowfullscreen="false" allowscriptaccess="always" flashvars="xml=http://media2.clubpenguin.com/community/xml/penguin-standard-time-content.xml,http://media2.clubpenguin.com/community/xml/penguin-standard-time-properties.xml" height="55" menu="false" quality="autohigh" src="http://media2.clubpenguin.com/community/swf/penguin-standard-time.swf" style="visibility: visible;" type="application/x-shockwave-flash" width="250" wmode="transparent"></embed><br /></a>

É só você pegar o código e colocar no seu blog!

~Gcl

Tutorial - Imagem com efeito hover

Olá designers hoje vou ensinar a fazer um efeito hover em uma imagem...
é bem fácil, porém demorado.
Então vamos lá:

Primeiramente crie sua imagem de como ela fica e como ficara depois que nos passarmos o mouse.
nesse estilo:

Assim Ficará como normalmente!!

Assim quando o mouse estiver em cima

Código HTML:

Esse código a seguir você coloca em Layout//Adicionar Gadjet Html/Javascript.

<a href="LINK_DO_ITEM"><img src="http://i49.tinypic.com/e5h5dt.jpg" height="ALTURA DO ITEMpx" width="LARGURA DO ITEMpx" class="NOME DO ITEM"></a>

Você vai alterar apenas as partes destacadas do código. Em link do item você vai colocar o link que deseja que abra quando clicarem no primeiro nome. Em  altura do item, você irá colocar a  altura das imagens do menu.
No caso do meu  menu a altura é 77 pixels. Em largura do item, você vai colocar a largura da imagem. No meu caso, a imagem que contém o link "Home" tem 147 pixels de largura. E por último, em nome do item, coloque o nome do link, por exemplo "home".

Você vai repetir esse código para cada link do menu, então faça isso com bastante atenção. Quando terminar, salve o gadget. Ainda não vai aparecer nada no seu blog.

Código CSS:

Agora é a segunda parte do código. Vá no html do seu blog, e cole o código abaixo, antes de ]]></b:skin>

.NOME DO ITEM {
     background: transparent url('IMAGEM') no-repeat bottom center;
     width: LARGURA DO ITEMpx;
     height:  ALTURA DO ITEMpx;
     margin-left: 0px;
     }
.NOME DO ITEM:hover {
     background: transparent url('IMAGEM HOVER') no-repeat  top center;
     width: LARGURA DO ITEMpx;
     height: ALTURA DO ITEMpx ;
     }

Em imagem, você vai colocar o link da imagem que fica normalmente e em Imagem Hover como ela ficara depois que o mouse estiver em cima. No restante dos campos, você deve colocar as mesmas informações que colocou no código anterior, principalmente o "nome do item" que deve ser o mesmo que você colocou no código anterior.  Em margin-left, você ajusta as margens caso as imagens fiquem com espaços de umas para as outras.
Qualquer Dúvida relate no comentário, Irei atender.


~Gcl

Novo Postador

Oi galera quem fala aqui é o novo postador: Gcl
Quero agradecer ao Mouro por ter dado essa grande chance nesse grande blog.
Meus Tutoriais não são em vídeo já que minha internet não consegue fazer upload dele =\

Até Mais Galera

~Gcl

Avisos - Doação

Olá designers que nunca deixaram nós irmos abaixo.
Daqui fala o Mourinho.
Tenho de vos falar duas coisas.
A primeira é que não fazemos mais encomendas.
Neste momento sou só eu aqui postando e então eu não consigo fazer tudo sozinho, já tentei arranjar designers bons mas eles não aceitaram ainda.
Esta foi a primeira, agora a segunda, como devem ter reparado no titulo da postagem, tinha lá "Doação".
É isso mesmo, eu vou fazer uma doação de um template.
Como concorrer?
Basta seguir eu no Twitter e Retweetar o meu Tweet que está abaixo. Terá até dia 18 de outubro para participar.

DOAÇÃO DE UM TEMPLATE - PENGUINS DESIGNER http://t.co/g6lMmLDtcL Terá até dia 18 de outubro para participar.

— Mouro 001 (@Mouro001) September 30, 2013

Para me seguir clique aí:
Seguir @Mouro001

Não tenho mais nada a dizer espero que todos participem.
~> Mouro 001

Como fazer efeito hover no Image Maps

Olá pinguins.
Eu hoje ensino a vocês como podem fazer efeito hover no Image-Maps.
Vejam o vídeo:


Se vocês não conseguirem fazer, deixem um comentário que eu irei ajudar o mais rápidamente possível.
~> Mouro 001

Encomenda - Yossi

Olá pinguins!
Acabei agora de fazer a marca de água do Yossi Azar.
Ele me pediu á algum tempo uma marca de água para o blog dele, e eu fiz. Vamos ver como ela ficou:

Por agora é só. Para salvar a marca clique nela de depois aperte tecla direita e depois Guardar imagem como.

Já me seguiu no Twitter? Faça agora! Sigo devolta!
Seguir @Mouro001

~>Mouro001

Encomenda - Lilipi

Olá pinguins designers!
Tenho mais uma encomenda realizada que foi um banner do pinguin Lilipi08.
Vamos ver como ficou o banner:

Mais uma encomenda feita pelo Penguins Designer.
Lilipi, eu irei enviar o código para você colocar o banner no seu blog por email.
É tudo!

Já me seguiu no Twitter? Faça agora! Sigo devolta!
Seguir @Mouro001

~>Mouro001

Encomenda - Yoshh

Olá pinguins novamente!
Agora venho aqui com o by para postagens do Yoshh.
Ele me pediu ontem e já está feito!
Quer ver como ficou? Olhe aí:

Bom mais uma encomenda realizada, só falta outras tantas para fazer. Para salvar clique aqui.
É tudo por agora!

Já me seguiu no Twitter? Faça agora! Sigo devolta!
Seguir @Mouro001

~>Mouro001

Encomenda - Club Penguin Foguinho

Olá pinguins designers!
Venho aqui entregar a encomenda do blog Club Penguin Foguinho que me pediu uma marca dágua.
Bom para baixar a marca basta clicar aqui.

Bom é só, por agora.
Até daqui a nada!

Já me seguiu no Twitter? Faça agora! Sigo devolta!
Seguir @Mouro001

~>Mouro001

Encomenda - Michael

Olá pinguins designers!

Eu tenho aqui o template pedido pelo Michael.

Eu tive de fazer uma marca dágua para colocar no blog, se quiser baixá-la clique aqui. A marca ficou um pouco estranha por causa do acento. Fiz o melhor que pude.

Pode ver o HTML aqui e para colocar ele no blog basta copiar e colar no seu blog.

Eu também fiz upload do template todo junto veja:

Clique na imagem para aumentar

Bom pinguins espero que tenham gostado. 

Já me seguiu no Twitter? Faça agora! Sigo devolta!
Seguir @Mouro001
~> Mouro 001

Encomenda - Oficialkiko

E aí pinguins, como estão?

Venho aqui entregar a encomenda para o blog Club Penguin Magazine. Seu dono, o Oficialkiko, encomendou um rodapé, com espaço para banners. Então, sem mais delongas, segue abaixo sua encomenda!

(Clique na imagem para ampliar)

Espero que tenha gostado. E vocês, o que acharam deste rodapé? Deixem suas respostas nos comentários, adoraríamos saber sua opinião. Vou ficando por aqui.

Até mais!

~Gugalincon2, Penguins Designer

Encomenda - IPengu

E aí, pinguins!

Como a equipe do Penguins Designer estavam recebendo muitas encomendas, e não estavam dando conta do recado, eu decidi vir ajuda-los! Eu sou o Bob, estou fazendo design á 3 anos... Mas enfim, começo já entregando minha primeira encomenda ao IPengu que pediu uma logo!

Espero que tenha gostado e faça bom uso dela IPengu! Caso queiram fazer uma encomenda cliquem aqui. Vou ficando por aqui, até mais...

-Bob5313

Como fazer menu em flash animado

Olá! Eu hoje vou ensinar como fazer um menu em flash animado. É isso mesmo.
Bom caso você não tenha o Adobe Flash CS6 pode baixar do site da Adobe. Bom se você procurar Adobe Flash no Google, vai dar um novo CC, esse CC não dá muito bem para linkar os menus. Então para você ver os produtos CS6 da Adobe terá de clicar aqui (irá abrir numa nova janela) e descer a página até encontrar "Flash Professional CS6", escolhe a língua e se você usa Windows ou MAC.
Depois de você baixar o Flash, deve crackea-lo. Não deve usar nenhum programa para o fazer automático, mas sim baixar este arquivo, clique aqui e movê-lo para a pasta instalada do Flash. Deve abrir os Documentos ou o Meu computador e na barra de cima:

Deve colar:

C:\Program Files (x86)\Adobe\Adobe Flash CS6

ou então:

C:\Program Files\Adobe\Adobe Flash CS6 

 Depois disso ele irá estar crackeado e pronto a usar.
Agora vamos então criar o menu.
Eu sugiro que crie um menu no Fireworks, Photoshop ou onde conseguir criar mas sem efeitos ou seja só a base. Eu fiz isso:

(recomendo que faça o menu separado, o Home, Sobre tudo em caixas de texto separado)

Depois abra o Flash, é importante que seja em ActionScript 2.0 (o novo Flash CC não contém o ActionScript 2.0 só tem o 3.0) e depois insira as medidas do seu cabeçalho:

(clique na imagem para aumentar)

No meu caso é 982 x 392 e depois coloque tudo menos as páginas.

(clique na imagem para aumentar)

Aqui tem de tomar atenção. Porque se você pré-visualizar o seu SWF, ele irá estar com má qualidade. Para colocar melhor deve ir na barra lateral direita, Biblioteca e Bitmap1, aperte na tecla direita em cima do Bitmap1 e Propriedades. Troque o Foto (JPEG) para Sem perdas (PNG/GIF) e dê Ok. Para pré-visualizar pressione as teclas CTRL + ALT + ENTER. Depois volte no Fireworks e copie um a um cada parte do menu.

Quando concluído, quando estiver assim:

Deve apertar tecla direita em Home depois Converter em símbolo e colocar assim:

E fazer isso em todos trocando o Home por Sobre, Equipe e Encomendas.

Agora vamos adicionar o efeito em todos. Vamos clicar duas vezes no Home e vai aparecer isso:

depois na barra de cima (Linha do Tempo) verão que na Camada 1 contêm 4 ações, Acima, Sobre, Para e Ocorrência. Só os primeiros 3 serão necessários. Eis a explicação dos necessários:

Acima - Quando o mouse está fora do botão.
Sobre - Quando o mouse fica em cima do botão.
Para - Quando você aperta o botão.

Bom em baixo de Sobre deve clicar na tecla direita e clicar em Inserir quadro-chave e agora vai no Fireworks criar o efeito quando o mouse fica em cima do botão. Eu irei mudar a cor do contorno. Podem também adicionar um rectângulo atrás, você é que decide. E coloca em cima do Home que estava lá. Faz isso com todos os botões. Para verem como ficou o meu cliquem aqui (como sempre irá abrir em nova janela). Bom, já temos efeitos agora falta colocar links no flash.
Aperte tecla direita do mouse em cima do Home e depois procure Ações, lá coloque esse código:

on (release) {
getURL("LINK", "_blank");
}

Editando o código:

Troque LINK por o link da página que você quer linkar

Tem de fazer isso em todos os botões. Atenção é necessário colocar http:// para não bugar.
Depois de ter tudo linkado para salvar vá em Arquivo -> Exportar -> Exportar Filme e salve onde quiser. Pronto ele está feito e salvado. Aconselho a guardar o menu também em .fla para depois se precisar de editar alguma coisa. Agora também irei dizer como colocar no blog. Em primeiro lugar é preciso um host, que permita você fazer upload do cabeçalho. Eu recomendo o webs.com.
Depois de tiver feito upload tem de ir ao painel do blogger, escolha o seu blog e edite o HTML. Dê CTRL + F e procure:

<div id='header-wrapper'>

Depois embaixo desse código coloque:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' height='ALTURA' width='LARGURA'><param name='movie' value='LINK DO SWF'/><param name='quality' value='high'/><param name='wmode' value='transparent'/><embed height='ALTURA' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='LINK DO SWF' type='application/x-shockwave-flash' width='LARGURA' wmode='transparent'></embed></object>

E faça as respectivas edições:

Troque Altura;
Troque Largura;
Troque Link do SWF;

Atenção é tudo repetido.
E salve o modelo.
Bom meus amigos. Eu espero que gostem da minha postagem. Se tiver alguma dúvida, fale no meu Twitter ou deixe comentário na postagem.

Já me seguiu no Twitter? Faça agora! Sigo devolta!
Seguir @Mouro001
~> Mouro 001

Alterando o Caminho do Texto - Fireworks CS6

Olá pinguins, como estão?

Estava a procura de algum tutorial para ensinar a vocês, e lembrei de um bem legal. Estarei ensinando ele no Fireworks CS6, caso queira baixar o programa, clique aqui. Segue abaixo o vídeo ensinando o efeito.



Basta seguir os passos corretamente, e não terá problemas. E então, gostaram? Deixem suas respostas nos comentários. Vou ficando por aqui.

Até mais pinguins!

~Gustavo, Penguins Designer

Encomenda - Anakin

Olá pinguins, como estão?

Venho aqui entregar a encomenda do usuário Anakin (995878412). Ele pediu um logo escrito "Escavação BETA", para um evento de seu blog. Sem mais delongas, segue o pedido.

Então, é isso. O que acharam? Deixem suas respostas nos comentários. Caso queira fazer uma encomenda, basta clicar aqui. Até mais pinguins!

~Gugalincon2, Penguins Designer

Mudando a Cor de um Cut Out - Photoshop

Olá designers!

Hoje estou postando um novo tutorial para quem tem o programa Photoshop. Como mudar a cor de um Cut Out? Algumas pessoas hoje em dia preferem fazer um custom e mudar simplesmente a cor do pinguim pelo Paint, só que fica horrível. Por isso estou aqui para ensinar como mudar a cor de um Cut Out. Abra o Ps, clique em arquivo, abrir. Para abrir logo de vez pode apertar as teclas Ctrl+O só que eu prefiro como está abaixo:

Quando clicar aparecerá uma pasta onde você salva todos os seus arquivos. Então procure o Cut Out e clique nele. No seu Ps estará assim: 

(O pinguim acima é só um exemplo)

Vamos supor que eu transforme a cor dele de verde para azul escuro. Clique na ferramenta "Seleção rápida" e comece a selecionar todo o pinguim, menos no bico e outras partes do corpo, desse jeito: 

Quando selecionar aperte as teclas Ctrl+U e aparecerão umas cores para mudar a cor do pinguim. Para mudar a cor você tem que saber três palavras:

Matriz: Coloque a cor que quiser para alterar o pinguim;

Saturação: Se quiser que a camada do pinguim seja com muito brilho ou não;

Luminosidade: Aqui é bem parecida com a saturação, você escolhe se quer o pinguim claro ou escuro;

Para mudar em azul escuro vão ficar as seguintes posições:

Matriz: +31

Saturação: -34

Luminosidade: -51

Depois disso é só salvar o pinguim em PNG ou JPEG. O que acharam designers? Comentem suas opiniões abaixo.

Até mais!

~Pedrox, Penguins Designer

Penguins Designer com novo estilo!

E aí galera, quanto tempo não?

Devem ter percebido que o blog andou meio que em altos e baixos, espero que isto mude. Estamos reinaugurando o blog, que ganhou um novo design, e algumas novidades. A partir de agora estaremos realizando suas encomendas! Para encomendar algo, basta ir à página clicando no botão de "Encomendas" na barra lateral. Outra novidade, é que estaremos postando nosso próprio pack de design para Club Penguin aqui no blog. E então, gostaram? Deixem suas opiniões nos comentários.

~Gustavo, Penguins Designer

Novas postagens em breve!

Olá. Shocker falando novamente!
Bem, gostaria de falar que, em breve, (ainda demorará um pouco) estarei disponibilizando tutoriais de After Effects e Premiere.

After Effects, software poderoso de animação e edição de vídeo, com padrões profissionais.
Premiere, a mesma coisa, porém mais avançado.

Caso tenha esquecido o link de download dos programas a serem usados em breve, vou disponibilizá-los novamente abaixo.

Adobe Premiere (64 bits)
After Effects (64 bits)
Adobe Illustrator
Adobe DreamWeaver
Adobe InDesign
Adobe PhotoShop
Adobe FireWorks
Adobe Flash
Adobe Audition

Obs.: Adobe Premiere e After Effects requerem um sistema de 64 bits, e o crack não pode ser o mesmo dos outros, a amtlib.dll deve ser outra, uma amtlib feita para crack de Adobe Creative Suite 6 para 64 bits. Clique para baixar a Amtlib.dll x64

Como saber se meu sistema é 32 / 64 bits?

Iniciar > Painel de controle > Sistema e Segurança > Sistema. Lá vai estar parte das informações do computador, e a opção: Tipo de Sistema, realça a informação na qual você precisa.

Caso queira trocar seu Windows para um de 64 Bits, recomendo-lhe o Windows 7 Ultimate, no mínimo 2 GB de RAM pois senão irá ficar muito lento o computador! Lembrando que ao colocar 64 bits você estará trocando seu Windows. Se não tiver backup você perderá tudo que tem no computador e ele voltará ao estado original de fábrica.

Efeitos de movimento - Flash CS6

Olá. Aqui é o Shocker (falando como um chefe, para variar). E aqui estou eu enchendo o saco de vocês de novo porquê me amam e, trago tutoriais de Flash.
Bom, para quem não sabe, Flash é um programa de animação muito utilizado, para criar banners, GIFs e entre outros. Ele é uma linguagem Web, usado na criação de sites profissionais. E nem um pouco fácil de mexer.
Download: Adobe.com/Flash
Hoje, um tutorial simples! De começo que aprendi no curso.
Seguinte: Você vai abrir o seu Google Imagens e pesquisar pela foto de uma moto. Salve a imagem em uma pasta que você pode se lembrar em seu computador. Clique aqui para ver um modelo de como ficará. (As posições das linhas mudarão)

1- Você vai abrir seu Adobe Flash. Clicar em Arquivo > Novo > ActionScript 3.0 > Largura/Altura= 1000 x 1000 px.

2- Pegue a ferramenta Linha. Faça uma sequência de linhas como se fossem pistas.

                                    (Zoom do palco foi abaixado para máxima visualização da página)

3- Bom, agora você vai em Arquivo > Importar > Importar para a Biblioteca. E selecionar a imagem da moto. Ela estará na guia Biblioteca, no menu ao lado. Arraste o arquivo para o Palco:

Bom, se você está aqui vendo o tutorial de Flash obviamente já passou pelo Photoshop e os outros um pouco mais básicos. Se no Photoshop trabalhar com camadas foi extremamente importante, pois no Flash será muito mais! Camadas aqui serão essenciais. Clique com o botão direito na moto e clique em Distribuir Camadas. A camada das linhas ficará como ''Camada 1''. Clique 2x na camada e renomeie-a para Linhas (Opcional, apenas para organização).

4- Clique na moto, aperte F6 e aperte a seta  direita. Quanto mais F6 você for apertando e menos a seta direita apertar, mais devagar a moto andará. Vá fazendo isso até chegar na ponta da primeira linha (Se deseja que vá rápido, aperte F6 e segure a tecla para a direita por uns 3 segundos ou 2, repetindo o processo até chegar ao final da linha.

5- Agora para dar um efeito legal, vamos fazer ele girar no ar.
Para fazer isso, clique com o botão direito na moto e clique em Transformação Livre.
Vá apertando F6, e girando a moto. Gire um pouquinho a moto, aperta F6, gira um pouquinho a moto, aperta F6 e assim vai, recomendo apenas uma volta, e depois vire a moto para o outro lado (Ex.: Ela está virada pra cá > você irá virá-la para cá <-)
Basta pegar a ponta lateral e jogá-la para o outro lado, assim, girando a imagem!
E então, repetindo os passos 4 e 5 até chegar ao final da linha.

Cliquem aqui para ver o resultado.

E foi só! Até outra hora! E até lá, rezamos que os prints não buguem!

Dúvidas? Contate-me no Bate-Papo!

Download: Cutouts² "Viagem Pré-Histórica"!

Olá Galera!

Hoje, eu vim postar o segundo Pack de Cutouts da "Viagem Pré-Histórica", novamente, com imagens totalmente exclusivas! Espero que gostem!

Clique aqui para baixar o conteúdo solicitado!

Veja uma prévia do que você poderá fazer usando este Pack:

O que acharam? 

Tem algum pedido? Faça uma encomenda!

Até mais!

Download: Cutouts¹ "Viagem Pré-Histórica"!

Olá galera!

Como já é de costume aqui no blog, sempre quando uma festa é lançada ou anunciada oficialmente, nós fazemos packs com imagens dela! Com a "Viagem Pré-Histórica" não foi diferente!

Clique aqui para baixar o conteúdo solicitado!

Vejam uma prévia do que você poderá fazer usando este pack:

Aproveitem este pack totalmente exclusivo e faça suas montagens com o tema da nova festa!

O que acharam? Não deixem de comentar para que eu possa fazer packs ainda melhores. Sua opinião é muito importante!

Até mais!

Download: "Cutouts - Novo estilo de pinguins"!

Olá galera!

Continuando o especial de 3 downloads, aqui está, depois de muitos pedidos, os cutouts de Pinguins com o novo estilo!

Clique aqui para baixar o conteúdo solicitado!

Aproveitem este incrível pack!

O que acharam? Comentem!

Até mais!

Download: "Cutouts - Brinquedos"!

Olá Galera!

Depois de alguns dias sem download, eu trouxe 3, sim TRÊS downloads! Eles serão divididos, um em cada postagem, como sempre.
Primeiro, vou postar um pack de cutouts com o tema "Brinquedos"!

Clique aqui para baixar o conteúdo solicitado!

Solte a sua imaginação! E aproveite, o pack também contém imagens de brinquedos de dinossauros!

Até mais!

Downloads: Cutouts do Ano!

Olá Galera!
Fazendo muitos designs?...
Bom, primeiramente, quero dizer novamente que "cutouts" são aquelas imagens com o fundo transparente, que servem para fazer montagens. Durante as minhas postagens, eu poderei menciona-los tanto com o nome de "cutouts" quanto com o nome de "recortes".
Voltando aos downloads...
Hoje eu trouxe para vocês, todos os packs de cutouts que eu fiz durante o ano de 2012! Alguns packs não estão em perfeita qualidade, pois eu comecei a criar recortes em 2012, e não era "profissional", por isso peço a compreensão de vocês.
Vamos aos downloads...

Para fazer o download, basta clicar na opção escolhida abaixo:

Cutouts - Aventura Tropical

Herbert Cutouts

Cutouts - Halloween¹

Cutouts - Halloween²

Cutouts - 7º Aniversário

Cutouts - Operação Apagão

Cutouts - Festa de Fim de Ano

(Você será redirecionado para o New Penguin Downloads, um dos parceiros do Penguins Designer.)

Também queria lembrar que você pode encontrar cutouts exclusivos (que não estão nos packs) seguindo o @BtrayOficial no Twitter.

Bom gale, é isso!

Comentem o que acharam dos packs, para que eu possa melhorar ainda mais!

Até mais!