iconifyit/contact-sheet

Create a contact sheet from a folder of SVG icons.

Contact Sheet

A JavaScript extension for Adobe Illustrator to create a contact sheet from a folder of SVG files. The script allows you select a folder of SVG files and imports and arranges them in a grid pattern as a contact sheet. You can specify the page width and height, number of columns and rows, and the scale of the imported files.

---

Support Open Source Development

Donations help open source developers, who are often self-employed freelancers, continue to create free resources. You can donate to this project using the button below.

---

Installation

To use this script, you will need to copy the entire Contact Sheet folder to your Illustrator scripts folder, then restart Illustrator. Follow the steps below to install.

1. Unzip the Contact Sheet ZIP archive.
2. Copy the Contact Sheet folder to Adobe Illlustrator/Presets/{language}/Scripts/ where {language} is your chosen language. For example, if you have a US version of Illustrator this will be en_US.
3. Restart Illustrator
4. Once Illustrator restarts, verify that the script was installed by going to File > Scripts > Contact Sheet

Usage

Go to File > Scripts > Contact Sheet to launch the script. You will see a dialog like the one below.

Contact Sheet creates a single artboard, imports a folder of SVG files you specify, and arranges them in a grid. Using the dialog inputs, specify the page width and height, the number of columns and rows, the scale of the imports (from 1 to 100 - do not include the percent sign). Once you have the values you want, you can click the Save Preset button to save these settings for future use.

Click the Choose Folder button to select your folder of SVG files (NOTE: Contact Sheet was created to create previews of icon sets so for now it only works with SVG files).

Double-check your settings and click Ok. Contact Sheet will display a progress dialog to let you know how many files are left to import. Once the files are imported and arranged, the file will be saved to the name you specified.

If you checked the Logging? checkbox, you can view the log file in /your-home-folder/ai-contact-sheet where /. For example, on a Mac the folder can be found at /Users/yourname/ai-contact-sheet/ (or /ai-contact-sheet/ for shorthand). The preset configuration files can also be found in this location.

Custom Configuration

NOTE : changing the default configuration can break the Contact Sheet utility. Proceed with caution.

You can change many of the default settings such as the location of the presets and log files, Illustrator version compatibility, etc., by editing the config.jsx file in the download.

Disclaimer of Liability

This script is offered AS-IS without any warranty or guarantees of any kind. You use this script completely at your own risk and under no circumstances will the developer and/or distributor of this script be held liable for damages of any kind including loss of data or damage to hardware or software. If you do not agree to these terms, do not use this script.

Credits

You are free to use, modify, and distribute this script as you see fit as long as you maintain the copyright notices in the original source files. A link to the Atomic Lotus website would be appreciated as well. You must also extend the same license to users of your code. This is not to say that your original code must be open source, but the code from this project must remain free and open forever.

Attribution:

Contact Sheet by:
Scott Lewis <[email protected]>
https://atomiclotus.net

contact-sheet's Issues

Filenames as object names?

First off, thanks for sharing this, its proving to be exactly what I was looking for in trying to wrangle and make sense of a bunch of icons.

Your older 'icon-contact-sheet.js' gist from 2 years ago I found before finding this, and while that seems to place the SVGs in a random order and not handle sub-folders it does seem to make the filenames into the object groups... I MUCH prefer this version with which the output is perfect and exactly what I was looking for when dealing with some nested folders... but I'm only getting as the names of each object which makes hunting things down much harder.

I looked at the two scripts and I couldnt see where the difference might be. Can you help?

Code error

I tried this contact sheet script in Adobe illustrator cc 2020. It showes code error.

I tried your previous verson of contact sheet script it works good but this updated verson script shows error.

Can you help me how to use this script properly.