What We’ll Be Creating

Resources Used In This Tutorial

• Ipad By Krdesign
• Practika Icon Set
• Aquaticus Social Icon Set

Lets Get Started, Creating Your Document

Create a new document (Ctrl + N) 1200×800 pixels, change your foreground color to #51a2bc and background color to #36697a. Now select the “Gradient Tool” (G) with a reflected gradient.

Drag the reflected gradient from the top left corner of the canvas, dragging diagonally towards the bottom.

Creating Our Circles Pattern

This layout uses two custom patterns, a stripes pattern and a circles halftone type pattern. We’ll create the circles pattern first. Create a new (Ctrl + N) document 16×16 pixels, zoom in 3200% then replicate the image below using a 1px brush or pencil.

Once you’ve replicated the image above save it as a pattern by going to “Edit > Define Pattern”. Head back to your canvas then create a new layer above your background layer then fill (G) the background with your pattern.

Add a layer mask to your circles pattern then change your foreground color to white #ffffff and background color to black #000000, select the gradient tool with a radial gradient.

Drag the radial gradient from the top left, downwards, your looking for something like this.

Creating Our Stripes Pattern

Create a new (Ctrl + N) document 4×4 pixels, zoom in 3200% then replicate the image below.

Once you’ve replicated the pattern above save it by going to “Edit > Define Pattern”. Once you’ve saved it head back to your canvas and fill the pattern on the background on a layer underneath the circles pattern. Now, set the lines pattern blend mode to “Soft Light” and opacity to 30%.

Creating The Foundations Of Our Layout

Select the “Rounded Rectangle Tool” (U) then drag out two rectangles. The first rectangle should be about 305×620 pixels in the color #181b20.

The second rectangle should be around 680×620 pixels and in the color white #ffffff.

Allow the rectangles to overlap but make sure the white rectangle is on top of the blue one.

Creating The Header

Select the “Type Tool” (T) then in the top right corner add your layout title and slogan.

On the right side of the layout in line with the title add some social icons from the “Aquaticus Social Icon Pack.

• Aquaticus Social Icon Set

You should now have something like this.

Creating The Navigation

Using the “Type Tool” (T) add your navigation inside the white rectangle at the top.

Select the “Rectangular Marquee Tool” (M) then make a selection inside of your white rounded rectangle.

Set your foreground to #e3e3e3 and background to white #ffffff then select the “Gradient Tool” (G). Drag the gradient from the top of the selection downwards, down go all the way down, just drag about 200 pixels down.

Select the “Rectangular Marquee Tool” (M) once more then drag out a 1 pixel selection spanning the width of the white rounded rectangle, the selection should be on edge of the gradient we just added in the previous step. Fill (G) the selection in the color #c7c7c7, then repeat the process again only this fill (G) the selection in white #ffffff.

Creating The Featured Area

Underneath the navigation divider line add a title and a small paragraph.

Download the Ipad by Krdesigns then open it up in photoshop. Drag one of the ipads to the side of your paragraph text in the featured area. Duplicate the ipad, then resize it with the “Free Transform Tool” (Ctrl + T). Make the duplicated ipad a little smaller than its original, once your happy select the bigger ipad layer then blur it by 1% “Filter > Blur > Guassian Blur”.

• Ipad By Krdesign

Next, select the “Rectangular Marquee Tool” (U) and drag out a small button sized rectangle underneath your paragraph text.

Once you’ve created the rectangle add the following layer styles.

You should have something like this.

Duplicate your button then move the duplicated button over towards the right. Label each button accordingly.

Creating The Gallery

Select the “Type Tool” (T) then add a new title underneath your featured area, once the new title has been added add a small paragraph.

Set the color #e3e3e3 as your foreground then create a rectangle using the “Rounded Rectangle Tool” (U).

Now load a selection around your grey colored rectangle.

Once you’ve loaded the selection go to “Select > Modify > Contract” and contract the selection by 10 pixels. Now copy and paste your desired image to the clipboard then go to “Edit > Paste Into”, if your using CS5 go to “Edit > Paste Special > Paste Into”.

Creating The Twitter Sidebar Section

Download the twitter icon from the Practika Icon Set, then drag the twitter bird onto your canvas. Resize the icon using the “Free Transform Tool” (Ctrl + T).

• Practika Icon Set

Select the “Custom Shapes Tool” (U), then select the speech bubble shown below.

Drag out a speech bubble inside the sidebar.

Now add the following layer styles to your speech bubble.

You should have something this.

Select the “Type Tool” (T) then add some twitter text inside of the speech bubble.

Select the “Rectangular Marquee Tool” (M) then create two 1 pixels on top of each other.

Add layer mask to your lines then drag a reflected gradient from the middle of the lines outwards. When you select the gradient tool make sure the color white is set as your foreground.

Creating The Skills Sidebar Section

Using the “Type Tool” (T) create a new title, then create a list of your skills in list form.

Underneath each section create 5 small circles using the “Circle Tool” (U) or the “Elliptical Marquee Tool” (M).

Once you’ve created the circles use these layer styles for your unused circles.

Add the following layer styles for your used circles.

Adding The Finishing Touches

There’s a couple of things left to do, start by simply adding some footer text at the bottom of the layout.

Next we need to add a shine to the twitter box. Select the “Pen Tool” (P) then make a small similar to the one in the image below.

Once you’ve made the path fill it with the color white (#ffffff) then load a selection around your speech bubble.

When the selection has been loaded select the shine layer and go to “Select > Inverse” then hit the delete key. You should be left with something like this.

Now set your shine layers opacity to 2%.

Finally we need to add our little hover arrow above our navigation bar. Select the “Rounded Rectangle Tool” (U) then create a very small rectangle above one of your navigation items. Once you’ve created the rectangle cut away the rounded corners at the top.

Now add the following layer styles.

Select the “Polygonal Lasso Tool” (L) and make to triangles behind the rectangle.

Lastly add a small arrow inside of the rectangle.

Conclusion

The final result should look something like this.

Thanks for taking part in this tutorial, maybe you could share some of your results by posting them below.

Download Source File