What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

• Woofunction 178 Amazing Icons

Lets Get Started

Create a new document 1200 x 1225 pixels with a white background. Set your foreground color to #eeeff3 then select the rectangular marquee tool.

Once you’ve selected the rectangular marquee tool make a selection about 80px in height spanning the width of your canvas. Fill the selection with your foreground color.

Creating The Header

Select the text tool then add your website title and slogan inside the rectangle using the color #70767d.

After your website title create a small divider, to do this zoom in then make two 1px lines next to each other. Color the first line in black (#000000) and the second line in white (#ffffff), once you’ve filled the lines set the layer blend mode to soft light.

Creating The Navigation

Using the text tool create a simple textual navigation, use the color #70767d for the text then add a drop shadow using the settings below.

The result.

On a layer underneath your navigation text create a rounded rectangle using the rounded rectangle tool. Color the rectangle in the color #e0dfe2, your should have something like this.

Creating The Product Featured Area

Select the rectangular marquee tool and make a selection about 370px in height that also spans the width of your canvas. Fill the selection with any color then add a gradient overlay using the settings below.

Once you’ve added the gradient overlay right-click the layer and go to “Convert To Smart Object”. Now go to “Filter > Noise > Add Noise”, use the settings below.

You should have something like this.

At the top of the featured area create a divider using two 1px lines colored black and white. Set the layer blend mode to overlay.

Once you’ve create the divider line at the top of the featured area, duplicate the layer and drag it to the bottom of the featured area.

Adding Content To The Featured Area

Inside the featured area add a screenshot of your product. Make the product screenshot overlap on to the background past the featured rectangle.

Once you’ve added your screenshot add a drop shadow using the settings below.

Above your screenshot add some text, maybe a title or something along those lines.

Once you’ve added your text add a drop shadow using the settings below.

On the right side of the screenshot add a couple of icons from the icon pack provided in the resources list. Underneath the icons add a smaller title with a couple of paragraphs of text. You should have something like this.

Creating The Download Button

Using the rounded rectangle tool, drag out a smallish rectangle. Again make the button overlap the featured area and background.

Now add the following layer styles to your button.

You should have something like this.

Select the type tool and add your desired text inside the button. Once you’ve added your text add a drop shadow to the text layer using the settings below.

You should have something like this.

You can now duplicate the button as many times as you wish.

Creating The Content Area

Set your foreground color to #f1eeea and background color to #ffffff then select the gradient tool. With the gradient tool select select a linear gradient then drag the gradient over your background layer starting from just above the featured area and dragging about 200 pixels downwards.

Now underneath the product screenshot add a small title saying “From The Blog”.

Underneath your small title add one of your buttons which we created earlier. Re size the button quite a bit then add a month of the year inside.

On the right side of the month box add a post title with a description underneath.

Repeat the steps as many times as need until you get a small blog.

Creating The Gallery

Create a new text heading saying “In The Gallery” then underneath add 3 screenshots of your product. I’ve just used my current screenshot for the purpose of this tutorial.

Finish off the gallery by adding a small paragraph underneath the screenshots.

Creating The Seperators

Select the type tool and keep the dash key (-) pressed until you get a row of dashes. Place the horizontal dashes in between the blog and the gallery.

Repeat the process once more only this time make the separator a lot longer. Once your happy with the separator rotate it by 90 degrees and place it along side the left content.

Finish off the separator by adding a layer mask. Once you’ve added the layer mask drag a linear gradient from about about 50 pixels from the top, dragging upwards to the top of the separator. The separator should blend in with the background.

More Content

Finish off the content area on the right by adding more product related content building up your layout. I’ve chosen to go for a demo section where you can see the product in action.

Creating The Footer

Select the rectangular marquee tool and make a selection around the last bit of space at the bottom of your canvas. Fill the selection with the color #b8bdc8 then add a inner shadow and stroke using the settings below.

Once you’ve added the layer styles press “Ctrl + T” to enter into free transform mode. Select the left anchor point and drag out past the canvas. Repeat the process for the right anchor.

Finally add your footer text somewhere on the footer area.

That’s it all done, hope you enjoyed this tutorial, look out for more tutorials coming soon. Thanks.

What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

• Iphone Icon
• Iphone Button Icons
• Iphone 3G/3GS PSD

Lets Get Started

Create a new document 1200 x 1200 pixels with any color background. Change your foreground color to #f3f3f2 and background color to #d2d2d2 then select the gradient tool with a reflected gradient.

Drag the reflected gradient over your canvas starting from about 400 pixels down from the top of your canvas. Your looking to get something like this.

Creating The Navigation

Select the rounded rectangle tool from the menu then change the radius of the rectangle to 10px (should be 10px by default).

Drag out a rectangle on the right side of the canvas. The rectangle should be quite smaller than your average navigation.

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

You should have something like this.

Inside the navigation bar add your textual links using the color #676767. Leave the first link set to the color white.

Now using the rounded rectangle with a radius of 5px create a rectangle around the first link. Fill the rectangle in the color #8f8f8f and make sure the layer is underneath your text layer.

Once you’ve created the rectangle add a drop shadow using the settings below.

You should have something like this.

Creating The Website Title

On the left side of the canvas add your website title using the text tool. Once you’ve add the text add the following layer styles to the text layer.

You should have something like this.

Adding The Iphone Information Area

Download the 3G/3GS iphone PSD file from the resources list then open up the PSD file in photoshop. In the layers window find the two layers “front” and “back black” once you’ve found the layers drag the two layers into your layers window.

Expand the “front” layer to reveal the rest of the layers inside the group. Once expanded find the reflection layer then hide it by clicking the little box next to the layer.

Now resize the all the layers in the “front” group by highlighting the group in the layers window and pressing “CTRL + T” on the keyboard. Resize the iphone so it fits underneath the title text.

Now resize and rotate the other iphone making it much smaller. Place the iphone behind the bigger one.

Adding The Iphone App Icons

Download your desired iphone icons using the icons from the resources list. Place each icon in a list next to the big iphone underneath the navigation.

Next to each icon add some example text.

Creating The AppStore Button

Using the rounded rectangle tool with a radius of 10px, create a small rectangle underneath your apps list.

Now add the following layer styles to your rectangle.

You should have something like this.

Were now going to make a custom diagonal pattern, create a new document 25px x 25px with a transparent background, select the pencil tool with a 1pixel black brush and duplicate the image below.

Once you’ve created the custom pattern go to “Edit > Define Pattern”, give your pattern a name and save it.

Head back to your original canvas and load a selection around your rectangle, to make a selection highlight the layer and go to “Select > Load Selection”. Once you’ve loaded the selection select the paint bucket tool and change “Foreground” to “Pattern”.

Fill the selection with your pattern on a new layer then set the layers opacity to 1%.

Inside the rectangle add the iphone icon from the resources list then add the text “Available on the iphone AppStore” once you’ve added the text add the following layer styles.

You should have something like this.

Creating The Content Area

Using the text tool add a content title underneath the big iphone, once you’ve added the text apply the following layer styles to it.

On the right side of the content title text create two 1 px lines on top of each other, color the top line in black and the bottom line in white then set the layers blend mode to “Overlay”.

Underneath the title add some example text and a small image gallery using a small selection of images.

Creating The Footer

Repeat the creation of the two 1px lines on top of each other only this time make the lines span the width of the canvas. Once you’ve created the lines add a layer mask to the layer and drag a reflected gradient from the middle of the line outwards. The line should blend in from each side.

Finally add your footer text underneath the line.

That concludes this tutorial, hope you enjoyed the read. I’ll look forward to all your comments.

What We’ll Be Creating

Click image for bigger version.

Resources Used In This Tutorial

• Nikon D40 Iphoto Icon
• Longhorn R2 Icon Pack
• Front Row Realistic Skin Icon Pack

Lets Get Started

Create a new document 1200 x 1200 pixels then select the gradient tool with a radial gradient.

Once you’ve selected the gradient tool change your foreground and background colors. Change your foreground color to #eae9e9 and background color to #d7d7d7.

Now drag the radial gradient from the center of the top of your canvas, dragging down about a quarter of the way down your canvas. Once your happy with the gradient apply some noise to the background by going to “Filter > Noise > Add Noise”.

Creating The Header

Select the rectangular marquee tool then make a selection about 240 pixels in height that spans the width of your canvas. Once you’ve made the selection shift it down about 50 pixels from the top of your canvas.

Fill your selection with any color then add the following layer styles using the following settings.

You should have something like this.

Creating The Header Custom Pattern

Create a new document 14 x 16 pixels with a transparent background. Select the magnifying glass and zoom in 3200%, select the elliptical marquee tool and create two circles as shown in the image below.

Once you’ve created the two circles go to “Edit > Define Pattern”, give your pattern a name then close the document.

Load a selection around your header rectangle by selecting the header layer and going to “Select > Load Selection”. Create a new layer above your header layer then fill the selection with your pattern.

Select your pattern layer then add the following layer styles with the following settings.

Finally set the pattern layers opacity to 20%, you should have something like this.

Creating The Title

Select the type tool then type out your website title on the left side of the header.

Once you’ve added your website title add the following layer styles to your text layer.

On the left side of the title text add the camera icon from the “Longhorn R2 Icon Pack“. You should have something like this.

Creating The Navigation

In the top right corner add your navigation using the type tool.

Once you’ve added your text add the following layer styles to your text navigation layer.

At the beginning of your navigation add a new text layer labeled “Homepage or Home”. Color the text white.

Underneath the text layer “Home” add a rounded rectangle using the rounded rectangle tool. Add the following layer styles to your rounded rectangle.

You should have something like this.

Creating The Login Panel

Select the rounded rectangle tool with a radius of 10px (Default Radius). Drag out a small rectangle on the right side of the header area. Once you’ve added the rectangle set layers opacity to 40%.

Select the rectangular marquee tool then create 3 boxes inside the login panel. Create the first two boxes the same size, these boxes will be our login and password fields. Finally create the third box alot smaller, this box will be our login button.

Add the following layer styles to your 3 rectangles.

Finish off the login box by adding the labels for your rectangles and login button. You should have something like this.

Creating The Gallery

Download the “Nikon D40 Iphoto Icon” and place it underneath the header on the left. To the right of the icon add the words “From The Gallery” with a small slogan.

Now add the following layer styles to your text so it matches the image above.

Underneath the text “From The Gallery” add a couple of circles to simulate a jQuery like slider, use the circle tool or the elliptical marquee tool for the circles.

Using the rounded rectangle tool create 4 rectangles, place the 4 rectangles in a line next to the gallery text and icon.

Add the following layer styles to each one of the rectangles.

Your rectangles should now be transformed into something like this.

Now load a selection around one of your rectangles, to load a selection go to “Select > Load Selection”. Once you’ve loaded the selection contract the selection by 10px “Select > Modify > Contract”.

Open up your desired image to put inside the gallery then copy it to the clipboard. Paste your image inside the selection by going to “Edit > Paste Into”. Resize and move your image into place inside the selection then add a stroke and inner shadow using the settings below.

You should have something like this.

Finish off the gallery images by adding a simple shine for that glassy effect.

Creating The Divider

Using the rectangular marquee tool create two 1px lines on top of each other, color the top line in black #00000 and the bottom line in white #ffffff. The line should be the width of your layout.

Now set the layers blend mode to “Overlay” then add a layer mask. Select the gradient tool with a reflected gradient, drag the gradient from the middle of the lines outwards to either the left or the right canvas.

Creating The Sidebar

Select the rounded rectangle tool then make a selection underneath the divider.

Fill the rectangle with any color then add the following layer styles.

Right click your rectangle layer and go to “Convert To Smart Object”. Once you’ve converted your layer add a layer mask then drag a linear gradient from the bottom of the rectangle upwards.

Using the type tool add some content into your sidebar rectangle.

Creating The Content

There’s not alot to the content area really only a fancy title styled in the same way as our gallery, then underneath i’ve added a couple of paragraphs of dummy text.

Creating The Footer

Duplicate your header and dots pattern then drag it down to the bottom of your canvas. Resize the duplicated header and dots pattern to suit your footer size.

Change the color overlay of the dots pattern to #8d8d8d then change the gradient overlay of the duplicated header layer to the following.

Finally add your footer information to your footer.

That’s it all done hope you enjoyed this tutorial. Look forward to all your comments.

What We’ll Be Creating

Click the image for full view.

Resources Used In This Tutorial

• Metal Texture

Lets Get Started

Create a new document 800 x 600 pixels with any background color. Download the “Metal Texture then open it in photoshop, once opened in photoshop go to “Edit > Define Pattern”.

Close the texture document window and go back to your original document. Fill your background layer with the metal texture by selecting the paint tool with the pattern fill type selected.

Adding The Text

Select the type tool then add your text to the canvas. Use a fairly big font type so the text stands out. Here are my settings.

Once you’ve added your text add the following layer styles to your text layer.

You should have something like this.

Adding The Texture To The Text

Load a selection around your text layer by selecting the text and going to “Select > Load Selection” OR simply click the little thumbnail in the layers palette whilst holding down the CTRL key on the keyboard.

Create a new layer above your text layer then fill the selection with your metal pattern.

Now that you’ve filled the selection set the layer blend mode to screen and add a gradient overlay using the settings below.

You should have something like this.

Adding Depth To The Text

Load a selection around your text layer once again by selecting the text and going to “Select > Load Selection” OR simply click the little thumbnail in the layers palette whilst holding down the CTRL key on the keyboard.

Create a new layer above your textured text filled layer then contract the selection by 5px by going to “Select > Modify > Contract”.

Reset your background foreground layers to black and white then fill the selection with some clouds by going to “Filter > Render > Clouds”.

Now go to “Filter > Render > Difference Clouds”.

Finally set the layers blend mode to “Soft Light”, you should have something like this.

Adding The Rivets

Load a selection around your text layer once again by selecting the text and going to “Select > Load Selection” OR simply click the little thumbnail in the layers palette whilst holding down the CTRL key on the keyboard.

Create a new layer above all your layers then contract the selection by 6px. (Select > Modify > Contract) Keep the selection active and select your brush tool. Once you’ve selected the brush tool open up the brushes palette.

Select a brush size of 4.

Then set the brush spacing to 1000%.

Now open up the paths window by going to “Window > Paths”, at the bottom of the paths window click the little button which says “Make Work Path From Selection”.

Head back to your layers palette and make sure your new blank layer is selected. Select the pen tool and then right click on your canvas and go to “Stroke Path”. Right click again and go to “Delete Path”.

Add Some Style To The Rivets

With your rivets layer selected add the following layer styles.

You should have something like this.

Repeat the same process for your background layer to add the rivets to your background.

That’s it all done, hope you enjoyed this tutorial. I’ll look forward to your comments.

What Were Creating

This is what we’ll be creating in this tutorial, click the image for a bigger version of the layout.

Resources Used In This Tutorial

• Icons By MediaLoot
• Iphone Icons By Kol

Lets Get Started!

Create a new document 1200 x 950 pixels, set your foreground color to #252625 and background color to #101010. Select the gradient tool from the toolbar then from the top menu bar select a radial gradient.

Once you’ve selected the radial gradient start dragging from the center of your canvas outwards until your left with something like this.

Creating The Header/Navigation

Select the rectangular marquee tool then create a rectangular selection about 140 pixels in height, which spans the width of the canvas.

Fill the selection with a linear gradient using the colors #202123 and #070707.

Now add a stroke to your rectangle using the settings below.

Inside the rectangle add your website title to the left with your slogan. On the right side of the rectangle add a simple textual navigation.

Select your website title layer then add the following layer styles.

You should have something like this.

Creating The Featured Area

Using the rectangular marquee tool drag out a selection about 340 pixels in height and the same width as your canvas. The selection should be directly underneath your header/navigation.

Fill the selection with any color on a new layer underneath your header/navigation. Once you’ve filled the selection add the following layer styles.

Again using the rectangular marquee tool, create two horizontal 1 pixel lines on top of each other. Color the top line in black #000000 and the bottom line in white #FFFFFF, finally set the blend mode to overlay.

Were now going to create the featured area background pattern using the pen tool. Select the pen tool then create a wavy path like the image below.

Fill the path with the color white then add a gradient overlay using the settings below.

Once you’ve applied the gradient overlay we need to remove any excess of the shape from outside of the featured area. Start off by loading a selection around your featured rectangle but keep the wavy shape layer highlighted.

Now go to “Select > Inverse” and hit the delete key. Your pattern should now be inside the featured rectangle only and the excess removed, you should have something like this.

Duplicate your wavy shape then “Free Transform” (Ctrl + T) the shape. Once free transformed rotate anti-clockwise.

Remove the excess of the wavy shape by repeating the process explained above. Repeat the the whole process once more so you have a total of 3 wavy patterns, you should have something like this.

Adding The Featured Area Content

For this part your going to need an iphone or some type of mobile phone, I’m using an iphone from “DeviantArt“.

Drag your desired image onto your canvas then chop off the bottom of the phone using your desired cutting tool.

Inside the screen area of the phone add an image or create an image which best describes your app, I’ve just added an HV-Designs screen shot.

Directly underneath your mobile phone create two 1 pixel horizontal lines, fill the top line in black and bottom line in white. Set the layer blend mode to “Soft Light”, you should have something like this.

Add a layer mask to your two 1px lines then drag a reflected gradient over the top starting from the middle of the line and dragging outwards. Doing this should blend the lines in with the background either side.

Select the rectangular marquee tool and a make a selection underneath your two 1 pixel lines.

Select the gradient tool with a radial gradient, set the gradient to “White (#ffffff) to Transparent” then drag the gradient from the top of the selection down.

Add a layer mask to the selection then drag a reflective gradient starting from the middle then dragging outwards, just like we did for out two 1 pixel lines. Finally set the blend mode to “Overlay”.

Finish your featured area off by adding your featured content. I went for a nice bold title with a small paragraph of text, underneath i went for a small list with small icons.

The Left Sidebar

Our sidebar will be relatively simple, start off by creating two 1 pixels lines next to each other. Color the first line in black (#000000) then the second line in white (#ffffff), finally set the layer blend mode to overlay.

Now select the rectangular marquee tool and create a selection starting from directly underneath the featured area, keep the selection pixel close to the divider line.

Once you’ve created the selection select the gradient tool with a linear gradient. Before applying the gradient set your foreground color to #0a0a0a and background color to #101010.

Drag the gradient from the top right hand corner of your selection, dragging the gradient diagonally towards the bottom left corner of the selection.

Using some nice icons dress up your sidebar. I’m using icons from “MediaLoot“.

Creating The Content Area

On the right next to the sidebar create your content area, i’ve added a simple but bold heading with a small paragraph of text.

Underneath our bold heading and text i’ve added a small gallery. Select the rectangular marquee tool and create 4 squares.

Add the following layer styles to your squares.

You should have something like this.

Were now going to add our image inside the squares but before we do lets add a 10pixel border. Make a selection around one of your squares then go to “Select > Modify > Contract”, enter 10px in the box that pops up then press ok.

Keep the selection active then paste your image into the selection by going to “Edit > Paste Into”.

Creating The Footer

Make selection around the bottom of the rest of your canvas then fill the area with the color #0a0a0a. Make sure the selection starts directly underneath the sidebar divider line.

Now add the following layer styles to your footer rectangle.

That’s it all done, hope you enjoyed this tutorials, see you all next time.

Tutorial Via Design Instruct

View The Full Tutorial

This tutorial was wrote by me for Design Instruct, you can view the tutorial HERE. I’l look forward to all your comments.

Thanks

Resources Used In This Tutorial

• Classy Icon Set
• Software Box

The Finished Layout

This is what we’ll be creating, click image for a bigger view.

Creating The Document

Create a new document 1200 x 1200 pixels with a white background. Set your foreground color to #d6d6d6 and background color to #efefef then select the gradient tool with a linear gradient.

Drag the linear gradient over your canvas starting from the top, drag the linear gradient about 250 – 300 pixels down.

Creating The Header

Select the rectangular marquee tool, then drag out a selection the width of the canvas and about 160 – 170 pixels in height.

Before filling the selection set your foreground color to #483f38 and background color to #1e1916. Select the gradient tool then this time set your gradient type to reflected.

Drag the reflected gradient from the middle of the rectangle towards either the left or the right side of the canvas. Once you’ve filled the rectangle add some noise by going to “Filter > Noise > Add Noise”.

Creating The Template Title

Using the type tool add your website title and slogan inside the rectangle.

Once you’ve add your title and slogan add a drop shadow to the title using the settings below.

To one of the words in your title add a gradient overlay using the settings below.

You should have something like this.

Creating The Small Navigation

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

Drag out a small rounded rectangle on the right side of the canvas inside the header rectangle.

Now add the following layer styles to your rounded rectangle.

Inside the rectangle add a small selection of textual links, you should have something like this.

Creating The Main Navigation

Before creating the main navigation using the rectangular marquee tool or the single row marquee tool create two 1px lines on top of each other. Color the top line in black and the bottom line in white. Place the two lines directly underneath the header rectangle.

Using the rounded rectangle tool drag out a rectangle, keep the rectangle in the center of the line between the background and header.

Add the following layer styles to your navigation rectangle.

Still with the rounded rectangle tool create another rectangle inside the main navigation rectangle. The rectangle should be the color white and should only be half the size or smaller than the main rectangle.

Set the opacity of the small rectangle to 5%. For this next part you need to create your own custom pattern.

Create a new document 25 x 25 pixels, zoom in as much as you can then select the pencil tool. Using the pencil tool and the color black mimic the image below.

Once you’ve created the pattern go to “Edit > Define Pattern”, save the custom pattern has “Diagonal Lines”.

Head back over to your original canvas and load a selection around the main navigation rectangle. You can load a selection by selecting the layer inside the layers window then go to ” Select > Load Selection”.

Once you’ve loaded the selection fill your selection on a new layer using the paint bucket tool (Don’t forget to set paint bucket option to pattern). Finally set the pattern layers opacity to 1%.

Creating The Search

Using the type tool add your navigation items, in the space left over on the right hand side this is where we’ll be adding our search field.

Using the rounded rectangle tool with a radius of 5px create a small rectangle in the space.

Add the following layer styles to your search field rectangle.

Inside your search field add some text and a little icon on the right. I’ve chosen a small magnifying glass from the custom shapes library.

Creating The Featured Area

Underneath the main navigation were going to create a featured area to feature the product in question. Start off with the text tool and add a nice big title followed by a couple of paragraphs.

On the right side of the text create your product in the form of a software box. For this tutorial I’ve just used a blank software box from HERE. You can take more time in creating your very own custom software box, or simply use the icon from the link above.

Once you’ve added your content box duplicate it, then drag the duplicated software box behind its original. Free transform the software box by pressing “CTRL + T”, resize your duplicated box by a fraction or two then blur it by 1px by going to “Filter > Blur > Guassian Blur”.

Finally duplicate your blurred software box then drag the layer behind its original. Blur the third software box by 1 px once more then resize it again by a fraction or two. You should have something like this.

Were now going to create two small buttons, select the rounded rectangle tool with a radius of 10px. Drag out two small button sized rectangles then add the same layer styles as the main navigation.

On your two buttons add the diagonal pattern the same as the main navigation then label the two buttons accordingly.

Creating The Divider

Using the single row marquee tool or the rectangular marquee tool create two 1px lines on top of each other, color the top line in #c9c9c9 then the bottom line in white (#ffffff).

Make a selection directly underneath your two lines using the rectangular marquee tool.

Set your foreground color to #e6e6e6 and background color to #efefef then select the gradient tool with a linear gradient. Drag downwards from the top of the selection releasing the mouse button just short of the bottom of the selection.

We now need to blend the two lines and the little gradient we added into the background on both the left and right sides.

Add a layer mask to one of the layers, set your foreground color to white and background color to black. Select the gradient tool with a reflected gradient then drag the gradient from the center of the element you have chosen first outwards to either the left or right. The element you have chosen should be blending in with the background on both sides, left and right.

Do this for all 3 layers, top line, bottom line and gradient.

Adding The Content

On the left side of the canvas underneath the divider create a rounded rectangle with the rounded rectangle tool. The rectangle doesn’t have to be big as it will just hold a small list of features.

The layer styles are as follows.

Inside the rounded rectangle add a simple list with green bullet points, separate each list item with its own divider.

On the right side of the box add a heading with a short paragraph underneath. Then underneath the paragraph add some icons, I’ve used the “Classy Icon Set” from “Dryicons”.

Creating The Footer

Duplicate the header and the bottom divider then drag it all the way down to the bottom of the canvas. Select the duplicated header layer then press CTRL+T to free transform the header. Resize the height of the rectangle to fit your footer content.

Move the duplicated divider line to the top of the duplicated header. Finally add your footer text to your footer.

That’s it all done, hope you enjoyed this tutorial. If you did enjoy this tutorial then maybe you would consider digging and retweeting it.

Resources Used In This Tutorial

• Wefunction Icon Set
• Aquacticus Social Icon Pack

What We’ll Be Creating

This is what the finished tutorial should look like. (Click To Enlarge)

Lets Get Started

Create a new document 1200 x 1600 pixels with a white background. Were starting off with quite a big canvas due to the amount information we’ll be adding into the layout.

The layout will be 850 pixels wide, so to ensure the layout measures up i’ve added two guides. To create your guides go to “View > New Guide”.

In the box that pops up enter 175px, then press ok.

Repeat the step once more only this time enter 1025px, then press ok.

Creating The Background

Set your foreground color to #132e47 and background color to #132434 then select the gradient tool with a reflected gradient.

Now that you’ve selected the gradient tool drag the gradient over your canvas. Start from about 400 pixels from the top of your canvas and drag about half the way down.

Were now going to add some noise to our background using the noise filter. Make sure your background layer is selected then go to “Filter > Noise > Add Noise”, Use the settings listed below.

Once you’ve added the noise filter select the rectangular marquee tool and make a selection from the top of the canvas. Make the selection about 300 pixels in height.

Create a new layer above your background layer then fill the selection with the color #05111b. Add the noise filter to the selection using the same settings as before. You should have something like this.

Finally create a new layer above your background and rectangle layers then select the rectangular marquee tool.

With the rectangular marquee tool selected make two 1 pixel lines on top of each other. Fill the first one in the color black (#000000) then the second line in a light shade of blue (#1d456b). The two lines should span the width of the canvas and be placed directly underneath the dark blue rectangle.

You should have something like this.

Creating The Outer Rectangle

Select the rectangular marquee tool then make a selection within your guides (850px Wide). The selection should pretty much start about 100 px from the top all the way down to how ever big you want it, mine is quite big.

Once you’ve made the selection and your happy with it, create a new a layer and fill it with the color white (#ffffff).

Were now going to make the outer rectangle slightly transparent, to do this add the following layer styles.

You should have something like this.

Creating The Content Rectangle

Load a selection around your outer rectangle by selecting the layer and going to “Select > Load Selection”. Once the selection is loaded contract the selection by 20px, to do this go to “Select > Modify > Contract”.

Now that you’ve contracted the selection create a new layer above your outer rectangle layer and fill the selection in the color white (#ffffff).

Now add the following layer styles to your content rectangle.

You should have something like this.

Adding Your CV Title

Select the type tool then in the top left corner add your name along with your description. The font i’m using is called “Myriad Pro”. Once you’ve added your name and description add a drop shadow to your name using the settings below.

Adding The Small Navigation

From the “Wefunction Icon Set” add a floppy disk icon, printer icon and mail icon to your canvas. Place each icon in the top right level with your name.

Underneath each icon add there labels, once you’ve added your labels add a drop shadow using the settings below.

Finishing Off The Header

Underneath your name and description add a couple of paragraphs about yourself and what makes you so special.

Now select the rectangular marquee tool and create two 1 pixel lines on top of each other. The lines should span the width of the content rectangle.

Fill the top line in black (#000000) and bottom line in white (#ffffff) once you’ve filled the lines set the “Blend Mode” to “Overlay”.

You should have something like this.

Adding Your Content

Underneath the dividing line add your first CV entry, i’ve chosen to list my technical skills first.

Next, add the “circle_blue.png” icon from the “Wefunction Icon Set” underneath your main section title. The blue circle will be our bullet point.

Next to the bullet point add a secondary title explaining your skill, how many years experience and whether your beginner, intermediate or advanced.

Finally add your description explaining about the skills.

Continue With The Style

Continue following the same styles above for each of your entries.

My Social Network

Once you’ve added all your CV information create a new title called “My Social Network”, under this heading you could list all the digital places you regularly socialize with.

Use the icons from the “Aquacticus Social Icon Pack“.

That’s it all done your digital CV should be finished. Thanks for reading, I’ll look forward to all your comments.

Learn To Convert This Layout

Learn how to convert this layout into a working HTML/CSS Template by Clicking Here

Tutorial Via Design Instruct

View The Full Tutorial

This tutorial was wrote by me for Design Instruct, you can view the tutorial HERE. I’l look forward to all your comments.

Thanks

What We Will Be Creating

Creating Our Document/Background

Create a new document (Ctrl+N) size 800 x 1000 px, double-click on the background to unlock it and make it editable. Now apply a gradient overlay using the settings below.

Creating The Lower Part

Select the Ellipse Tool (U), select from Options bar the Shape Layers drawing mode and draw an ellipse. Rename the ellipse’s layer to “Ellipse 1″. Duplicate the ellipse and selecting Free Transform (Ctrl+T), decrease the duplicated ellipse’s size by a few pixels. Rename the duplicated layer “Ellipse 2″.

Now hold down the Shift key and press the up arrow on the keyboard 22 times, doing this will move the ellipse 220 px upwards.

Now select the Pen Tool (P) and connect the two ellipses together.

We now have the shape of the lower part of the lipstick, we now need to merge “Shape 1″ and “Ellipse 1″ into one layer and rename it to “Down part”. Move the “Down part” layer under the “Ellipse 2″ layer then add the following layer styles.

I’ve decided that the lipstick’s cover should have a simple pattern, so i’ve added a pattern named “Granite” from the “Artist Surfaces” package.

Select the “Ellipse 2″ layer then add the following layer styles.

You should now have something like this.

Now hold down the Ctrl key and click on the “Ellipse 2″ layer to load a selection, then go to “Select > Modify > Contract”, contract the selection by 5 pixels.

Creating The MIddle Part

Create a new layer, rename it to “Middle Part” and fill the selection with random colour.

Duplicate the “Middle part” layer then whilst holding down the shift key press the up arrow key 3 times to move the layer 30px upwards. Then using the Pen Tool (P) connect the two ellipses together.

Merge the “Middle Part” layer and the connecting part (Shape 1) into a single layer, after that rename the new layer again to “Middle Part”. Now the “Middle Part” layer under the “Middle Part Copy” layer. Then add the following layer styles to your “Middle part” layer.

Select the “Middle Part Copy” layer and add the following layer styles.

You should have something like this.

Hold down the Ctrl key and click on the “Middle part copy” layer, to load a selection. Contract the selection by 4 px by going to “Select > Modify > Contract”. Create a new layer, rename it to “Upper Part” and fill the selection with random colour.

Creating The Upper Part

Duplicate the “Upper Part” layer and move the copy 150 px upwards (hold down Shift and press the up arrow key 15 times). Using the Pen Tool (P) create a connecting layer.

Merge the “Upper Part” layer and the connecting part (Shape 1) into a single layer. Rename the new layer again to “Upper Part” and move it under the “Upper Part Copy” layer. Select the “Upper Part” layer and apply the following layer styles.

Now select the “Upper Part Copy” layer and apply a gradient overlay using the settings below.

You should have something like this.

Hold down the Ctrl key and click on the “Upper Part Copy” to load a selection. Create a new layer, pick any of the selection tools such as Rectangular Marquee Tool (M) then right-click on the selection, from the drop-down menu select Stroke: 3px.

Now add a “Bevel and Emboss” using the settings below.

Creating The Lipstick

Now it’s time to draw the lipstick itself. To do this, select the Pen Tool (P) and create a shape like the one in the picture below.

Rename this layer to “Lipstick”. After that, again using the Pen Tool (P) create the top of the lipstick.

Rename the second layer to “Top” then select the “Lipstick” layer and apply a gradient overlay using the settings below.

Select the “Top” layer then fill using the colour #d62626.

This step is optional. Here I’ve decided that my lipstick would be more effectively if I make it with a glittering shade. To do this, hold down the Ctrl key and click on the “Lipstick” layer to select it. As you are still holding down the Ctrl key, hold down and Shift, then click on the “Top” layer. This way we’ll select the two layers together.

Create a new layer and rename it to “Bright shade”. Fill the selection with white colour and set the Blending mode to Dissolve, Opacity around to 15-30%. Now we need to rasterize the Dissolve mode. To do this, create a new empty layer, select it together with the “Bright shade” layer and press Ctrl+E. In the end set the Blending mode to Soft Light and if you wish, you can reduce the Opacity.

The lipstick is completed.

Creating The Shines And Glimmers

Now we need to add glimmers to make it look even more realistic. To do this, select the Polygonal Lasso Tool (L) and create a selection like this.

Create a new layer and fill the selection with the colour white (#ffffff). After that add a layer mask and erase the bottom part of the reflection using the Linear Gradient Tool. Reduce the Opacity to around 56%.

Using the Polygonal Lasso Tool (L) create another selection on the left side of the lipstick. Create a new layer and fill the selection with white colour. Blur the layer a bit by going to “Filter > Blur > Gaussian Blur” (Radius 2px) and reduce the Opacity to around 30%. Finally add a layer mask to this layer and using the Linear Gradient tool erase the bottom part of the glimmer.

Duplicate the last created layer and go to “Edit > Transform > Flip Horizontal”, then move the copy at the right side of lipstick.

Using the Pen Tool (P) create a shape like the one in the picture below. Blur the shape using “Filter > Blur > Gaussian Blur” (Radius: 2-3px). Reduce the Opacity to around 56%.

Add another glimmer in the middle of lipstick using the same technique. Blur it just a little bit using the Gaussian Blur filter (Radius 0,6).

Using the Pen Tool (P) create a shape with white colour like the one in the following picture, then reduce the Opacity to around 62%.

Create a new layer then select the brush tool with a soft brush size of about 33px. Hold down the Shift key and draw a white line over the lipstick. Reduce the Opacity to around 63% then hold down the Ctrl key and click on the “Top” layer to select it. Make sure the white line’s layer is active and press the delete key to delete the unnecessary part.

Hold down the Ctrl key and click on the “Top” layer to select it. Create a new layer and fill the selection with Linear Gradient from white to transparent.

Load another selection on the “Top” layer. Create a new layer, take any of the selection tools, such as Rectangular Marquee Tool (M) and right-click on the selection. From the drop-down menu, select Stroke: 2px, white colour. Then add a layer mask to this layer and using a soft brush with a black colour cover up the top part of the new created white ring.

You have now completed the lipstick tutorial you can stop here if you want to, but I’ve decided to draw its cap too. In the following steps I will show you how to do it.

Creating The Lipsticks Cap

Pick the Ellipse Tool (U) and create an ellipse with approximate dimensions as the top part of the lipstick. Rename this layer to “Ellipse 1″. Duplicate it and increase the size of the copy using Free Transform (Ctrl+T). Then move it as showed in the following picture.

Rename the duplicated ellipse to “Ellipse 2″. Now pick the Pen Tool (P) and create the cap’s body. Rename this layer to “Body”.

Merge the “Body” and the “Ellipse 2″ into one layer (Ctrl+E). On the newly created layer add the following settings from the layer styles menu.

Move the “Ellipse 1″ above the “Body” layer and add the following Layer Style.

You should have something like this.

Hold down the Ctrl key and click on the “Body” layer to select it. Create a new layer and pick any of the selection tools, such as Rectangular Marquee Tool (M) and right-click on the selection. From the drop-down menu, select Stroke (1px, center, colour: #a4a8af).

Add a mask to this layer and using a black colour soft brush, cover up everything except the right end of the cap.

Now hold down the Ctrl key and click on the “Ellipse 1″ layer to select it. Add a Stroke with white colour, Width: 2px, Location: Inside.

Using the Pen Tool (P) create a shape like the one in the picture below. Then reduce the Opacity to around 50-60%. Add a mask to this layer and using soft brush carefully cover up the upper part of the shape.

Again using the Pen Tool (P) create a white line like the one in the picture below. Then make it blurred using the Gaussian Blur filter (Radius: 6,6px)

Reduce the Opacity to around 65% then using the Pen Tool (P) create a shape like the one in the picture below. Blur it with Gaussian’s Blur filter (Radius: 0,9px) and set Opacity to 48%.

Repeat the same method to add another glimmer on the other end of the cap.

Again using the Pen Tool (P) create the last glimmer. Add a mask to this layer and fill it with white to black Linear Gradient. Reduce the Opacity to around 70%.

What remains to do is to create a reflection for our top. Combine in a group all the lipstick’s layers. You can do this by holding down CTRL and click on all necessary layers to select them. Then click Ctrl+G. Duplicate the new group (right click > Duplicate Group), then Merge Down the duplicated group (Ctrl+E). Flip vertically the new layer by going to “Edit > Transform > Flip Vertical” and place it as showed in the picture below.

Open the original group and find the layer named “Down part”, then hold down the Ctrl key and click on it to select it. Make sure that the layer with the flipped lipstick (the reflection) is active and press delete. Move it 1px downwards by pressing the down arrow key.

Add a layer mask and fill it with Linear Gradient, after that set the Opacity to 40-50%.

Now combine all the layers of the cap into one group (Ctrl+G). Duplicate the new created group (right click > Duplicate Group), then merge the duplicated group (Ctrl+E). Using Free Transform (Ctrl+T) flip vertically the merged layer and position it as showed in the picture below.

Add a layer mask on the reflection’s layer and fill it with Linear Gradient, then set Opacity to 60%.

Finally you can add a small star on the lipstick and with this done we are finished.

Thank You Ivelina Dimitrova

This is Ivelina Dimitrova’s first tutorial on hv-designs so thank her for the tutorial not me. If you have any questions feel free to ask.

Thanks For Reading.

What We’ll Be Creating

Once you’ve completed the tutorial you should have something like this.

In a later tutorial I’ll also be showing you how to code the navigation into a working CSS navigation, so stay tuned for that.

Inspired By Hugo

The result of this tutorial is inspired by a flash template located here. Lets get started.

Making The Background

Create a new document 1200 x 600 pixels with a transparent background. Set your foreground color to #bebebf and background color to #d2d2d2, then select the gradient tool with a linear gradient.

Once you’ve selected your gradient drag the gradient from the top of the canvas down to the bottom.

Once you’ve filled your canvas add some noise by going to “filter > noise > add noise”, use the settings listed below.

Now blur the background by going to “filter > blur > motion blur”, use the settings below.

Around the left and right edges of the canvas you should see the motion blur, blurred too much. Simply make a selection around the best half of the canvas excluding the over blurred edges.

Once you’ve made the selection crop the canvas. You should now have your lightly brushed metal background, you can fine tune the metal strokes by adjusting the motion blur settings.

Creating The Navigation

Select the rounded rectangle tool with a radius of 10px, drag out the navigation rectangle in the middle of your canvas.

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

You should have something like this.

For this part we need to make our own custom carbon fibre texture. To do this create a new document 4 x 4 pixels then copy the image below.

Once you’ve created the carbon fibre pattern go to “edit > define pattern”, then head back to your navigation.

Load a selection around your navigation by selecting the navigation rectangle layer then going to “select > load selection”. Create a new layer above your navigation, select the paint bucket tool then find your carbon fibre pattern from the patterns menu. Once you’ve found your pattern select it and fill the loaded selection.

Set your carbon fibre pattern layer blend mode to “difference”, you should have something like this.

Creating The Navigation Buttons

Select the type tool then type out your navigation links towards the bottom of the navigation.

Once you’ve completed adding your textual links add the following layer styles to your text.

In between each link add two vertical 1 px lines next to each other, the lines should start from the very top of the navigation and end at the bottom. Color the first line in black and the second line white. Once you’ve created your lines set the layer opacity to 50% and blend mode to soft light.

Creating The Navigation Orbs

Select the elliptical marquee tool then drag our a small ellipse above one of your navigation links.

Select the gradient tool with a linear gradient, drag a black (#000000) to gray (#828282) gradient over the ellipse selection.

With the elliptical marquee tool once more, create another circular selection inside your last selection.

Fill your selection with the color #8e8e8e. Keep your selection active and create a new layer above your gray circle. Set your foreground color to white (#ffffff) then select the gradient tool with a radial gradient, change the gradient type to “white to transparent”.

Zoom into your selection the drag the radial gradient from the top left corner of the ellipse. Keep the drag short as you don’t want the radial gradient too big.

change the gradient type to linear also keeping the selection active. Create another new layer then drag the linear gradient from the bottom upwards.

Keep adding the highlights changing the layer opacity’s of each layer and the position of the gradients, eventually you should have something like this.

Duplicate the orb and all the highlights then move it across to the next button. Continue to do so until all buttons have there own orb.

Creating The Hover State

To one of the buttons were going to add a hover state, i’ve chosen the portfolio button. Simply add a gradient overlay to the orb using your chosen colors.

Make a selection using the rectangular marquee tool, the selection should be made around your button in between the dividers.

Once you’ve made the selection around the button fill the selection with the color #dddddd then set the layers blend mode to “overlay”.

Finally using the polygonal lasso tool create a triangular shape, fill the triangular shape in the same color as the background, then add a drop shadow using the settings below.

Your finished hover state should look something like this.

Congratulations you have finished the tutorial. In part two i’ll be showing you how to code the navigation into a working HTML/CSS Document.

Continue To Part Two…

Learn to code this navigation into a working HTML/CSS Document. Click Here

The Finished Layout

Once you’ve finished the tutorial you should have something like this. Click the image below for full view.

Getting Started

Create a new document size 1200 x 1200 pixels with any color background. Set your foreground color #505050 and background color to #2d2d2d then select the gradient tool. Once the gradient tool is selected change the gradient type to radial.

Drag out the radial gradient roughly just above the middle of the canvas. The radial gradient should be fairly big in size so drag it out long.

Next, select the rectangular marquee tool or the rectangle tool and drag out a rectangle at the top of your canvas about 300 pixels in height. Fill your rectangle with any color.

Label your rectangle layer “header” then add the following layer styles.

You should have something like this.

Creating The Top Bar

Select the pen tool then at the very top of the canvas make an object like the image below.

Once you’ve created the points for your top bar fill it with the color back, you should have something like this.

Complete your top bar by adding the following layer styles.

On the top bar where it gets thicker, add a the word contact with a small white triangle. The triangle can be made using the polygonal lasso tool.

Creating The Navigation And Header

Using the rounded rectangle tool with a radius of 10 pixels, drag out a small button sized rectangle big enough for a navigation link.

Fill the rectangle with any color then merge the layer with your top bar, you should have something like this.

Add your navigation links underneath your top bar using the rounded rectangle as your hover state for one of your links.

Underneath your navigation add your website title and slogan, the font i’ve chosen for my website title and slogan is called “quicksand”. I’ve chosen a red color for my first two letters then a dark gray for the rest.

Creating The Service Box

Before creating the service box, directly underneath the header create two vertical 1 pixel lines, one colored black and one colored white. Once you’ve created the lines set the layers opacity to 40%.

Select the rounded rectangle tool then drag out a rectangle about 250 pixels in height underneath your website title.

Once your happy with your rectangle, add the following layer styles.

You should have something like this.

For this next part you will need some icons, preferably in red. I’ve chosen to use the ruby extended icon pack from dryicons.com.

Use 3 of your desired icons for your service box area, next to each icon add a heading with some dummy text.

In between each heading, icon and paragraph add two 1 pixel vertical lines on next to each other, color one line black and the other one in white. Finally set the blend mode to “Soft Light”.

Finally underneath each paragraph create a small red button using the rounded rectangle tool. Your service box should now look like this.

Creating The Sidebar

On a new layer underneath your service box create two 1 pixel vertical lines next to each other, color one black and one white. Set the layers blend mode to “Soft Light” then move the lines directly level with the last one on the service box.

Select the rectangular marquee tool then make a selection directly next to the sidebar line, make sure the line itself is not included in the selection. The selection doesn’t have to be really wide, just about as wide as you expect a sidebar to me.

Select the gradient tool with a linear gradient, the gradient should be set to black to transparent. Drag the black to transparent over the selection starting from the sidebar lines. Finally set the opacity to 15% you should have something like this.

Add a layer mask to the sidebar line and the black gradient you just added then drag a linear gradient from the bottom of the elements upwards. The look your try to achieve looks something like this.

On the right side of the sidebar line, inside the black gradient part add your sidebar items. I’ve opted for a latest news section, I’ve used one of the icons from the dryicons icon pack next to the header, then I’ve added some dummy news articles separating each one with a simple black line.

Creating The Content Area

Using one of the home icons from the dryicons icon pack, drag it under the left side of the service box. Next to the icon add your welcome heading with a couple of paragraphs of dummy text to follow after.

Select the rectangular marquee tool, underneath your main content paragraph create a rectangle.

Fill your rectangle with the color #1e1e1e then add the following layer styles.

Finally add an example image inside the rectangle leaving a gap of around 10 pixels all the way around the image.

Creating The Footer

Select the rectangular marquee tool then make a selection around the remaining half of your canvas. Fill the selection in the color #1e1e1e then add the following layer styles.

Inside your footer area add your dynamic footer dummy content. I’ve gone for a newsletter subscription form and some social networking text.

That’s it all done.

Congratulations

Thank You for taking this tutorial, hope you found it helpful. Don’t forget to Digg and Re-Tweet this tutorial – Thanks for all your support, il look forward to your comments.