Guide: Creating Windows 7-like Interface with Photoshop CS4, Part I

It’s been a while since I last wrote a tutorial with Adobe Photoshop. Truth is, I have a lot in my mind, but I didn’t write it down because I don’t know if it would be useful for the readers. If you guys want me to write a guide on a particular trick, do let me know (you can comment here too)

Introduction

Microsoft will be releasing their flagship Windows 7 in about 3 days from now. Most people who’ve tried it likes it (including yours truly). One thing I noticed is their subtle update on the general user interface, and a major revamp of the taskbar. One of my activities that I love to do during my spare time is to try to replicate certain user interface, graphically to understand what kind of detail do they put into focus that makes everything appears as it is.

This guide is separated into 3 parts:

First part will focus on reproducing the skeleton of the application windows in Windows 7
Second part will focus on reproducing the contents of these windows (i.e. explorer)
The last part will focus on reproducing the taskbar of Windows 7

This guide is written for Adobe Photoshop CS4. Most of the process can be achieved with any previous version of Adobe Photoshop, but some workarounds will be needed.

Part I – Windows 7 application window frame

To begin, load any of your favorite wallpaper (or any images) that we can use as a background image (this will make it easier to see the effects later on). However, if you wish to proceed with a plain color, feel free. Do avoid pure black and white though, as it will make the effects to be subdued and might make it difficult for you to fine tune the outcome. For this example, I will be using a wallpaper called Age of Strife by myINQI from DeviantArt.

Figure 1: Load any wallpapers or images to be used as a background image. No wallpaper? Checkout some of my collections.

Next, create some guides to mark the size and position of the window interface that we’ll be creating. This step is entirely optional, but I find that having guides helps a lot in getting things straight and aligned nicely. Don’t know how to create a guide? First, make sure your ruler is turned on (Ctrl+R), then click on the ruler and drag your mouse into the image. You can do this for both horizontal and vertical rulers to create the guides respectively.

Figure 2: Nice and guiding guides

Now, from the Tools palette (the one on the left with many icons), set your foreground color to black. Then, click and hold your mouse on the shapes tools and choose the rounded rectangle shape. On the toolbar above, set 10px as the Radius.

Figure 3: Setup your tools in this manner

Proceed to draw the rounded rectangle, following the guides you have created before (or any freestyle size that you wish to produce).

Figure 4: Draw the rounded square. Oh yeah baby

Next, we need to include some textures to mimic Windows 7′s windows. I have created this texture file for you guys so you can save some time:

Click on it to get the full-sized version, obviously

Now that you have the texture file, open it with photoshop, and paste it on top of your rounded rectangle. Don’t worry if the texture file is way bigger than your document (as it is in mine). Just leave it there.

Figure 5: Gotta love that stripes. Oh yes don’t freak out yet alright?

Make sure the “texture” layer is positioned directly above the rounded rectangle layer. Now right-click on the texture layer and choose “Create Clipping Mask“.

Figure 6: Now, create a clipping mask

If you do it right, you should see that the texture layers are now masked by the shape of the rounded rectangle layer below.

Figure 7: You just got to love the uber-ness of the clipping mask feature

Once you’ve done with the cheering and jiggling, let’s proceed. Now let’s set the Blending Mode of the texture layer to Screen, and set the layer’s Opacity to 50%. Lost? see figure below.

Figure 8: Add some magic to this layer to make it awesome

Now, hop on to the rounded rectangle layer, and change the Layer fill to 20%. At this point you should see a pretty pointless textured translucent rounded rectangle being made. Note that you can turn the guides off and on by pressing Ctrl+;.

Figure 9: Yep that’s about right

Let’s add some borders and highlights to make that shape more useful now, shall we?

Select the rounded rectangular layer, then right-click, and choose Blending Options. Set the blending options as follows:

Figure 10

Drop Shadow:

Blend Mode: Multiply
Opacity: 100%
Distance: 0px
Size: 15px

Figure 11

Inner Glow:

Blend Mode: Normal
Color: White
Technique: Precise
Choke: 0%
Size: 1px

Figure 12

Stroke:

Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Color: Black

You should now have a pretty neat looking frame.

Figure 13: Yay now it looks better

Now is the time for some more effects. Right-click on the background layer (not the one named ‘Background‘, but rather, the one that you have your background image on), and choose Duplicate Layer. Name it anything you want and hit OK.

Figure 14: Duplicate Em

You should now see two layers with the same background image. Select the one on top, and choose Filter -> Blur -> Gaussian Blur from the menu bar. Set the radius at 4.0 and click OK.

Figure 15: Let’s make it blur baby!

You should have something like this:

Now, time to mask that blur only to the areas behind the window. To do this, make sure the blurred background layer is selected, and while holding the Ctrl key, click on the Shape Mask on the rounded rectangular layer. If you do it right, you should see the “marching ants” appear in the shape of the rounded rectangle:

Figure 17: Let the ants march!

Next, while the ants are marching, and the blurred background layer is selected, click the “Add Layer Mask” button at the bottom of the layers palette.

Figure 18: Create a masked blurred background layer

Some magic will occur and now only the areas behind your window is blurred.

Figure 19: Yay!

Okay now that you’ve sort-of mastered the art of layer masking, let’s add some glitter to the window border. To do this, create a new layer above the texture layer (make sure it is not affected by the layer clipping mask).

Figure 20: You now have a new layer. Now head down to the nearest bar and celebrate!

On the new layer, select the Gradient Tool (click and hold on the Paint Bucket tool if you can’t find it). Set the Gradient type to Linear on the toolbar on top, and select the “Foreground to transparent” gradient type, and make sure your foreground color is White.

Figure 21: Setup the Gradient Tool

After that, click and hold your mouse anywhere about 1/3 from top of the image, and drag the mouse cursor upwards, while holding your Shift key (this will ensure the Gradient is perfectly straight).

Figure 22: This is how you do it

Release your mouse button and you should see something like this:

Figure 23: Yay now the image is almost destroyed. Don’t panic. More steps to go

Select the Marquee tool (some people call this the Select Tool) and draw a rectangular around the 2/3 of the bottom part of the image.

Figure 24: Select the lower 2/3 of the image. In case you are somewhat intellectually-challenged, you can work this tool by clicking and dragging a box over the mentioned area

Now press your delete key (on the keyboard, obviously). And you’ll get:

Figure 25: Chunk of the gradient is now gone

Now go to Filter -> Blur -> Gaussian Blur again, and this time, apply around 2.0 pixels worth of blur. Once you’re done, do the same Layer Mask technique as the blurred background layer (scroll up and read again if you forgot). Then, reduce the layer’s opacity to 50%. You should now get something like this:

Figure 26: Masked, reduced opacity layer

Now turn the guides back on (in case you turn it off earlier), and create four more guides as follows:

Figure 27: The gaps between the guides are – Top: 30px. Left, Right, Bottom: 10px

Next, ensure your foreground color is White. Now choose the “Rectangle Tool” (it is at the same place as the Rounded Rectangle Tool, click and hold to change the type of shape) and draw a new rectangle according to the size of the newly created guide above. You should have a blank white box in the middle right now.

Figure 28: New white box!

Apply some Blending Options to this layer as follows:

Figure 29

Outer Glow:

Blend Mode: Screen
Opacity: 100%
Color: White
Technique: Precise
Spread: 0%
Size: 1px

Figure 30

Stroke:

Size: 1px
Position: Inside
Blend Mode: Normal
Opacity: 100%

By now you’ll have something like this:

Figure 31: Almost Done!

Alright now one small step left, that is the window title. This is pretty easy to do, just use the Type tool and type whatever you want on top. The font settings are as follows:

Color: Black
Font Family: Segoe UI
Font Size: 12pt
Anti-Alias Method: Crisp

Then, apply these Blending Options to the text layer:

Figure 32