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.

Donations

I am a freelance developer and your donations help me continue to create free resources. You can donate to this project using the button below. Every bit helps.

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

  1. Go to File > Scripts > Contact Sheet to launch the script. You will see a dialog like the one below.
    Contact Sheet preferences dialog
  2. 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.
  3. 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).
  4. 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.
  5. 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.Contact Sheet progress bar

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.js file in the download.

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.

Contact Sheet by :

Scott Lewis <scott@atomiclotus.net>
http://atomiclotus.net

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.

426 Words

Adobe Illustrator Contact Sheet JSX Plugin

I don’t like performing tedious, time-consuming tasks, especially when those tasks are non-revenue generating, which means they take time away from things I could be doing to increase revenue. The most time-consuming and tedious task I have to perform over-and-over is creating contacts sheet previews of my icons. The problem is that every marketplace has different requirements for preview image sizes and so a new contact sheet has to be created for each marketplace.
Continue reading

Ai Sessions Adobe Illustrator JSX Extension

When I’m working on my icon designs, I often have 4-5 Adobe Illustrator documents open at a time during a work session. Since icon design involves creating large collections of tens, hundreds, or even thousands of icons, I have them broken up into multiple files but find I need to copy a lot of icons between files.

Continue reading

Remove an Element from an HTML String with jQuery

While working on a project for work today, I encountered a problem that I apparently have never encountered before. What I thought was a very simple function call in jQuery turned out to be a bit more complicated. I needed to removed an HTML element from a string representation of an HTML snippet. jQuery doesn’t quite behave the way I expected and I had trouble finding a solution.

Continue reading

jQuery Plugin to Toggle Default Field Value on Focus and Blur

I can’t begin to count the number of times I have coded the same search field with the default value “Search…” in it and so that when the field receives focus, the text is cleared but magically reappears when the field blurs. Every time I code it I know I should save that snippet of code somewhere but it is always faster to just write it anew each time. Well, no more. I finally got around to writing jQuery plugin to allow me to add the focus/blur default value toggle to any field. I have very creatively named the plugin ‘Defaultify’. Continue reading

Simple jQuery Plugin Example

In this article, I will teach you how to develop a standard jQuery plugin. I will keep things as simple as possible and will only build a very trivial plugin, but through this example I will cover all of the important aspects of jQuery plugin development. Continue reading

Trigger Custom Events with jQuery

Things have come a long way since the early days of the web and standard JavaScript window.onload and element.onclick event handling. Even using JavaScript on your web page was risky business in the early days because the availability and acceptance of JavaScript was so unpredictable. Continue reading

Executing JavaScript in an Ajax Response

I don’t know how, in the many years that I have been building web sites and using Ajax, I have never encountered a situation where I needed to return mixed HTML and executable JavaScript in an Ajax response. I routinely return JSON (JavaScript Object Notation) in Ajax responses as well as plain HTML but never both. Recently that changed. Continue reading