Índice
Bitmap BeOS versus ícones vetoriais Haiku
Ícones são atributos
Criando ícones com o Icon-O-Mático
Caminho
Forma
Estilo
Transformador
Salvando um ícone
Dicas & Truques

icon-o-matic-icon_64.pngIcon-O-Mático

Deskbar:Aplicativos
Localização:/boot/system/apps/Icon-O-Matic
Configurações:~/config/settings/Icon-O-Matic


Antes de tratarmos sobre a real criação de ícones no Icon-O-Mático, umas poucas palavras sobre ícones no Haiku em geral.

index Bitmap BeOS versus ícones vetoriais Haiku

Ao contrário do BeOS, o Haiku utiliza ícones vetoriais ao invés de ícones de mapa de bits. Um Formato de Ícone Vetorial do Haiku (HVIF) especial foi desenvolvido para ser altamente otimizado para tamanhos de arquivo pequenos e renderização rápida. Eis o porquê de nossos ícones serem a maioria muito menores do que um mapa de bits ou o largamente usado formato SVG. Também, diferente dos ícones em mapa de bits do BeOS, o Haiku não é limitado a uma paleta de 8 bits (256 cores).
Tomemos este ícone do Terminal, por exemplo:

BitmapSVGHVIF
i-o-m-terminal-bitmap32 i-o-m-terminal-bitmap16terminal-icon_32terminal-icon_32
1,024 byte
+ 256 byte
7,192 byte 768 byte

Observe que o BeOS utilizou duas versões de um ícone, um de 16x16 e um de 32x32, para obter bons visuais nos modos Lista e Visão de Ícone.

Este truque não é necessário com ícones vetoriais. Além de apenas ocupar umas poucas centenas de bytes em um arquivo, ícones vetoriais também se amplia muito melhor do que mapas de bits. (Observação: o BeOS oferecia apenas exibições em 16x16 e 32x32.)

16x1632x3264x64128x128
Bitmap i-o-m-bitmap16 i-o-m-bitmap32 i-o-m-bitmap64 i-o-m-bitmap128
Vetor i-o-m-vector16 i-o-m-vector32 i-o-m-vector64 i-o-m-vector128

index Ícones são atributos

Ícones são armazenados como atributos de seus arquivos. Contudo, isso não significa que todo arquivo tenha que ter seu atributo para aparecer com um ícone na janela do Rastreador: arquivos de dados herdam seus ícones de seus tipos de arquivos. Para mudar globalmente o ícone do tipo de arquivo utiliza-se as preferências dos Tipos de Arquivos. Se apenas deseja adicionar um ícone especial a um arquivo individual, utilize o Adicional de tipo de arquivo alternativamente. Veja o tópico Tipos de arquivos para maiores informações.

Sendo um atributo, considere que apenas sistemas de arquivos com suporte a metadados podem reter um ícone individual de arquivo. Então, se mover arquivos fora de seu volume BFS, considere compactá-los juntos para não perder ícones ou outros atributos.

index Criando ícones com o Icon-O-Mático

Icon-O-Mático é o editor de ícones do Haiku que salva seu trabalho como HVIF, SVG ou PNG. O ícone pode ser também diretamente anexado como atributo a um arquivo existente ou exportado como um recurso ou arquivo fonte utilizado por desenvolvedores. Uma vez que o aplicativo foi construído para o formato HVIF otimizado, sua utilização reflete os funcionamentos internos deste formato.

Diferente do seu software normal de gráficos vetoriais, não lida com objetos separados onde cada qual inclui todas as suas propriedades específicas, como caminho, largura do traço, cor do traço e do preenchimento, etc. Antes, monta seus objetos ("formas") de caminhos e cores compartilhados ("estilos") e define certas propriedades. Esta reutilização de elementos é um segredo da eficiência do HVIF. Já que impõe algumas restrições ao criador de ícones, existem umas poucas vantagens, também.
Por exemplo, pelo reuso de um caminho, muitos objetos podem ser modificados juntos pela manipulação deste único caminho. Pense em um objeto e sua sombra. Modificar seu caminho compartilhado alterará o objeto em si e automaticamente sua (talvez ligeiramente distorcida/traduzida) sombra.

Eis aqui uma visão rápida da janela do Icon-O-Mático:

i-o-m-overview.png

para criar qualqure objeto visível na tela, é preciso uma forma com um caminho e um estilo. Convenientemente, pode-se criar um, dois ou todos os três juntos a partir do menu Forma. Toda espécie de objeto (Caminhos, Formas, Transformadores e Estilos) tem um menu acima de sua lista de elementos, oferecendo vários comandos. Todo elemento tem certas opções que são definidas na visão de Propriedades.

index Caminho

Um caminho consiste de diversos pontos os quais são conectados com linhas ou curvas de Bezier. Para adicionar ou alterar pontos, certifique-se de que o caminho esteja selecionado na lista de caminhos.

Simplesmente clicar na tela definirá o primeiro ponto. Enquanto estiver definindo um ponto, decida se a linha resultante será reta ou curva: um simples clicar e soltar produz uma linha reta, segurar o botão do mouse e movê-lo irá arrastar as alças de uma curva de Bezier. Naturalmente, pode-se também alterá-lo mais tarde.

i-o-m-path-ab

Para ir de "A" para "B", transforme alguns pontos de pontos de ângulo para pontos de curva. O que é feito apertando ALT enquanto clica em um ponto e arrasta suas alças. Isto resulta em um Bezier simétrico: a segunda alça segue o movimento da outra. Se necessita mover as alças independentemente, novamente clique e arraste uma alça Bezier enquanto aperta ALT.
Inversamente, para fazer de um Bezier umponto de ângulo, aperte ALT e clique em um ponto.

Para mover um ponto, simplesmente clique nele e arraste. Para selecionar mais de um ponto, aperte SHIFT e desenhe um retângulo de seleção. Pontos selecionados são marcados com uma borda vermelha ao invés do preto usual.
Para inserir um ponto num caminho, clique na linha de conexão entre dois pontos.
Pontos selecionados são eliminados pressionando DEL ou clicando em qualquer ponto enquanto aperta CTRL.

O ponteiro do mouse indica o modo atual:

i-o-m-pointer-move-path i-o-m-pointer-insert i-o-m-pointer-add i-o-m-pointer-delete i-o-m-pointer-bezier i-o-m-pointer-select
Mover ponto(s) Inserir ponto Adicionar ponto Eliminar ponto
CTRL
Ângulo↔Bezier
ALT
Selecionar pontos
SHIFT

Pode-se convocar um menu de contexto ao clicar com o botão direito do mouse em um ponto ou em uma seleção de pontos:

Selecionar tudoALT ASeleciona todos os pontos do caminho atual.
TransformarTPõe todos os pontos selecionados em uma caixa de transformação, então pode-se mover, redimensionar e rodá-los juntos. Ele trabalha apenas com formas, descritas mais adiante.
DividirDivide pontos selecionados em dois, um acima do outro.
GirarGira pontos selecionados em 180º. Apenas surte efeito em pontos Bezier.
RemoverDELElimina pontos selecionados.

Menu Caminho

O menu Caminho oferece umas poucas entradas óbvias para Adicionar retângulo e Adicionar círculo ou para Duplicar ou Remover uma caminho. Aqui estão algumas outras que podem necessitar de um pouco mais de explicação:

ReverterSe seu caminho não está "fechado" (veja Propriedade de Caminho abaixo), um clique na tela sempre cria um novo ponto, conectando-o com o último. "Reverter" irá, ao invés disso, reverter esta ordem e seu novo ponto será conectado ponto inicial.
LimparMuito útil com SVGs importados, esta função removerá pontos redundantes.
Girar indicadores para a direitaALT RNa prática, isto gira a abertura de um caminho. É visualizado melhor quando utilizando um caminho não fechado com um estilo e uma forma com um transformador de linha. Agora, se seu caminho parece com um ⊂ ele girará desta forma: ⊂ ∩ ⊃ ∪.
Girar indicadores para a esquerdaALT SHIFT RFaz o mesmo na direção contrária.

Propriedades do Caminho

Propriedades na parte inferior esquerda da janela oferecem todas as definições disponíveis do objeto atualmente selecionado. Uma caminha possui apenas duas: um Nome e se ela está Fechada ou não.

index Forma

Uma forma agrupa um ou mais caminhos com um estilo. Na prática, é o objeto que realmente se vê na tela. O agrupamento é feito com as caixas de seleção na frente dos caminhos e estilos: Apenas selecione sua forma e selecione o(s) caminho(s) desejado(s) e um estilo.

Uma forma define como um caminho e estilo é aplicado, por exemplo se o objeto é preenchido ou apenas contornado (o que é feito pelos Transformadores utilizados na forma, veremos isso mais tarde). Além disso, uma forma pode ser movida, rotacionada ou redimensionada sem mexer no caminho utilizado. Assim, pode-se reutilizar e obter formas diferentes, embora relacionadas.

i-o-m-shape

Quando uma forma é selecionada de uma lista, um retângulo é desenhado ao redor dela. Dependendo de onde exatamente o segura, a forma é movida, redimensionada ou rotacionada ao redor de um ponto em seu centro, o qual pode ser movido. Segurar SHIFT irá travar a direção enquanto move, limita a rotação a ângulos de 45° e restringe a taxa de amostragem enquanto redimensiona. O ponteiro do mouse novamente indica o modo atual:

i-o-m- move-shape i-o-m-pointer-resize i-o-m-pointer-rotate i-o-m-pointer-move-rotation
Mover Redimensionar Rotacionar Mover
ponto de rotação

As formas ficam no topo umas das outras, cada qual em sua própria camada, caso deseje. Para reordená-los, arraste e solte suas entradas para uma diferente posição na lista.

Menu Forma

O menu Forma oferece a já mencionada possibilidade de Adicionar vazio, com caminho/estilo/caminho & estilo e de Duplicar ou Remover uma forma. Então, existe:

Desfazer transformaçãoReverte todas as transformações de deslocamento, redimensionamento e rotação que tenham sido aplicadas à forma.
Congelar transformaçãoQuando se transforma uma forma, seu(s) caminho(s) atribuído(s) permanece(m) em sua(s) posição(ões) original(is). Isto pode ser proposital; talvez mais de uma forma esteja utilizando aquele caminho, talvez você intencionalmente usou Opções | Alinhar à grade para definir os pontos em bordas com precisão de pixel.
Se não, "Congelar transformação" irá plicar a transformação de forma atual para o(s) caminho(s) atribuído(s). Um futuro "Desfazer transformação" irá então voltar a este novo estado.

Propriedades de Forma

Além de um Nome, a visão de Propriedades para uma forma tem estas opções:

Min LODMínimo Nível de Detalhe
Max LODMáximo Nível de Detalhe
Nível de Detalhe (LOD)
16x1632x3264x64
i-o-m-lod-icon_16 i-o-m-lod-icon_32 i-o-m-lod-icon_64

Viu como não existem números na versão 16px do ícone BeVexed? isto é feito com a definição de "Nível de Detalhe" de suas formas.
Com o LOD controla-se a visibilidade de uma forma dependendo de seu tamanho. Daquela maneira, pode-se deixar de lado detalhes de um ícone que parecem bons num ícone maior, mas talvez nem tento em sua versão menor.

Eis como ele funciona: Um LOD de 1.0 é definido como um ícone de tamanho 64px. Para obter o LOD de um tamanho de ícone em particular simplesmente divida-o por 64, por exemplo um ícone de 16px tem um LOD de 16/64 = 0.25. Uma forma não será visível abaixo do seu Min LOD e acima do seu Max LOD.

Então, se definir um Min LOD de uma forma para 0.0 e o Max LOD para 0.5, significa que a forma será apenas visível para tamanhos de ícone menores ou igual a 32px. Se quiser excluir o tamanho de ícone de 32px, tem que permanecer abaixo de 0.5, como 0.49.

O LOD não é apenas para deixar de fora formas de detalhes, mas também para, por exemplo, alterar a largura da linha em diferentes tamanhos, caso julgue necessário. Simplesmente duplique uma forma, faça suas alterações e defina ambas as definições de LOD para exibir também um ou outro. Aqui reside a única fonte de confusão potencial, quando involuntariamente sobrepor LODs de formas, e pensar porque em alguns tamanhos ambos são visíveis...
Por exemplo, se a Forma 1 era pra ser exibida abaixo de 48px e a Forma 2 a partir de 48px pra cima (LOD: 48/64 = 0.75):

OKNada OK!
Forma 1Min LOD0.00Min LOD0.00
Max LOD0.74Max LOD0.75
Forma 2Min LOD0.75Min LOD0.75
Max LOD4.00Max LOD4.00

index Estilo

Um estilo pode também ser uma cor sólida ou algum tipo de gradiente.
Além das cores predefinidas em Amostras, pode-se criar suas próprias clicando na cor atual. Também, observe o botão deslizante sob o espectro de cores o qual define o canal alfa (transparência).

i-o-m-gradients

Crie rapidamente um novo estilo misturando suas cores e simplesmente arrastando e soltando-o dentro da lista de estilos.

Se for para um gradiente, defina o tipo (Linear, Radial, Diamante, Cone) e então defina as cores iniciais e finais. Isto é feito com um arrastar e soltar de um balde de cor dentro do respectivo indicador de cor sob o gradiente.
Naturalmente pode-se mover estes indicadores para alterar o gradiente ao seu gosto. Pode-se também inserir mais indicadores para adicionar mais cores pelo duplo clique no gradiente. Pressionar DEL remove o indicador selecionado.

Pode-se mover, redimensionar e rotacionar a caixa de representação de um gradiente na tela até ela atender suas necessidades. Isto funciona justo como nas formas.

Menu de Estilo

O menu Estilo oferece as entradas usuais para Adicionar, Duplicar ou Remover um estilo e para Desfazer transformação.

Propriedades de Estilo

O Nome é a única Propriedade de um estilo.

index Transformador

Uma forma pode ter Transformadores os quais alteram sua aparência. Os efeitos, contudo, são mais sutís que um caminhão se transformando em um robô de batalha...

Menu Adicionar Transformador

ContornoAdiciona um contorno à forma.
LinhaDesenha o caminho de uma forma ao invés de preenchê-lo com um estilo.

Dependendo do tipo de Transformador, obterá um conjunto diferente de propriedades.

Propriedades de Transformador

Além de um Nome e a atual Largura para o transformador, a visão de Propriedades tem estas (dependendo do seu tipo, diferindo levemente) opções:

PonteirasApenas Linhas. Define as ponteiras finais de uma linha: Coronha, Quadrado ou Redondo.
Detectar orientaçãoApenas no Contorno. Determina se o contorno está do lado de dentro ou do lado de fora do caminho.
JuntarDefine como as linhas são unidas a um ponto: Mitra, Redondo ou Chanfrado.
Limite de Mitraapneas quando o Juntar acima é definido para "Mitra", esta definição influencia o visual da junção mitra.

index Salvando um ícone

Existe a sua já conhecida barra de menu no topo, Arquivo, Editar, Opções. A utilização é totalmente auto-explicativa, portanto iremos apenas ver como salvar seu trabalho.

Arquivo | Salvar como... salvará num formato especial do Icon-O-Mático que retém informação como os nomes dos caminhos, formas e estilos. Estes serão removidos do ícone atual uma vez que seja exportado para o espaço de armazenamento. É uma boa ideia fazer uma cópia de segurança de seu trabalho, porque sem objetos nomeados, tudo é nomeado como "<path>/<shape>/<style>", o que torna tediosas alterações específicas.

Arquivo | Exportar como... abre uma caixa de diálogo salvar com um menu pop-up de formato de arquivo na base, oferecendo estas opções:

HVIFFormato de Ícone de Vetor do Haiku
HVIF RDefSalva como recurso utilizado por programadores
código fonte HVIFSalva como código fonte utilizado por programadores
SVGSalva como SVG
PNGSalva como um PNG de 64px de tamanho
conjunto PNGSalva como PNGs de 16, 32 e 64px de tamanho
atributo BEOS:ICONEscolhe um arquivo e define seu atributo de ícone diretamente
atributo META:ICONEscolhe um arquivo e anexa o ícone como meros metadados

index Dicas & Truques

Mantenha em mente umas poucas coisas quando trabalhar com o Icon-O-Mático e algumas dicas gerais para sua utilização: