As a beginner in Illustrator I've been creating some pretty cool graphics I'd like to share on my website. From what I've seen, people create a one file .ai icon pack that you can download and use freely. Most of these are setup in a perfect grid format, even with around 100 icons. If I am looking to do something like this, how should I go about my project setup? Should I create each icon individually and then import them into the master icon pack file? Any direction would be great. Thanks!
7
-
My opinion is that you should use .pdf and not .ai. People will have far better luck opening a pdf file.– JoonasCommented Aug 19, 2012 at 7:42
-
Not really if the goal is to share the source files. For that, Illustrator EPS is very common.– KMSTRCommented Aug 20, 2012 at 7:50
-
@KMSTR Why is it that you wouldn't use .pdf then?– JoonasCommented Aug 20, 2012 at 8:35
-
I have to agree with Joonas. PDF is a much more transferable format than EPS. PDF files can contain fully editable vector data.– ScottCommented Aug 20, 2012 at 8:48
-
Illustrator PDF would work too. I simply saw it more often in EPS.– KMSTRCommented Aug 20, 2012 at 10:48
|
Show 2 more comments
3 Answers
I would start with a grid that has a good spacing between the icons, not only for making it easier to work but also because you don't have to rearrange in the end. The simplest I can think of is 16x16px icons with 16px spacing between them (if you are working on an icon sprite, space between them should be minimal though). Depending on what you want in the end. But this should make it easier to determine the document dimensions in the beginning. You could also set up guides or a background raster to make sure you are working in the right space/dimensions. I prefer this method over making icons in individual files because it gives you a good overlook if the icons all go well together. Something that you will have to re-evaluate constantly during designing them.
Again, the options are vast, and depend on what you want in the end, so I will just give you an example:
-
1The other bonus of creating an all in one file is the ease of repurposing the color palette and graphic styles. Commented Aug 20, 2012 at 17:30
-
1Oh, and don't forget to turn pixel preview and snap to pixel on, and use Effect > Distort & Transform ... > Transform to generate your grid of working squares. I prefer a single pixel rule to delineate my working area, if not a dedicated artboard. Commented Aug 20, 2012 at 17:33
-
Thank you. This is exactly what I needed. I appreciate your time.– EGHDKCommented Aug 20, 2012 at 22:01
-
@plainclothes: good additions, the reusing of shapes, colors and styles does make a big difference.– KMSTRCommented Aug 21, 2012 at 6:40
I'm no expert in icon creation, but in my opinion, it will depend on how complex your icons are. If they have many elements, for the sake of size and handling I would use different files to create them. Once they are finished you can paste them in your grid file, but also export them first as transparent .png for example. You will most likely be needing one bitmat file for each icon anyway, as many of the packs I've downloaded had preview folders (as well as the actual .ai file). And if in the future you want to make different packs with the same ones, it's easier to handle too.
Another popular trend is to create icon fonts. These are very usable on the web. But this can only be done if you have mono-color icon's. These are actually quite handy, I use those regularly in design because of ease of use.
But most Icon pack I see have a few variations available: - A few sizes as separate 24-bit PNG with transparency (dark on white and reverse) - separate AI or PDF files - Icon Font (if available) - separate ICO files, in various sizes (real icons).
I haven't seen many on a "contact" sheet, but that could be me :)
