CHR Designer » Designer

Desenhando no chão

CHR Designer — Fri, 31 Jul 2009 01:03:22 +0000

E ai pessoal ontem eu esta dando uma olhada nos meus Feeds e ví umas imagens no blog geeksucks que são uns designer’s desenhando pinturas no chão…é uma imagem mais linda do que a outra, eles dão um aspecto de profundidade que fica parecendo que a pintura é real.

Michael Jackson

CHR Designer — Thu, 09 Jul 2009 14:00:33 +0000

Olá pessoal eu estava dando uma olhada nos meus “Feeds” e vi essa homenagem para o Michael Jackson, vários “designers” fizeram uma “pequena” homenagem a ele que faleceu recentemente neste mês de Junho. Então vou deixar a minha também.

Fonte: webdesignerdepot

Havaianas – Leão de Ouro no Festival de Cannes 2009 categoria Design

CHR Designer — Sat, 27 Jun 2009 19:28:08 +0000

É isso ae… por isso que eu me orgulho da profissão que eu escolhi…hahaha… os brasileiros dominam essa área… a Havaianas foi campeã do Leão de Ouro de Cannes 2009 na categoria Design… parabens… abaixo tem a identidade visual da Havaianas…

Fazendo GIF animado simples com Photoshop e ImageReady

CHR Designer — Tue, 16 Jun 2009 02:16:21 +0000

Olá pessoal mais um post dedicado para alguém e denovo vai para o Guto mas também serve para o Fabio JR., que sempre fazem a mesma pergunta “Como faz gif animado mesmo no photoshop?”…hahaah…depois deste post se eles perguntarem denovo eu fico bravo…haahah…

Bom então vamos começar a colocar a mão na massa, primeiro precisa determinar como vai ser a animação e a arte, se vocês quiserem usar o mesmo modelo que eu vou usar é só fazer o download aqui. Eu fiz uma coisa bem simples para postar aqui é o meu logo e vou fazer ele piscar é bem simples essa animação. Abaixo tem o JPG como ele é:

Depois que você já tiver com o PSD aberto no seu Photoshop vamos exportar para o ImageReady veja no exemplo abaixo:

Depois que já exportou para o ImageReady agora vamos ativar o “Animation” é com ele que nós vamos fazer nosso gif animado ele fica no menu “Window -> Animation” vai aparecer a barra de animação na parte inferior esquerda do seu monitor. Veja no exemplo abaixo:

Agora eu vou fazer cinco copias do primeiro frame clicando no botão “duplicates current frame” ele é o segundo da direita para a esquerda. Veja no exemplo abaixo:

Estamos quase finalizando nosso gif animado, eu vou fazer uma animação bem simples. Agora no primeiro frame vou ocultar a pasta “LOGO” que esta em “Layers” que ficá no canto direito inferior do monitor você vai ver que todos os outros frames ficaram vazios mas é assim mesmo, agora no segundo frame você ativa só a primeira layer da pasta “LOGO”, no terceiro frame ativa as duas layers, na quarta deixa vazia mesmo e na quinta ativa a pasta “LOGO”. Veja como esta ficando no exemplo de baixo:

Agora para finalizar só falta determinar qual vai ser a velocidade da nossa animação, porque como padrão o ImageReady é “zero milisegundos” dá uma olhada como ficá:

Para determinar a velocidade de apresentação é só clicar na setinha que esta junto com o texto “0 sec.” que ficá abaixo do frame que você criou, clique na setinha para aparecer uma caixinha com varias “velocidades de tempos, lembrando que é milisegundos “0.1″ e segundos “1.0″“, eu vou colocar 0.5 milisegundos para minha animação, mas se vocês quiserem outras velociades é só clicar em “Other…“. Veja no exemplo abaixo:

Para exportar nosso gif animado vocês tem que clicar em “File -> Save Optimized As… ou Ctrl+Shift+Alt+S”.

Veja como ficou nosso gif animado agora sé vocês quiserem ir inventando outras formas de apresentações, efeitos, etc… é só soltar seu lado criativo…hahahahaha…

Formatos de Banner para Web

CHR Designer — Wed, 03 Jun 2009 00:40:26 +0000

Olá pessoal hoje eu estava fazendo um wireframe de um projeto da Lógica Digital, ai bateu uma dúvida “Qual o tamanho do Super Banner?” comecei a pesquisar até que eu achei o tamanho que é “728px x 90px” então resolvi postar aqui para que eu não esqueça mais e também vai ajudar muita gente que tem a mesma dúvida minha.

Banner Vertical

120px x 240px

Banner Retangular

120px x 60px

DHTML

300 px x 250px

Full Banner

468px x 60px

Super Banner

728px x 90px

Como iniciar um recorte em Tableless

CHR Designer — Sun, 31 May 2009 01:01:39 +0000

E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital, sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….

Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.

Abaixo tem um modelo de HTML crú:

COMO INICIAR UM RECORTE EM TABLELESS

Agora eu vou colocar as DIVs:

COMO INICIAR UM RECORTE EM TABLELESS

TOPO

LATERAL

CONTEUDO

RODAPE

Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “

TOPO

LATERAL

CONTEUDO

RODAPE

Visualizar o Exemplo
Download do Exemplo

Coleção de latas de cerveja

CHR Designer — Wed, 27 May 2009 01:24:12 +0000

É pessoal para quem me conheçe sabe que eu sou viciado em uma cerveja…hahahah…e ontem o Lucas mais conhecido como “Maluko” que trabalha comigo na Lógica Digtital, me mostrou essa coleção e não tem como eu deixar passar essa…e tambem se for pensar direito as latinhas é Designer cada uma tem um detalhe mais bunito doque a outra.

Referência: Cyber Vida

Google revela novos logos de produtos

CHR Designer — Sat, 23 May 2009 20:43:04 +0000

Pode ser uma coisa muito pequena, mas quando é sobre a dimensão do Google, é uma mudança que milhões de pessoas vão notar. A empresa atualizou todos os seus produtos logos – Textos, notícias, mapas, etc…

Especificamente, todos os logotipos (além de produtos com sua própria marca, como o do Gmail agora incluem padrão logotipo do Google, além do nome do produto na mesma “limpa”. Veja alguns dos novos logotipos:

Além disso, os logotipos agora são “padronizado para ser do mesmo tamanho e cor onde quer que elas apareçam”.

Referência: mashable

Alguns logos feitos com Helvética

CHR Designer — Sun, 17 May 2009 19:19:00 +0000

E ai pessoal outro dia eu assisti o “Helvetica Film” e achei interessante saber quais logos era feitos com ela e eu achei muitos logos como a Microsoft, 3M, Nestlé, BMW, GM, Harley Davidson, etc… são escritos com Helvética e varias outras grandes marcas como nesse post vai mostrar.

Desenho com Pritt

CHR Designer — Sun, 17 May 2009 18:36:25 +0000

Olá pessoal eu estava dando uma olhada no blog Caligraffiti e ví esse video eu achei incrível como a imaginação dos seres humanos pode fazer. Esse video foi o artista chamado Michael C. Page que fez para um comercial da “Pritt” ele usou tinta, papel e marcadores Pritt. Vale a pena dar uma olhada nesse video.