<p>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 <i>muito</i> 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).<br/>
<p>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.</p>
<p>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.)</p>
<p>Í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 <spanclass="app">Tipos de Arquivos</span>. Se apenas deseja adicionar um ícone especial a um arquivo individual, utilize o <spanclass="app">Adicional de tipo de arquivo</span> alternativamente. Veja o tópico <ahref="../filetypes.html">Tipos de arquivos</a> para maiores informações.</p>
<divclass="box-info">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.</div>
<p>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.</p>
<p>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.<br/>
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.</p>
<p>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 <spanclass="menu">Forma</span>. 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 <spanclass="menu">Propriedades</span>.</p>
<p>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.</p>
<p>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.</p>
<p>Para ir de "A" para "B", transforme alguns pontos de pontos de ângulo para pontos de curva. O que é feito apertando <spanclass="key">ALT</span> 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 <spanclass="key">ALT</span>.<br/>
Inversamente, para fazer de um Bezier umponto de ângulo, aperte <spanclass="key">ALT</span> e clique em um ponto.</p>
<p>Para mover um ponto, simplesmente clique nele e arraste. Para selecionar mais de um ponto, aperte <spanclass="key">SHIFT</span> e desenhe um retângulo de seleção. Pontos selecionados são marcados com uma borda vermelha ao invés do preto usual.<br/>
Para inserir um ponto num caminho, clique na linha de conexão entre dois pontos.<br/>
Pontos selecionados são eliminados pressionando <spanclass="key">DEL</span> ou clicando em qualquer ponto enquanto aperta <spanclass="key">CTRL</span>.</p>
<tr><tdclass="onelinetop"><spanclass="menu">Selecionar tudo</span></td><tdstyle="width:70px"><spanclass="key">ALT</span><spanclass="key">A</span></td><td>Seleciona todos os pontos do caminho atual.</td></tr>
<tr><td><spanclass="menu">Transformar</span></td><td><spanclass="key">T</span></td><td>Põ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.</td></tr>
<tr><td><spanclass="menu">Dividir</span></td><td></td><td>Divide pontos selecionados em dois, um acima do outro.</td></tr>
<tr><td><spanclass="menu">Girar</span></td><td></td><td>Gira pontos selecionados em 180º. Apenas surte efeito em pontos Bezier.</td></tr>
<tr><td><spanclass="menu">Remover</span></td><td><spanclass="key">DEL</span></td><td>Elimina pontos selecionados.</td></tr>
<p>O menu <spanclass="menu">Caminho</span> oferece umas poucas entradas óbvias para <spanclass="menu">Adicionar retângulo</span> e <spanclass="menu">Adicionar círculo</span> ou para <spanclass="menu">Duplicar</span> ou <spanclass="menu">Remover</span> uma caminho. Aqui estão algumas outras que podem necessitar de um pouco mais de explicação:</p>
<tr><td><spanclass="menu">Reverter</span></td><tdstyle="width:15px;"></td><td>Se 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.</td></tr>
<tr><td><spanclass="menu">Limpar</span></td><td></td><td>Muito útil com SVGs importados, esta função removerá pontos redundantes.</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Girar indicadores para a direita</span></td><td><spanclass="key">ALT</span><spanclass="key">R</span></td><td>Na 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: ⊂ ∩ ⊃ ∪.</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Girar indicadores para a esquerda</span></td><td><spanclass="key">ALT</span><spanclass="key">SHIFT</span><spanclass="key">R</span></td><td>Faz o mesmo na direção contrária.</td></tr>
<p><spanclass="menu">Propriedades</span> na parte inferior esquerda da janela oferecem todas as definições disponíveis do objeto atualmente selecionado. Uma caminha possui apenas duas: um <spanclass="menu">Nome</span> e se ela está <spanclass="menu">Fechada</span> ou não.</p>
<p>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.</p>
<p>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.</p>
<p>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 <spanclass="key">SHIFT</span> 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:</p>
<p>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.</p>
<p>O menu <spanclass="menu">Forma</span> oferece a já mencionada possibilidade de <spanclass="menu">Adicionar vazio, com caminho/estilo/caminho & estilo</span> e de <spanclass="menu">Duplicar</span> ou <spanclass="menu">Remover</span> uma forma. Então, existe:</p>
<tr><td><spanclass="menu">Desfazer transformação</span></td><tdstyle="width:15px;"></td><td>Reverte todas as transformações de deslocamento, redimensionamento e rotação que tenham sido aplicadas à forma.</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Congelar transformação</span></td><td></td><td>Quando 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 <spanclass="menu">Opções | Alinhar à grade</span> para definir os pontos em bordas com precisão de pixel.<br/>
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.</td></tr>
<p>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.<br/>
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.</p>
<p>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 <spanclass="menu">Min LOD</span> e acima do seu <spanclass="menu">Max LOD</span>.</p>
<p>Então, se definir um <spanclass="menu">Min LOD</span> de uma forma para 0.0 e o <spanclass="menu">Max LOD</span> para 0.5, significa que a forma será apenas visível para tamanhos de ícone menores ou <i>igual</i> a 32px. Se quiser excluir o tamanho de ícone de 32px, tem que permanecer abaixo de 0.5, como 0.49.</p>
<p>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...<br/>
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):</p>
<p>Um estilo pode também ser uma cor sólida ou algum tipo de gradiente.<br/>
Além das cores predefinidas em <spanclass="menu">Amostras</span>, 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).</p>
<p>Crie rapidamente um novo estilo misturando suas cores e simplesmente arrastando e soltando-o dentro da lista de estilos.</p>
<p>Se for para um gradiente, defina o tipo (<spanclass="menu">Linear</span>, <spanclass="menu">Radial</span>, <spanclass="menu">Diamante</span>, <spanclass="menu">Cone</span>) 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.<br/>
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 <spanclass="key">DEL</span> remove o indicador selecionado.</p>
<p>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.</p>
<p>O menu <spanclass="menu">Estilo</span> oferece as entradas usuais para <spanclass="menu">Adicionar</span>, <spanclass="menu">Duplicar</span> ou <spanclass="menu">Remover</span> um estilo e para <spanclass="menu">Desfazer transformação</span>.</p>
<p>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...</p>
<p>Além de um <spanclass="menu">Nome</span> e a atual <spanclass="menu">Largura</span> para o transformador, a visão de <spanclass="menu">Propriedades</span> tem estas (dependendo do seu tipo, diferindo levemente) opções:</p>
<tr><td><spanclass="menu">Ponteiras</span></td><tdstyle="width:15px;"></td><td><i>Apenas Linhas</i>. Define as ponteiras finais de uma linha: <spanclass="menu">Coronha</span>, <spanclass="menu">Quadrado</span> ou <spanclass="menu">Redondo</span>.</td></tr>
<tr><td><spanclass="menu">Detectar orientação</span></td><td></td><td><i>Apenas no Contorno</i>. Determina se o contorno está do lado de dentro ou do lado de fora do caminho.</td></tr>
<tr><td><spanclass="menu">Juntar</span></td><td></td><td>Define como as linhas são unidas a um ponto: <spanclass="menu">Mitra</span>, <spanclass="menu">Redondo</span> ou <spanclass="menu">Chanfrado</span>.</td></tr>
<tr><td><spanclass="menu">Limite de Mitra</span></td><td></td><td>apneas quando o <spanclass="menu">Juntar</span> acima é definido para "Mitra", esta definição influencia o visual da junção mitra. </td></tr>
<p>Existe a sua já conhecida barra de menu no topo, <spanclass="menu">Arquivo</span>, <spanclass="menu">Editar</span>, <spanclass="menu">Opções</span>. A utilização é totalmente auto-explicativa, portanto iremos apenas ver como salvar seu trabalho.</p>
<p><spanclass="menu">Arquivo | Salvar como...</span> 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.</p>
<p><spanclass="menu">Arquivo | Exportar como...</span> abre uma caixa de diálogo salvar com um menu pop-up de formato de arquivo na base, oferecendo estas opções:</p>
<li><p>Read the <ahref="https://www.haiku-os.org/development/icon-guidelines">Icon Guidelines</a> to learn about important characteristics of Haiku icons, e.g. perspective, shadows and the <ahref="https://www.haiku-os.org/files/downloads/2007-03-20_haiku-color-palette.png">Haiku color palette</a>.</p></li>
<li><p>Deve sempre tentar minimizar o uso de caminhos, aqueles que são mais custosos, racionalizando o tamanho do arquivo. Reutilize caminhos onde for possível e ao invés disso trabalhe com formas manipuladas e seus transformadores. O uso inteligente de gradientes também pode economizar espaço.</p></li>
<li><p>Onde for possível, deve ativar Alinhar à grade a partir do menu <spanclass="menu">Opções</span> quando editar caminhos. Pontos de caminho alinhados com a grade de 64x64 pixels utiliza menos espaço de armazenamento. Também poderá obter o visual mais crespo se os pontos forem definidos nas bordas de pixel exatas. Por exemplo, é importante alinhar os contornos mais proeminentes com a grade de 16x16.</p></li>
<li><p>Confira a pré-visualização para ver se seu ícone ainda aparenta bem em 16x16. Poderá querer utilizar as definições de <ahref="#i-o-m-shape-lod">Nível De Detalhe</a> descritas na seção Formas.</p></li>
<li><p>Existe um modo fácil para produzir letras, mesmo que o Icon-O-Mático não ofereça uma ferramenta. Apenas entre com o texto em um editor de texto como o StyledEdit, ajuste o tipo de fonte e o estilo e arraste e solte ou copie e cole o texto selecionado dentro do Icon-O-Mático. Isto criará os caminhos e formas relacionados.</p></li>
<li><p>Se atribuir mais de um caminho a uma forma, suas áreas sobrepostas serão canceladas uma pela outra. Quando um caminho está completamente dentro de outro, ele cria praticamente um buraco na forma resultante.</p></li>
<li><p>Pode-se aproximar e afastar da tela com a roda do mouse. O panning é feito também clicando e arrastando com o botão do meio do mouse ou com um clique com o botão esquerdo e arrastar enquanto segura a tecla de <spanclass="key">ESPAÇO</span>.</p></li>
<p>The above is of course quite theoretical. The best way to learn using Icon-O-Matic is by experimenting. To get you started and once more show the basics, have a look at these short clips:</p>
