Replicating the Macintosh Window

Step 1

Create a new document

Width: 470 Pixels
Height: 200 Pixels
Background: White

Step 2

Create a new layer named "Base". Make sure it is your active layer(layer you are currently editing). Set your Foreground Colour to #F0F0F0 then take the Rounded Rectangle Tool.

Click to enlarge

Step 3

Now with the rounded rectangle tool create a rectangle that is 430x180 pixels. Next you want to duplicate the current layer, name it "Titlebar", and make sure it is your active layer.

Step 4

Take the Rectuangluar Marquee Tool(Keyboard Shortcut: M) and from the bottom of the rounded rectangle you just made click and drag up to select 159 pixels. Hit the Delete Key to remove the bottom portion of the rounded rectangle, leaving you with just the upper "titlebar" portion for this layer.

Step 5

Now we are going to apply some Blending Options to the Titlebar layer. You want to add a Gradient Overlay and Stroke to this layer. The settings for both blending options can be found in the screenshot below.

Step 6

Create a new layer named "Seperator". Grab the Pencil Tool

and set your Foreground colour to #AFAFAF. You might want to zoom in to do this part. You want to create a line that seperates the titlebar from the base, so with the pencil tool just draw a straight horizontal line that overlaps the last row of pixels on the Titlebar layer.

Step 7

We are going to add a dropshadow to the whole Mac window now. So let us first hide the Seperator and Titlebar layer by click on the eye beside their layer in the layer palette.

Then go to the Base layer and modify the blending options of this layer by adding a Drop Shadow.

Take the Rectuangluar Marquee Tool(Keyboard Shortcut: M) and select the top 3 row of pixels from this layer and hit the delete key.

We do this to soften the shadow on the top of the window. Select a couple row of pixels from the bottom now and delete as well so there is straight corners on the bottom of the window.

Now set the visibility of the Seperator and Titlebar layers so they are visible again by clicking the eye icon beside their layer.

Step 8

Now we are going to be creating the 3 orbs for the titlebar of the window. Make sure you are on the top layer which should be the Seperator layer. Create a New Layer Set named "Red Orb".

Step 9

Inside this layer set you just created, make a new layer named "Orb Base". Take the Elliptical Marquee Tool

and while holding SHIFT create a circle that is 14 pixels. Then fill the circle with any colour by pressing SHIFT + BACKSPACE and using these settings.

Step 10

Now we are going to stylize this plain orb by modifying this layer's blending options. We'll have to add a:

Outer Glow

Inner Glow

Gradient Overlay

Stroke

Step 11

We're going to add the shine at the top of the orb now. Load the Selection for the "Orb Base" layer and then create a new layer named "Top Shine". Take the Gradient Tool (Keyboard Shortcut: G)

Click to enlarge

and click and drag down so you have something like this:

you'll want to try a few times to get this to look somewhat similar.

Now press CTRL + T to transform this selection, you'll want to scale it down by 83% for both height and width

then press ENTER to apply the transformation. The top shine should now be centered in the top of the orb.

Step 12

Let's make a shine for the bottom of the orb now. The procedure for creating the bottom shine is pretty similar to the top shine minus a few differences. First you want to Load the Selection for the "Orb Layer" then create a New Layer named "Bottom Shine". Take the Gradient Tool this time with the radial gradient

instead of the linear gradient type. Then from the bottom of the orb you want to drag up towards the center until you have something like this:

Take the Move Tool(Keyboard Shortcut: V) and press the UP ARROW once to move the bottom shine up one pixel. Now change the Blending Mode to Overlay so that the bottom shine blends in better.

Step 13

You have learned how to make the orb, so now we want to create two more so what we are going to is just Duplicate the Layer Set to create the yellow and green orbs. To change the colour of the orbs just edit the Gradient Overlay for the Blending Options so that the gradient is the colour you want the orb to be. Once you have finished you should have something like this below.

Step 14

The last step is to create the button on the top right hand corner which hides the main Mac window. What you do is repeat steps 9-11 again with a few modifications. Instead of using an elliptical marquee tool you want to use a Rounded Rectangle Tool with a radius of about 10pixels. For the Blending Options take out the Inner Glow and for the Gradient Overlay change the colours to a white to gray colour.

Final Product

That's it, hope you enjoyed this tutorial!

I also wished that you were able to learn something useful in this tutorial. This tutorial is just the basis of trying to replicate the window on a Mac, you can go further and add further details. Remember the whole point of a Mac is the detail and care taken in building everything that is why all of our steps detailed here go indepth on doing things certain ways so that it will achieve a specific look that is unique to a Mac. Below is the final product. Buh Bye!