Mac Interface

I get a lot of requests for tutorials and this was my most recent. The ever famous Mac style interface. Enjoy.

To begin, create a new canvas at a size of 389 x 336 with f6f6f6 as your color.

Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 10 pixels and color White. Name this layer "Interface Frame" in the Layers Palette.

Next we will need to rid the bottom two anchor points of the "Interface Frame" layer and give it a level edge.

To do this, select the "Delete Anchor Point Tool" and click on both the bottom left and right anchor points to delete them.

Now, using the "Convert Point Tool" click on the remaining two bottom anchor points to rid the curves as illustrated in the image below.

Next, let's create a pattern. Create a new document with a width of 1 and height of 3 pixels.

Now use the "Pencil Tool" (or a tool of your choice) to fill in the 1 pixel squares with the below colors. Once complete, go to the main menu and choose "Edit" then "Define Pattern", give it a name and click "OK".

You may now close the pattern canvas and return to the previous document.

Now right click on the "Interface Frame" layer in the Layers Palette and select, "Blending Options...". Now click on " Drop Shadow ".

Do not click "OK" yet. Still more to do.

Now click on " Color Overlay".

Do not click "OK" yet. Still more to do.

Now click on "Pattern Overlay".

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

You may now click "OK".

You should now have the below image.

Next, select the "Rectangle Tool". Draw a rectangle as illustrated below with the color White. Name this layer "Content" in the Layers Palette.

Now right click on the "Content " layer in the Layers Palette and select, "Blending Options...".

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

You may now click "OK".

You should now have the below image.

Now "Ctrl" click the "Interface Frame" layer to create a selection around it. Then select the "Rectangular Marquee Tool" and while holding in the "Alt" key on your keyboard drag out a selection to rid all of the selection but the top portion as shown below.

Next create a new layer and fill with eeeeee as the color. Name this layer "Title Bar" in the Layers Palette.

Now right click on the "Title Bar" layer in the Layers Palette and select, "Blending Options...". Now click on "Drop Shadow".

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

You may now click "OK".

You should now have the below image.

Now right click on the "Gloss" layer in the Layers Palette and select, "Blending Options...".

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

You may now click OK.

You should now have the below image.

Use steps 19 through 21 as well as the below gradient change.

You should now have the below image.

Use steps 24 through 26 to get the gloss effect above the "Yellow Circle" layer.

Now click on "Inner Glow".

Do not click "OK" yet. Still more to do.

Once the gloss effect has been added (Steps 24 through 26) you should have something similar to the below image.

Now click on "Color Overlay".

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

Do not click "OK" yet. Still more to do.

Now click on "Stroke ".

You may now click OK.

You should now have the below image.

Next we will need to move the bottom two anchor points of the "Gloss" layer up.

To do this, select the "Direct Selection Tool" and click on both the bottom left and right anchor points. Now simply use the up arrow on your keyboard to move them up as illustrated in the below image.

Then turn the Fill of the "Gloss" layer down to 66% to get the below effect.

Select the "Text Tool" and use the below settings.

Now type your prefered menu item.

Now right click on the "Blue Icon" layer and select, "Blending Options...". Now click on "Inner Glow".

Do not click "OK" yet. Still more to do.

Now click on "Bevel and Emboss".

Do not click "OK" yet. Still more to do.

Now click on "Stroke ".

You may now click OK.

Now choose the "Ellipse Tool" once again and draw out a circle using 989898 as the color. Name this layer "Grey Icon" in the layers Palette.

Now right click on the "Grey Icon" layer in the Layers Palette and select, "Blending Options...". Now click on "Outer Glow".

You may now click OK.

You should now have the below image.

Select the "Text Tool" and use the below settings.

Now type your prefered menu items.

The Results!!!

The remaining menu icons were duplicated from the previous "Blue Icon" layer, while the menu items themselves had the Fill turned down to 45%. I hope you enjoyed this tutorial.