Tutorial Como criar um ícone (do latim, icone)

COMO CRIAR UM ÍCONE (pelo latim, ICONE)
e, o que é um ícone?

Como criar um ícone no Paint da Microsoft
Depois de desenvolvida a idéia, ou seja, você já fêz uma pesquisa para ver se seu ícone é reconhecido pelo seu público alvo, e você já sabe como será o seu ícone, será necessário fazer a arte final.
Poderá ser um trabalho vetorial ou bitmap (mapa de bits).

No caso de bitmap, tendo em vista a própria simplicidade de um ícone, é recomendável que se use programas simples para desenhar o ícone, como o MS-Paint, por exemplo. Em geral, os ícones são figuras bem pequenas e quadradas, 16 pixels x 16 pixels, 32 pixels x 32 pixels, 48 pixels x 48 pixels, 64 pixels x 64 pixels, ...

Passo 1: Definindo o tamanho do bitmap do seu ícone no Paint
Abra o Paint e ( Windows Seven) comande Botão do Paint > Propriedades
Defina largura e altura do seu ícone (em pixels). Por exemplo, um ícone de 16 pixels x 16 pixels.

Tamanho do ícone

Obs.: no Windows Vista, XP e anteriores, comande Imagem > Atributos

Desenhando seu ícone
A Área de Desenho estará minúscula. Utilize a Ferramenta Lupa e aumente o máximo que puder, de modo que você possa desenhar o ícone.
Você desenhará o seu ícone, pixel a pixel, usando a Ferramenta Lápis com a menor espessura possível.
Também é possível abrir uma imagem pré-existente e REFINAR, pixel a pixel, o seu ícone.

Ícone 16 x 16 pixels Ícone 48x48 pixels

Salvando o seu ícone
Na hora de salvar, use Salvar Como, digite um nome e utilize a extensão .png, por exemplo, para ter uma qualidade muito boa (depois você poderá converter para .ico, de ícone, se necessário).

O que é um Favicon? (define: favicon)
Favicon é a contração de FAVorite e ICON (ícone favorito).
Favicons são imagens de ícones gravadas no formato .ico, em geral, com 16 pixels x 16 pixels. São usados para identificar páginas de Internet no navegador (fica à esquerda do título da página). O favicon pode ser o logo da empresa (ou parte dele, já que tem que ser uma imagem muito pequena).

Como inserir um Favicon na sua página de Internet
Para que sua página apresente um favicon junto ao título, é necessário que você insira uma linha no código HTML, entre as seguintes tags <head> e </head>:

<LINK REL="SHORTCUT ICON" HREF="http://www.... icone.ico">

Como obter a imagem do ícone no formato .ico
Na Internet você poderá buscar por programas que convertem imagens .jpg, .gif ou .png para .ico. Existem dezenas gratuitos.
Uma opção é a conversão online pelo site http://www.chami.com/html-kit/services/favicon/
No site, siga as instruções locais, clicando em Procurar (para localizar a sua imagem .png). Após o programa processar, você poderá fazer o download para o seu computador da imagem .ico.

Obs.: O MS Paint grava ícones no formato .ico (basta escrever o nome completo, com extensão .ico), porém não é na verdade uma imagem nesse formato. É uma imagem .bmp, com extensão .ico. Isso pode fazer com que ora funcione, ora não.
Portanto, recomendamos o procedimento acima. Caso o site da chami.com não mais disponibilize o serviço, certamente, você encontrará outras opções.

Ícones gratuitos (free icon)
Na Internet você encontrará milhares de sites oferecendo ícones gratuitos. Se for um trabalho escolar, por exemplo, é uma mão na roda. Porém, se você for designer profissional, vale a pena desenvolver ícones apropriados e dentro do conceito do trabalho que estiver desenvolvendo.

Um pouco de teoria sobre o ícone

Origem da palavra ícone (define ícone)
Ícone se origina de eikon, que, em grego, significa imagem. Daí, o termo iconografia que é a arte de representar por meio de imagens (ou, por meio de ícones).

A utilização de ícones em computadores
O ícone começou a ser usado no início da década de 1970, com uma equipe multidisciplinar de pesquisadores da Xerox, que procurava descobrir a melhor forma de um ser humano interagir com um computador.
Para você que iniciou os estudos na era Windows, clicar num ícone pode parecer muito óbvio...
Basta clicar no ícone, que o computador faz o resto... Mas não era assim. Para você comandar o computador, quando as interfaces não eram gráficas (não aceitavam imagens) tinha que estudar uma série de palavras e digita-las à frente de um cursor piscante. E se errasse uma letrinha, ..., o computador não saberia o que fazer. Tivemos aí, a era do DOS, com seu prompt de comando (o tal cursor piscante). Hoje, cada palavra daquelas pode ser representada por um ícone. E é só clicar!

Mas, o que é o ícone?
Esses pesquisadores, da Xerox, concluíram que se representassem a mesa de trabalho de uma pessoa na tela de um computador, de modo que, clicando sobre os elementos, na tela, quaquer pessoa sem conhecimentos técnicos conseguiria interagir com a máquina.
Daí a criação de pequenas imagens que representassem cada elemento que fizesse parte de uma mesa de trabalho. Calculadora, lápis, bloco de notas, telefone, etc.

Essa imagens tinham que consumir poucos recursos, ou seja, com poucos elementos, deveriam se parecer com o que representavam. Quase um logo. Um ícone. Assim, o ícone (na informática) é um símbolo gráfico, bastante simples e que remete rapidamente a uma idéia ou imagem mais complexa.

Observe, abaixo, como os elementos da mesa (acima), foram representados por ícones, na tela do computador (abaixo):

A imagem acima foi retirada o curso Primeiros Passos da CiaByte Computação. Esse curso pode ser acessado gratuitamente e é bem interessante para leigos (caso conheça um, envie o link a ele - é grátis): http://www.ciabyte.com.br/prp
Para acessar o curso Primeiros Passos, agora mesmo, clique sobre a imagem acima.

Quando o público consumidor teve acesso aos ícones
Surge, baseado nos trabalhos dos pesquisadores da Xerox, o Smalltalk, com os conceitos de ícones que, quando clicados, faziam abrir janelas. Esse crédito, portanto, pertence à Xerox e não à Apple, como durante muito tempo foi "vendida a idéia". Talvez porque a Apple tenha processado a Microsoft, alegando que haviam roubado suas idéias...
Na verdade ocorreu que, no final dessa mesma década (1970), Steve Jobs da Apple, em visita à Xerox, conheceu esses conceitos e teve acesso à documentação técnica do SmallTalk. Foi assim que, em 1983, a Apple lançou o primeiro computador comercial cujo sistema operacional usava os conceitos de ícones e janelas que, mais tarde, evoluiu para o famoso Macintosh.
Alguns anos depois, a Microsoft lançou o Windows, com o mesmo conceito e que, por algum motivo, se tornou líder no mercado.

Curso de Design Gráfico
Curso com foco na criação.
Com Photoshop, InDesign, ...
CiaByte.com.br

Curso de Web Design
Faça páginas de Internet
chamativas e criativas.
CiaByte.com.br

Curso de CorelDRAW
Aprenda a usar o software
campeão para desenho.
CiaByte.com.br

Curso de Photoshop
Restauração de fotos,
fotomontagem e muito mais!
CiaByte.com.br

Curso de Excel Avançado
Aprenda a usar a Planilha
Eletrônica Excel. Básico incluso.
CiaByte.com.br

Curso de Word Avançado
Você sabe mesmo usar o Word?
E se tiver que fazer um teste?
CiaByte.com.br

Curso PowerPoint Avançado
Aprenda a fazer apresentações
profissionais. Básico incluso.
CiaByte.com.br

Curso de Digitação
Aprenda a digitar com os 10
dedos sem sair de casa!
CiaByte.com.br

Curso Básico de Informática
Curso para iniciantes, 100%
prático, c/ suporte e certificado
CiaByte.com.br