Favicon.ico – Parte PráticaPequena IntroduçãoEsse artigo é uma “continuação” de um outro publicado na seção de Usabilidade, com os conceitos teóricos. Quem conhece as ferramentas do fireworks deve estar se perguntando “mas como eu vou fazer um arquivo .ico no fireworks? Até onde sei ele não exporta .ico…”. Aí vem a grande sacada =] . Algumas pessoas já tem o conhecimento de como criar e colocar no site o tal ícone, mas o que poucas pessoas sabem é que o formato do favicon.ico não precisa ser .ico (ícone), isso mesmo, ele pode ser favicon.jpg, iconedosite.png, preto-com-bolinhas-amarelas.gif (apesar que eu só testei gif e jpg…). Pré-RequisitosMacromedia Fireworks (qualquer versão dá certo, mas aqui eu usei o 8). ObjetivoCriar e inserir no site o Favicon, que foi ConteúdoVamos então começar. 1 – Crie um arquivo de 16×16 com fundo transparente (testei também com o tamanho de 32×32 e deu certo, mas nenhum outro tamanho foi testado). File (Arquivo) – > New (novo) ou Ctrl + N . 2 – Vamos usar um zoom grande e a grade, eles ajudam muito em tamanhos tão pequenos. Para adaptar o zoom basta ir em View (Visualizar) – > Fit All (Mostrar tudo) ou Ctrl + 0 (zero) . E para Adaptar a grade vá em View (Visualizar ) – > Grid (Grade) – > Edit Grid (Editar Grade) e coloque em 1px por 1px. Se a grade não estiver ativa vá em View (Visualizar ) – > Grid (Grade) – > Show Grid (Mostrar Grade) ou Ctrl + Alt + G . 3 – Selecione a Pencil Tool (B) com a cor #0E88BD e desenhe algo mais ou menos assim:
4 – Agora com a Pencil Tool mesmo, mas com a cor #5F5C5C desenhe o resto do “m” :
5 – Vamos configurar a exportação em formato gif. No painel Optimize (Otimizar) [ Se ele estiver desabilitado vá em Window (Janela) - > Optimize (Otimizar) ou aperte F6 ] coloque GIF , no Matte (Arremate, acho) selecione o transparente (branco com uma linha diagonal vermelha), e coloque “Alpha transparency” (Tranparência do Alfa), como mostraa figura a seguir:
6 – Agora vá em File (Arquivo) – > Export (Exportar) ou pressione Ctrl + Shift + R e escolha o destino da imagem. E pronto, agora é so colocar uma linha no HTML, que será mostrada abaixo. 7 – Abra o editor HTML de sua preferência e coloque esta linha entre as tags <head> e </head> : <link rel=”shortcut icon” href=”endereco-do-seu-icone-aqui.gif”>
Considerações finaisVim nesse artigo mostrar na prática como é facil criar um ícone para um site, artigo este que veio complementar a teoria já citada. Bem, espero que tenham gostado, e principalmente que usem esse recurso com bom gosto. That’s All |
ShareThis
Parabéns cara!!
Todos os tutoriais estão show de bola!!!
Olá eu tenho uma grande duvida porque qd faço uma arte no fireworks e a importo para o corel fica ruim.