Wednesday 5 January 2011

Quark art to web banners via Photoshop

Quark EPS files to animated Gifs in two easy steps
What do you do when the creative/artistic director of the agency your working for uses Quark to layout web banners?
 
Yes, crazy as it seems, some creatives are still holding onto that stalwart of layout programs Quark Xpress even for web banners.
Few London studio's use Quark now unless they have a large body of work invested in it and/or an advocate on staff.

Quark export window make sure you pick RGB as your colour space

In this instance each Quark page is made up as a frame in the animation and sized proportionally to the banner in question. (MPU, leaderboard and sky respectively)

It works, perhaps not the quickest method but it gets the design across.
 

I’m lazy I don’t want to spend hours recreating the art in Photoshop if I don't have to, especially when it’s going end up as highly compressed gif or jpegs with barely a second or two of viewing time. 

So, here’s a working method I stumbled on late last year.
 
For all it’s foot dragging over the years Quark still does what it does very well and since the creative director had made the banner art in proportion to the final art we are at a good starting point. 


It's possible to place the EPS files directly into Photoshop. Even CS2 supports placing these as smart layers. The other smart thing that Photoshop does when placing EPS files (ie literally file > place) is proportionally position the placed file within the document frame.
 
Since the source art was proportional Photoshop correctly placed the EPS with no distortion. All of which meant successive frames lined up more accurately than my first attempts to manually convert, copy and paste the EPS into the artwork file.


It's important to export the EPS files out of Quark as RGB to avoid any unintended colour shifts. 

The reason I really like this method and hence this quite techy post is that it has minimal in-between steps so it's fast, accommodates the art directors creative methods and gives a quality result without having to resort to hacks or time consuming artwork recreation.

Now obviously this isn't going to work for every banner but in this case it was perfect.

The method in short
    One of the finished MPU ads
  • In Quark save each page as an EPS file choosing the obvious defaults and using RGB colour space.
  • Open a new file in Photoshop with correct dimensions for your banner.
  • Place (file > place) each EPS into your Photoshop document.
  • Set your frames and timing and 'save for web'


Found any old school or unique methods for creating web banners please do leave your comments!


That's it for today, enjoy!

No comments:

Post a Comment