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