Software Layout #4

Hello welcome to tutorial 216 by hv-designs, in this tutorial il show you how to create a sleek looking software layout, currently the 4th software layout in our database.

 

Setting Up Our Canvas

Open up photoshop and create a new document, the dimensions should be 1200 x 1200 pixels.

Step1

The background can be any color as we’ll be changing it in the next step.

Creating Our Background

Set your forground color to #585858 and your background color to #282425. Select the gradient tool with a radial gradient.

Step2

Once you’ve selected your radial gradient drag out the gradient starting from the top middle part of the canvas dragging down towards the middle of the canvas.

Step3

Creating The Website Title

Using the colors white #ffffff and the color green #d7e400 add your website title and slogan.

Step4

The font i used and settings are located in the screenshot below.

Step5

On the right side of the title add your simple support toll free number.

Step6

The layer styles used for the free toll number are as follows.

Step7

Step8

Step9

The text should now be transformed into something like below..

Step10

Creating The Navigation

Select the rounded rectangle tool with a radius of 10px.

Step11

Drag out a rectangle underneath your website title, fill the rectangle with any color.

Step12

Zoom into one of the bottom corners of the rounded rectangle, select the rectangular marquee tool and create a selection cornering off the bottom corner.

Step13

Fill the selection on the same layer then do the same to the other bottom corner. The end result should be something like this.

Step14

Now add these layer styles to your navigation.

Step15

Step16

Step31

Step18

You should have something like this.

Step19

Adding The Navigation Links

Add your navigation links over the top of your navigation bar using the type tool. Ive opted for a simple arial font for the navigation text.

Step20

Once you’ve added the text add these layer styles.

Step21

Step22

Creating The Software Summary Box

With the rounded rectangle tool on a layer underneath your navigation layer create a big rectangle. The rectangle itself should be the same width of the navigation and the top corners should be hidden underneath the navigation.

Step23

Now you’ve created the rectangle select the gradient tool with a radial gradient. Using the colors #d3df00 and #b4c00a add a radial gradient over your rectangle in the same way we did our background.

Step24

Now add this stroke layer style to complete this step.

Step25

Software Summary Box Content

On the left side of the software summary box add an image of your software or a logo. As i dont have any software to feature ive used a report icon from smashing magazines free icon set.

Step26

Next to the icon add a title with a paragraph.

Step27

To the title add these layer styles.

Step21

Step22

Creating The Try Now Button

Using the rounded rectangle tool still with a radius of 10px, create a small rectangle, Fill the rectangle with any color.

Step28

Now add these layer styles to your button.

Step29

Step30

Step31

Step32

Add your button text then add these layer styles.

Step21

Step22

You should have something like this.

Step33

Creating The Content Area

Using the rounded rectangle tool create a big rectangle underneath the summary box. The box should be the same width.

Step34

Add these layer styles to your big rectangle.

Step35

Step36

Creating The Sidebar

Using the rectangular marquee tool make a selection the same height as the content area and any width.

Step37

Once you’ve made the selection fill the selection with any color then add the same gradient overlay as the content area.

Step35

Now add this drop shadow.

Step38

You should have something like this.

Step39

With the rectangular marquee tool again create a black square which covers the sidebar area. The layer should be underneath the other rectangle layer which contains the drop shadow which makes up the sidebar.

Step40

Set the black rectangles layer opacity to 4%. This just adds a darker shade to the sidebar area.

The Content

Your layout is now ready for its content. Using a combination of headers and paragraphs to build up your content area. Ive included some icons from “wefunction” just to spruce it up abit.

Step41

The Footer

For this design i opted for a simple text footer.

Step42

The Finished Layout

Finished

 

Enjoy