CHR Designer » Lógica Digital

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…

Como fazer borda arredondada no FireFox e no IE com css?

CHR Designer — Wed, 10 Jun 2009 01:34:54 +0000

E ai pessoal semana passada eu estava ajudando a Patricia uma menina que trabalha na Lógica Digital na parte de recorte, ela pediu uma ajuda minha para fazer um Moving Boxes precisava que a imagem ampliar-se sozinha mas com uma imagem de fundo não dava certo então eu fiz em css mas as bordas arredondadas mas não pegava no IE então eu fiz umas pesquisas no google até que eu achei o site html remix, então eu resolvi deixar postado aqui para ajudar todo mundo que tem essa mesma dúvida e também para que eu não esqueça mais.

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style: -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração



	
	Esta funcionando no FireFox e não funciona no IE

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração




	
	Esta funcionando no FireFox e no IE

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

Novo Layout – Dahruj Honda

CHR Designer — Wed, 13 May 2009 00:41:21 +0000

Olá pessoal esse layout da Dahruj Honda deu muito trabalho para desenvolver, nossa foram muitas pesquisas e tambem muita ajuda, principalmente do Cold e Camilo que foram dando “palpites” noque eu poderia melhorar mais o layout .

Como obter uma melhor indexação – Flash

CHR Designer — Tue, 05 May 2009 02:05:49 +0000

Eu estava lendo no blog do Fabio Ricotta e vi esse artigo muito bom falando sobre como melhorar a indexação de Sites em Flash, na Produtora Web que eu trabalho “Lógica Digital” eu sempre converço com o responsável em flash “Fabio JR.” como nos podemos melhorar a indexação. Abaixo vai ter uma breve descrição como podemos melhorar isso.

A grande maioria sabe, o Flash é totalmente um recurso visual, e o Googlebot não possui olhos. O Googlebot pode ler os arquivos Flash e extrair texto e links contidos nele, mas a estrutura e o contexto é perdido. Além disso, o conteúdo textual é, em algumas vezes, armazenado de forma gráfica no Flash, e como o Googlebot não possui um algoritmo para o reconhecimento destes gráficos, estas importantes palavras-chave são perdidas. Tudo isso significa que mesmo que o seu conteúdo em Flash esteja na base de dados do Google, ele pode perder um pouco de texto, conteúdo, ou links. O agravante fica no seguinte ponto: o Googlebot pode entender alguma coisa dos arquivos Flash, mas muitos outros crawlers não podem.

Então, o que um web desginer deve fazer?

A única coisa que se deve fazer é prover ao Googlebot e a todos os crawlers, o mesmo conteúdo que é disponibilizado aos usuários. Se você não o fizer, o seu site ficará suspeitos através dos algortimos de busca dos buscadores.

Algumas sugestões foram feitas pelos engenheiros da gigante Google, para quem desenvolve em Flash:

Tente usar Flash onde é realmente necessário. Muitos sites como o Youtube, utilizam a tecnologia Flash para a exibição de vídeos, mas o restante do website é baseado em HTML para a perfeita estruturação.
sIFR: Muitos sites utilizam o Flash para forçar os browsers a apresentar textos em uma fonte que o usuário não possua. Técnicas como sIFR deixam browsers que não possuem suporte ao Flash, lerem o conteúdo normalmente ao invés de forçar a aparição do objeto.
Criar versões sem Flash: Um modo comum de contornar o problema de indexação de sites em Flash é a criação de uma página inicial para a seleção do tipo do site(com ou sem flash).

Quer postar seu portfólio ou blog em Sites de CSS

CHR Designer — Tue, 28 Apr 2009 00:51:53 +0000

Olá pessoal olha eu aqui denovo, esse post vai ser mais interessante para quem tem um Portfólio ou Blog e quer que tudo mundo veja o seu trabalho ou até mesmo para você ver layouts de outras pessoas para tirar “Inspirações” para criar o seu, eu onde trabalho “Lógica Digital” sempre entro nesses sites para tirar umas idéias e ver o que tem de novo. Abaixo eu vou postar uns sites de css que eu sempre acesso, tomara que vocês gostem.

http://csscreme.com/

http://cssmania.com/

http://www.cssshowcase.co.uk/

http://www.cssstyle.me/

http://cssorgy.com/

http://www.cssloggia.com/

http://www.designersource.net/

http://cssfreshblend.com/

http://csstea.com/

http://cssproject.cz/

http://www.ucss.pl/

http://www.css-design.fr/

http://www.csselite.com/

SEO – Posicionamento em Sites de Busca

CHR Designer — Sun, 05 Apr 2009 20:08:00 +0000

Esse video foi desenvolvido pela Lógica Digital para mostrar mais sobre o que é SEO? Hoje em dia é muito importante esse assunto para deixar seu site no topo dos Sites de Busca…

Dois Layouts Novos

CHR Designer — Fri, 03 Apr 2009 00:45:00 +0000

Ae pessoal comecei com tudo esse mês…hahaha..mais dois layouts desenvolvidos pela produtora Web Lógica Digital que são Simco Maq e Yamaguchí vamos dar uma olhada…

Simco Maq

Yamaguchí