Dynamic Holiday Greetings with Illustrator

aiDynamicGreetingI’d like to begin this tut with a question:

What would you do if [your boss | a client] gave you a list of greetings, first names & family names then asked you to produce 1000 personalised versions of a graphic like the one above, with that information?

If your answer goes like this:

  1. Create the basic design
  2. Type in the first set of information
  3. Export it as required
  4. Go to Step 2, add next set of information (repeat until complete)

…then this is the post for you—we’re going to be working with that kind of a scenario (but on a significantly smaller scale—we’re not doing 1000 although you could if you wanted).

Get the File

There is a file available for you to download to work along with this tut here: http://adobe.ly/1YkcJc2 but you can always build your own—the previous tutorial showed how to create the sparkly text shown above if you want to make your own.

Make The Text Dynamic

Now that we have our dynamically-capable text, with an appearance that will redraw to whatever the text is, we need to actually make it dynamic; open the Variables Panel (Window > Variables) and then click on your first piece of text—the greeting—with the Selection Tool. At the bottom of the panel you’ll see a range of icons—click on the first one makes to make that line of text dynamic, then repeat the process for the next two lines.step1

The variables associated with the text are what identifies them to any script or action and will by default be named simply as Variable 1, Variable 2, etc. step2This doesn’t make a lot of sense to a developer if you were to hand off the job of creating any dynamic code to them, and it won’t make a whole bunch of sense to you if you left it for any amount of time, so we’ll rename each one to something more meaningful—you can do that by simply double-clicking the T icon next to the variable name in the panel.step3My variable names were:

  • greeting
  • fName—for first name
  • lName—for last name step4

!XML ID’s!

There is a naming convention for variables, that you need to be aware of if you plan on connecting your document to anything outside of Illustrator (which we will be doing shortly) so always keep in mind that names must:

  1. Always begin with a letter: a-z, no special symbols except an underscore or colon
  2. Never contain spaces

Capture a Data Set

We are now going to create a snapshot of our variable names as a Data Set. Go to the flyout menu at the top-right of the Variables Panel and choose the Capture Data Set option.step4aGive the Data Set a meaningful name; in this example it is called “baseSet”

step4b

Save a Variable Library

The next step is to export an XML file that contains our variables, so that we can populate this with more data. Variable libraries enable designers and developers to coordinate their work together and on larger projects we would hand off this file to such a person, perhaps. If you had a huge CSV of information for example, then a developer could use tools and languages like XSLT to transform that information into data that Illustrator could use and could write a script that would render the final artwork. There are many possibilities, but for now we are going to export the library and then modify it to suit our much simpler needs. Return to the flyout menu at the top-right of the Variables Panel and this time choose Save Variable Library… from the menu; choose a location for it—maybe in the same folder as the Illustrator file would be a good idea.step5

Edit The XML

Now for the fun bit—getting our hands dirty with a smidgeon of code—and don’t worry, it’s going to be really easy! This can be achieved in a plain text editor, but if you’re a full CC subscriber, then you’ll have Dreamweaver, which is just perfect for us as it will make it easy to see the code clearly, with syntax highlighting to identify the different bits.

Open your XML file in Dreamweaver, and it should look something like this (don’t worry if the colours aren’t exactly the same, there are a few different themes to get the colours the way that is best for you):step6You don’t need to worry about the majority of this code as it just defines the data and the document; the bit you’re looking for will be your sample Data Set that looks something like this:

<v:sampleDataSet dataSetName="baseSet">
<greeting>
<p>Season’s Greetings</p>
</greeting>
<fName>
<p>Personas</p>
</fName>
<lName>
<p>WithLongLastNames</p>
</lName>
</v:sampleDataSet>

All you need to do here is to select that little structure—be careful not to miss anything out, especially the chevrons <> at the ends—and copy it to your clipboard. Now modify each dat set name and then each piece of text enclosed in <p>tags (shown in bold, below) like this:

<v:sampleDataSet dataSetName="set1">
<greeting>
<p>Happy Holidays</p>
</greeting>
<fName>
<p>Chloe</p>
</fName>
<lName>
<p>Martinez</p>
</lName>
</v:sampleDataSet>

Then click after the closing chevron at the end of the line that says </v:sampleDataSet>, add in a new line and paste down your copied information, then modify that, and rinse and repeat as many times as you like—don’t forget to change the name of each data set in turn. Your end result should look a bit like this simple example.

<v:sampleDataSet dataSetName="set1">
<greeting>
<p>Happy Holidays</p>
</greeting>
<fName>
<p>Chloe</p>
</fName>
<lName>
<p>Martinez</p>
</lName>
</v:sampleDataSet>
<v:sampleDataSet dataSetName="set2">
<greeting>
<p>Merry Christmas</p>
</greeting>
<fName>
<p>Zachary</p>
</fName>
<lName>
<p>Whitehall-Jones</p>
</lName>
</v:sampleDataSet>
<v:sampleDataSet dataSetName="set3">
<greeting>
<p>Happy Holidays</p>
</greeting>
<fName>
<p>Suzanne</p>
</fName>
<lName>
<p>Veilkenheimer</p>
</lName>
</v:sampleDataSet>

Check two small things before we save the file:

Immediately before your data sets there should be a line like:
<v:sampleDataSets xmlns="&ns_custom;" xmlns:v="&ns_vars;">
and immediately after there should be a line like:
</v:sampleDataSets> note that it is in the plural.step7

Save the file and return to Illustrator.

Load the Variable Library

Return once again to the flyout menu at the top-right of the Variables Panel and this time choose the Load Variable Library… option; navigate to your modified file and select it. You should now be able to move between data sets using the drop-down at the top of the panel. Your artwork should modify each time to reflect your choices.step9

It’s awesome, the first time you actually make artwork that responds to code because it really shows the potential and power of a product like Illustrator, and our World is changing to one where personalisation of design is becoming very prominent, so it’s really worth the investment of your time in a little learning here.

As mentioned earlier, a developer could make short work of converting your data to something Illustrator could ingest and could also write a script that could automate the rest of the process too. As I’m making the assumption that you’re learning this in isolation, we are going to use a scaled-down version for our output, using actions.

Build The Action

Open up the Actions Panel from the Window menu, and click on the small folder icon at the bottom-right of the panel to create a new actions folder—making it easier to find—and call it something lie automation (although Ihave called mine BlogDemo in the image below as I already have my own automation folder).step10

Click the icon to the left of the trash can at the bottom of the panel, and give your action a name. step11As soon as you exit the dialog then you will be in Record mode so anything you do will be recorded to the action. Go to File > Export… and choose JPG as the export type. Choose your options in the next screen and save out a file to somewhere; once that has completed, click the square icon at the bottom of the Actions Panel to stop the recording; your action should be ready for use.

Batch Process

Now for the clever stuff. Go to the flyout menu at the top-right of the Actions Panel and choose the Batch… option.step12

  1. In the dialog, choose your action.
  2. In the Source option, choose Data Sets
  3. In the Destination options, select Override Action “Export” Commands
  4. Click OK and the action should start running, working through each data set in turn and creating a new image each time
    step13

 

Making a Scatter Brush and Sparkling Dynamic Text in Illustrator

featImage1In this tutorial we are going to make a scatter brush in Illustrator that we’ll then use to create some sparkling dynamic text and then in the next post we’ll create a data-driven holiday image that you can use to send a personalised greeting to all your friends, colleagues/clients and family.

Creating the Scatter Brush

Create a new document—in my example I created a 960x560px document with the Basic RGB profile; using millimetres for the measurement units but you can of course use whatever you like.

There are a number of different ways that you can approach making this brush—including using Capture CC—but this one is pretty easy to make from scratch in Illustrator directly.


  1. To avoid making lots of adjustments later on, it’s a good idea to make the scatter brush “tip” shape(s) at roughly the size they’ll be used (although they can always scale later). We’re going to create the art to fit into a 20mm square, so with the Rectangle Tool, click on the canvas and type 20 into both the width and height fields, then click OK to create the squarestep1
  2. Leaving that selected, use the ⌘-5 shortcut (View > Guides > Make Guides) to turn the square into guides, then zoom in to the guides to get a better view for the next stepsstep2
  3. Draw a bunch of circles of different sizes; if you’re using Illustrator CC2015.2 (or greater) then you’ll notice that with Smart Guides turned on that you no longer need the SHIFT key to create a constrained shape—the guides show the shape is equal in width and heightstep3
  4. Give all of the circles a white stroke and solid fills of varying colourstep4
  5. Select all of the circles, and drag them onto the Brushes Panel—click Scatter Brush in the dialog that appearsstep5
  6. Now we need to set up some dynamics for the brush—the only properties we really need to change here are the size and rotation; set them both to Random and then set a lower and upper limit for both, like in the example shown below (you can always modify these values later at any time by double-clicking the brush in the brushes panel). My approach to tuning this is to create the brush, then make a shape and apply the brush to it, then edit the brush and tune it with Preview enabled in the dialog to get a better idea of how it’s going to work in practice; it’s also worth noting that the stroke weight applied to an object will also be a factor in how the brush performs, too—plenty of room for experimentation!step6
  7. Delete the artwork from the artboard and clear the guides.

Making the Sparkling Text

  1. The first thing to do is create a dark background for the text, so create a rectangle that covers the artboard, give it a gradient fill and use the Gradient Tool to shape the gradient to how you like. Once you’ve done that, lock the layer and introduce a new layer for the textstep7
  2. Select the Type Tool and use the SHIFT+⌘+C shortcut to change the alignment to centred, then click in the centre of the artboard to place an insertion cursor and type your desired messagestep8
    Two quick notes:
    • This particular tutorial will probably work best if you use point text, as directed rather than area text, so resist the urge to drag a text frame (people who use InDesign primarily will probably do this automatically)
    • You can use whatever font you like, of course but just in case you’re interested the one I’m using here is Phosphate (Available from MyFonts: http://bit.ly/1NZlFUP or FontShop: http://bit.ly/1NZlw3Q); you may want to check out the great range of decorative fonts on Typekit, too
  3. Hit Esc to exit the Type Tool and leave the type selected as an object then in the Appearance Panel (where most of the action now takes place, just so you know) click the Add New Fill icon at the bottom-left of the panel.
    Pro Tip: the shortcut for this is ⌘+/step9
  4. Drag the new fill down beneath the Characters in the panel, just as you would if you were rearranging layers—and that is actually a great way to think about building appearances—they are in many ways just like object-based layers; make sure that the new fill is highlighted in the panel ready for the next step
  5. Choose a colour for the new fill—my example uses a purple—and then choose Effect > Path > Offset Path…
    1. Choose a positive offset value that makes the fill larger than the original text
    2. You may find that the fill creates big, jaggy corners—if this is the case, choose the Round join option

    step10

  6. Next, drag the stroke that already exists in the Appearance Panel down below the new fill, then—ensuring that it is highlighted in the panel—choose your brush from the Brushes Panel to apply that to the stroke. Once the brush is applied, you’ll be able to see it in the Appearance Panel and you can change the stroke width to make the effect smaller/larger. You’ll also see that if you click on the brush as shown below, that the brush reapplies randomly every time you click, just as specified in the brush settingsstep11If desired, you can duplicate the stroke and change the size of the duplicates; this will build a “deeper” effectstep11a
  7. At the top of the Appearance Panel, highlight the Type object and then choose Effect > Stylize > Outer Glow… (if you’re not too familiar with this panel, make sure you choose the effect from the Illustrator effects in the upper-half of the menu—the lower-half effects are Photoshop-generated). Tune this effect to give a soft glow to the text object as a whole, after all the other effects are appliedstep12
  8. Highlight the purple fill you created to start with, and then click the Duplicate Selected Item icon at the bottom-right of the panel. step13Change the fill colour to White, and then choose Effects > Blur > Radial Blur… and add a fairly low value zoom blur to the fill; you can drag the blur centre down slightly in the dialog, that will make the blur effect spread upwards and outwards from the text as lights would, maybe—it is a subtle enhancement that you can preview by turning the fill visibility on/off in the panelstep14
  9. Again, select the Type object in the panel, then choose Effect > Warp > Arc… and apply a fairly shallow arc to the text—around 10% should be just fine. step15

That’s it, you’re done and now you can tune any or all of the individual components to suit. The text is completely live—you can select and edit the text to your heart’s content and the appearance will build automatically.

Wrapping Up

In the next post, we’ll be taking this text to the next level by creating an automated workflow to generate graphics with data. You will be able to use the file you’ve just created

Adobe Animate CC is on the way!

Well, in case you haven’t heard, the Flash Professional authoring tool is transforming and becoming Adobe Animate CC!

The Flash Professional team has responded to the increasing demand for animation formats that leverage web technologies, by adding first-class support for exporting animations to HTML5, built on top of the open-source CreateJS library which is very popular, and produces lightweight, performant code that is human-readable. Animate CC will increasingly emphasise features for animators creating content for the web, and will of course continue to support and output for SWF and AIR too.

Great New Features!

The new application will redefine the role of the authoring tool as the premier web animation tool that can output to multiple platforms with a host of new features including:

  • Adobe Stock Integration. Browse and license images, photos, and vector graphics
  • Creative Cloud Libraries. Access colors, vector graphics and brushes directly in Animate CC
  • Vector art brushes. Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC
  • Improved pencils and brushes. Draw smooth, precise vector outlines along a curve and get faster live previews
  • 4K+ video export. Export videos with custom resolutions for the latest Ultra HD and HiDPI displays
  • Custom resolution export. Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and HiDPI displays
  • Easier audio syncing. Control audio looping directly on the timeline, without having to code
  • 360° rotatable canvas. Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes
  • Faster color changing. Naming tagged colors lets you change one color and have it automatically update your entire project
  • Colored onion skinning. Easily orchestrate complex animations now that adjacent frames can have different color and alpha values
  • .OAM support. Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

Here’s a video from my colleague, Michael Chaize that gives a sneak peek at some of those new features:

Animate CC will be with us in early 2016.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑