TEMPLATIS

This is a three step tutorial. We will be creating the following:

Step one focuses on the Window Control icons, top

Here is a video showing the steps required:

Here are the steps in greater detail:

Create a new document 379×120

Change your foreground color to #c4c4c4

Change your background color to #969696

Select your Gradient tool, draw a vertical gradient

Create a new layer, call it Circle

Select the Circular Marquee tool, draw a circular marquee 14x14px, fill it with any color

Add a gradient overlay to your Circle layer, radial, #fdaeae – #ad2224

Choose Layer>Layer Style>Create Layer. This separates your effect from its layer. You now have a layer called Circle and a layer called Circle’s Gradient Fill. Nudge your Circle’s Gradient Fill layer down so the light area begins towards the bottom of your Circle layer

Add a Drop Shadow to your Circle layer: #d9d9d9, 75% opacity, distance 2

Add an Inner Shadow to your Circle layer: #511113, 75% opacity, 94 degree angle, distance 2

Add a Stroke to your Circle layer: 1px, centre, #782526

Create a new layer, call it Shine

Draw a circular marquee, 4x3px, position it towards the top of your circle, fill it with white, turn the opacity down to 80%

Create a new layer, call it Color Fill

Select the Marquee tool, create a rectangular marquee 14x6px place it in the middle of your circle, fill it with #e42426

Select the Type tool: Arial, 11px, Bold, -3 baseline shift, Vertically scale 80%, #832727:

Type ‘x’ (lowercase)

In the Paragraph palette, center your text

Commit your changes by pressing Command+Enter

Our Close button is complete!

Onto the Minimize button

Select all your existing layers (except the background) and group them

Call your group ‘x’

Duplicate your group, call it ‘-’

The core features will remain the same for our Minimize icon but we’ll need to change the colors of the Effects and replace the x with a -

Change the Stroke color on the Circle layer to: #571915

Change the Inner Shadow color on the Circle layer to #511113

Ther Drop Shadow on the Circle layer remains the same

Select the Gradient Tool, draw a new radial gradient on top of the existing one, the light yellow should be #fbde6f, the dark yellow #cf652a

Change the color of the Color Fill layer to #54912d

Delete the text layer that contains the x

Create a new layer, call it Minus Sign

Select the Marquee tool, draw a rectangular marquee 8x2px, fill it with #814424, this is our minus symbol.

Our Minimize button is complete!

Onto the Maximise button

Duplicate your ‘-’ group, call it ‘+’

The core features will remain the same for our Maximise icon but we’ll need to change the colors of the Effects and replace the – with a +

Change the Stroke color on the Circle layer to: #30541f

Change the Inner Shadow color on the Circle layer to #234b12

The Drop Shadow on the Circle layer remains the same

Select the Gradient Tool, draw a new radial gradient on top of the existing one, the light green should be #bde17a, the dark green #72b542

Change the color of the Color Fill layer to #54912d

Duplicate your Minus Sign layer, call this layer Horizontal Bar choose Edit>Free Transform, rotate your Horizontal Bar layer by 90 degrees, position it in the center of your minus sign, so you have a cross shape. Merge both layers and call your layer Plus Sign

Our Maximise button is complete. This ends Step 1

On to Step 2: Creating Back/Forward buttons

Click to download PSD templates, web templates