Creating a Logo Background in Adobe Illustrator Using JavaScript

March 21, 2016 | JavaScript | 0 Comments

Today, my team was working on options for creating a backdrop like you see at red carpet events or press conference with repeating logos. In our case, we wanted something our graduates could stand in front of at a commencement ceremony to take photos with their families.

One of our designers spent a lot of time manually positioning various sizes and colors of our logos to try out how different patterns might look work, and I thought this would be a perfect time to apply programming to get it just right and be able to iterate quickly. Thankfully Adobe has a great scripting library for doing just this sort of thing.

The Code

To make this work, open up Illustrator, create a new 16’x8′ document, make sure you have two images (JPG, SVG, AI, or anything Illustrator can understand) in the directory, then run the following script (File->Scripts->Other Script).

/*************************
Creates a repeating pattern of images on Illustrator
For a logo wall on a 16' x 8' area

John Dyer (http://j.hn/ 2016)
MIT license
**************************/

// variables/settings
var
	xRepeat = 9, // how many times the first logo will show on the top row (1 less for the second one)
	yRepeat = 5, // how many rows down
	xPadding = 0, // space from left and right edge (0 for bleed)
	yPadding = 400,	// space from top and bottom	
	item1Width = 650, // size in Illustrator units
	item2Width = 400, // size in Illustrator units
	item1Filename = 'DTS.seal.white.ai',
	item2Filename = 'DTS.logo.white.ai';


/// DO THE APP
if (typeof app != 'undefined') {
	runScript();
}

function runScript() {

	var
		// current document
		doc = app.documents[0],
		// add a new layer for our stuff
		layer = doc.layers.add(),

		// script file
		thisFile = new File($.fileName),
		basePath = thisFile.path,
		rootDir = basePath.replace('%20',' ') + '/';

		// open files for calculations
		file1 = new File(rootDir + item1Filename),
		item1 = layer.groupItems.createFromFile( file1 ),
		item1Ratio = item1.height / item1.width,
		item1Height = item1Width * item1Ratio,
		file2 = new File(rootDir + item2Filename),
		item2 = layer.groupItems.createFromFile( file2 ),
		item2Ratio = item2.height / item2.width,
		item2Height = item2Width * item2Ratio,

		// calculate image sizes and offsets
		largestHeight = Math.max(item1Height, item2Height),
		largestWidth =  Math.max(item1Width, item2Width),
		item1xOffset = largestWidth/2 - item1Width/2,
		item1yOffset = largestHeight/2 - item1Height/2,
		item2xOffset = largestWidth/2 - item2Width/2,
		item2yOffset = largestHeight/2 - item2Height/2,

		// calculate gaps
		docWidth = doc.width,
		docHeight = doc.height,
		xGap = (docWidth-largestWidth-xPadding*2) / (xRepeat-1),
		yGap = (docHeight-largestHeight-yPadding*2) / (yRepeat-1);

	// remove the images used for sizing
	item1.remove();
	item2.remove();

	layer.name = 'Fun new pattern';

	// main loop
	for (var x=0; x < xRepeat; x++) {

		for (var y=0; y < yRepeat; y++) {

			// check for the end of the row so we don't create too many
			var do1 = true;
			var do2 = true;

			if (x == xRepeat -1) {
				if (y % 2 == 0) {
					do1 = false;
				} else {
					do2 = false;
				}
			}

			if (do1) {
				var item1 = layer.groupItems.createFromFile( file1 ),
					item1x = xPadding + (x * xGap) + (y % 2 == 0 ? xGap/2 : 0) + item1xOffset,
					item1y = - (yPadding + (y * yGap) + item1yOffset);

				item1.name = 'logo1 ' + x + 'x' + y;
				item1.width = item1Width;
				item1.height = item1Height;
				item1.position = [item1x, item1y];
			}

			if (do2) {
				var item2 = layer.groupItems.createFromFile( file2 ),
					item2x = xPadding + (x * xGap) + (y % 2 != 0 ? xGap/2 : 0) + item2xOffset,
					item2y = - (yPadding + (y * yGap) + item2yOffset);

				item2.name = 'logo2 ' + x + 'x' + y;
				item2.width = item2Width;
				item2.height = item2Height;
				item2.position = [item2x, item2y];
			}
		}
	}
}

 

The Results

Here’s a few patterns we created. You can vary the logos, sizes, and spacing to make it work as needed.

Dallas Theological Seminary Logo Pattern Purple Reversed

Dallas Theological Seminary Logo Pattern White Commencement

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.