Fala galera depois de muito tempo voltei a postar, hoje eu vou falar um pouco de CSS Sprite. É muito simples usar ele mas muitas pessoas tem dúvida de como usar, então vamos começar.

Primeiro de tudo vamos criar uma imagem, por exemplo eu vou fazer um menu bem simples no photoshop com os itens “Home – Quem Somos – Localização -Contato”.

Um toque para vocês sempre crie os itens com a mesma altura para facilitar depois o desenvolvimento, bem depois de criada a imagem vamos para a parte de html, vamos criar a base do que será o menu com <ul> e <li>.

<ul>
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Quem Somos" href="#">Quem Somos</a></li>
	<li><a title="Localização" href="#">Localização</a></li>
	<li><a title="Contato" href="#">Contato</a></li>
</ul>

Vamos para a parte de css o nosso menu vai começar aparecer, primeiro vamos sumir com os marcadores padrão do <ul> e depois vamos colocar os estilos na <li> e no <a> você vão ver que o estilo li e a estão juntos mas tem uma virgula separando os dois porque da virgula para quem não sabe ela quer dizer que a tag <li> e a tag <a> vão ter o mesmo estilo.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
</style>

Agora já está quase chegando a parte mais divertida do CSS Sprite vamos colocar a imagem de background do <a> e colocar as posições da imagem de cada link, primeiro de tudo vou colocar o background para todos os <a> vocês vão ver que ele vai aparecer para todos os links mas é assim mesmo fica tranquilo que vai funcionar.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
	a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}
</style>

Vamos voltar para a parte de html e colocar classes diferentes para cada <a> para nos colocarmos a largura e a posição de background de cada link.

<ul>
	<li><a class="home" href="#" title="Home">Home</a></li>
	<li><a class="quem-somos" href="#" title="Quem Somos">Quem Somos</a></li>
	<li><a class="localizacao" href="#" title="Localização">Localização</a></li>
	<li><a class="contato" href="#" title="Contato">Contato</a></li>
</ul>

Para finalizar este tutorial vou explicar como funciona o background-position vocês vão ver que ele tem dois zeros “0 0” o primeiro zero é para a posição horizontal da imagem e o segundo zero é para a posição vertical da imagem vocês vão ver que o segundo zero sempre será 0 ou -40px é porque na posição normal do link “off” ele será 0 e na posição hover ele será -40px porque a minha imagem tem 80px de altura e a metade é 40px assim quando a posição for hover ele vai dar -40px do background atual assim mostrando a imagem hover, deixa eu mostra na prática para vocês entenderem melhor.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
	a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}

	a.home{width:77px; background-position:0 0;}
	a.home:hover{background-position:0 -40px;}

	a.quem-somos{width:138px; background-position:-77px 0;}
	a.quem-somos:hover{background-position:-77px -40px;}

	a.localizacao{width:122px; background-position: -215px 0;}
        a.localizacao:hover{background-position: -215px -40px;}

	a.contato{width:90px; background-position:-337px 0;}
	a.contato:hover{width:90px; background-position:-337px -40px;}
</style>

Agora vou explicar o que fiz, eu coloquei a largura em todos os links vocês descobrem o tamanho usando o photoshop dando ctrl+t na imagem de cada botão irá mostrar o tamanho no box “informação – info” mas eu dei mais 1px na imagem para deixar uma linha branca para separá-los, agora para o background-position você descobre com a ferramenta “Marquee Tool” ou “tecla M” ai vocês pegam a distância da inicio da imagem até o inicio do botão.
Pronto agora nosso menu está finalizado, pode aparecer um pouco complicado no inicio mas depois vocês vão ver que é muito facil é só praticar, vou deixar o psd dos botões junto com o html para para download para vocês terem como referência, por favor deixem dúvidas ou sugestões, obrigado pessoal até o proxímo post.

Exemplo: Visualizar
Arquivos: Download

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.

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

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

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…

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

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

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

</body>
</html>

Agora eu vou colocar as DIVs:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

<div>TOPO</div>
<div”>LATERAL</div>
<div>CONTEUDO</div>
<div>RODAPE</div>

</body>
</html>

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 “<style type=”text/css”>”:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>

<style type=”text/css”>
*{margin:0; padding:0;}
#container{width:998px; margin:0 auto; text-align:center;}
#header{float:left; width:996px; height:40px; border:1px solid black;}
#nav{float:left; width:98px; height:100px; border:1px solid blue;}
#content{float:left; width:896px; height:100px; border:1px solid red;}
#footer{clear:both; height:40px; border:1px solid black;}
</style>

</head>
<body>

<div id=”container”>
<div id=”header”>TOPO</div>
<div id=”nav”>LATERAL</div>
<div id=”content”>CONTEUDO</div>
<div id=”footer”>RODAPE</div>
</div>

</body>
</html>

Visualizar o Exemplo
Download do Exemplo

É 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

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

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.