Quem não quer aprender a fazer uns ícones?

Neste tutorial, vamos usar uma imagem já feita e transformá-la num ícone para podermos usar nos nossos programas, ficheiros, pastas, sites, etc.

Material Necessário:

- Uma imagem ou logo para transformar em ícone, uma vez que não vamos criar o logo neste artigo
- Photoshop (se não tiverem, podem obter uma versão de demonstração que dura 30 dias aqui)
- IcoFX (se não tiverem, podem fazer o download aqui – é grátis e espectacular)

Ok, vamos lá falar de ícones.. São um tipo de ficheiro especialmente criado para representar um programa ou um site.. A sua extensão é .ico..

Eles são usados em tudo e de cada vez é dada maior importância aos ícones que vemos por todo o lado.. Todos os sistemas operativos desde o Windows 3.1 usam ícones para as aplicações.. e podemos ver também ícones nos sites e isto sem falar dos botões que vemos ainda mais abundantemente..

Informações relevantes: os ícones são sempre quadrados, com o tamanho a variar entre 16x16px a 128x128px ou mais.. Ah, eles podem ter um alpha channel que serve para representar transparência.. por isso a nossa imagem não precisa de ser um quadrado.. podemos usar a transparência para representarmos o que quisermos lá dentro, incluindo quadrados =D

Vamos lá ao que interessa..

Objectivo: vamos fazer um ícone 32×32 a partir de uma imagem (eu vou usar o logo do Pixeis.net, vocês podem usar qualquer outra imagem.. e qualquer outro tamanho do ícone (mas quadrado e normalmente as dimensões são potências de dois: 2, 4, 8, 16, 32, 64, 128, 256, 512, etc))

A imagem que vou usar vai ser esta:

Então vamos abrir o Photoshop e vamos criar um novo documento com a dimensão do ícone que queremos fazer.. Neste caso vou usar 32×32:

Clicamos em Ok e aparece o nosso documento.. Agora, podíamos andar a criar o nosso ícone como qualquer outra imagem, mas vou-vos dar uma dica para organizarem o espaço no Photoshop para ícones..

Redimensionem a janela do vosso documento actual até ocupar a maior parte do espaço disponível..

Agora, vamos ao menu Window>Arranje>New window for (nome do vosso documento)..

Isto vai-vos abrir uma nova janela com o mesmo documento.. Isto quer dizer que qualquer alteração que façam numa das janelas, aparece igual na outra.. A vantagem disto é podermos ter duas vezes a mesma imagem mas a tamanhos diferentes..

Na primeira, vamos ter a imagem gigantesca para podermos trabalhar, e na segunda, vamos pôr a imagem a 100%..

Ok, assim podemos ver sempre como vai ficar o ícone no tamanho final..

Agora já podemos importar a nossa imagem/logo para o documento actual =D

A minha imagem do logo tem a resolução de 256x256px, o que é bem maior que o nosso ícone, por isso vou usar a Move Tool (V) para a redimensionar até caber no ícone:

Ok.. É só isto que quero no meu ícone.. por isso vou já gravar..

Como devem ter notado, este ícone foi feito a partir de uma imagem já criada, por isso não foi muito útil a segunda janela com o ícone no tamanho real.. Eu aqui não precisava de ter feito aquilo, mas fiz para vos mostrar porque em ícones mais complexos e demorados, vão ver a utilidade de ter ali a janela com o ícone..

Vou gravar como ficheiro PNG, que apesar de ser um ficheiro com compressão, não tem perda de qualidade e também tem alpha channel, o que me interessa por causa da transparência à volta do logo..

Agora vamos abrir o IcoFX e vão ao menu File>Import Image e na nova janela, abram o ficheiro PNG que acabamos de criar no Photoshop e usem estas definições (ou outras dependendo do vosso ícone):

Agora o IcoFX vai-nos criar um novo documento com o nosso ícone.. Como já foi feito no Photoshop e não precisa de alterações, podemos já gravá-lo para um ficheiro Ico:

E que tal? Não foi simples?

Podem usar este processo para criarem ícones para os vossos programas ou para os vossos websites..

Para definirem o vosso ícone no como ícone do site, é só fazerem o upload do ícone para a vossa pasta principal do site no servidor e o ficheiro tem que se chamar favicon.ico.. Não funciona com outro nome.. Assim que fizerem isto, começa logo a aparecer o ícone no vosso browser =D

Espero que tenham gostado e aprendido qualquer coisa e até à próxima =D