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 (Coming Soon)

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.

The Final Layout

Once completed you should have something like this.

Lets Get Started

Start off by creating a new document with the following dimensions “1200 x 1400″, don’t worry if the document seems big as you can crop the canvas when finished.

Select the rectangular marquee tool and make a small selection across the top of the canvas, the selection should be the width of the canvas and no larger than about 10 pixels.

Once you’ve made the selection fill it using the paint bucket tool with the color #1c5e82. Now add a stroke to the rectangle using the following settings.

Were now going to create our main header, select the rectangular marquee tool and drag out a selection about 200 pixels in height. Set your foreground color to #133b50 and background color to #0c2635. Select the gradient tool with a reflected gradient.

Fill your selection with the reflected gradient, start dragging from the middle of the selection and drag outwards towards either the left or right of the canvas. You should be left with something like this.

Header Elements

Now that our head is all set and ready lets begin to add some of our elements. Start off with the type tool and add your website title and slogan.

On the right side of the website title and slogan add a small rounded rectangle, using the rounded rectangle tool with a radius of the 15 pixels.

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

Repeat the process again only this time make the rectangle a lot smaller.

Once again add the following layer styles to your smaller rectangle.

You should have something like this.

Creating The Navigation

Using the rounded rectangle tool, create 5 rounded rectangles next too each other. Then using your desired cutting tool cut off the bottom of each rectangle.

You should have something like this.

Now add the following layer styles to just your first tab.

On the remaining tabs add the following layer styles.

Finally label your tabbed navigation using the type tool, you should have something like this.

Creating The Featured Area

Zoom into your navigation bar then move each button up 3 pixels from the bottom of the header.

Using the line tool or the rectangular marquee tool create a 1 pixel line across the canvas directly underneath the buttons.

Next, select the rectangular marquee tool and make a selection the width of the canvas and about 285 pixels in height. Set your foreground color to #31a0c9 and background color to #277ca6, select the gradient tool with a radial gradient. Drag the gradient from the middle of the selection outwards. You should have something like this.

Inside your featured area add some example featured text with a title. Underneath your featured text add a small green button the same as your search button.

For this next part you’ll need an icon or image of a imac, you can grab one from HERE. Once you’ve source your desired imac drag it on onto your featured area.

Duplicate your imac then drag the duplicated layer underneath its original, resize it by going to “edit > transform > free transform” then finally add a subtle blur by going to “filter > blur > guassian blur”. You should have something like this.

For this next part you will need a twitter style icon, the one i used is from smashing magazine’s practika icon set. Drag your twitter icon onto your canvas, resize with the free transform tool then place the icon onto of the imac monitor.

Create a little speech bubble next to your twitter bird with the words “follow us on twitter” inside of it. You can use a speech bubble from photoshop’s custom shape’s library.

Creating The Content Area

Directly underneath the featured blue rectangle, on a new layer create two 1 pixel lines on top of each other. Color the top line in black and the bottom line in white. Both lines should span the width of the canvas.

Set your foreground color to #ededee and background color to #ffffff, then select the gradient tool with a linear gradient. Drag the linear gradient from the bottom of the blue featured rectangle down towards the bottom of your canvas. About half way down.

First this next part your going to need some nice looking icons. My icons of choice are some icons from Woothemes free icon pack. Pick out 3 icons then place them onto your canvas in a line, next to each icon add some dummy text.

Underneath each icon and its label and some more dummy text.

Were now going to add some divider in between each item. Firstly create two 1 pixel lines vertically next to each other colored black and white, then set the layer blend mode to “overlay”.

Add a layer mask to each of the divider layers then drag a linear gradient from the bottom of the divider to about half way up. You want the bottom of the divider to blend in with the background leaving the top visible.

Creating The Image Gallery

Using another icon from the Woothemes icon pack, create another text heading. Underneath the heading add a small paragraph of dummy text.

Select the rectangle tool or the rectangular marquee tool and create a white filled rectangle underneath the small paragraph. Once you’ve created the rectangle add a 1 pixel stroke using the color #dedede.

Load a selection around your rectangle by going to “select > load selection” then contract the selection by 10pixels, “Select > modify > contract”. Paste an image of some kind into the selection by going to “edit > paste into”.

Duplicate the gallery as many times as needed. From the Woothemes icon pack add the left and right arrows underneath the middle image.

Creating The Footer

Using the rectangular marquee tool make a big selection around the rest of the canvas, fill the selection using the color #0c2635.

Select the rectangular marquee tool once more and drag out a selection about 300 pixels in height, leaving a gap of about 10pixels or so from the last rectangle you created. Set your foreground color to #133b50 and background color to #0c2635. Select the gradient tool with a reflected gradient.

Fill your selection with the reflected gradient, start dragging from the middle of the selection and drag outwards towards either the left or right of the canvas. Finally add a 1 pixel stroke using the color #164662. You should have something like this.

Towards the bottom of the footer create a horizontal divider using two 1 pixels lines, top one colored in black and the bottom one colored in white. Set the dividers blend mode to “Soft Light”.

Add a layer mask to the footer divider then drag a reflected gradient from the middle towards one of the edges. The divider should blend in with the background towards the edges.

Next, select the rectangular marquee once more and make a selection underneath the divider selecting the rest of the footer. Select the color #0c2635 and fill your selection.

Finally fill up your footer with all the information you need. I’ve opted for a newsletter subscription and some social icons.

All Done

That’s it you’ve completed the tutorial, thanks for reading. I’ll look forward to your comments.

The Ipad Preview

The Tutorial

You can view the full tutorial HERE, if you haven’t already seen it.

License and Attribution

This PSD is licensed under the Creative Commons license and can be used for personal purposes ONLY. Attribution is required and is always appreciated.

Mr Barboo

Cats N Mice

Zhu Rong Fire Goddess

Crossing The Stars

Waterfall Castle Matte Art

Spring Snow

Plague Ship Sails Into Korvosa

Inuit Croc

Lackadaisy Flimflam

The Flash

Oops Sorry John

Love You Hate You

Guan Yu Generals Order

Commission Teacup Hat Girl

Stealing Kiwi’s Eggs

Thanks

Thanks for looking, hope you liked the round-up. If you did like the round-up maybe you could DIGG and re-tweet this post. Thanks for your support.

Personal vCard Template

The Tutorial

You can view the full tutorial here, if you haven’t already seen it.

Learn To Code This Layout

You can learn how to code this layout by following this tutorial HERE.

License and Attribution

This TEMPLATE is licensed under the Creative Commons license and can be used for personal purposes ONLY. Attribution is required and is always appreciated.

The Finished Ipad

This is what the finished result will or should look like once finished.

Lets Get Started – Ipad Frame

Create a new document with a canvas size of “850 pixels X 850 pixels”, Fill your background with any color. Once you’ve created your canvas select the “Rounded Rectangle Tool” with a radius of “20 pixels”.

Drag out a rectangle for your ipad, you can make the rectangle as big as you want too. I’ve chosen to use roughly my whole canvas.

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

Creating The Inner Rectangle

Still with the rounded rectangle tool only this use a radius of “15 pixels”, create another rectangle inside your first rectangle leaving about 10 pixels all the way around so your first rectangle is still visible.

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

You should now have something like this.

Creating The Ipad Button

Select the elliptical marquee tool or the circle tool, then create the ipad button near the bottom of the inner rectangle.

Fill the circle with any color then add a gradient overlay using the following settings.

Select the rounded rectangle tool once again but change the radius to 1 pixel then switch the type to “paths”.

Drag out a small rectangle inside the button, it might be best if you zoom in. Once you’ve dragged out the path set your foreground color to #4a5e67 then right click inside the rectangle and go to “stroke path”.

Once you’ve clicked stroke path right click again and go to delete path. You should be left with something like this.

Creating The Screen

Using the rectangle tool or the rectangular marquee tool create a big rectangle inside your last inner rectangle. This will be our screen.

For this next part you’ll need a wallpaper of some sort or you can create your own background. I’m using an apple mac background from HERE.

Once you’ve got your wallpaper copy it too the clipboard, load a selection around the black rectangle then go to “edit > paste into”. To load a selection around the black rectangle select the layer then go to “select > load selection”.

Now that you’ve pasted the wallpaper into the selection you can resize and fix the wallpaper so that it fills screen.

Once your finished with your screen press “CTRL + A” then go to “image > crop”, right click the mask in the wallpaper layer and go to “apply mask”. Doing these steps are important as it gets rid of any unnecessary parts of the wallpaper.

Double click your wallpaper layer then add the following layer styles.

Creating The Dock

Before we jump straight in adding our icons lets first create our little icon dock. Select the rectangle tool and create a rectangle just smaller than the width of the ipad screen.

Fill the rectangle with the color #60717e then add a drop shadow using the settings below.

Using the pen tool create a whirly path, then fill the path with the color white. (#ffffff)

Set the whirly paths opacity to 15% then set the blend mode to soft light. Highlight both layers in the layers pallet (dock and whirly path) then go to “edit > transform perspective”.

Adjust the perspective to simulate the look of a dock, you may need to fine tune the rectangle with the distort tool. You should have something like this.

Adding The Ipad Icons

Before we add our icons i suggest you download this iphone icon pack by “Marcelomarfil“.

Using your selected icons, add 4 icons from the icon pack to the little dock that we created in the previous step. Add small labels to each icon using the color white and a very small font. Finish the dock by reflecting the 4 icons.

Add the rest of your desired icons towards the top of the ipad, label each icon with a slightly bigger font.

Finally to finish off the screen create a small black rectangle across the top of the screen.

Set the black rectangles opacity to 25%, then add the time and anything else you’d like in the status bar.

That’s it all done, if you wanted to take it further try adding some small buttons or maybe try changing the perspective.

The Finished Ipad

Thanks for reading the tutorial, if you liked it maybe you would consider submitting it to Digg or Re-Tweeting.

See You All Soon.

Preview

Many Thanks PSDBase

Many thanks to “PSDBase” …

Thank You

Car

By Neslirawles

Fresh Grapics

By Fresh Graphics

Avatar Will Smith

By Photo505

London

By Neslirawles

Explode

By Fox3siu

Android

By Thebrok

Fusion Beat 2010

By Tamir.Glz

Retro Futurism

By Tamir.Glz

The Click

By Tamir.Glz

Design Factory

By Tamir.Glz

Hot Girl

By Thebrok

Depart From Thoughts Of Gold

By Blackpixi7

I’m Human

By HelloChrisUy

Travel Log

By Photomachine

Join The HV-Designs Flickr Group

Do you have some artwork you’d like to share with us?? maybe you could concider submitting it into the HV-Designs Flickr Pool.

Setting Up Our Local Files

Create a new folder on your hard drive labeled “vCard”, inside the folder called “vCard” create two more folders “images” and “stylesheets”.

Inside the stylesheets folder create 3 separate CSS files with the following names. “ie.css”, “reset.css” and “styles.css”.

You can easily create CSS files using notepad, just open up a blank notepad document and save it as “filename.css” inside the stylesheets folder. Alternatively you can probably use your favorite code editor.

Finally in your favorite code editor create a blank HTML document called “index.html”, save the HTML file inside the main folder with your two folders.

Linking Our Stylesheets

Inside your HTML file add your own personal title within the “TITLE” tags.

<title>Personal vCard - HV-DESIGNS.CO.UK By Richard Carpenter</title>

Next we need to link our stylesheets the first one we’ll link will be our main one “styles.css”.

<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" />

The next stylesheet will be our internet explorer specific stylesheet “ie.css”, we’ll link this stylesheet using a conditional statement. Basically the way it works is if someone browses the site using internet explorer 7 then the elements within the “ie.css” stylesheet will become active.

<!--[if IE 7]>
<link href="stylesheets/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

We have one more style sheet to link (reset.css), but we wont link the stylesheet within the HTML file. Instead the stylesheet will be imported into our “styles.css”. Open up your “styles.css” stylesheet, at the top add the following code.

@import url("reset.css");

Drafting Some Div’s

Inside the “BODY” tag of your HTML document start off with a DIV of “container”, this DIV will be our main box which will contain all our website elements.

<body>

<div id="container">
</div><!--CONTAINER ENDS-->

</body>

We now need to add 3 more DIV’s which will make up our layout, because the way our layout is designed we can’t make the framework using CSS. So instead we’ll be using 3 separate images.

The first DIV will contain our top rounded corners, the middle DIV will be our main DIV where we add all our content, the middle DIV will also contain a 1 pixel background image which will repeat over and over again. Finally the last DIV will contain our bottom rounded corners and reflection.

We draft the DIV’s out like this.

<body>

<div id="container">

<div id="vcard-top"></div><!--VCARD TOP ENDS-->

<div id="vcard-middle">
</div><!--VCARD MIDDLE ENDS-->

<div id="vcard-bottom"></div><!--VCARD BOTTOM ENDS-->

</div><!--CONTAINER ENDS-->

</body>

Slicing Our Main Images

Open up your PSD file, hide your background layer then select the rectangular marquee tool and make a selection around the top half of your layout including some of the drop shadow. My selection is “856 pixels x 18 pixels”.

Once you’ve made the selection and your happy with it go to “edit > copy merged”. Create a new document, the dimensions of the copied selection should automatically be inputted into the new document box.

Paste the selection into the new document, delete the background layer then save the document as “vcard_top.PNG” inside the images folder.

You need to do the steps listed above for every image your create unless stated otherwise. Remember the steps as i wont be repeating the steps for every image we slice.

Head back over to your original PSD document, select the rectangular marquee tool once again and a make a selection any where across the middle part of your layout. The selection should be equal width to the last image you created and the selection should contain the same amount of drop shadow.

Once you’ve made the selection and your happy with it go to “edit > copy merged”. Create a new document, the dimensions of the copied selection should automatically be inputted into the new document box.

Paste the selection into the new document, delete the background layer then save the document as “vcard_middle.PNG” inside the images folder.

Finally repeat the steps above only this time for the bottom part of the layout including the reflection. Remember to include the same amount of drop shadow into the selection.

Last but not least we need to slice our background image. Hide all the layout elements in your PSD file leaving the background layer un-hidden. Make a 1 pixel high selection spanning 850 pixels wide across the middle part of the radial gradient.

Copy the selection then save it as “bg.PNG” inside the images folder.

Bringing It Together With Some CSS

Open up your “styles.css” file inside your code editor, the first tag we need to style is our body tag. The body tag contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Our body styles look like this.

body {
background-image: url(../images/bg.png);
background-repeat: repeat-y;
background-position: center;
background-color: #D6D6D6;
color: #9a9a9a;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

We add our background image “bg.PNG” as our body background, we then repeat our background along the Y-Axis (vertically). For our background to be situated in the middle of our browser we need to set the background position to center. Finally we set our main background color, font color and font size.

The next DIV we add CSS styles to is our container DIV.

#container {
margin: auto;
width: 856px;
padding-top: 50px;
}

Our container should have a width of 856 pixels the same as our images we created earlier. To center the layout in our browser we set our margins to auto, finally I’ve added 50 pixels of top padding which will push the layout down away from the top of the browser.

Finally we can add our CSS styles to the last 3 DIV’s. The reason why I’m showing all 3 together is because there basically all the same.

#vcard-top {
background-image: url(../images/vcard_top.png);
background-repeat: no-repeat;
float: left;
height: 18px;
width: 856px;
}

#vcard-middle {
background-image: url(../images/vcard_middle.png);
background-repeat: repeat-y;
float: left;
width: 856px;
}

#vcard-bottom {
background-image: url(../images/vcard_bottom.png);
background-repeat: no-repeat;
float: left;
height: 62px;
width: 856px;
}

For our 3 left over DIV’s we add our background images, the top and bottom DIV’s the background should be set to no repeat, where as the middle background we need it to repeat vertically. Each element is floated left and has a width and height that corresponds to the images we created earlier, apart from the “vcard-middle” DIV, there should be no height set as we want the DIV to expand with our content.

Test your layout inside your browser to see how it looks. Hopefully you should have something that looks like this.

Creating Our Sidebar And Content Div’s

For use to add our sidebar elements and content we need to create two DIV’s inside the “vcard-middle” DIV. To determine the width and margins of each DIV we have to do some measuring in photoshop.

We need to measure from our drop shadow to the sidebar area.

From the start of our drop shadow to the sidebar area is “15 pixels”, so we know that we need to add 15 pixels of left margin to our sidebar DIV. We now need to measure our actual sidebar area.

Our sidebar area will need a width of 162 pixels. We create our DIV for the sidebar like this.

<div id="vcard-middle">

<div id="sidebar">
</div><!--SIDEBAR ENDS-->

</div><!--VCARD MIDDLE ENDS-->

The styles for our sidebar DIV look like this.

#sidebar {
float: left;
width: 162px;
margin-left: 15px;
}

We first float the DIV left so that the content DIV will align-up next to it. We then add our width of 162px and add a left margin of 15px. The sidebar DIV should now be perfectly aligned up.

We do exactly the same for the content area. We know there are three 1 pixel lines in between the sidebar and content area, so the margin for our content area will be 3 pixels.

Next measure the content area but don’t include the right frame and drop shadow. Just measure to the end of the white area.

Our content DIV HTML looks like this.

<div id="vcard-middle">

<div id="sidebar">
</div><!--SIDEBAR ENDS-->

<div id="content">
</div><!--CONTENT ENDS-->

</div><!--VCARD MIDDLE ENDS-->

The CSS for our content DIV looks like this.

#content {
float: left;
width: 662px;
margin-left: 3px;
}

Your content area should now all be aligned up nicely, lets add some content.

Creating The Sidebar Menu

Inside the “sidebar” DIV create a simple unordered list with a class of navigation. Add the names for your links including the title attribute. Each list item you also have its own CLASS relating to that list link. Your list should look like this.

<div id="sidebar">
<ul class="navigation">
<li class="about"><a href="#" title="About Me">ABOUT</a></li>
<li class="work"><a href="#" title="My Online Portfolio">WORK</a></li>
<li class="social"><a href="#" title="My Social Network">SOCIAL</a></li>
<li class="contact"><a href="#" title="Contact Me">CONTACT</a></li>
</ul>
</div><!--SIDEBAR ENDS-->

Before we start adding the styles for our navigation we first need to slice our icons, the hover state for our buttons and the little navigation dividers.

The way I’m going to style the navigation in this tutorial is going to be slightly different from all the rest of my tutorials, as in this tutorial we’ll be using sprites. The way it works is we have one big image of all the navigation buttons in there normal state and hover state. The image looks like this.

The image can be either in vertical form or horizontal form, we can adjust the position of the background using CSS. Each button should be equal height and length, all mine are 162px 65px.

Lets add the CSS for our navigation.

.navigation li {
display: block;
float: left;
}

We’ll start with styling our list items. Each list item will be displayed as a block and floated left.

.navigation li a {
display: block;
height: 65px;
width: 162px;
text-indent: -9999px;
background-image: url(../images/nav_divider.png);
background-repeat: repeat-x;
background-position: bottom;
}

Each list item link will also be displayed as a block and must have a width and height which match our buttons, which were 162px X 65px. I’ve added a text indent to shift our text descriptions off the page, the text descriptions will still be accessible by search engines.

We then add our navigation divider image as a background and repeat it horizontal (X axis), positioning the background at the bottom will ensure the background image is displayed at the bottom of each button.

li.about, li.work, li.social, li.contact {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
}

The above code adds our navigation “sprite” image as a background to each one of our list classes. We can merge styles that are the same saving space and loads times.

All’s we have to do now is adjust the background position on a list classes. The code looks like this.

li.about {
background-position: left top;
}

li.work {
background-position: -162px top;
}

li.social {
background-position: -324px top;
}

li.contact {
background-position: right top;
}

The math’s arn’t that hard too work out, we also style our hover states in the same way.

li.about:hover {
background-position: left bottom;
}

li.work:hover {
background-position: -162px bottom;
}

li.social:hover {
background-position: -324px bottom;
}

li.contact:hover {
background-position: right bottom;
}

Test the navigation in your browser to see how it looks.

Adding Our Textual Content

We’ll now add our text for our content area, all our text will go inside the “content” DIV. We’ll start off with our main title and slogan. We’ll start by creating an H1 tag with our title then we’ll add our slogan within the H1 tag wrapped inside a span class of slogan. The HTML looks like this.

<h1>Richard Carpenter <span class="slogan">Front-End Web Developer</span></h1>

On the next line underneath our H1 tag we’ll add an H2 tag with our welcome message.

<h1>Richard Carpenter <span class="slogan">Front-End Web Developer</span></h1>
<h2>Hello, Welcome...</h2>

To finish off the page we’ll add the rest of our text wrapped in P tags.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet sem libero, vitae rhoncus orci. Suspendisse enim sem, iaculis a dapibus eleifend, laoreet vitae tellus. Cras vitae dignissim purus. Nunc mattis luctus eleifend. Aliquam vel felis risus. Quisque imperdiet gravida consequat. Fusce volutpat tortor ac lectus pellentesque congue. Integer non lacus non felis congue egestas vel et erat. Donec elit nunc, posuere in semper id, pharetra vitae dolor. Nam imperdiet, risus vel fringilla placerat, enim erat cursus lorem, sit amet vulputate ante sapien sed dolor.</p>

The CSS for our H1, H2 and P tags look like this.

h1 {
font-size: 30px;
color: #595858;
text-align: center;
letter-spacing: -2px;
margin-top: 10px;
margin-bottom: 20px;
}

h2 {
font-size: 16px;
color: #4e4e4e;
margin-bottom: 5px;
}

span.slogan {
color: #858585;
font-size: 14px;
vertical-align: middle;
letter-spacing: -1px;
}

#content p {
text-align: justify;
}

Done

Test your layout inside your browser, you should have something like the image below.

Still not convinced, you can view the live demo by clicking the image below. All that’s left for you to do now is create your additional pages which shouldn’t be too hard. Look out for the complete layout which il be giving away for free soon.

Personal vCard

The Tutorial

You can view the full tutorial here, if you haven’t already seen it.

Learn To Code This Layout

You can learn how to code this layout by following this tutorial HERE.

License and Attribution

This PSD is licensed under the Creative Commons license and can be used for personal purposes ONLY. Attribution is required and is always appreciated.