Infinite Variety - Data Driven Design

[Colour Management]
[Free Stock Photos]
[Adobe-Macromedia]
[InDesign CS2]
[QuarkXPress 6.5]

[Acrobat 7]
[Creative Suite 2]
[Fontographer 4.1]
[FrameMaker 7]
[InDesign CS2]
[PageMaker 7]
[PagePlus 10]
[Publisher 2003]
[QuarkXPress 6.5]
[Ventura 10]

[Colour Management]
[Free Stock Photos]
[Adobe-Macromedia]
[CD Authoring]
[Mac/PC History]
[Creative Suite]
[Acrobat Directions]
[RGB to CMYK]
[Font Formats]
[DTP Tagging ]
[Data-Driven Design]
[Windows XP]
[Paper to PDF]
[Page Imposition]
[eBook / ePaper]
[Removable Storage]
[Understand Halftones]
[XML Revolution]
[PDF Workflows]
[Text Typography]
[Spot Colour]
[Database Publishing]
[Layout Compositing]
[Design Automation]
[Stock Photography]
[Quark v Adobe]
[Asymmetric Grids]
[Commercial Print]
[Colour Print]
[Preparing Print]
[Understanding EPS]
[Layout Grids]
[Beyond CYMK]
[Acrobat v Immedia]
[Postscript 3]

[Acrobat Tutorial]
[PageMaker Tutorial]

 


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Tom Arah looks at the practicalities and possibilities of Adobe's data-driven design.

There's probably nothing more likely to put off a designer than the term "data-driven". The whole idea of data processing clearly belongs to the realms of the programmer and back-end boys, not the creative types whose every graphic is a work of art. Increasingly though designers have to accept that graphic production is not necessarily a one-off creative activity. Designing a corporate identity or Web site or is one thing but actually putting it into practice can easily involve producing hundreds, even thousands, of business cards and Web images. Anything that makes the task easier, more reliable and more consistent should be seized on as a godsend.

Adobe has recognized this and in its latest round of application upgrades has moved data-driven design into the mainstream. In the recent PageMaker 7, for example, the addition of a Data Merge feature was the biggest - critics might say only - introduction. Design a layout, load a data file and then establish links between text in the layout and fields in the data file and you can generate a new multi-page document based on the original template but with varying text content. The system certainly isn't state-of-the-art as you can only use comma-delimited text files, can't pre-process the data in any way - for example to only merge addresses in London - and can't print directly. Even so, it's far easier to edit the data file and automatically generate pages than to manually copy layouts and update text.

Pagemaker's new Data Merge in action.

A bigger move towards data-driven design has been taken by Illustrator 10. The system works in a different way to PageMaker's Data Merge in that you don't have to load a data source before you begin. Instead, using the new Variables palette, you mark up objects in your design as variables. These are then automatically listed in the palette from where you can rename, delete or unbind the variable.

As with PageMaker, the most obvious option to mark up as a variable is your design's text content which is quickly done with the Make Text Dynamic command. Illustrator's approach is slightly different here as you can't mark up selected words within a text block but rather have to mark up the entire text object. With a bit of care the approach works fine for jobs like business cards, but it's certainly not flexible enough for a targeted mail-merge.

More impressive is the Make Graph Dynamic command. Illustrator is the only major drawing package to offer the ability to create accurate bar, pie, line, area, scatter and even radar charts by entering numbers into the tabular Chart Editor. The formatting control is weak - there aren't even basic 3D options - but the ability to turn the underlying figures into updatable variables gives Illustrator's charting capabilities a serious boost.

Words and numbers are clearly suited to being data-driven, but what about the graphical elements in a design? With placed images it's relatively straightforward to have Illustrator store the graphic's filename as the variable using the Make Linked File Dynamic command. With Illustrator's own huge array of powerful graphical tools the support is limited to the absolute basic setting of on or off, visible or invisible, accessed through the Make Visibility Dynamic option (this can also be applied to variable text, graphs and linked images).

All of Illustrator's four variable types - text, graph, image link and visibility - are fairly crude but when you put them together there's still a lot that can be done with them. If you are running a course, for example, and you want to produce a personalized award certificate you can use the text variable to include the participant's name, the link variable to include their photo, the graph variable to chart their progress over the course, and using the visibility variable you could hide and reveal graphical elements to indicate gold, silver or bronze medal status.

Illustrator supports four data variable types.

That's the idea - but we haven't got there yet. So far all we've done is marked up which objects in the layout are linked to what kind of variable. In other words we've created a template - now we have to populate it with the right data. Illustrator's approach here is strange. You would expect to be able to connect your template to a database or at least to a delimited comma file, but instead Illustrator introduces the idea of Data Sets.

By hitting the Capture Data Set command at the top left of the Variables palette, Illustrator stores all the current variable settings as Data Set 1. Using our certificate example this means that we can use the Text tool to change the name, double-click on the graph to change the numbers on which it is based, use the Link palette to replace the photo and then the Layer palette to hide and reveal any internal objects as desired and then hit the Capture command to save all settings as Data Set 2. You can then use the Previous and Next Data Set arrow icons to instantly swap between the two certificates.

You could create all the certificates in this way and the approach is certainly more efficient than creating and editing separate pages for each certificate. Even so, manually updating the variables in situ on the layout like this is hardly ideal. The solution - or at least partial solution - comes in the ability to export and import data sets with the Save and Load Variable Library commands.

Save the settings made already, for example, and you can open the resulting output file in any text editor. The initial impression is daunting as the Variable Library is saved as XML (eXtensible Markup Language) but with a bit of exploring you'll find that you can locate and then copy and paste the <DataSet> tags and edit the <Variable> tags they contain. It's hardly user-friendly - I never thought I'd think fondly of PageMaker's comma-delimited data files - but it can be done and, when you load the new Library, you can then step through your newly added data sets.

More productively, you can use the Actions palette to record an action, such as printing or exporting, and then use the palette's Batch command to apply the action to each data set in turn. This is where the data entry slog pays off, and you can sit back as all your data is processed automatically. It's a huge advance in terms of speed and consistency but Illustrator could certainly do more to make the job easier. In particular there are no options for selecting just some of the data sets - only the gold medal winners for example. If you want this sort of control it has to be pushed back earlier in the process before you create the Variable Library.

The real benefits of data-driven production require XML and scripting expertise.

In other words to take full advantage of Illustrator's data-driven templates you'll need an advanced database programmer able to set up and control the export of well-formed XML. Sadly that's not something that the average designer is set up for and I don't know why Illustrator didn't provide a friendly in-built front-end for editing and controlling variable data - though I'll hazard a guess later. As it stands then Illustrator's variable processing is a big step forward but it's not exactly data and design working in perfect harmony.

Illustrator itself might not be ideal for processing data but one of the advantages of Adobe's template-based approach is that other programs can take advantage of them. The benefits of this are most obvious in Web graphic creation where the constant jumping back and forth between web author and graphics package is one of the biggest production bottlenecks. By moving the control of graphic templates into the web authoring package, the workflow is seriously streamlined.

The real benefits of data-driven graphics then begin to be seen in the latest GoLive 6. Using its system of SmartObjects, GoLive has always been able to work with native Photoshop, Illustrator and LiveMotion files which it automatically outputs as optimised GIFs or JPEGs at the desired size. Now it can also read and edit variable information embedded in these original files.

With a Photoshop PSD file GoLive 6 can now automatically update the topmost text layer. If you create a single button with a text layer in Photoshop and then load it as a Photoshop SmartObject you can use the Variables button on the Inspector palette to change the text. This not only lets you update the button where you want to, on the page, it also means that you can use the single PSD master to create the background for a whole host of buttons. And because the link is live, if you update the PSD in Photoshop all the GIFs will automatically be updated and re-optimised too!

Using variables you can update Photoshop text layers from within GoLive 6.

This is impressive power but the limitations are just as obvious. To begin with you can only change the topmost text layer - not much good if you're using an image map with multiple text links. For more advanced work like this, the latest Illustrator with its advanced variable support looks like the perfect candidate. Surprisingly though GoLive doesn't support variables in the native AI format, instead you have to save to SVG format having made sure that both the Preserve Illustrator Editing Capabilities and Include Extended Syntax for Variable Data options are selected.

I was interested in this as Adobe has long promoted SVG as the vector-based web format of the future and I wanted to see how it performed. Strangely though, you can't output the final images as SVG - you instead have to convert to GIF or JPEG as you do with Photoshop files. More disappointing is the level of support. I had been expecting to be able to edit all text, chart, image link and visibility settings and to access all existing data sets but that was over-optimistic. You can edit all text and visibility variables that you've set up in your graphic template, which can be put to excellent use, but that's it.

Rather than Illustrator, GoLive's preferred graphic partner is in fact the latest LiveMotion 2. To begin with the LiveMotion SmartObject is designed to output its target graphic as a vector-efficient Flash SWF and is therefore able to cope not just with static images and image maps but with rollovers and even animations. It's also very easy to set up variables - in fact it's so easy that the capability is easy to miss. All you need to do is select an object and give it a name in the Replace field of LiveMotion's Web palette. When the LIV file is then imported into GoLive all variables appear in the Variable Settings dialog.

And the control on offer is far greater. With text variables in a LiveMotion SmartObject, for example, you can not only change the text, you can set a new link and a new target frame. You can also change the font, the point size, the leading and even the tracking - often essential for web navigational devices where you have to squeeze longer items to fit within the button or rollover. In other words you have the benefits of consistency but with flexibility where needed and all from within GoLive.

This is only the beginning - LiveMotion SmartObjects also offer variable formatting. With text or any other shape or object you can use the Set Colour or Set Texture options to change a variable object's fill. For our certificate, for example, we could change the fill between gold, silver and bronze directly without hiding and revealing graphics. Far more powerful is the option to change the current style. This lets you access all of LiveMotion's formatting power including control over gradients, transparency, 3D bevel, drop shadows and so on. If you have created rollover or animation styles you can even apply these from within GoLive!

GoLive's integration with LiveMotion includes style-based variable control.

Suddenly it becomes clear that variables don't just let you control the obvious content in an image, through the use of styles they also let you control overall appearance and even the behaviour of dynamic objects. Effectively so long as an attribute can be tagged it can be controlled. If you think about it there's really nothing to stop data-driven control of every aspect of a graphic - after all the size, position and defining nodes are all stored as data in the file and so can be updated.

That's the theory but GoLive's interaction with LiveMotion graphic templates is just one small step on the way (and a slightly uncertain one based on the press beta I'm currently working with). Adobe though is clearly aware of the full potential of data-driven graphics and has announced the launch of a new server-side product, AlterCast, specifically designed to industrialize the whole graphic creation process.

I haven't yet seen AlterCast in action but it clearly works on the same principles that we've already seen with primarily SVG-based graphic templates, tied in to XML-based data to produce JPEG and GIF graphics. Naturally AlterCast takes things further with features such as support for Illustrator's chart variables (great for forecasts and stocks and shares) and much tighter database integration. It also offers intelligent workflow processing which means that it can automatically produce all the necessary "iterations" of an image for example at different sizes or in different languages.

Looking at the current AlterCast spec sheet (www.adobe.com/products/altercast/main.html) there are two surprising omissions: the output of vector-efficient Flash SWF images, rollovers and animations and the ability to produce truly customized Web graphics on-the-fly rather than having to fill your server with thousands of iterations. For this state-of-the-art capability the only current option is to use Macromedia's server-based Generator software (which itself looks set to be increasingly rolled into the main Flash product line). For the moment then the Adobe vision of data-driven graphics is more all-embracing than Macromedia's but stops short of the ultimate goal - on-the-fly data-driven design.

It's possible to speculate about the future, however, and doing so begins to make sense of some of the stranger aspects of the story so far. At the moment the use of XML-based Variable Libraries and SVG-based graphic templates seems unusual and even unhelpful - why employ these two middlemen to produce your JPEGs and GIFs rather than the original database file and the original Illustrator AI file? In the future though the situation is likely to be very different.

What Adobe is waiting for is the day when the Web will move on from HTML, JPEGs and GIFs and embrace XML (see RW77) and especially its vector graphics form, SVG (see RW61). This will dramatically boost productivity and efficiency by entirely cutting out the need for the generation of bitmap formats as it will be a case of SVG template in, SVG graphic out. More importantly, by its tagged and stylable nature, SVG is the ideal format for external control - you can change the text in a SVG graphic simply by editing its code in WordPad for example, while changing a single linked CSS stylesheet can instantly update the appearance of all graphics and pages on an entire site!

SVG's tagged XML nature makes it perfect for data-driven production.

Most important of all it's crucial to realize that SVG actually is XML. The SVG graphic is just as rich onscreen as any other vector or bitmap format, but it's actually just textual XML data that is interpreted by the SVG player. In other words the workflow cuts out all middlemen as both underlying database and the resulting graphic are built on exactly the same foundation: XML. The potential is enormous with server software being able to combine XML data from the database and XML data from end-user interaction and to pass this through XML-defined templates to generate on-the-fly, up-to-the-minute, tailor-made and visually-rich XML-based graphics and pages!

Set up the system correctly and it will be able to automatically generate the sort of customized certificates we laboriously created earlier with Illustrator and do it on-the-fly. In fact, as XML/SVG is dynamic and specifically intended for processing, you could set up the whole online course in this way - providing a design-intensive and completely personalized experience with no external input after the initial set-up. Now that really would be data and design working together.

Possible workflows like this show the potential for high-end data-driven design - but their widespread use is still some way off. As the recent Adobe offerings show, though, it's time that designers get familiar with the concept at all levels of their work.

Tom Arah

March 2002


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.