Como criar gráficos vetoriais e, em seguida, gerar ícones a partir deles?

Question

Para um site que estou desenvolvendo, eu preciso criar alguns gráficos. Eu ainda não bloqueado em tamanhos para que eu não queria gerar arquivos de imagem (PNG, GIF, JPG) diretamente no caso de eu mudar de idéia depois que eu chegar mais longe, juntamente com layout e interface do usuário para ver o que funciona eo que não funciona .

Isso me fez pensar: talvez eu deveria gerá-los como gráficos de vetor (por exemplo, SVG) e, em seguida, gerar um conjunto de arquivos de imagem para uso no meu site. Eu nunca joguei ao redor com os gráficos de vetor antes embora assim que eu estou atrás é:

• Algumas ferramentas para criar (de preferência graficamente) alguns gráficos vectoriais em algum formato aceitável;
• Uma maneira programática de criação de gráficos vetoriais. Por exemplo, digamos que eu tinha uma grade, eu não necessariamente quer tirar essa com a mão. "Snap to Grid" e características semelhantes cobriria neste caso, mas não outros; e
• Alguns maneira que eu puder programação (por exemplo, como uma tarefa de compilação) tomar um conjunto de gráficos vetoriais e gerar um conjunto de imagens e de preferência ter algum controle (por exemplo, a partir da linha de comando) sobre coisas como convenções de nomenclatura, o formato de saída, tamanho, etc. Eu não quero entrar em um programa e individualmente fazer "Salvar como ..." no 100+ arquivos para gerar meus ícones.

Que tipo de ferramentas e fluxo de trabalho serviria para esta situação?

Answer 1

Existem diferentes abordagens uma vez que existem vários pacotes de vetor comercial gráficos diferentes para fora lá. Os que eu uso são o Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Reconhecidamente, Fireworks e Photoshop são pacotes gráficos de bitmap que têm de vetores de suporte.

Eu acho Fireworks tem um tempo mais fácil lidar com vetores, porque eles são "de primeira classe" objetos, enquanto no Photoshop eles são realmente uma combinação de uma máscara de vetor e um preenchimento de cor. O benefício de projetar em um pacote bitmap usando vetores é o seu muito mais fácil de visualizar o resultado rasterized por zoom sobre o documento para que você pode ver os pixels individuais. Illustrator adicionou um modo de "pixels preview" para conseguir isso também.

Todos os três pacotes têm recursos de script que lhe permitem automatizar tarefas repetative como multi-exportação, nomenclatura, etc. Photoshop, no entanto, tem ações bem; um sistema de macro simplificado que permite gravar e reproduzir atividades lote simples.

A forma como eu tendem a construir os meus pacotes de ícone é através da concepção de todos os ícones dentro de um único documento. Eu uso "grupos" (em Illustrator) ou "pastas" (Fireworks ou Photoshop) para isolar cada ícone um do outro, mas me permite manter todas as camadas individuais que compõem o ícone desachatadas.

Quando eu vou para exportação, eu executar um script que itera sobre os grupos de nível superior / pastas, escondendo todos, mas um de cada vez, e exportar os resultados para bitmaps para todas as principais resoluções; 16x16, 24x24, 32x32, 48x48, 128x128 e 256x256.

Aqui é um excelente estilo guia que a Microsoft tem em como para projetar ícones para Vista e XP. Ele se concentra no uso do Photoshop para fazer a maioria do trabalho.

Answer 2

Dê uma olhada Cairo e suas várias ligações. Na verdade, não há sequer um receita disponível para transformar uma SVG em comandos Cairo.

Answer 3

Se você precisar de uma ferramenta gratuita sólida para a criação de SVG e depois despejá-la para imagens bitmap quando você tiver decidido sobre o tamanho que você precisa, Inkscape seria uma boa opção. A interface do usuário parece um pouco menos polido que Illustrator, mas ele funciona bem no Windows, Mac e Linux. As limitações são que o gerenciamento de cores é muito menos poderoso do que o Illustrator e o suporte para gráficos comprimidos sensíveis à pressão é menos bom se você não estiver em uma caixa de Linux.