Como fazer seu próprio ícone
Neste artigo, examinarei a ciência por trás da criação de ícones de interface do usuário bem-sucedidos antes de ensinar como criar sua própria fonte de ícone incorporável .
Desde projetar os ícones individuais até convertê-los para @font-face incorporação, e até mesmo licenciando-os para distribuição, estaremos usando apenas software livre e serviços online. Que tal isso? Você não precisará depender de nenhum dos conhecimentos esotéricos necessários para criar fontes alfanuméricas de sucesso; apenas um olho para projetar coisas que podem parecer muito, muito pequenas.
Em última análise, você deve ir embora com um processo para criar elementos de design que se estendam muito além da fabricação de ícones simples.
Antes de continuarmos, algo deve ser dito sobre o que exatamente estamos tentando achieve usando ícones em nossos projetos, em primeiro lugar, e o que torna um ícone mais bem-sucedido do que o outro. Teoria antes da aplicação. Para fazer isso, devemos considerar o papel do ícone como parte da semiologia.
O que faz um bom ícone?
Semiologia no sentido mais amplo, é o estudo dos sistemas de signos , como contribuímos para sua formação e manutenção, e o impacto que eles têm na nossa compreensão do mundo dentro e fora de nós.
Sempre que você considera uma parte do seu trabalho de design na perspectiva do que significa - o que está dizendo ao seu público ou quais conceitos ele está chamando para eles - você está considerando seu design como um semiótico. Embora a semiologia, como a lingüística, cubra a linguagem, há muito mais coisas em um site que “dizem” algo sem palavras, como cores, tipos e formas que chamamos de ícones . Deve-se ter cuidado com o que essas coisas dizem ter uma forte dimensão cultural. Na China a cor vermelha pode significar boa sorte, enquanto em muitos países ocidentais é usada para denotar perigo.
(Baseado em uma imagem de ell brown )
O termo "ícone" tem um significado especial no campo da semiologia. Um ícone é um artefato que significa algo parecido com ele. Tomemos, por exemplo, um ícone de alfinete de mapa . Como uma forma que se assemelha a um pino de mapa "real", é capaz de significar isso. Por sua vez, o pino real do mapa traz à mente todos os tipos de conceitos significativos . Entre eles, conceitos abstratos, como localização e conceitos menos abstratos, como o mapa ao qual o pino pode pertencer.
Alguns dos chamados ícones não são verdadeiramente icônicos. O onipresente ícone RSS , com seus pontos e dois segmentos de círculos concêntricos, não se parece mais com o syndication do que com as palavras “Really Simple Syndication”. A configuração de formas que constituem o ícone RSS significa apenas RSS por convenção; nós concordamos que é para isso que servem. Um ícone RSS é mais apropriadamente chamado de símbolo RSS .
Até agora, espero que tenhamos estabelecido que os ícones da web bem-sucedidos devem atender a um ou ambos dos dois critérios a seguir:
- Uma forte semelhança com uma coisa real, por exemplo, um ícone de impressão que se assemelha a uma impressora real
- Estabelecimento e, portanto, familiaridade como um símbolo reconhecível dentro do sistema de sinais
Fontes de ícones ganhando popularidade
Os ícones há muito tempo são considerados uma boa maneira de melhorar os designs da UI, pois fornecem uma abreviação visual que auxilia na compreensão de uma mensagem puramente textual. Folhas de imagens de ícones são distribuídas por toda a comunidade de web design, como contrabando, cada conjunto prometendo tornar seu design mais brilhante, mais atraente e mais clicável do que o anterior.
Em comparação com imagens, a ideia de usar fontes incorporadas para ícones é uma ideia relativamente nova. No entanto, é aquele que está ganhando considerável tração devido às muitas vantagens inerentes sobre a imagem (ou background-image ) método. Eu escreveu sobre algumas dessas vantagens no meu pequeno blog no início de setembro. Chris Coyier obviamente teve uma ideia semelhante, introduzindo a ideia a uma audiência ( muito, muito ) maior semanas depois. Com base nos dois posts e outros, eu compilei esta lista abrangente de recursos:
- Eles são facilmente redimensionados sem degradação (porque são essencialmente vetores)
- Recolorir o ícone é tão trivial quanto recolorir o texto. Por exemplo,
color: orangepara um ícone de RSS - Muitos ícones são agrupados em um arquivo, exigindo apenas uma solicitação http
- Como Chris aponta, são formas que têm “nocautes” transparentes que funcionam em navegadores desde o IE6 (ao contrário dos PNGs alfa)
- Para ícones que devem aparecer ao lado do texto, alinhamento e quebra automática não são problemas (porque são texto)
- Você pode aplicar efeitos CSS3 via
text-shadowebackground-clip:textque respeitam a forma do glifo - Ao contrário do SVG, o suporte entre navegadores é fácil de alcançar
Problemas
Nas palavras de Chris, usar fontes para ícones é uma boa ideia, estou lhe dizendo
. No entanto, o status quo em relação ao uso de fontes de ícones não é o ideal. Em primeiro lugar, a maioria das fontes de qualidade disponíveis, chamado coisas como Pictos , Fico , Klepto, Cheetos, Ponyo e Sailor Moon (Eu posso ter algumas dessas coisas erradas), são pagas por fontes. Na prática, isso significa que existem dois problemas :
- Você pode ter que se separar do dinheiro
- Se você tem que se separar com dinheiro ou não, você terá que aceitar o trabalho de projeto imundo de outra pessoa
Além dos programas de rastreamento automatizados, presumo que sejam principalmente os web designers que lerão este artigo. Sou eu mesma uma designer e não acho que estou sozinha em ressentir-me da idéia de ter que comprometer meu próprio projeto confiando na obra de outra pessoa. Naturalmente, estou ainda menos encantado com o pensamento de pagar pelo privilégio. Eu sei quais ícones eu quero usar e sei exatamente como eu quero adaptá-los ao meu design geral. Eu quero esse controle .
Depois de algumas pesquisas, eu acabei introduzido às possibilidades do Inkscape 's SVG Font Editor . Com um pouco de prática usando o Inkscape e com a ajuda de um conversor on-line para transformar minha fonte SVG em um TTF, pude fazer “Heydings”. Esta fonte está agora incluída A lista de Simurai (como ligado pelo artigo de Coyier). Eu não estou tentando vender a minha fonte (é grátis de qualquer forma), mas eu acho que é uma boa prova de conceito :
Fazendo glifos de ícone com o Inkscape
Configurando o Inkscape
Vamos começar por baixar e instalando o Inkscape. Você também deve usar o modelo de fonte inicial do meu ícone, localizado na pasta de recursos do este repositório GitHub (mais sobre este projeto do GitHub mais tarde). Depois de abrir esse arquivo na sua nova instalação do Inkscape, você deve configurar sua área de trabalho abrindo as seguintes janelas no menu principal:
- OBJETO → PREENCHIMENTO E CURSO
- OBJETO → ALINHAR E DISTRIBUIR
- TEXTO → SVG FONT EDITOR
No painel SVG Font Editor, clique em “Font 1” em “Font”. Sua área de trabalho deve agora parecer com essa captura de tela:
Vale ressaltar que o linha de base guia não está abaixo do limite inferior da tela por engano: por motivos mais conhecidos de outra pessoa, seus ícones devem ficar um pouco acima da parte inferior da tela se você desejar que eles compartilhem a mesma linha de base que os tipos adjacentes. Eu testei isso com a Geórgia, Arial e uma série de fontes da web.
Fazendo seu primeiro glifo
Para definir o glifo, clique na guia Glifos no painel Editor de fontes do SVG e , em seguida, clique no botão Adicionar glifo na parte inferior do painel. Não fica imediatamente claro na primeira inspeção, mas se você clicar no seu glifo ("Glyph 1"), aparecerá um campo que permitirá que você insira o caractere ao qual deseja atribuir seu ícone. Vamos fazer uma forma de estrela simples em primeiro lugar, então eu recomendo que você digite o caractere "s", "S" ou "*":
Agora que definimos o caractere correspondente do glifo, precisamos criar o próprio glifo. Já que estamos apenas fazendo uma estrela dessa vez, devemos selecionar a útil ferramenta Estrelas e polígonos do Inkscape na barra de ferramentas à esquerda e desenhar uma estrela na tela. Você notará que essa ferramenta vem com opções que permitem alterar a aparência da estrela. No meu exemplo, escolhi 5 cantos, uma razão de raio de 0,5 e um valor arredondado de 0,1.
Centralize a estrela na horizontal usando o painel Alinhar e distribuir (que pode estar oculto abaixo do Editor de fontes SVG ) e arraste a forma para baixo para atender à linha de base. Com a grade desligada, a tela deve se parecer com algo assim:
Glifos na fonte do nosso ícone são apenas formas; formas sem cores, camadas ou gradientes. Então, para tornar nossa estrela uma candidata legítima à nossa fonte, precisamos convertê-la de um objeto em uma forma baseada em caminho. Para fazer isso, selecione a estrela e escolha PATH → OBJECT TO PATH no menu principal. Agora, com a estrela selecionada, podemos ir ao nosso Editor de fontes SVG , destacar o glifo "s" aplicável e clicar no botão Obter curvas da seleção :
Quando você insere "s" no campo Texto de Amostra , sua estrela deve aparecer como uma prévia, assim:
Fazendo ícones mais complexos
Agora você criou seu primeiro glifo de fonte SVG escalonável. Usando opções do painel Preenchimento e traçado , editando nós de caminho e combinando objetos e traçados, você poderá criar designs de ícones muito mais ambiciosos. Eu não quero entrar em um tutorial completo do Inkscape porque nós temos muito mais para cobrir, mas seguindo estas regras simples você ficará em boa posição:
- Use apenas traços e preenchimentos pretos, apenas para lembrar que os ícones são apenas formas, e não gráficos vetoriais complexos. Colorir o ícone é possível no produto final usando CSS.
- Todos os objetos e traços (linhas) devem ser convertidos em caminhos usando PATH → OBJECT TO PATH ou PATH → STROKE TO PATH
- Vários objetos e / ou traços usados para compor um glifo de ícone devem ser combinados usando PATH → COMBINE (ou, em algumas circunstâncias, PATH → UNION)
- Para cortar formas de formas (como usar um cortador de biscoitos), coloque a forma que criará o “nocaute” sobre a forma principal, selecione ambas e escolha CAMINHO → DIFERENÇA. As áreas brancas em preto que se parecem com “nocautes” não serão suficientes, como você descobrirá quando atingir as curvas Obter da seleção Veja a regra 1.
Preparando sua fonte para incorporação
Imagine que você criou vários ícones úteis para sua fonte, repetindo o método de geração de glifos que acabei de descrever e salvando o arquivo como myicons.svg . Agora, você desejará preparar esta biblioteca de ícones para uso em páginas da web.
Convertendo o SVG para TTF
A primeira medida que você deve tomar é converter o @font-face requisitos. Serviços online que permitem converter fontes entre formatos incluem http://onlinefontconverter.com/ , http://www.fontconverter.org/ e http://www.font2web.com/ . Meu favorito pessoal, no entanto, é http://www.freefontconverter.com/ porque eu não entendi na fila e nunca soube que ele devolveria quaisquer falhas.
Eu não vou patrocinar você explicando como usar este recurso. O campo de upload de arquivos sucessivos, o elemento de seleção e o botão de conversão gigantesco falam por si mesmos, na verdade.
Editando a meta-informação da fonte
Agora que você tem o TTF em mãos, recomendo que você edite os metadados gerados. Renomear, atribuir e descrever a fonte para sua satisfação a torna pronta para instalação, incorporação e distribuição . É também uma maneira de mostrar que a fonte é seu próprio trabalho. Os leitores que executam o Windows têm a opção de usar o som enganadoramente grandioso Editor de propriedades de fonte da Microsoft ou o livre-por-x-dias Typograf . Para usuários da Apple e do Linux, imploro aos que estão mais bem informados do que eu para ajudar nos comentários.
O editor de propriedades de fonte desajeitado mas útil
Nota importante: Embora o Editor de propriedades de fontes da Microsoft permita adicionar informações de autor, descrição e licença, não parece permitir a edição de dados básicos, como o nome da fonte e o nome do postscript . Esses campos estão desativados. Se você estiver usando este software específico, precisará localizar e editar os valores proibidos no código SVG antes da conversão TTF. Abra o SVG original no seu editor de texto favorito (eu uso Notepad ++ ) e edite o seguinte:
Nome da fonte: encontrado na tag, font-family atributo
Nome do Postscript: encontrado na tag, id atributo
Descrição: você deve adicionar uma descrição (autor, licença etc.) na tag. Observe que isso não é equivalente ao texto de descrição do TTF e não será preservado por meio da conversão; você terá que adicionar a descrição do TTF separadamente.
Tornando a fonte incorporável
Uma vez que você tenha instalado o TTF no seu sistema local e visualizado um pouco para ter certeza de que nada deu errado, é hora de executá-lo através do Font Squirrel's. @ gerador de fontes . Para tornar o código de saída tão eficiente e eficaz quanto possível, há algumas opções que merecem destaque no modo avançado do gerador:
Subconjunto: A opção de subconjunto permite incluir apenas os caracteres que você delegou, reduzindo o tamanho do arquivo.
Remover o kerning: Seus ícones quase sempre aparecerão isolados, então o kerning (informações adicionais sobre a proximidade de caracteres um com o outro) não é necessário. Isto irá, supostamente, reduzir o tamanho do arquivo também.
WebOnly ™ : Se você é evangélico sobre as pessoas que usam sua fonte como pretendido - e não reverter para criar imagens fora dos glifos em Photoshonk - você pode selecionar esta opção. Também pode ser mais adequado ao seu plano de licenciamento. Eu cobrirei o licenciamento agora.
Distribuindo sua fonte
Se você está interessado em liberar sua fonte, é considerado uma boa prática dar a ela uma licença. Muitos sites de fontes não carregam sua fonte sem um. Como utilizamos softwares gratuitos e de código aberto para criar os ícones, é apropriado que os distribuamos como tal.
Existem muitas opções de licenciamento disponíveis e investigá-las às vezes é desconcertante. o Licença Pública Geral GNU é perfeitamente aceitável, mas você pode querer considerar o Licença de fonte aberta do SIL . A principal vantagem dessa licença é a provisão de um nome de fonte reservado : Outros projetistas têm permissão para modificar sua fonte, desde que o nomeie de forma diferente. Na prática, isso significa que crimes contra o design de ícones não podem ser realizados “em seu nome”.
No caso de qualquer licença, você deve incluir uma versão em um arquivo de texto, bem como inserir o aviso de direitos autorais e um link para a URL completa da licença na meta da fonte. Visite as respectivas páginas de licenciamento (link acima) para obter instruções mais específicas.
O fim do CSS spriting
Por que parar de fazer ícones genéricos usando fontes SVG? Com a capacidade de criar ícones, é possível criar mais formas específicas de site, elementos de marca e decorações. Gostar Sprites CSS , todos esses elementos visuais podem ser mantidos em um arquivo, reduzindo as chamadas do servidor a um pedido http singular . Ao contrário dos sprites CSS, os elementos são redimensionáveis e não dependem de coordenadas posicionais (
background-position valores) para exibir corretamente. Isso os torna eminentemente mais adequados ao design responsivo .
Vamos fingir que escolhi usar uma fonte SVG para cobrir alguns elementos básicos de design na minha vagamente steampunk -gostar blog . Uma simples renderização da tabela HTML dos designs de componentes seria algo como isto:
Uma das melhores coisas dessa abordagem é a versatilidade. Por exemplo, a segunda forma de engrenagem da esquerda pode ser usada tanto como um pequeno desenho de ponto de bala e uma decoração de fundo gigante e abstrata. Colorir é tão fácil quanto usar color:maroon , mas não há necessidade de aderir a cores planas; uma infinidade de efeitos CSS3 pode ser empregada para adicionar textura e tato. Para um pouco de inspiração para você começar, examine esta excelente galeria de webfonts com CSS3 .
Uma nota rápida sobre leitores de tela
Um problema com o uso de fontes para exibir elementos visuais dessa maneira é o impacto leitor de tela saída. Um visitante do site que lê visualmente verá engrenagens, setas e coisas do tipo, mas um leitor de tela insistirá em ler os caracteres que designam esses desenhos. Para usos de elementos de fonte SVG que são decorativos, eu recomendo seguir a sugestão de Coyier: Atribuir os vetores ao Área de uso privado suplementar de Unicode. Esses caracteres não devem ser lidos pelos leitores.
Um ícone colaborativo webfont
Como meu mentor de JavaScript, Rupert , apontou para mim no outro dia, usando fontes SVG para criar conjuntos de ícones oferece uma oportunidade interessante para colaboração. Você vê, o código SVG - que é uma forma de XML - é altamente padronizado e facilmente legível por humanos. É exatamente o tipo de código-fonte adequado ao desenvolvimento usando um serviço de "codificação social" como GitHub .
A idéia ressoou comigo por suas implicações semióticas: se a apreensão de um ícone é determinada por consenso , então certamente o consenso também deve desempenhar um papel em sua formação. Ao colaborar com o nosso “sistema de sinais” de ícones, apenas os designs de ícones mais arquetípicos devem surgir. Devemos ser capazes de criar vocabulários de ícones que realmente pertençam às comunidades para as quais eles deveriam significar algo.
Eu criei um repositório público do GitHub para ajudar a promover essa ideia. Chamado Fonte do ícone da comunidade , a base de código do repositório não é complexa: uma inspeção detalhada do tutorial do Inkscape anterior e uma leitura rápida do página do projeto deve dar tudo que você precisa para se envolver. Se você é novo no GitHub, tente olhar para o páginas de ajuda ou perguntando ao seu técnico de vizinhança (isso é o que eu faço).