We just pushed out some hot new features to PunyPNG today:

• Added option to preserve EXIF data, to maintain copyright and other image metadata
• Added option to skip bit reduction when compressing.  This improved IE6 compatibility (see PunyPNG’s IE6 support)
• REST-based API support (beta)

We also fixed a handful of outstanding issues:

• Improved performance of dirty transparency compression
• Improved simultaneous uploading of multiple files
• Fixed bug where the total savings being reported were incorrect

You can now sign up for PunyPNG to save your custom compression options and get assigned an API key.  We’re also excited to release the long-awaited PunyPNG API.  This will give you the ability to optimize multiple files in batch using a REST-based API (responses are in JSON).  Smusher is a great example of how you can use the command-line to invoke PunyPNG without sacrificing your own CPU cycles.  The API is currently in limited beta, with some restrictions to ensure nobody decides to optimize their entire photo archive library over winter break or something.

Look out for more updates in the coming weeks.  Your feedback and feature requests are invaluable to making PunyPNG the awesome compression tool available.   Keep it coming.

Merry Christmas!!

For the Designer

Thinking with Type - $15

Whether you are a web designer or a graphic designer (or a motion graphics guy), Thinking with Type is the essential book on typography. As I’ve mentioned before, I’ve seen so many “type crimes” in the world of design; many a times, I, too, am a culprit. I refer to this book again and again; it’s one of the books closest to me (in proximity) at work. Any designer who has mastery over typography and text treatment will tell you that she has read this book from cover to cover — multiple times.

For the Filmmaker + Editor

In the Blink of an Eye - $10

Walter Murch is hailed as one of the best editors out there. Ever. With films such as The Godfather, Apocalypse Now, The English Patient, and many more under his belt, he has a thing or two (or six, actually) to share about the fine art of editing in The Blink of an Eye. It’s a short and fast read, as Walter blazes through the history of editing to — what’s more important to me — the basic principles.

For the Writer

The Elements of Style - $15

Ok, I lied — I think everyone should read this book. It matters not whether you’re a coder, a designer, a moviemaker, a cook, or whatever — the written language is still the most basic form of communication. Originally written as a handbook for students at Cornell, The Elements of Style combines valuable tips and insights with humor and sarcasm. Engineers out there: read this book.

For Artists Everywhere

Art and the Bible - $8

We live in a world steeped in relativism and subjectivity, and such worldviews are fiercest in the realm of the arts. How can we be objective about the arts while dealing with different styles and approaches? How can anyone say that one style is better than another? I think Francis Schaeffer, in Art and the Bible, does an excellent job in walking the tightrope in addressing these very issues. Rather than siding with the extremities, he gives proper guidance and principles when approaching art, and how all this relates back to a biblical worldview.

For the Coder + Programmer

King Lear - $7

No, this is no joke. If you thought I was going to recommend a Ruby on Rails book or something, then you don’t know me very well. Over break, step aside from the computer and read! King Lear (side by side) is often hailed as Shakespeare’s greatest work, and if anything, it will expand your imagination (if not vocabulary). The side-by-side series are great because half the time, I just don’t have a clue as to what Shakespeare is saying, nor do I have easy access to an English major.

With that said, from all of us at Gracepoint After Five, Merry Christmas and have a Happy New Year!

Genius is one percent inspiration, ninety-nine percent perspiration.

Much has been said about inspirations lately, but one thing I do want to mention: inspirations alone do not produce great work. Thomas Edison¹ was onto something when he said that “none of [his] inventions came by accident.” It takes work and effort. A lot of it.

Ira Glass, a reporter who’s now famous for hosting This American Life on National Public Radio, has something similar to say with regards to the art of storytelling². Ira is now renowned for his ability to take a story and make it very interesting — he’s able to put a spin on it that causes you to think about a subject in which you’ve never thought about before. In short, he’s a Jedi Master.

Click here to view the embedded video.

As a master of the craft, he has a lot of advice to give. “Do a lot of work. Put a huge volume of work. Put yourself on a deadline.” “I took longer to know how to do this than anyone I’ve ever met.” From the way he talks and the passion that just exudes out of his pores — you know he’s sincere. The thing that really drew me to this short video is around the 3 minute mark, when he plays a tape from his eighth year at work. He pauses the tape from time to time to address to the audience — to us — how horrible he was. Now, to a novice in radio story-telling like moi, it sounded fine. However, pay close attention to his facial expression as he listens to his younger self with much anguish and pain, almost as if someone was clawing at the blackboard.

I admit that it’s far easier to criticize one’s past than it is for the present, but I’ll bet that he was just as harsh back then to himself as he is now. He must have; there’s no other way for improvement if one (1) doesn’t self-analyze and self-criticize and (2) make much effort to improve. As Ira stated in the beginning of this video, many new artists — whether they are designers, film makers, illustrators, etc — recognize that their work is not as good as their “taste”³. Unfortunately, so many people become defeated and quit. And here, I just want to echo what Ira said:

It’s going to take a while. It’s natural to take a while… you just have to fight your way through it.

The base elements

As usual, much time was spent in looking for good stock photography. Perusing Flickr, it wasn’t long before I spotted the USC football player. Once I saw it — even in the thumbnails — I knew that was it. Beautiful lighting with a dark background. Menacing. In short: amazing. Finding a similar photo for the Cal Bears was another story. In the end, I settled for the one above. Even though the time of day didn’t match, the most important thing is making sure that the light source is similar. If you look at the two photographs above, you’ll notice that the light seems to be coming from “behind the camera” and to the left.

Compositing

In the rough poster above, I’ve masked the players, adjusted their levels slightly, and slapped on a cloudy background. Since the light source is similar, it’s more believable that the two of them were taken in the same shot (except the USC player is humungous compared to the Cal). Unfortunately, notice that the USC dude is cut off on the bottom. The cheap and easy way to solve this problem is to simply allow him to dissolve into the background. However, that method is very difficult to pull off professionally; that trick is used so many times that it’s become rather amateurish. The solution I chose is to incorporate typography as an element within the poster.

Typography: an element, not an afterthought

I still notice many designers using typography as an afterthought. They do their basic designs with their photo elements and brushes, but when it’s time to enter in text, they seem to slap it on rather than treating them as elements. In the step shown above, I’ve used the text treatment to cover up the USC player without it looking awkward. However, the text is more than mere fig leaves; words were carefully chosen, placement and layout were thought out, and font-families hand-picked (Aachen and Avant Garde Bk). In other words, don’t treat the text as second-rate citizens. They’re the elements that communicate to the audience; without the text, it’s just a meaningless poster. Learn more about typography. Use them well.

Blue and gold used here goes without saying.

Grids

I’ve said it before, and I’ll keep saying this over and over again. Grids are your friends. Back in the day, designers would have to manually draw out their grids with pencils and rulers. (Even further back, they would have to draw out their fonts!) Nowadays, it’s as simple as hitting apple+’.

There’s no excuse to be lazy. Use grids (and guides).

Final poster design can be viewed here.

This upcoming Saturday, Kairos Christian Fellowship will be having a getaway in the sierras. Unfortunately, that coincides with the big Cal vs. USC home game. As a way to draw students to choose the sierra trip over the game, we designed a poster for this event.

USC vs Cal - Kairos Sierra Lodge Getaway Poster (final)

More about the design process after the jump:

The most time-consuming part in designing this poster was making the water feel right. I’ve tried so many variations of water splashes, but they all looked flat, especially when added to the helmet. I even tried using the warp transform to make it wrap around the helmets a bit more, but that still didn’t look right.

Stock images of water found from sxc.hu

This was already my third (or so) attempt with the water wrapping around the helmets.

I showed this version (above) to my friends for feedback. Surprisingly, they actually liked the water effect (even though I did not); their only suggestion was to use a more modern font, especially for the “USC vs CAL” title. Their advice encouraged me to tackle the water problem anew — up until this point, I was ready to give up.

After toying around with the poster some more, I realized that a balloon pop photo might work as the splash element for the helmets. I’ve downloaded and tried the photo before, but I used it as drop elements (which didn’t quite work). It might just work to treat it as a huge, all-encompassing wall of water rather than a tiny speck:

In the above image: (1) Inserting the same photo over the Cal and USC helmets; (2) Changing the blend mode to screen; (3) Applying a large, soft-brushed mask to each bubble

After applying the realistic water splashes and making some more changes (noticeably on the text treatment), we have this:

This looks close to the final version, but not quite. After showing this to my design friends, one of them liked it immediately; the other suggested getting rid of the faint border altogether. Furthermore, I also noticed some design issues within the football/rain image:

Places where rain/splatter end too abruptly

After fixing those portions, inserting additional text (our getaway trip isn’t just about the football game), and making final color correction adjustments, we have the final result:

Etcetera

• Download the hi-res version of the USC vs Cal Football poster
• Source of my inspiration (it’s also a case study): Soldiers of Peace
• I’ve attached a psd of another poster in a previous post, but I’m not sure if anyone finds it useful. If enough people comment on this post, I’ll put it up.

How am I supposed to remember my username and password to the Oracle iExpense thingy at work?  Or the Member ID for my health insurance?  I gotta keep them online so that info is available whether I’m at work or at home.

Maybe I’ll be the next cyber-theft victim like the poor folks at Twitter who had their corporate documents compromised since they stored it all online using Google for Domains.  Tsk tsk.

Well, the way I’ve been able to pull if off and sleep peacefully at night is using a combination of some awesome Mac tools (I’m sure there’s a similar PC equivalent):

• Dropbox: Online storage volume, backend is actually Amazon’s S3 service
• TrueCrypt: Open-source on-the-fly volume encryption — allows to you quickly mount and unmount secure volumes.

Dropbox is a great tool available for Windows and OS X that allows you to keep a virtual disk online, available everywhere.  I know there are many other similar services and I’ve tried my share.  However, I’m a big believer in Dropbox because it never crashes and never misses a sync.  You can be moving files around in it, copying a large file in there, and then for kicks, yank the internet connection.  Next time you log in, it syncs flawlessly.  Beauteous!

Inside Dropbox, I store an encrypted file container created by TrueCrypt.  I can mount that file container like a USB drive, and I can in turn store sensitive files in there.

I know there are password websites out there but I just don’t trust some third party to store my passwords.  ”Store all your passwords in a single place!”  Something about that value proposition gives me the creeps!  Well, those sites are dime a dozen, and all startupy.  Not my idea of real security.  Ultimately, I want to be the only one who has the keys to the safe.  There’s a similar technique which uses Disk Utility to create a password protected AES-encrypted .DMG file, but that requires you to remember to never click “Save Password” when decrypting it and the disk image itself is read-only so it’s a pain to make changes to its contents.

Creating your Encrypted File Container

After you install Dropbox, create a folder called Secure which will have a file called Secure Files (in case it isn’t any clearer):

Secure Files is actually an encrypted file container created by TrueCrypt.  That’s basically fancy lingo for a .DMG disk image volume that has strong encryption (I’m using Serpent-Twofish-AES … three ciphers in cascade).  You can easily create one using TrueCypt by clicking on Create Volume:

Save your encrypted file container in your Dropbox’s Secure folder or save it to your desktop and copy to Dropbox later.  For the Encryption algorithm, it’s up to you.  I chose the Serpent-Twofish-AES since it’s basically impossible to break.  Next, set a volume size of 50MB (more if you need to store lots of stuff in there).  Create a volume password (a very long one preferably and one you don’t use elsewhere) and a filesystem type (I’m using FAT for highest compatibility) and format the volume.

Now, drag your encrypted file container from Dropbox to TrueCrypt and mount it.  Volia!  Super-secure disk image to go.  You can drag important documents and password files directly into the mounted volume (shows up like a USB disk in Finder):

When you unmount the volume (either through TrueCrypt or Finder), it is automatically re-encrypted.  Even if your Dropbox account is somehow compromised, your secure volume files remain encrypted and protected.

I also keep a copy of the TrueCrypt application inside the Secure Files folder in case I’m on a Mac that doesn’t have it.

Now you can keep your password file guilt-free!

Good Idea: Corey Vidal version

First, let’s set the record straight. Moosebutter (below) is the group that wrote and sang the song, even in the version above. Corey himself claims that he is merely lip-synching. However, his video came first — the concept and execution are originally his. It should be rather apparent why so many people loved this video instantly. What really sets him apart from the crowd is made evident by the other version:

Bad Idea: Moosebutter version

Before we go into the specifics — the technical nitty-gritties — as to why this is inferior to Corey’s, let’s begin with the larger picture. Fundamentally, Corey’s video is neat because he’s in each of the four subscreens, “playing out” the various parts. In this version, the band members are in each screen, and even though they’re singing the song live, it is already far less impressive. In addition, there’s one part in the video when it is (accidentally) revealed that they are standing next to each other. This fact further diminishes this video, because much of what makes Corey’s version so attractive is the amount of work he had to put in it. At the very least, he had to record himself four times. Not so for this video.

A screenshot is worth a thousand words

I originally wanted to capture multiple screenshots of the Moosebutter video, detailing when and where something went wrong. I will save myself the trouble (and save you from the pain) by just limiting myself to this one. Not only do you see a mysterious elbow enter frame (circled), but so much more could be said just from this frame alone.

First, nobody here is fully in frame, except the Top-Right Guy. In other words, their edges are cut off — this is most apparent with Top-Left Guy. If you’re going to stand next to each other, at least give one another enough room so you can utilize the full frame.

Second, lighting is flat for everybody, save for Bottom-Right Guy. I know this isn’t supposed to be a professional video, but even Corey’s lighting was much better, mostly because it was consistent. What Moosebutter saved in time (doing everything at once), they sacrificed for visual quality.

Speaking of visual quality, did you notice their edges are blurry? This is more apparent in the beginning of the video when they’re standing behind the white wall. That was my initial reaction when I first watched this clip — why does it seem like a Gaussian blur was applied to each of them?

Well, this screenshot gives the answer: they’re standing in front of a greenscreen in order for them to pull off this special effect. I would then ask this question: why have this effect? It doesn’t add anything to the video, other than that it’s a special effect. This flies against my philosophy in filmmaking: Don’t do special effects for the sake of having special effects. Rather than wowing the audience, it has the opposite effect: it ruins the video a bit. Corey’s video is amazing because the audience realizes that he’s doing everything in-camera; everything is done during production. This video, on the other hand, lost some credibility because it raises questions as to how much was done in post-production. When this “star field” comes up, immediately another layer of credibility is lost – they could’ve done anything and everything in post. Now, having done some film myself, I know that this is not true (post-production cannot accomplish everything). Yet, this is the emotional feeling that I get once this special effect came up. Bottom line: this effect did more harm than good.

Truth can be harsh

Inevitably, someone out there will wonder why I’m dogging on Moosebutter so harshly. I would like to respond to that with three points. First, though I admit that this is rather harsh, I hope it doesn’t come across as mean-spirited. In fact, I have more things to say about the video, but I’ll leave with just the four aforementioned points. Second, even though Corey is an amateur, his video comes across as somewhat professional because of the lack of mistakes. The inverse proves to be true with the Moosebutter video. Oftentimes, the difference between a professional video and an amateur one is not the big things; it’s the little things here and there that separate the two.

Finally, I put my videos under the same level of scrutiny. In fact, when I ask for feedback, I expect nothing less than people being dead-honest with me. Those are the most difficult comments to bear — yet those are also the best. Here are two critiques I’ve provided for my crew on one of my latest videos: one for the cameraman and stage helpers, and the other for the actors. (Post about the video itself soon to come.)

More about the design process after the jump »

I wanted the poster to be relatively simple, yet I wanted it to be attractive in inviting people to the event. Since I have a day job and lots of other work, I didn’t want to spend more than a couple of hours on it, yet at the same time, I didn’t want the result to be crude and ugly. Thus, early on in the decision-making process, I knew that I wanted the poster to be a photograph of something, with minimal frills and flares added to it.

Evolution

1. First, I went straight to Flickr to find an image. I found a photo of bubbles blown into the evening sky (top-left), cropped it, and added some text to the bottom.
2. I found it to be a tad too frou-frou, so I channel-mixed the colors to a greener, more retro shade (top-right).
3. After consulting with some of my design friends (who also happen to be in Kairos), we thought that the resulting image was still too abstract. Thus, I found a photo of Berkeley from our Welcome Night two years ago, removed a few bubbles, modified the font a bit, and composited them together (bottom-left).
4. Since the sky takes up almost two-thirds of the whole poster, I painted in some clouds (with a clouds brush) to make the sky more interesting to look at. I tweaked the colors, added a vignette, and threw in some small text on the bottom, and out comes the finished product (bottom-right).

I think the whole process took me two hours; finding the right photos alone took about half an hour.

You can download the .psd file for your own enjoyment (14mb).
My fonts of choice are: Bauhaus 93, Museo, and Miso.

One advice: use grids

One thing I find again and again with novice graphic designers is the lack of attention to typography, specifically, in laying out text without the use of grids. Grids are a designer’s friend! Simply adhering to grids can make a graphic 5x better. In my design, “Kairos Welcome Night” was about 4 blocks tall; the info line beneath was about two, and the tiny line about one. Notice the vertical spacing between the text, too. Properly sticking to grids gives rhythm and meter to the type; it allows the text to have “breathing room” and makes them much more pleasant to look at.

Additional reading

I think I’ve only begun scratching the surface in creating posters/designs. Again, this was a relatively simple poster — more time and effort are involved in more complex designs. I came up with two more resources that have more in-depth tutorials on poster designs:

The CONNECTED poster

This article came out today! They’re very thorough in articulating the design process. I was pleasantly surprised at the depth to which they covered their pre-design process. Indeed, so much work is often expended before the designer even opens up Photoshop, and I’m glad they captured this in their blog.

Read more about the CONNECTED poster article »

ISO50

Amongst my friends, it is rather well-known that I’ve been a big fan of ISO50 (aka Scott Hansen) for some time now. I’ve bought four of his posters (one I gave away to a friend in Taiwan). In fact, the Kairos poster was largely inspired by one of his for a recent event:

ISO50 is probably more well-known to the general public for his Obama Print. He has an amazing article detailing that process — it’s a beauty to see the print evolve, and reading his insights is a real gem. Unlike the Kairos poster, which is designed only for web consumption, Scott’s end goal is to produce a physical print, and a good chunk of his article is dedicated to detailing that (“post-design”) process.

Read more about the Making of the Obama print article »

Acts2fellowship, Koinonia, and Kairos (three Christian fellowships) will be hosting a huge event — New Student Welcome Night — on the UC Berkeley campus this Wednesday and Thursday. In the past, we’ve always faced the same challenges in coming up with video ads for this event. Each video must:

• Be interesting and engaging (obviously)
• Involve many college students
• Have a quick turnaround from storyboarding to execution

In trying to come up with this year’s videos, we came across a neat music video from a Japanese band:

Sour – Hibi no neiro

Their music video works on so many levels, but I’ll highlight just two. First, it’s beautiful in its simplicity. The format is rather straight-forward: the screen is divided into separate parts. Don’t get me wrong — much labor went into thinking things through and choreographing all the parts. However, in the end, there is no dialogue, no special effects… no post-processing of any sort. In fact, they recorded each screen via webcam.

This brings me to the second aspect. Though the concept is nothing new, they pushed it to its extremes. As the video progresses, the interactions amongst the individuals (or “screens”) become more complex, and therefore, more interesting. In other words, they didn’t show you four minutes of the same thing; they presented four minutes of a framework that’s evolving. They reveal the trick in its simplest state in the beginning, and they build it up. In the final sequence, just thinking about coordinating 64 different people for an 8×8 grid blows my mind.

Circling Back

We decided that this is the perfect format for our video ads. Since we’re only making ads and not music videos, each one can be shorter in length (thus simpler to create). I showed this to two college students who have been trained in the fine art of making videos and told them to run with it; the above two videos are the fruit of their labor. The first one took just one week to complete (this student devoted his entire life to this project for that one week, though), and the other about two weeks.

Check out the New Student Welcome Night site (and event)!