In part 2 of my design process series I demonstrated how I import and prepare the HTML prototype ready for designing over. In this article I will show you how to replicate my idea for the design stage of the process.

I decided to go for a spaced theme idea, don’t ask me why, I must of been playing too much Mass Effect 2.

Step 1: The background

Stars

Create a new layer in the background layer group of your layers palette and name it Stars.

Fill the layer with black then run the add noise filter ( Filter > Noise > Add Noise ) and copy the settings below.

Now open the Brightness and contrast panel ( Image > Adjustments > Brightness and Contrast ) You want to decrease the brightness and increase the contrast until the noise defuses to look like stars.

Repeat the process of adding noise and adjusting the brightness and contrast over the same layer, varying the brightness and contrast levels sightly to give a sense of depth. The more you repeat the process the better it will look.

To add some more depth you can use the colour dodge and colour burn tools.

Adding Galaxies

Create another layer above the Stars layer and name it Galaxies. We’re going to use some brushes to add that extra bit of depth. psbrushes.net is a good place to download some quality brushes, I used these brushes by Sunira. When your finished drop the layers opacity down to 50%.

Nebulars

Create another layer on top of the galaxies layer and name it green nebular. Set the background color to black and the foreground color to a bright green, run the Clouds filter, (Filter > Render > Clouds)

Run Difference clouds filter, (Filter > Render > Difference Clouds) Run the filter a few times to (Cmd+F) to intensify the look.

Set the blending of the Green nebular layer to Screen.

Bring up the layer style dialog box by double clicking on the Green Nebular layer. Hold Alt then click and drag the black marker for This Layer to split it into two markers.

Drag the markers until you get a blending that looks like something below.

Create another layer on top of the green nebular layer and name it Blue nebular. Set the background color to black and the foreground color to a bright blue, run the Clouds filter, (Filter > Render > Clouds )

Run Difference Clouds, (Filter > Render > Difference Clouds) Run the filter a few times to (Cmd+F) to intensify the look.

Set the blending of the Blue nebular layer to Screen.

Bring up the layer style dialog box by double clicking on the Blue Nebular layer. Hold Alt then click and drag the black marker for This Layer to split it into two markers.

Then drag the markers until you get a blending that looks like something below.

Lighting

Create a new gradient fill adjustment layer above the Blue nebular layer.

Double click the gradient fill colour box to bring up gradient fill colour editor

Copy the settings below, make sure the gradient end colour is set to 0% opacity.

Click ok to go back to the Gradient Fill box and copy the settings below.

Click ok, now set the Gradient Fills layer blending to colour and its opacity to 50% you should have something like below.

Were going to repeat the Lighting process to add a bit of extra detail. Create a new gradient fill adjustment layer above the yellow gradient layer.

Double click the gradient fill colour box to bring up gradient fill colour editor

Copy the settings below, make sure the gradient end colour is set to 0% opacity.

Click ok to go back to the Gradient Fill box and copy the settings below.

Click ok, now set the Gradient Fills layer blending to colour and its opacity to 50% you should have something like below.

Planet

Create a new layer above the red gradient layer and name it planet. Download this texture from Stock.XCHNG and paste it into the planet layer.

Now select the Elliptical Marquee tool and while holding shift, click above the top left corner of the document and drag to the centre. Once your happy with the selection click the add vector mask button on the bottom of the layer pallet.

Which should leave you with something looking like below.

Using the Burn tool paint the edges of the planet to give it depth.

Open Image > Hue & Saturation and copy the following settings.

Using the Burn tool paint the center of the planet till you have a look that is similar to below.

Bring up the layer style dialog box by double clicking on the planet layer and copy the following settings:

When your done you should have something looking like this.

Step 2: Wrapper

Select the Wrapper Layer Group, Now select the Rounded Rectangle tool and using the guides draw the shapes illustrated below on two layers. Name the top shape Contact Background and the bottom shape Footer background. Use the following as a guide.

Set both layers Fill to 75%, and apply the following layer styles.

When your done you should be looking at something like this.

Step 3: Navigation

Select the Navigation Layer Group, Now select the Rounded Rectangle tool and draw a rectangle for the background for the button.

Note: keep the rectangle inside the guides or it will look cramped when we add more detail later.

Now bring up the layer dialog box and copy the following settings.

Gradient Colour values are

Click ok and the button background layer should look like below

Now create a text layer above button background layer.

Font details are: 12px Helvetica Normal

Group the text layer and button background layer into a layer group. This will make it easier to duplicate buttons.

Now duplicate the Nav Item layer group twice and name the buttons “Home”, “About” and “Contact” move the Nav items so you have the following

Select the Line tool with a weight of 5px and draw a line along the bottom of the navigation area. Use the illustration below as a guide

Name the layer Nav Bar, double click the Nav Bar layer to bring up the layer dialog box and copy the following settings.

Gradient values below

Click ok and you should be looking at this.

Step 3: Header

With the Header layer group selected use the Horizontal type tool to draw a text box in the header area, use the illustration below as a guide.

Note: I’ve let a bit of space at the top and bottom of the header, this is because you can’t add top margin to the first paragrpah in photoshop, Its easier to just drop the text box down to simulate the margin of the HTML. There are two bits of text in the header area, H1 and H2.

H1 font and paragraph details:

H2 font and paragraph details:

Step 4: Content

We’re going to add the large image which is the featured portfolio item.

Download this image from stock.chng, crop it to 700px by 400px and paste it into the content layer group, name the layer featured portfolio item. Use the guides to place the image.

Double click the featured portfolio item layer to bring up the layer dialog box and copy the settings below.

Click ok

Using the Horizontal type tool to draw a text box next to the featured portfolio item, use the illustration below as a guide.

The three font values are H3, H4 and P.

H3 font and paragraph details:

H4 font and paragraph details:

P font and paragraph details:

Using the Horizontal type tool to draw a text box under the featured portfolio item, use the illustration below as a guide. Use <H2> for the font size.

H2 font and paragraph details:

Download the following images from stock.chng (Image1, image 2, image 3 and image 4). crop them to 220px by 200px and paste them into the content layer group, use the illustration below as a guide.

Name the image layers portfolio item 1, portfolio item 2, portfolio item 3 and portfolio item 4.

Apply the layer settings below to portfolio item 1, portfolio item 2, portfolio item 3 and portfolio item 4 layers.

Click ok

Note: I moved the “More Examples of Work” title down to balance the space.

Using the Horizontal type tool to draw two text boxes under the four more example images, use the illustration below as a guide. The two fonts used are H2 and P.

H2 font and paragraph details:

P font and paragraph details:

Step 5: Footer

With the Footer layer group selected use the Horizontal type tool to draw four text boxes in the footer area, use the illustration below as a guide.

The three fonts used are H2, P and A.

H2 font and paragraph details:

P font and paragraph details:

A font and paragraph details:

When your done you should have something like this.

Step 6: Icons

The final stage is to add the Icons, Icon finder is a great way to find Icons. I used the Space Odyssey by Mischa McLachl

Select the More Examples of Work text layer in the Content layer group and change its left margin value to 55 px.

Place the Icon ( File > Place ) I used Dave Bowmans Discovery Helmet.png. Before you hit ok you’ll need to reduce the size by 40% so it will fit.

Use the guides to align the Icon.

Hit the Enter key and you should be looking at this.

Finally repeat the process of placing the Icons next to the rest of the titles until you have something like below. You will have to change the values slightly of the size of the icons and the margins to compensate for the different sizes of icons and to balance the space.