Littleton Cyclery

How does one take roughly 30 different stock photos, a few original photos, and a specific communicative theme and make them all work harmoniously to manifest a singular, uniform scene? The short answer is lots of digital painting, lot’s of isolating, lots of levels, and lots and lots of layers. The long answer, however, has more to do with principles of classic art composition and some background in visual storytelling techniques. Let’s dissect a little and dive in.

Scrolling from left to right, observe the overall feel and color scheme. On the extreme left, we see mountain bikers in a rugged, dry setting with dirt-trail colors and tones. Scrolling right, the scene progressively becomes green and blue, and very lush, crisp and clean. Perhaps this was inspired by my experiences on the saddle of both cycling disciplines. Even merely analyzing the tire of my mountain bike, my instinct was to imagine red clay and rough terrain, as mimicked by the rugged plateaus and steep angles of the appropriately outfitted tire. On the road bike, the tire is clean and streamlined. This is not only in the sense of the tire being smooth and narrow, it also has a sense of being a far more expansive and fluent ellipse. Such features remind me of the fluid curves of a winding paved road and the sleek appearance of a landscape filled with pointed greenery. This overall transition in color palette is also a transition in tactile response and in mood. On a side note, I’d like to point out that I have ridden my mountain bike on clean pavement surrounded by greenery many times. But whenever I have, I always felt a little out of place. And I’ve ridden a road bike on mountain trails… but that was called Cyclocross, and that is just all-around crazy on too many levels. Never mind feeling out of place there. That’s the whole idea of the sport.

Having established a visual story, some key elements were needed to identify the primary topics of the site. Click on the mountain bikers and you are directed to the mountain biking section of the site. Click on the information sign and you are directed to information about Littleton Cyclery. Click on the attractive woman wearing noticeable gear in the foreground and you are in the gear and accessories section. the concept applies to all clickable objects. It appears at a glance that these objects all tie in to the scene rather seamlessly, but each of thee objects come from very different source materials. Different photographers, different lighting, different colors, even different grain patterns. To get everything to sing one song, some real Photoshop finesse is needed. This is where a background in classical art technique becomes necessary. The single most unifying features of each object in the cohesive whole is the contrast, saturation, and grain pattern. The overall scene is rather rich in color. Shading has a short gamut, with the darkest shading being a strong, abrupt black. This is all the result of modifying and exaggerating the values of each object to the point where they all appear to have similar shading and contrast. It is not photo-real, but it ties everything together. The final touch is to run each and every graphic component through a very minor grain filter. The intensity of the grain should be as minimal as possible, but done to the point where everything is consistent.

There are many more steps and calculations involved in creating a complex, faux-3D interface like this. But the key factors are the same as with any compelling image. A still image should create movement with it’s composition. And a composition should be defined by the story it wishes to tell. From conceptualization to Photoshop to Flash implementation, those principles were the guiding authority on every decision.

view project :: littletoncyclery.com