Comment créer des graphiques vectoriels puis générer des icônes à partir d'eux?

Question

Pour un site Web que je développe, il me faudra créer des graphiques. Je n'ai pas encore verrouillé les tailles, je ne voulais donc pas générer de fichiers images (PNG, GIF, JPG) directement au cas où je changerais d'avis après avoir approfondi la mise en page et l'interface utilisateur pour voir ce qui fonctionne ou non. .

Cela m'a fait réfléchir: je devrais peut-être les générer sous forme de graphiques vectoriels (par exemple, SVG), puis générer un ensemble de fichiers images à utiliser sur mon site. Je n'ai jamais joué avec des graphiques vectoriels auparavant, alors ce que je veux, c'est:

• Quelques outils pour créer (de préférence graphiquement) des graphiques vectoriels dans un format acceptable;
• Une manière programmatique de créer des graphiques vectoriels. Par exemple, disons que j'ai une grille, je ne voudrais pas nécessairement dessiner à la main. "Aligner sur la grille" et des caractéristiques similaires couvriraient ce cas mais pas les autres; et
• D'une certaine manière, je peux par programme (par exemple en tant que tâche de construction) prendre un ensemble de graphiques vectoriels et générer un ensemble d'images et avoir de préférence un contrôle (par exemple à partir de la ligne de commande) sur des éléments tels que les conventions de dénomination, le format de sortie, la taille, etc. etc. Je ne souhaite pas participer à un programme et effectuer individuellement "Enregistrer sous ...". sur plus de 100 fichiers pour générer mes icônes.

Quels types d'outils et de flux de travail conviendraient à cette situation?

Answer 1

Il existe différentes approches car il existe plusieurs packages de graphiques vectoriels commerciaux. Ceux que j'utilise sont Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Certes, Fireworks et Photoshop sont des packages graphiques bitmap prenant en charge les vecteurs.

Je trouve que Fireworks a plus de facilité à gérer les vecteurs, car ils sont "de première classe". objets, alors que dans Photoshop, ils combinent en réalité un masque vectoriel et un remplissage de couleur. L'avantage de concevoir un package bitmap utilisant des vecteurs est qu'il est beaucoup plus facile de prévisualiser le résultat tramé en effectuant un zoom avant sur le document afin que vous puissiez voir les pixels individuels. Illustrator a ajouté un " aperçu en pixels " mode pour y parvenir aussi.

Les trois packages disposent de fonctionnalités de script qui vous permettent d’automatiser des tâches répétitives telles que les exportations multiples, les noms, etc. Cependant, Photoshop possède également des actions; un système de macro simplifié qui vous permet d’enregistrer et de lire des activités simples par lots.

Pour créer mes packs d'icônes, j'ai tendance à concevoir toutes les icônes dans un même document. J'utilise " groupes " (dans Illustrator) ou "dossiers". (Fireworks ou Photoshop) pour isoler chaque icône l’une de l’autre, mais me permet de garder tous les calques individuels qui la composent non aplatie.

Lorsque j'exporte, j'exécute un script qui parcourt les groupes / dossiers de niveau supérieur en masquant tous les éléments sauf un à la fois et en exportant les résultats au format bitmap pour toutes les résolutions majeures. 16x16, 24x24, 32x32, 48x48, 128x128 et 256x256.

Voici un excellent guide de style de Microsoft sur la manière de concevoir des icônes pour Vista et XP. Il utilise principalement Photoshop pour effectuer la majeure partie du travail.

Answer 2

Jetez un coup d'œil à Cairo et à ses diverses liaisons. En fait, il existe même une recette disponible pour transformer un fichier SVG en commandes du Caire.

Answer 3

Si vous avez besoin d'un outil solide et gratuit pour créer un fichier SVG, puis le vider en image bitmap une fois que vous avez choisi la taille souhaitée, Inkscape serait une bonne option. L'interface utilisateur est un peu moins sophistiquée qu'Illustrator, mais elle fonctionne correctement sous Windows, Mac et Linux. Les limitations sont que la gestion des couleurs est beaucoup moins puissante qu'Illustrator et que la prise en charge des tablettes graphiques sensibles à la pression est moins bonne si vous n'êtes pas sous Linux.