Background Design Process: The Comedy Club

This is another post focusing on my professional work at CrowdStar. I'm going to take you through my background design process.

First I started with a small marker sketch using iPad proportions (below). I also blocked in some values with a gray marker. Simply planning ahead will make my Photoshop job easier.

Scan it. Open it in Photoshop. And starting painting in a layer right on top. Watch the nifty 2 minute screen recording below! 

 

Check out the rough painting below. 

And the final vector illustration (below). This is what it would look like in the game with the HUD and the Funny Fish and some props.

Game Background Process: High School U.S.A. – Fish With Attitude

I thought it would be cool do something different and show my design process from start to finish. I'm going to show you how I create an iPhone game background for Fish With Attitude. There is no interactivity or panning of the background itself, so I simply start with an iPad or iPhone sized box with a designated area at the bottom for props.

For this virtual fish tank, we needed a cartoon high school hallway for the Nerdy Fish to occupy. I want it to have a cartoony Saved By The Bell feel. Timeframe is 2-3 days to complete this background from sketch to fully rendered in color.

The first draft (below) is a 2 minute sketch.

The second draft (below) is the same layout but cleaned up. Probably around 10 minutes.

The first draft was approved because we agreed that the curviness suited the game and–more importantly–the character's personality. This rough Photoshop mockup (below) does a fine job of conveying the color and quality of my concept, but it needs more polish before going into the game.

The final background has to be rendered in Illustrator or Flash, because it needs to be scalable. It would take forever to tailor the background to every iPhone, iPod, iPad, Android, high res, low res, device on the market. Instead we use one vector background file which is scaled, stretched, and cropped for all phones and tablets. The final version (below) ended up a little brighter and deeper than my rough.

This is more or less what it would look like with Characters and everything layered on top.

Property of CrowdStar 2014

Vector Illustration Technique: Shadow Color

This is a watercolor painting technique from a book – it's called a "double wash" – which I simulated in Adobe Illustrator. I break down the process step-by-step in the black boxes below.

Vector Illustration Technique: Big Interior

This is a copy of an animation background from Dreamworlds. As I mentioned in my previous post, building backgrounds in Illustrator isn't as intuitive as Photoshop painting or traditional drawing. I've found that it's helpful to practice in Illustrator when the end product is going to be vector.

Also, after copying a couple of these, you will start to get a feel for the minimum amount of shapes that it takes to achieve the animation background look.

You can see the basic shapes that I've laid down in the first pic. Then in the second pic I'm laying  down as few colors as possible to accurately copy what I see using mostly gradients. I don't need to take this any further since it's just a copy, but I like this secondary color scheme and I may use it again in the future.

Vector Illustration Technique: Trees using Blob and Splatter Brush

Most of my CrowdStar game art is either created or traced in Illustrator. It's great for production but without the proper tools Illustrator feels harsh and unnatural. However, using the Blob brush and Scatter brush can add looseness and variety to your work. In the example below, I copied a Hans Bacher background concept from a book in about 10 minutes using a combo of Blob and Scatter.