ISO50

RSS

Archive for the Work Category

Layer Tennis Tomorrow

Posted by Scott

lt
I’ll be participating in my second Layer Tennis match tomorrow, Friday, Feb. 6th (here is an archive of my first match). For the uninitiated, Layer Tennis is a live event where two designers volley a .PSD file back and forth, adding to the image each time and playing off their opponents work. All of this is commentated in real time by the event organizers — Coudal Partners — at the Layer Tennis site. This will be the season opener so the format will be a bit different. They’re calling it “Around The World” and this time there are ten players who each play in succession, based on their global location. Here is the list of players with serve times (Chicago — where Coudal is based — time in parentheses):

Layer Tennis – Around The World – Friday, Feb. 6th, 2009
Scott Hansen – Noon in San Francisco (2:00 CST)
Armin Vit – 3:15p in New York (2:15 CST)
Evan Melnyk – 3:30p in Montreal (2:30 CST)
Tom Muller – 8:45p in London (2:45 CST)
Adriana de Barros – 9:00p in Lisbon (3:00 CST)
David Rondel Cambou + Nathalie Melato – 10:15p in Paris (3:15 CST)
Armin Osmancevic + Werk – 10:30p in Stockholm (3:30 CST)
Briana Bolger – 11:45p in Kiev (3:45 CST)
Jose Illenberger – 6am Saturday in Manila (4:00 CST)
Fanny Khoo + Tom Merckx – 6:15a Saturday in Singapore (4:15 CST)

You can catch all the action live at the Layer Tennis site.

ISO50 Design Tutorial #1

Posted by Scott

iso50-nightvision
A while back Computer Arts magazine asked me to write an illustration tutorial for an issue which focused on textures. The idea was to revisit the classic Bob Dylan Blowin’ In The Wind / Mister Tambourine Man poster. I really enjoyed the project and ended up using the resulting image as the basis for my Progress Austin concert poster. Computer Arts has made the entire article available on their site as a PDF which you can download here. They’ve even made the original source files available so you can follow along with the tutorial. If you have any questions feel free to post in the comments and I’ll try and fill in any blanks.

Here’s an excerpt from the introduction:

Raster and vector collide

“Creating eye-catching imagery for print can be a balancing act between the two distinct worlds of computer-based design. Scott Hansen shows you how to get explosive results in Photoshop…

The strengths and weaknesses of vector and raster graphics have long been apparent: vector is known for its clean lines and resolution-independent scalability whereas raster has a more photographic nature. Although vector graphics are particularly suited to print work thanks to their scalability, there are some things you can’t do without bringing rasters into the picture.

In this tutorial we show you how to bring together both vector and raster elements to create a seamless piece that sits well in both worlds. The concepts we explore will lend a timeless, weathered feel to what would otherwise be a rather stark design. Relying on Photoshop’s powerful raster tools and quite adequate stable of vector tools, we can tap the strengths of both without leaving the familiar realm of Adobe’s most powerful graphics app. We can unite two styles of design by employing Photoshop’s powerful blending mode options along with advanced gradient masking techniques to produce an illustration style that is truly unique.”

Download Tutorial PDF
Download Support Files

Manifest Hope Gallery Pics

Posted by Scott

progress-iso50
Apparently the Manifest Hope DC show was a big success with a great turnout. Theodor3 posted the pic above on flickr and Piecemaker has some up as well. Unfortunately, I don’t have any personal shots of the print as I didn’t get a chance to grab any before the framed version went out. The print sold so maybe the purchaser or someone else with shots from the show could send a full size head on of it. Notcot also has a lot of great shots from the show here and here. Thanks to everyone who came out and supported, wish I could have been there to see it for myself!

Manifest Hope Gallery Show

Posted by Scott

ISO50 - Manifest Hope
My “Progress” print will be featured in the upcoming Manifest Hope:DC Gallery as part of the lead up to the inauguration ceremony on Tuesday. The gallery runs Saturday, Jan. 17 through Monday, Jan. 19 in DC. I had #112 of the original 200 I signed at press framed and shipped it out last week. Unfortunately, I won’t be able to attend, hopefully somebody can check it out and let me know how it went. Here’s the details:

The MANIFESTHOPE: DC Gallery will be open to the public in Washington, DC for the days preceding the Presidential Inauguration, Saturday, January 17th, 2009 through Monday, January 19th, 2009 between the hours of 10:00 AM – 6:00 PM. Art exhibition management will be provided by our Washington, DC gallery partner, Irvine Contemporary.

MANIFESTHOPE: DC
January 17th-19th, 2009
10:00am – 6:00pm
3333 M Street NW, Washington DC 20007
http://www.manifesthope.com

Terrabyte Poster: Back

Posted by Scott

ISO50-TB3-final-back
Above is the back side of the Terrabyte 3 poster from last week. Since this is only going to be on the small format hand flyer it was sort of a tight squeeze given all the info they wanted to include. I wanted to carry over the 60’s programming punch-card concept from the front, and considering the amount of text, I decided to use it as the central design element. Most of the type is set in Berthold Akzidenz Grotesk (at various weights) and is all grid aligned with a piece of graph paper I scanned in and set on Color Burn overlay mode. 

Incidentally, a couple people had mentioned an alignment issue with the left arrow on the front side. Thanks for the heads up, it’s been fixed and the finalized version is now up on the original post. There’s also more info on Terrabyte 3 now available at the Arboretum site.

Making of The Obama Print

Posted by Scott
iso50_obama_phase005

Fig 1: Finished ISO50 Obama print

As regular visitors to this site may know, I created a print (Fig.1) this past May as part of a fund-raising effort for the Barack Obama campaign. The campaign approached me earlier this year about creating a poster based on the theme of "Progress" and I decided to take a stab at it. Once completed, the poster was printed in a limited edition of 5000 and has since sold out. I had intended to write this article earlier, but I’ve been rather busy so it had to wait until now.

Overall, the process was something of a roller coaster ride and certainly left me with some valuable lessons learned. It’s been a little over a month now since the dust settled on this whole thing (the final copy sold around June 7th) so I’m hoping that the time passed will lend a bit of clarity and result in a more insightful analysis of the journey from start to finish on this project.

This is, by far, the longest post I have ever written. As such, I wasn’t able to spend as much time as I usually do worrying about the writing. This is mostly just a stream of consciousness recap of the process and is primarily nuts and bolts commentary; I’ll leave the job of deriving the meaning and symbolism of the piece to you.

So here it is, the long and the short of it: everything that went into the making of the Obama print.

iso50_obama_phase002a

Fig.2: An early mock-up

Initial Stages
When planning out an image I usually like to dive right into Photoshop as a first step, just to try and establish a color-scheme and basic structure. Only later do I usually start to work with physical objects and pen and paper to try and work out the main elements, keeping in mind the initial digital mock-up. I sometimes hear people talking about always using pencil and paper as a first step in design, but I personally find the computer a much faster and intuitive way to concept things out so I like to leverage that power right off the bat as a good way to kick-start the project.

The campaign had asked that I pursue a style in line with my earlier work as they felt it would make the most sense for this poster and I agreed. So I set out working with various elements from earlier works (you may recognize the people from the Skyway print). I also had an old book about trees with a very nice illustration I had always wanted to use so I scanned it and placed it in the mock up as sort of a framework for the illustration I would later create over it. As you can see in Fig.2 above, the early mock-up was already looking a lot like the final product. At this stage I am usually just trying to find an overall form and color arrangement that works, the details always follow, but if I am feeling inspired I’ll often find myself creating the bulk of the piece in the early stages and then later working with that and refining things.

The message of the print had to center around a handful of concepts that the campaign was using, "Hope", "Progress", "Change". Shepard Fairey had already created two prints for the campaign that each featured an image of Obama so I knew I wanted to pursue another theme for the imagery. The fact that this was a fund raising poster and not intended as a campaign poster also made it easier to interpret the imagery more liberally. My initial idea was to metaphorically represent the core themes of the campaign in a collage, some more literally than others. I also wanted to vaguely communicate the concept of peace by configuring the main elements into a somewhat subdued peace symbol and working off of that shape for the core structure of the image.

Comping & Approvals
After a couple nights of working through ideas and pasting things together, I came up with the comp you see in fig.2. I ran this early mock-up by the campaign and they gave me the go-ahead to start production on the final product. This was a relief as the campaign was wanting the as soon as possible and now I’d have a bit more time to work out the detailing.

iso50_obama_phase002

Fig.3: A later mock-up

Now that I had the green light on the image I went forward with recreating it full scale. I often concept at a smaller size to make for quicker work within Photoshop so when it’s time to make the final product most of the non-vector graphics have to be re-created at the new resolution. This is always a good time to work out the kinks and really focus on the things that may have been overlooked when working through the rough drafts. Fig.3 shows the product of this second phase, a more developed and balanced overall composition at this point. I am still using the original tree illustration as a stand-in and have now exposed half of it to show the branches. It was later decided to go with a full tree but I still liked how it looked at this time. As you can see, the colors and detailing were all really starting to fully develop by this stage and it’s around this point that you can start to see the finished product coming together.

iso50_obama_phase004

Fig.4: Importing vectors to PS

This is always an exciting time as a designer as you’re getting the first glimpses of the final image. Unfortunately, this is where the real work began.

Production Begins
Because this print was going to be so large (23"x40" @ 300dpi raster), I had to do another phase of re-scaling to reach the final dimensions. To get it that big, I re-created all of the elements that I could in vector and brought them in from Illustrator to Photoshop. In fig.4 you can see the not-so-attractive results of this phase. This shot is from Illustrator so none of the texture or color is there yet, just the raw vector forms. Once I had those imported to Photoshop and had the image resized up, I set about placing all the large raster components again, doing the texture and color work and so on.

iso50_obama_phase003

Fig.5: Placing raster elements

In fig.5 you can see that the textures and colors have been restored and the raster tree stand-in has been removed. At this stage the image is at full size and resolution so things are starting to move quite slow. It was also at this point that I had to switch to PSB format since it exceeded the file size limitation of the standard PSD format. With all the full size elements in place it was time to work out the tree illustration.

The Tree
I had been worrying a lot about how to approach the tree throughout the initial stages of the project. It was going to be the central element that tied the piece together and I really wanted it to stand out. I had batted around a few ideas but nothing really panned out until I settled on the idea of using individual leaves on a two dimensional plane as opposed to trying to create something with three dimensional depth as I had previously planned.

iso50_obama_phase003e

Fig.6a: The tree in Illustrator

As this was going to be a very complex vector graphic I went straight to Illustrator to create the tree (fig.6a). Photoshop can handle vector but not nearly as efficiently as Illustrator so when you’re going to be doing a lot of moving things around and transformations, it’s best to stick with Illustrator. This ended up being a very painstaking process taking about 3 days to complete. I drew various versions of the leaf and then rotated and resized them to flow into the spaces created by the branches. Once that was complete I pasted the vector leaves as a shape layer in Photoshop. I broke them up into multiple shape layers and changed the colors of each slightly to give some variance and depth.

iso50_obama_phase003f

Fig.6b: Compositing tree in PS

Once I had the shape layers colorized and laid out the way I wanted them I began the process of detailing and texturizing the leaves. I added various patterns of concentric circles to give some depth to the otherwise solid color of the shape layers. I created a layer mask based on the outline of the leaves over a group containing all of the shape layers so that any elements or textures that I added in this step would only show over the leaves themselves.I also added a lighter stoke outline for some definition.

iso50_obama_phase003d

Fig.6c: Leaves detail

In fig.6c you can see the finished tree detail with the layer palette open. At this point I was getting pretty close to feeling like the image was complete, which was a good thing considering that Photoshop was really starting to slow down; even simple transformations were taking upwards of a minute. It’s a shame how Photoshop begins to break down on very large images even on a very powerful machine. I understand that Photoshop wasn’t exactly designed for this sort of work, but unfortunately it’s the only real option out there.

iso50_obama_phase003a

Fig.7: Vector roots detail

Detailing & Background
Next up I set about working with the root structure of the tree (fig.7). This got a bit tricky as the roots had to go through areas with different colored backgrounds causing problems with contrast and blending.I ended up breaking them into different shape layers and colorizing each individually. The background detail you see in fig.7 is a result of multiple layers with varying blending modes and color shades.

iso50_obama_phase003B

Fig.8: Background vector detail

I did some similar treatments to the various elements that continued across the background of the tree and sky, placing various repeating patterns in different blending modes to lend some depth to the solid fields of color. Most of the layers ended up being in color burn or multiply mode. By combining different overlay modes and stacking layers you can create a lot of depth and color variation, I usually find myself going about 3 levels deep with different textures on each layer and then a base layer with a solid color to anchor it.

iso50_obama_phase003c

Fig.9: Working out the type

Typography
Finally I moved on to the type treatment. For the sake of continuity with the campaign’s own materials and Shepard’s earlier posters, I chose a typeface that somewhat resembled what they had been using. I ended up going with House Industry’s Chalet Comprime which is a compressed variant of their Chalet font. I converted the type to a shape layer to work out the kerning and sizing and created a mask based on the shape (fig.9). I then layered in various paper textures and shading to give the title some depth. It was right around this point that the piece ended up feeling finished, and I say "feeling" because that’s all it is, a feeling; that’s why it’s always so hard to tell when a piece is done, it’s just sort of this sense you get that nothing you could do at this point would improve things. It’s either that or you hit the deadline and in a perfect world you’d get the feeling first, but we all know that’s not always the case.

DSC_0127

Fig.10: Early proofs on the press

The Printing Process
Once I turned in the finished work the campaign flew me down to Los Angeles to be on press at Continental Colorcraft as the poster was being printed. Being on site for the printing helps a lot and saves a ton of time; there are no proofs to mail and changes can be made on the fly. The place was pretty impressive, a bunch of massive warehouse spaces with enormous machines covering the floors.

DSC_0131

Fig.11: In house color-correcting

I printed up a proof on the Epson at home to take with me (it’s in the printer’s hand in fig.10). I always find this helpful as it’s really easy to forget what the print is supposed to look like once they start running off copies. It was really nice to have a version that I had already compared to the screen to look at side by side with the press output.

The first run wasn’t very close on the colors so they took it to their pre-press guys to do some tweaking in Photoshop (fig.11). It was pretty interesting how they were able to separate out the various layers from a flattened TIFF file. I learned a lot of color tricks watching them work through the various filters and adjustments,a few I had never actually seen or used before.

DSC_0231

Fig.12: Hot off the press

Once we got a solid version worked up they sent it off to etch another set of plates.The plates are large, thin sheets of metal with the four color separations etched into them. The pates are then mounted in the press where Cyan, Magenta, Yellow, and Black (K) are fed to each plate. So essentially the image is comprised of four colors pressed in succession on the same piece of paper. Hence the name, four color process (I know 99% of you are familiar with this but I didn’t learn it until much later in my career so thought I’d share for the few uninitiated that might be out there). At this point they fired up the machines and the prints started flying out, it was pretty impressive how fast they were able to print so many copies. At set intervals the press operator would pull samples and check them against the original proof for accuracy (fig.10, above). All told the printing process only took a few hours. At the end they had five large stacks of prints on pallets ready to ship out.

DSC_0154

Fig.13: A pallet of prints

At the end of it all I got to fly home with a tube full of posters and a huge sense of relief that the project was complete and out of my hands.

All in all I had a great time working on the project. This turned out to be a rather high pressure situation so I learned a lot about myself as a designer as I made my way through the various stages. The only stage I wasn’t really prepared for was the release of the print. It’s one thing to release prints to the design community as I have been doing for a while now, but it’s entirely something else to have an audience as broad as the one commanded by the Barack Obama campaign scrutinizing your work. The response was overwhelmingly positive, something for which I am very thankful, but the politically charged nature of the piece seemed to anger some people. This led me to reflect on my motivations for doing the piece in the first place. I have never pretended to be an expert on politics and have always steered clear of espousing my political views, but when you’re facing the potential continuation of a situation like we have endured for the past eight years in this country and you’re given an opportunity to help change that, even in a small way like with this poster, I think you have to take it. Looking back now I ask myself if I would do anything differently with this piece, to be honest I think I would have approached it slightly differently. But hindsight is always 20/20 and given the parameters and constraints of this project I am pleased with the outcome.

Comment on this post

Many Thanks to Karl Peterson for helping with the CSS on this article.

Studio Work

Posted by Scott

STUDIO5003
I’ve been locked in the studio for a while preparing to record some new tracks for the upcoming Tycho album. I reconfigured my whole setup and it’s finally all coming together. I’ve finally added a true analog mixing console and it’s really changed the workflow, been saving a lot of time. Above is a partial shot of the studio in it’s current form, still a ways to go with the acoustics, but I’ve been making do. 

On a side note, I temporarily moved back to Windows XP32 since they don’t make the software I use to record (Sonar) for Mac. I installed Photoshop and it’s been running so bad, crashing all the time. Meanwhile, on the Mac side, solid as a rock. I really wish I could just work inside of OS X full time, but Logic and Pro Tools just can’t hang with Sonar in my book. Oh well, here’s hoping for a solid Windows 9.

SIFR Titles Work!

Posted by Scott

tg3
For those of you that view this blog with a Flash-Enabled browser you may have noticed that the post titles are laid out in Trade Gothic LT Std Extended. This is done using a ridiculously complicated method of swapping out the HTML text and rendering it in Flash. The system that does this is called sIFR, it’s a huge jumble of Javascript and Flash that I really couldn’t make heads or tails of for a long time. As a result, the titles were not clickable, meaning you couldn’t actually click them to get through to the permanent home of the given post. Well after my recent plea for web help, Karl Peterson stepped up and answered the challenge. He made short work of the sIFR problem and so now, as you can see (or click), the titles are finally working flawlessly. Thanks Karl!

Karl Peterson is a designer / developer out of Bellingham, WA. You can view his portfolio at sidearmdesign.com.