anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como transformar seus ícones em uma fonte web

capa

Se você está criando um layout para web, é comum deparar-se com um velho problema: na hora de visualizar ou ampliar os ícones em navegador web, seja na tela do computador ou na tela de um Smartphone ou um Tablet, você percebe que eles perderam alguma qualidade na visualização. Por outro lado, a parte do texto está perfeita, com contornos e cores bem delineados. A solução para esse problema? Transformar os ícones em uma fonte! Então que tal conhecer um método prático e útil de fazer isso para melhorar a qualidade dos seus trabalhos? Pois hoje o Blog Web Design vai te ensinar como.

Visualizar imagens e ícones com qualidade perfeita é um desafio, principalmente nos dias de hoje em que os usuário utilizam diferentes formas de acessar um site e abusam do recurso de zoom, ampliando detalhes que na maioria das vezes expõem algumas imperfeições de nossos trabalhos. Muitas vezes, é necessário até mesmo criar imagens de tamanho duplo, para exibi-las na metade do seu tamanho usando regras CSS, mas isso apenas disfarça as imperfeições em uma tela Retina no tamanho normal. Assim que o usuário começar a utilizar o zoom, a indefinição voltará a aparecer.

antes e depois

Neste tutorial, veremos como transformar ícones de vetor em uma fonte web usando um ótimo aplicativo da web (e o melhor: gratuito) chamado IcoMoon e depois usar os arquivos da fonte gerada em uma página web com CSS.

 As vantagens da utilização de um ícone como fonte

Um ícone transformado em fonte tem várias vantagens sobre as imagens bitmap, além de nitidez da imagem. Posso citar algumas:

Adequação: Um ícone transformado em fonte será muito menor em tamanho do que uma série de imagens, especialmente se você usou imagens de tamanho duplo para telas Retina. E uma vez que a fonte é carregada, seus ícones aparecerão instantaneamente, sem a necessidade de esperar o tempo de baixar as imagens.

Escalabilidade: um ícone de fonte pode ser ajustado para qualquer tamanho, definindo o atributo de font-size no CSS. Isso permite que você a experimentar com diferentes tamanhos enquanto que, para imagens de bitmap, você teria que produzir um arquivo de imagem em cada tamanho.

Flexibilidade: efeitos de texto podem ser facilmente aplicados ao seu ícone, incluindo cores, sombras e estados de rolagem. Eles também terão uma boa visibilidade contra qualquer cor ou imagem de fundo.

Compatibilidade: fontes da web são suportados por todos os navegadores modernos e navegadores antigos, mesmo o Internet Explorer versão 6 e anteriores.

Bom, depois de todas essas vantagens, você ainda tem dúvida de que transformar os seus ícones em fontes é uma grande idéia? Então, que tal começarmos nosso tutorial?

Preparando os ícones

Para começar, você precisa criar ou editar os ícones em um programa de desenho vetorial que pode ser exportado para o formato SVG, como o Corel Draw, Illustrator ou Inkscape. Geralmente criar é a melhor pedida, mas se está sem tempo, poderá baixar algumas coleções na web e editar no seu programa favorito, decidindo depois quais irá utilizar.

Enquanto você está projetando os ícones, você pode trabalhar com as cores que você deseja, mas os ícones devem ter uma cor sólida. Certifique-se de cada um deles fique com aproximadamente o mesmo tamanho. Ter um ícone muito mais alto ou mais largo do que o outro irá tornar mais difícil a construção de uma fonte consistente. Se necessário, faça ajustes na largura e na altura do ícone para que ele corresponda aos outros.

Usando programas vetoriais

“Limpe” o vetor

Verifique cada ícone cuidadosamente para ter certeza que não tem imperfeições – como mencionado anteriormente, detalhes que parecem OK em tamanhos menores podem esconder pequenos defeitos quando o zoom for utilizado. Remova os pontos irregulares que encontrar em cada um deles. Lembre-se: em vetor, menos é mais! Quanto menos pontos, mais ‘limpo’ e perfeito ficará seu desenho.

No Illustrator, por exemplo, isso pode ser feito utilizando a ferramenta Caneta e o painel Pathfinder para unir elementos sobrepostos, com a opção Remover ponto de Ancoragem (-) para remover elementos desnecessários do ícone. No Corel Draw, isso pode ser feito com a ferramenta Forma, dando um duplo clique para excluir um ponto e ainda clicando diretamente sobre eles para editá-los. O princípio fundamental é garantir que o seu ícone possa ser visualizado em pequenas escalas. Simplifique tanto quanto possível e procure deixar as formas bem cuidadas e com um acabamento caprichado.

Removendo pontos desnecessários

Exporte para SVG

Agora, selecione um ícone, copie e cole-o em um novo documento (de, por exemplo, 200 × 200 pixels). Se necessário, dimensione o ícone para que ele possa se encaixar. Como sugestão, ative a visualização as réguas do programa e crie linhas-guia para facilitar o seu trabalho.  Importante: Não esqueça que a cor do ícone deve ser sempre preta sobre um fundo branco.

Agora, escolha Arquivo > Salvar como e salve o ícone como um arquivo SVG (no Corel, isso é feito através do comando Exportar).

Exportando

Se você ainda não sabe o que é SVG, explico: é uma sigla para Scalable Vector Graphics ou, em português, Vetor Gráfico Redimensionável. Um arquivo SVG é basicamente um mapa em XML que descreve matematicamente uma figura gráfica bidimensional. Funciona como um conjunto de instruções numéricas para realizar um desenho, que são convertidas em imagens por um programa capaz de interpreta-lo (como um browser, por exemplo). Simplificando muito, SVG é um formato de figuras vetoriais que pode ser interpretado por navegadores. Ainda dedicarei um Post sobre o assunto, mas por enquanto você pode ler mais sobre o SVG aqui.

Voltando ao nosso tutorial, use as configurações padrão para o SVG. Depois de ter feito isso para todos os ícones que deseja, você está pronto para criar a sua própria fonte.

4. Importe para o IcoMoon

Abra o aplicativo web IcoMoon . Para importar um ícone, clique no botão “Import Icons” (Importar ícones) e, em seguida, selecione os arquivos SVG que você deseja adicionar – você pode adicionar vários arquivos de uma só vez. Após esta etapa, eles irão aparecer em  “Your Custom Icons.”  (Seus Ícones Personalizados) destacados em amarelo, indicando que farão parte da fonte que você irá criar.

Importando para o IconMoon

Exporte a fonte

Você pode clicar no botão “Edit” (Editar) se você deseja ajustar a posição do ícone, o seu dimensionamento ou rotação. Use o botão “Save Copy” (Salvar Cópia) para criar variações do ícone (por exemplo, uma imagem espelhada). Adicione também um nome significativo para o ícone, afinal o usaremos na hora de gerar o nome de classe para ele no CSS.

Quando estiver pronto, clique no botão “Font” na parte inferior da tela para começar a gerar a sua fonte. É também o lugar onde você vai associar o ícone a um caractere, por exemplo, se o seu conjunto de ícones será o de seis imagens de uma bola girando, você pode atribuir o caracteres “q”, “w”, “e”, “r”, “t” e “y” para os seis quadros. Nas preferências, escolha um nome para a sua fonte.

Exportando do IcoMoon

Faça o download dos arquivos

Clique em “Download” para baixar o pacote de fontes para a sua máquina. Irá aparecer uma subpasta contendo as próprias fontes (em WOFF, EOT e formatos TTF), bem como uma amostra de páginas HTML e o CSS correspondente. Há ainda um arquivo JavaScript com uma solução se você precisar de alguma informação de suporte ao IE 6 ou 7.

Para adicionar as fontes para seu projeto, copie as fontes da subpasta para o seu site. Você pode copiar e colar o CSS do documento style.css em um arquivo CSS do seu próprio site, mas sugiro que  renomeie-o como fonts.css e o mantenha como um arquivo CSS separado. Em seguida, você precisa adicionar uma referência a esse arquivo CSS no arquivo HTML usando o seguinte link:

<link rel="stylesheet" href="fonts.css" />

No elemento @ font-face  do arquivo CSS, você vai precisar alterar a URL de referência para a nova localização relativa das fontes, ou você pode simplesmente deixar a pasta de fontes na sua pasta de folhas de estilo.

Adicionando a fonte

Como invocar a fonte

Há duas maneiras de se fazer referência a fonte personalizada, seja por seu caráter (unicode ou nome) ou pelo nome da classe. O primeiro exemplo usa a condição data-icon do HTML5 :

<div aria-hidden="true" data-icon="&#x67;"></div>

Aqui, a classe é usada para definir o tamanho da fonte. A aria-hidden aqui mostrada será a referência para garantir que o caractere não seja “lido” por programas leitores de tela.

O segundo método usa um elemento span:

<span aria-hidden="true"></span>

Este método é útil quando você deseja que o símbolo seja utilizado em linha com texto normal. Se você quiser fazer um link no ícone, você pode “embrulhar” tudo em um href :

<a href="http://www.seusite.com.br"  data-icon="&#x73;"></a>

Aqui, eu adicionei a classe iconlink  e adicionei um estado em foco:

a.icone_link {
font-family: 'sua_fonte_icone';
text-decoration:none;
color: #666666;
}
a.icone_link:hover {
text-decoration:none;
color: #999999;
}

Outras sugestões

Como acabamos de descobrir com o estado em foco, mudar a cor do ícone é tão fácil como definir da propriedade de cor em nosso CSS. Alterar o tamanho também é tão fácil quanto definir a propriedade font-size. Você também pode definir outras propriedades, como a sombra de texto e transparência. Todos, é claro,  mantendo a resolução da independência de uma fonte.

galeria de fontes

Experimente esse método, tente, faça experiências e eu garanto que você nunca mais vai querer usar ícones em bitmaps novamente! (Ok, eu posso estar exagerando, mas se você tiver tempo e paciência e quiser um site com ícones em alta qualidade, vai considerar ter todo esse trabalho).

Gostou da dica? Tem outra sugestão de site para transformar ícones em fontes? Deixe-nos saber nos comentários. Não se esqueça de Curtir se gostou do post e também de recomendá-lo aos seus amigos web designers. O Blog web design agradece a sua audiência e aguarda sua visita aqui no próximo post!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

670px-Make-Manga-Step-4
Tipografia para Mangás e Animes
Tipografia para Mangás e Animes Olá pessoal! Nesse clima da ANIME FAN FEST venho trazer aqui