Geek Answers Handbook

How to create vector graphics and then create icons from them?

For the website that I am developing, I will need to create some graphics. I'm not locked in size yet, so I don’t want to generate image files (PNG, GIF, JPG) directly in case I change my mind after I get further with the layout and user interface to see what works. and what not.

This made me think: maybe I should generate them as vector graphics (e.g. SVG), and then generate a set of image files for use on my site. I have never played with vector graphics before, although so what I need:

  • Some tools for creating (preferably graphically) some vector graphics in some acceptable format;
  • Software way to create vector graphics. For example, let's say I had a grid, I would not want to draw it by hand. Snap to grid, and similar features will cover this case, but not others; and
  • Some, like I can programmatically (for example, as a build task) take a set of vector graphics and create a set of images and preferably have some control (for example, from the command line) over things like naming conventions, output format, size, etc. . I do not want to enter the program and individually do "Save As ..." on 100+ files to create my icons.

What tools and workflow are appropriate for this situation?

+4
source share
3 answers

There are different approaches, since there are several different commercial vector graphics packages. I use Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Admittedly, Fireworks and Photoshop are bitmap graphics packages that have vector support.

I believe that Fireworks has an easier time to work with vectors because they are first-class objects, whereas in Photoshop they are actually a combination of a vector mask and a color fill. The advantage of designing in a raster package using vectors is that it is much easier to view the rasterized result by zooming in so that you can see individual pixels. Illustrator also added a pixel preview mode to achieve this.

All three packages have scripting capabilities that automate repetitive tasks such as multi-export, naming, etc. However, Photoshop has actions; A simplified macro system that allows you to record and play simple batch actions.

The way I'm going to create my icon packs is to create all the icons inside the same document. I use “groups” (in Illustrator) or “folders” (Fireworks or Photoshop) to isolate each icon from each other, but allows me to keep all the separate layers that make up the unflattened icon.

When I go for export, I run a script that iterates over the top-level groups / folders, hiding all but one, and exports the results to bitmaps for all basic permissions; 16x16, 24x24, 32x32, 48x48, 128x128 and 256x256.

Here's a great style guide that Microsoft has developed to create icons for Vista and XP. The focus is on using Photoshop to do most of the work.

+4
source

Take a look at Cairo and its various bindings. In fact, there is even a recipe that can convert SVGs to Cairo commands.

0
source

If you need a solid free tool to create SVG and then dump it onto bitmaps when you decide the size you need, Inkscape would be a good option. The user interface looks a little less polished than Illustrator, but works great on Windows, Mac, and Linux. The limitations are that color management is much less powerful than Illustrator, and support for pressure sensitive graphics tablets is less good if you don't use a Linux box.

0
source

More articles:


All Articles