This is what I saw on it’s homepage:

• Smashing Magazine
• Strobist, DPreview, Joe McNally’s Blog, Digital Photography School
• Mac Rumors, Mac World
• Lifehacker, Seth Godin, Guy Kawasaki

Wow!  How did Alltop anticipate all of my interests?  It was like it knew what all my subscribed RSS feeds were.  Perhaps some new fancy Web tech where they got into my Google Reader feeds or something.  So I fired up another browser, cleared the cookies and went back to Alltop, only to see the exact same feeds!

And so, it hit me.  Alltop is psychic.

That or perhaps all who are part of the my middle-age web techie demographic are all predictably into the exact same things.

Sigh.

Anyways, check out Alltop, it’s pretty cool.

If I could give a few tips (aside from these) to new designers, it would be:

1. Be careful in following after trends (some people love using flares; I hate the depth of field junk)
2. Develop a good color sense

Following after trends is almost inevitable. We like to do what we like, and what we like tend to be the trendy stuff. I’m no exception — I love the retro look and feel. I’m not proposing to never use trendy designs, but rather, use them with caution.

Numero dos — color theory. A good way to start is to minimize your color palette. Too often, I see new designers use the whole spectrum of colors. What usually results is not Avatar but skittle barf (a term Kevan affectionately coined). Don’t be afraid to desaturate your designs — usually, that looks better. There is a reason why Ansel Adams only processed his photographs in black and white.

With that said, I would like to introduce the works of Alex Varanese. If you look carefully at his portfolio, you’ll notice that he’s following after another trend: the use of 3D elements in graphic designs. However, I think most people wouldn’t have noticed this at first glance. This is one of the reasons why his designs are so refreshing because he doesn’t make his 3D images go kablamo into your face; much of his time is spent to tone it down and fit it within a 2D environment (the poster).

Something even more noticeable is his use of the color red. I’ve never seen someone so persistent in using one specific color palette — but it sure works! Even in his reds, he doesn’t go all out — he’s very limiting in his choice of reds, browns, and off-whites. His boundaries doesn’t cripple him in his designs; in fact, they are the very things that make his work look so professional.

What blows me away with his stuff is that he has a ton of hi-quality posters within each series. He seems to have his workflow down to a science, so that he is able to produce at the speed that he does. Very incredible.

View Alex’s portfolio | Read about his process

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.

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 »