Olá para todos, hoje eu vou falar de @font-face não sei se todos conhecem, mas com essa técnica vocês conseguem colocar font’s não padrões no seu site, chega de falatório e vamos começar a por a mão na massa.

Vou escolher uma font muito usada para layouts a Futura Md Bt abaixo vou fazer um html bem simples.

<h1>Testando @Font-Face</h1>

Depois de criar o código vou gerar as font’s “.eot – .svg – .ttf – .woff vocês tem que usar todos esses tipos para que funcione em todos os browsers.” , eu uso o site http://www.fontsquirrel.com/fontface/generator “atenção este site não funciona o upload da font se for linux somente em windows” .

Para fazer o uploader da font é muito simples, primeiro aperte o botão “add fonts” deixe carregar, depois selecione a opção “optimal” e por final aceite os termos de uso “Agreement” e aperte o botão “Download Your Kit”.

Depois de terminar o download é só descompactar o arquivo gerado e copiar as font’s para dentro do seu projeto, se você quiser crie uma pasta chamada font para que fique mais organizado.

Agora abra a pasta que fizemos download da font e edite o arquivo “stylesheet.css” porque dentro dele já tem o css pronto da nossa font, copie e cole no arquivo no exemplo que estamos fazendo, a única alteração que temos que fazer é colocar o caminho de onde esta nossa font veja o exemplo abaixo.

@font-face {
	font-family: 'FuturaMdBTMedium';
	src: url('font/futura_md_bt_medium-webfont.eot');
	src: url('font/futura_md_bt_medium-webfont.eot?iefix') format('eot'),
	      url('font/futura_md_bt_medium-webfont.woff') format('woff'),
	      url('font/futura_md_bt_medium-webfont.ttf') format('truetype'),
	      url('font/futura_md_bt_medium-webfont.svg#webfontZaJl2R9s') format('svg');
	font-weight: normal;
	font-style: normal;
}

Depois de criar o @font-face no css vamos criar o um estilo para o h1.

h1{
 	font-family: 'FuturaMdBTMedium';
   }

Pronto agora estamos usando uma font não padrão em nosso projeto, vocês viram como é muito simples fazer isto, bom espero que ajude vocês qualquer dúvida ou sugestão é só comentar até o proxímo post.

Exemplo: Visualizar

Arquivos: Download

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…

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.

Olá pessoal eu sou viciado em Fontes não tem como esconder isso, eu estava dando uma olhada na galeria de fonts que tenho aqui no meu pc e achei umas fontes muito interessantes que são utilizadas em Filmes, Marcas, Logos, Bandas e Games, então eu resolvi colocar aqui no meu blog  para quem quiser fazer download delas é só clicar na imagem, abaixar e aproveitar…hahahahah…tomara que vocês gostem…

Fonts de Filmes/Produtoras

Marcas/Logos

Bandas

Games

Olá pessoal, já faz um tempinho que o Guto sempre fica perguntando para mim quais fontes seriam boas para colocar no recorte de um certo site, então eu resolvi fazer este post para ele, sempre  quando  tiver ele uma dúvida “Qual fonte seria boa para colocar neste recorte?”.

Abaixo eu vou dar exemplos de fontes com serifa e sem serifa padrões do Windows todas com 11px de altura.

Com Serifa:

Palatino Linotype

Courier New

Times New Roman

Sylfaen

Georgia

Sem Serifa:

Verdana

Arial

Tahoma

Trebuchet MS

Microsoft Sans Serif

Eu sou fissurado por Fontes da para fazer muitas coisas com elas só saber como utilizá-las  e esses caras abaixo sabem como usá-las.  Vamos dar uma olhada:

Referência: Abduzeedo

Neste post eu vou mostrar as oito fontes mais conhecidas e mais usadas pelos Designer e tambem mostrar para um cliente que teimou comigo falando que as fontes mesmo em “Familia” diferentes não muda a sua altura e largura, então vou mostrar pra ele…hahahah…todas as fontes estão no tamanho “50px”.

Referência: Wikipédia

As Fontes Tipográficas, ou simplesmente fontes, ou tipos, são classificadas segundo suas principais características, as Serifas. Na tipografia, as Serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. Temos como exemplo mais comuns a fonte Times New Roman.

Porém, ainda temos outros 5 tipos de fontes, umas derivam das serifadas, outras não se encaixam nas características acima citadas e são: Moderna, Script, Display, Black Letter e Não Latinas. Estas serão explicadas ao longo deste artigo.

Fontes Serifadas:

Tipicamente, os textos serifados são usados em blocos de texto (como em um romance), pois as serifas tendem a guiar o olhar através do texto: o ser humano lê palavras ao invés de letras individuais, assim as letras serifadas parecem juntar-se devido aos seus prolongamentos, unindo as palavras.Por outro lado, as fontes sem serifa costumam ser usadas em títulos e chamadas, pois valorizam cada palavra individualmente e tendem a ter maior peso e presença para os olhos (“chamando a atenção”), já que parecem maislimpas.
Ex: Times new roman, Garamond, Bodoni, Didot e Caslon.

Fontes não Serifadas (Sans-Serif ou Sem Serifa):

As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês “sem serifa”). O primeiro tipo sem serifa apareceu em 1816, pela casa fundidora Caslon e foi considerado bem avançado para a época, que era dominada pelos tipos de serifa quadrada. Foi um fracasso comercial. Pouco tempo depois, Willian Thorowgood produziu o primeiro alfabeto sem serifa com minúsculas, que ficou conhecido como Grotesque, base dos alfabetos sem serifa mais conhecidos.

Elas são perfeitas para exibição de textos no monitor pois transmitem sensação de limpeza, clareza, organização, fatores primordiais para atrair o visitante à leitura.
Ex: Helvética, Arial, Eurostile, Franklin, Optima, Univers, Kabel, Futura, Gill Sans, Avantgarde, Optima, Fruitiger.

Fontes Modernas:

As fontes tipográficas são classificadas como Moderna (ou ainda Didone) quando no seu desenho estrutural se percebe grande diferença entre espessura fina e grossa. Essa diferença acentuada não exclui a fonte daclassificação com ou sem Serifa, sendo assim, existem fontes Modernas com e semSerifa.
Ex: East Side, Elif.

Fontes Script:

São consideradas fontes Script todas que imitam a escrita humana. Essas fontes são largamente utilizadas em trabalhos gráficos como Convites, pois seguem tendências tradicionais vindas da Idade Média, seu desenho sugere classe, tradição, elegância, antiguidade. Devem ser usadas com cuidado quando se trata de mídia interativa.
Ex: English111 Vivace BT, TypoUpringht BT e Amazone BT.

Fontes Display:

Toda fonte que foge completamente das descritas acima é tida como fontes Display. São todas as fontes comemorativas, enfeitadas, tipos como”Wingdings” que nem representam letras, mais símbolos, são classificados como Display. Essas fontes também são conhecidas como fontes comemorativas, isso devido aos desenhos curiosos de algumas delas, algumas imitam bixos, objetos, pessoas, neve, desenhos animados, outras ainda remetem a idéia de festa, comemoração, quadrinhos, tecnologia, etc.
Ex: Zebrawood Fill, Zipty Do, Khaki Two, Giddyup, Cutout.

Fontes Black Letter’s:

É um caso particular de fontes Display, se originaram das fontes Serifadas, são as
chamadas fontes Góticas. Lembramos dela sempre naqueles livros de “Era uma vez…” onde a primeira letra do parágrafo é capitulada com uma letra black Letter.
Ex: OldEnglish, Goudy Text, Wilhelm Klingspor-Schrift.

Fontes Não Latinas:

Todas as fontes que representam uma língua cuja escrita não emprega caracteres latinos, pertencem a este grupo. Entre outras estão à escrita árabe, a cirílica e a japonesa.

Referência: Web Design Total

Eu estava navegando e deparei-me com esse post no Abduzeedo e eu achei muito legal os efeitos que da pra fazer com as fontes…na minha opinião esse post é muito bom vale a pena dar uma olhada.