How-To: Creating the Cowboy Denim Theme

This is partly a how-to article, but mostly a collection of useful tips for Photoshop and Alien Skin Eye Candy filters. I'm using the Cowboy Denim theme I recently created for the T-Mobile Sidekick as an example. The WQVGA version pictured here is part of the final result.

Almost without trying, this theme became a cornucopia of Eye Candy effects. I use Eye Candy Impact on a regular basis in commercial work, but Sidekick themes are a good chance to pull out some of the crazier stuff. Go check 'em out at Alien Skin's web site.

The Concept

It all started with listening to too much Cowboy Troy. I got to thinking about the pointed yoke on the back of western-style shirts, and created this pattern in Illustrator to match. I set the Illustrator artboard to 400x208, the standard size for Sidekick LX themes, so I could work between both Illustrator and Photoshop without needing to rescale.

I decided to go with a denim background, making the background something of a hybrid between the shirt yoke and jeans. I could have scanned some denim, but for this theme I wanted the denim to be more "hyper-real," with very saturated colors and a stone-washed look that would compliment my lighting.

Creating Denim With Eye Candy Weave

I turned to Weave from Eye Candy Textures and, sure enough, there's a "Blue Jeans" preset. Sounds like a good starting place, huh? I created one layer with that preset, then another with lighter thread colors.

I put the dark denim on bottom, then for the lighter version I applied a layer mask with radial gradient. The result is a rather nice (but subtle) stonewashed look. I then created another pair of denim layers for the yoke. For these I used a different layer mask to simulate two different pieces of fabric. The bottom yoke layer also has an inner shadow layer effect to give it the appearance of height.

In general, I like to keep things on separate layers whenever possible. This gives me maximum flexibility later — I can change the masks, apply a layer effect, or add an adjustment layer at any time.

The final step was creating threads. I used the lines from my concept in Illustrator, applied a dashed stroke, and pasted these into Photoshop as a smart object. A Bevel layer effect completed the look.

Here's the resulting background.

Lighting Effects and Overlay Blending

One of the more useful layer blending modes in Photoshop is Overlay. This combines both Screen and Multiply modes depending on the color of the layer: light colors screen, dark colors multiply. A medium grey has little effect. One practical use of this is for lighting effects. Take a 50% grey layer, apply the Lighting Effects filter, and then change the layer blending mode to Overlay. Viola, now you've got a dynamic lighting effect that applies to all underlying layers.

Here's what the background looks like with the lighting layer.

Creating the Buttons

The advanced version of the Cowboy Denim theme includes jean-like buttons behind the Sidekick's application icons. These were made with a couple Eye Candy filters and my usual layering.

The starting texture here is Brushed Metal from Eye Candy Impact. As with the denim, I used one light layer and another dark. The dark layer has a mask which I brushed partly away toward the center. The rings are simply circles created in Illustrator, pasted into Photoshop, and the light brushed metal texture applied. Then I put a simple bevel and emboss layer effect on them. Ditto for the text.

The reference button I was looking at (think popular jeans maker) had dots on the background of the outer ring. I used the Diamond Plate filter in Eye Candy Textures to create this effect. I kept the background about 55% grey so I could set this layer to Overlay blending. Overlay allows the underlying brushed metal texture to show through the dots (hard to see here).

Creating the Hat

The hat is created in Cinema 4D. I started from a model I purchased from TurboSquid, then worked on smoothing the mesh to my liking and texturing. This isn't a 3D how-to, however, so I'll stick to the Photoshop side of things.

I wanted a lightly felted texture, so I went with straight color and added a bump map. I created the bump map, shown here, using Animal Fur from Eye Candy Textures. In this case the effect is very subtle.

With 3D I tend to render objects with no background, then fake in the background shadow later. This allows me to light the object in Cinema 4D without needing to worry about how the shadows will cast on the background. Then I can create one idealized shadow later in Photoshop. I use Perspective Shadow from Eye Candy Impact for this.

Putting it All Together

For all of Photoshop's impressive features, one thing it won't do is maintain live links to external files. As such, I do final assembly in Illustrator. This lets me do the buttons, backgrounds, etc. as separate files. I need to create six versions of the theme for distribution, but I want to maintain the minimum number of master files possible. Me and File -> Place go way back.