Hello everybody, in this tutorial I’ll be showing you how to create a digital CV (Curriculum Vitae). The tutorial itself is pretty simple to do, but I’ll be showing you how to code it into a working template in part 2.

 

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

In this Photoshop graphic design tutorial, I will be walking you through the method of designing an LCD monitor completely from scratch. I’ll be illustrating how easy and simple it is to achieve realistic and detailed effects using only the basic tools available in Photoshop such as selection tools, some Free Transform commands, and smart application of layer styles.

 

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

This tutorial is a submission from “Ivelina Dimitrova”, in this tutorial she will guide you through the process of making a lipstick illustration.

 

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.

Hello, welcome. Today i’ll be showing you how to create a carbon fibre style inset menu. This tutorial comes after a request from one of hv-designs readers, which i was more than happy to oblige.

 

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

Hello everybody welcome to another tutorial. In today’s tutorial I’ll be showing you how to make a business layout, the layout will feature a dark theme with hints of red and white. Lets get started.

 

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.

Good evening everybody welcome to another tutorial by HV-Designs. In today’s tutorial I’ll be showing you how to create a sleek web design company style web template.

 

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.

Good evening everybody, in today’s tutorial il be showing you how to create an “Apple Ipad” from scratch using only photoshop. Lets get going.

 

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.

Hello everybody, welcome to another tutorial by hv-designs. In today’s 3 part tutorial il be showing you how to create a personal vCard. In the second installment il be talking you through the process of coding it into a live working template.

 

What’s A vCard?

vCard is a file format standard for electronic business cards. vCards are often attached to e-mail messages, but can be exchanged in other ways, such as on the World Wide Web. They can contain name and address information, phone numbers, URLs, logos, photographs, and even audio clips. (Wiki Description)

The Final Layout

This is what the finished result will look like. (All 4 pages)

Lets Get Started

Create a new document 1200 x 1200 pixels, don’t worry if the canvas size is a bit big to start with as you can crop the layout later. Set your foreground color to #fdfefd and background color to #d6d6d6, now select the gradient tool with a radial gradient.

About 400 Pixels down from the top of the canvas start to drag the radial gradient. Drag the radial gradient in any direction. The look were trying to achieve is a simple round glow of light in the middle of our work area, just like the image below.

Creating The vCard Frame

Select the color white (#ffffff) for your foreground, then select the rounded rectangle tool from the tools menu.

Drag out a rectangle with a width of about 850 pixels, the more accurate you design your layout the less problems you will have regarding image sizes when it comes to coding. The height of the rectangle should reflect the amount content you are planning on putting inside.

Place the rectangle in the center of your canvas over the top of your gradient overlay, then add these layer styles.

You should have something like this.

Creating The vCard Content Area

Load a selection around the vCard frame, you can do this by either selecting the layer then going to “Select > Load Selection” or by clicking the little thumbnail icon inside the layer’s palette whilst holding down the CTRL key on the keyboard.

Once you’ve loaded the selection go to “Select > Modify > Contract”, contract the selection by 10 pixels then press enter. Create a new layer above your vCard frame layer then fill the selection with any color.

Label your new layer “Content” or something similar then add these layer styles.

You should have something like this.

Creating The Navigation

Select the “Rectangular Marquee Tool” then make a selection around the left side of the content box and frame. Fill the selection with any color, label the layer “Navigation”.

Load a selection around your inner rectangle, (Content area) but keep the navigation layer selected in the layers palette. Were now going to inverse the selection by going to “Select > Inverse”, once inversed hit the delete key on the keyboard.

Now load a selection around the navigation rectangle then contract the selection by 1px. Once you’ve contracted the selection leave the selection active and inverse the selection then hit the delete key.

Your navigation should now be set for some layer styles, add the following layer styles to your navigation rectangle.

You should now have something like this.

Adding The Navigation Elements

On the right side of the navigation, next to the stroke, add a 1 pixel white line. The line should span the height of the navigation.

Inside the navigation area add some spliffy icons to represent each section. I’m using some icons from WooThemes.

Label each icon using the following settings and layer styles.

In between each icon and label add a divider/separator. We make this by creating two 1 pixel lines on top of each other, one white and one black. Create the lines the width of the navigation then set the layer opacity to “Soft Light”.

Were now going to make the navigation hover button, create a new layer underneath your blue text layer. Once you’ve created the new layer make a selection around your first button.

Fill the selection with any color then add these layer styles.

You should have something like this.

With the “Pen Tool” make a curved path over your navigation hover button. Once you’ve made the path fill it with the color white (#ffffff). Lower the opacity to suit, I’ve lowered mine down to 15%.

The Content

For the content area on the about page il be just using text, a couple of paragraphs about myself.

Creating The Layout Reflection

On my finished layout if you look at the bottom of the layout you will notice i have a reflection, we do this by selecting “The layout frame, Content box and Navigation” layers. Once you’ve selected the layers duplicate them then flip them vertically, move the layers down in the layers palette above the background layer.

Merge the duplicated layers into one single layer then add a 2 pixel guassian blur.

Add a layer mask to the reflection layer then drag a linear gradient from the bottom of the reflection to the top.

It might take a couple of attempts to get it too look decent, once you’ve finished you should have something like this.

Things Left To Do

Now that’s the first page out the way, now its your turn to create your own 3 additional pages to go with the layout. Don’t worry if you don’t manage to finish the layout as il be giving away the FREE PSD file before we start part two.

Thanks for reading.

The Final Layout

Learn To Code This Layout

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

Good evening ladies, gents, boys and girls. Welcome to another tutorial from hv-designs, today il be showing you how to make a creative 3D layout. The layout features a sleek navigation inspired by the mac and has a nice subtle look with subtle grey colors.

 

What We’ll Be Creating

Let’s Begin

Create a new document “1200 pixels X 1200 pixels” with any color background. Set your foreground color to “#424241″ and background to “#191919″ then select the “Gradient Tool” with a “Radial Gradient”.

Drag the radial gradient from the middle of the canvas down to about half way down.

Creating The Website Title Text

Select the “Text Type Tool” and type out your website title and slogan, place your title and slogan in the top left side of the canas.

On your main title layer add the following layer styles.

You should have something like this.

Creating The Search Box

Select the “Rounded Rrectangle Tool” with a radius of “15px”. Drag out a medium sized rectangle on the right side of the canvas.

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

You should have something like this.

With the “Rounded Rectangle Tool” once more drag out a smaller rectangle inside the last rectangle you created. This time change the radius to “5 px”. Once you’ve create the inner rectangle “Cut & Paste” the right end of the rectangle for later use.

Now add the following layer styles to the inner rectangle.

You should have something like this.

Un-hide the part of the rectangle that you cut earlier, if it isn’t already place it back into its orginal postion.

Now add a gradient overlay to the end of the rectangle in which we cut earlier.

On the top of the blue button where it meets the search field (the white rectangle) add a two 1 pixel lines. The first line should be colored in black then the second in white. Once you’ve created the lines set the layer blend mode to “Soft Light”.

Finish off the search area by labelling your submit button and search field. You should have something like this.

Creating The 3D Navigation

About 100 pixels down from the search box and website title create two 1px lines on top of each other. Both lines should be 950px wide or as wide as your layout is intended. Fill the top line in black (#000000) and the bottom line in white (#ffffff). Set the layers blend mode to overlay.

Select the “Rectangular Marquee Tool” or the “Rectangle Tool” then create a rectangle the same width as the line we created in the previous step. Fill the rectangle with the color white then go to “Edit > Transform > Perspective”.

Drag the left top anchor point inwards until you have something like the image below. Also make sure the black and white 1 pixel lines are directly above the rectangle leaving no space at all between the two objects.

Once you’ve finished add a gradient overlay using the settings below.

Select the “Elliptical Marquee Tool” and drag out a big ellipse. The ellipse should cover just under half of the rectangle we recently created.

Fill the ellipse in black (#000000) then set opacity to “50%”. Load a selection around your rectangle, inverse the selection then select the ellipse layer and hit delete. You should have something like this.

Adding The Navigation Icons

For the navigation i used some folder icons by “Scott Copeland“, i chose my prefered icons and placed them on the navigation area. On the first icon i added a subtle outer glow to indicate its hover state.

Duplicate each icon then merge all the duplicated icon layers into one layer single layer. Drag the duplicated layer underneath all the icon layers then flip the icons vertically “Edit > Transform > Flip Vertically”. Finally blur the merged icons by 2px by going to “Filter > Blur > Guassian Blur”.

Add a layer mask to the duplicate icons layer, then drag a linear gradient from the bottom of the icons to about half way up. Your only going for a nice subtle look, you should have something like this.

To finish the navigation off simply label your first icon, or the one which has the hover state added. Ive chosed for a small speech bubble, if i were to code this id use a jquery tool tip script for the navigation hovers.

Creating The Content Area

Using the “Rectangle Tool” or the “Rectangular Marquee Tool” create a big rectangle for your content area. The rectangle should be the same width as the bottom of the navigation and should also directly underneath leaving no space between the two objects.

Now add a gradient overylay to your content rectangle using the settings below.

You should now have something like this.

Now its time to add some dummy content, i havent exactly gone into perfecting the content for the layout so if you think the content area looks rubbish “I Agree With You”.

For the content area i chose some indented style titles and simple long paragraphs. Underneath each title i added a simple seperator using two 1px lines just like on the navigation bar. Finally ive added a simple list with some icons and a image gallery using 3 big thumbnails.

Obviously you can take more time to perfect your content area, mines purley for example.

Creating Our Footer

We finish off the layout by adding a simple text style footer, above the footer text i added a divider. The divider was created by using two 1px lines on top of each other, one colored black and the other white. Just like our navigation, the layer blend mode is then set to overlay.

All Done

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

Hope you enjoyed this tutorial, dont forget to promote this tutorial by submitting to Digg and maybe Re-Tweeting on twitter. Thanks.

Hello everybody, hope you all had a nice christmas and new year. The tutorial to start 2010 is a portfolio layout with a green theme, the layout features some nice styling and 3D elements.

 

What Were Creating

Lets Get Started

Create a new document 1200 x 1200 pixels with any color as the background. Right-Click your background layer in the layers palette and select “layer from background”.

Rename the layer back to “background” then add a gradient overlay using the settings below.

Select the “Elliptical Marquee Tool” then drag out a big oval, fill the oval with the color white (#FFFFFF). Press “CTRL + T” to free transform the oval, rotate clockwise to match the image below.

Rename the oval’s layer to “Soft Light” then in the blending mode options set the oval to “Soft Light”. Finally blur the oval by 70px using “Guassian Blur” from the filter menu. You should have something like this.

Creating The Website Title

Before we begin this step let me talk about guides. In this tutorial I’ve setup two vertical guides, the two guides will allow me to accurately create my layout at a maximum width of 850 pixels. If you would like to add guides to your PSD file then you need to create the guides at “125px” and “1075px”. Make sure you add the “px” at the end else the guides will be created in “cm”.

Select the “Type Tool” and create your website title and slogan. I’ve used the words “your portfolio” then the little slogan by the side. Both words “Your” and “Portfolio” are on separate layers as i want to add different layer styles to each word.

On my first word “your” I’m going to add the following layer styles.

The first word now looks like this.

On the second word “Portfolio” I’m going to add the following layer styles.

On your slogan just add the same drop shadow as the other two words. You should now have something that looks like this.

Creating The Navigation

Select the “Rounded Rectangle Tool” from your tools area then change the radius of the rectangle to “5px”.

Now your set to go, drag out a rectangle 850px wide and about 50px in height, fill the rectangle with any color on a new layer. Add the following layer styles to your rectangle.

Your navigation should look something like this.

Using the “Rounded Rectangle Tool” once again create another rectangle inside the navigation rectangle.

Fill the rectangle with the color white, set the layers opacity to 5% then rename the layer “Navigation Shine”.

Using the “Type Tool” add your navigation links to your navigation. Once you’ve added your links create “Two 1px Lines” next to each other, color the first one white (#ffffff) and the second one in black (#000000). Both lines should be equal height to the navigation.

Set the blend mode to “Overlay” and opacity to “25%”. Now duplicate the lines and place in between each link. You should have something like this.

Creating The Featured Area

Select the “Rectangle Tool” and drag out a rectangle which is 850px wide and about 147px – 150px in height. Place the rectangle directly underneath the navigation bar leaving a 1px gap in-between each element.

Add the following layer styles to your featured box.

Earlier in the tutorial we created a big ellipse and blurred it by 70pixels, we named the layer “Soft Light”. Duplicate your “Soft Light” layer then drag the duplicated layer above your featured box layer.

Click the little thumbnail located on the duplicated layer whilst holding down the “CTRL” key on the keyboard, this should load a selection around the featured box. Highlight the duplicated soft light layer by left clicking on it then go to “Select > Inverse” then finally hit the “Delete” key on keyboard.

Doing this just simply removes the top half of the duplicated ellipse, leaving the bottom half inside the featured box. You should have something like this.

Creating The Featured Area, Slider Control Panel

On the right hand side of the featured area add a vertical divider. The divider is made exactly the same way as our dividers on our navigation bar. (Two 1px lines next to each other colored black and white) Just make sure the opacity is set to “25%” and blend mode is set to “Overlay”.

Using the “Rectangular Marquee Tool” make a selection from the divider we just created up to the end of the featured box.

Fill the selection in the color black (#000000) then set opacity to 15%.

Using the “Circle Tool” create 4 black circles spaced out evenly on to the right side of the featured box.

In the space left over above and below the smaller rectangles, create two more but slightly bigger.

Add the following layer styles to the two big circles.

Now add an arrow in both top and bottom bigger circles, then Add these layer styles to your “First” small rectangle only.

To the last 3 smaller circles add the following layer styles.

You should have something like this.

Finishing The Featured Area

On the left side of the featured area create a small rectangle which slightly overlaps the content box. Cut off the right side of the box diagonally using your favorite cutting tool.

Add these layer styles to your rectangle.

You should have something like this.

Using the “Polygonal Lasso Tool” join up the left side of the rectangle to the content box, giving the rectangle a 3D look. You can use the same layer styles for the 3D part also.

Fill the featured area with your dummy content. You could have something like this.

Creating More Content

Duplicate your featured area then move the rectangle underneath leaving a 2px – 3px gap in between each element. Rename the layer to “Services Box” then create a new blank layer above it.

Select both layers in the layers window so both layers are highlighted. Right-Click the little “Eye” icon on the side of one of the layers then go to “Show/Hide All Other Layers”, all layers should now be hidden apart from the blank layer and the services box layer. Now go to “Layer > Merge Visible”, finally un hide all your layers.

Add a layer mask to the services box layer then drag a linear gradient from the bottom of the rectangle to the top of the rectangle. You should have something like this.

On the right side of the services box add your 3D title by simply duplicating it and flipping it. Add a title inside the box then add an icon of some sort underneath.

Finally fill the rectangle up with some dummy content. You could have something like this.

Creating The Gallery

Duplicate your services box then flip it vertically. Move the duplicated box down towards the bottom of the canvas.

In-between the two boxes add a dividing line, the line is made in the same way as our navigation separators. Once you’ve created the dividing line add a layer mask to the layer then drag a reflected gradient starting from the middle and ending up on either the left or right side. (Make sure foreground color is set to white).

Underneath the dividing line add some more dummy text.

Now select the “Rectangle Tool” and make a square, fill the square with the color #324348 then add a 1 pixel stroke using the color #4a626a.

Load a selection around the square box. (To do this click the little thumbnail in the layer whilst holding down the CTRL key) Then go to “Select > Modify > Contract”, contract the selection by 10px.

Either copy and paste an image into the selection or make up your own image then paste it into the selection.

Using the pen tool create a white shine over the images, once you’ve created the shine duplicate each image to create more gallery entries.

Finally add some important footer information underneath the final content box.

You have now completed the tutorial, you should have something like this.

Thanks

Thanks for taking the time to read my tutorial, hope you liked it. Il look forward to your comments.

Hello, welcome to another tutorial by hv-designs. In this tutorial il be showing you how to make a sleek monitor icon. We’ll be using shape layers for this tutorial so the monitor can be resized as much as you want without loss of quality.

 

What Were Creating

Right lets get started.

Creating Our Simple Background

Create a new document 650 x 650 pixels with a transparent background, this sized canvas should be sufficient for our icon. If you need to then feel free to make it bigger.

Once you’ve created your new document right click the background layer and click “layer from background”.

Rename your layer back to “background” then add a gradient overlay using the settings below.

Creating The Monitor Surround

Set your foreground color to white (#ffffff) then select the rounded rectangle tool with the following settings.

Now drag out a rectangle within your canvas area, remember not to make it too big as we still need to add the monitor stand etc… later. Upon dragging out the monitor surround a layer should automatically be created. Label the new layer “monitor surround”.

With your monitor surround layer selected go to “edit > transform > perspective” select the left anchor point then drag it towards the left of the canvas. You should have something like this.

Double click your monitor surround layer to open the layer styles window, add the following layer styles to your layer.

You should have something like this.

Creating The Inner Surround

Select the rounded rectangle tool with the same settings as last time, drag out a smaller rectangle inside your monitor surround rectangle. Label your new layer “inner surround”.

Adjust the perspective of the inner surround in the same way we did our monitor surround. (“edit > transform > perspective”)

Now add the following layer styles to your inner surround layer.

You should have something like this.

Creating The Screen

Select the rounded rectangle using the same settings as last time, this time drag out a rectangle inside your inner surround rectangle. Adjust the perspective the same as we did with the last two rectangles. Finally label your new layer “screen”.

Add the following layer styles to your screen layer.

You should have something like this.

Select the pen tool then change the settings to paths.

Create a new layer labeled “shine” then with the pen tool make a path like the image below.

Once you’ve made the path, set your foreground to white (#ffffff) then right-click and go to “fill path”. With the shine layer selected click the screen layer whilst holding down the CTRL key on the keyboard, doing this should load a selection around the screen.

Now go to “select > inverse” then hit the delete key.

Set the shine layers opacity to 10% then add a layer mask, select the gradient tool then with a linear gradient drag from the bottom of the shine towards the corner.

Creating The Monitor Buttons

Select the circle tool then create two circles on the left side of the monitor surround. Create one circle bigger than the other.

Add the following layer styles to each button.

You should have something like this.

Creating The Power Light

With the circle tool once more create a small circle in the center of the monitor surround.

Add the following layer styles to your power light circle.

You should have something like this.

Feel free to add more features to your monitor to make it abit more realistic.

Creating The Stand

Select the rounded rectangle tool, on a layer underneath your monitor surround drag out a rectangle.

Adjust the perspective in the same way we did our monitor layers, then go to “edit > transform > warp”.

Inside the warp menu select “arc lower” then adjust the bend at the bottom of the rectangle.

Finally add a gradient overlay to the stand using the colors #303030 and #535353, you should have something like this.

Duplicate your stand layer then drag the duplicated layer underneath its original. Move the duplicated layer down a couple of times, depending on how far you move it down will determine the thickness of the stand.

Once moved into place add the following gradient overlay.

Select the pen tool and draw a path across the center of the stand. Once you’ve made the path, set your foreground to white (#ffffff) then right-click and go to “fill path”. With the white paths layer selected click the stand layer whilst holding down the CTRL key on the keyboard, doing this should load a selection around the stand.

Go to “select > inverse” then hit the delete key, you should be left with a white area overlapping your stand, set the layer opacity to 4%.

Creating The Shadows

Select the elliptical marquee tool and make a selection on a new layer above your stand layer. The selection should be now wider than the stand and should be too high.

Fill the selection with the color black (#000000). Deselect the selection with CTRL + D then go to “filter > blur > guassian blur” set the blur amount to about 6-8 pixels then press ok. Set the layers opacity to about 40%, if need you can free transform the ellipse and make it smaller if it exceeds the stand width.

You should have something like this.

Repeat the process above but only this time create the shadow underneath the stand itself.

The Finished Icon

Congratulations should now have completed the tutorial and hopefully have something like the image below.

Many thanks for reading this tutorial.

Free PSD

Look out for the FREE PSD file in which il be adding to the freebies section soon!

 

Enjoy

Good evening welcome to tutorial #236, in this tutorial il be showing you how to make a hosting layout. This hosting layout features a nice light theme with hints of orange.

 

Creating The Top Navigation

Create a new document 1200 x 1200 pixels, fill your background with the color #eeeeee. Select the rectangular marquee tool then make a rectangle which spans the width of your canvas but is about 40 – 42 pixels in height.

Fill the rectangle with any color then add a gradient overlay using the settings below.

Were now going to create our very own diagonal lines pattern. Create a new document 25 x 25 pixels, zoom in as much as you can then select the pencil tool or i 1 pixel paint brush. Once you’ve selected your desired tool duplicate the pattern below.

Now that you’ve duplicated the pattern from the image above go to “edit > define pattern”, save your pattern and give it a relevant name. Head back over to your original canvas then load a selection around your rectangle.

Create a new layer above the rectangle then fill the selection with your diagonal lines pattern. Once filled set the diagonal lines patterns opacity to 2%.

Were now going to add a little shine effect to the top navigation, select the rectangular marquee tool then make a selection around just under half of the rectangle.

Fill the selection on a new layer with the color white (#ffffff). Finally set the shine layers opacity to 50%.

Creating The Master Header

With the rectangular marquee tool make a selection about 145 pixels in height which spans the width of the canvas.

While the selection is still active, select the elliptical marquee tool then drag out a circle over the selection on the left side. Make sure you hold down the shift key before dragging out the circle, doing this will add the circle to the selection. Holding down CTRL will subtract from the selection.

Your looking to get something like this. Alternatively you can use a grid.

Fill then selection with any color on a new layer then add a gradient overlay using the settings below.

Load a selection around your main header shape if its not already selected, then go to “select > modify > contract”, contract the selection by 10 pixels. Create a new layer above the main shape while the selection is still active then fill the selection with any color.

Because the shape was contracted, both left and right edges will have contracted 10 pixels away from the edge of the canvas. Make a selection around both sides then extend them past the canvas.

Once you’ve extended the left and right sides add the following layer styles to the smaller shape.

So far your layout should look like this.

Creating The Glass Orb

Inside the header where we added the circle to the selection, select the elliptical marquee tool or the circle tool and add a circle inside.

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

You should now have something like this.

Using the rectangle tool or the rectangular marquee tool create 4 white rectangles 2 at the top then 2 underneath, like a window.

Now go to “filter > distort > spherize”, now depending on how big you’ve done the rectangles will determine how many times you have to repeat the spherize step. I had to do mine once, but you may need to repeat the step a couple of times.

Once you’ve got your rectangles spherized, resize them and place them onto the orb. Set the rectangles layer opacity to 20%. You should have something like this.

Select the elliptical marquee tool then make a selection inside the orb.

Fill the ellipse with the color white, set the opacity to around 20% then add a layer mask. Drag a linear gradient from the bottom of the white ellipse towards the top but stopping around the middle of the white circle.

Repeat the process above to create a further 2 circles, change the direction of the linear gradient to give the orb a glassy look. you should have something like this.

Adding Some Content

Inside the orb add your website logo then set the logo’s blend mode to overlay. Using the type tool add your website title and slogan. Use the settings and color’s below for your title.

Now add the following layer styles to your website tite.

You should have something like this.

Again with the type tool add your navigation on the right side of your title, place the simple text links in the middle of the header shape. You can also add a smaller navigation in the top bar.

In between each navigation link create two 1 pixel lines next to each other which span the height of the smaller header shape, color the first one in white (#ffffff) and the second one in black (#000000), finally set the blend mode to overlay.

Adding A Catchy Tag Line

Underneath the header add a catchy tag line using the text settings as below.

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

Creating The Content

Select the rounded rectangle tool with a radius of 10 pixels, (default settings are 10 pixels unless otherwise changed previously) drag out a biggish box big enough for a decent amount of content. Leave a space on the right for our sidebar.

Lets now give the content box a better look by adding the following layer styles.

You should now have something like this.

Inside the content box add your website add your content.

Follow the same steps for your sidebar, the layer styles for the box are the same as the main content box.

Adding Additional Content

Underneath the sidebar box create two 1 pixel lines on top of each other on the same layer.

Select the elliptical marquee tool and make a ellipse over the top of the divider, fill the ellipse with the color black (#000000).

Blur the ellipse by going to “filter > blur > guassian blur”, blur the ellipse by about 6-8 pixels. Set the ellipse’s layer opacity to around 5% then select the rectangular marquee tool and make a selection around the bottom of ellipse up to the divider.

Delete part of the ellipse from the divider downwards, basically leaving half of the ellipse above the divider. Finally add a little twitter icon and some twitter text just above the divider line.

Next, create 3 boxes using the rounded rectangle tool leaving an equal gap in between each one, use the same layer styles as we did for our main content box and sidebar box.

In between each box add a little arrow icon, I’m using an icon from the woo themes icon pack. (http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/).

Inside each box add your hosting plans.

Creating The Footer

The footer is fairly easy, in your layers palette select all the layers which correspond the main header, including the orb and logo but excluding the navigation items, website title and top bar.

Duplicate the layers then drag to the bottom of the canvas. While all layers are selected press CTRL + T then resize all the layers so the orb is fairly small and the header part is big enough for some footer text.

Flip all the layers horizontally, then extend the edges past the canvas.

The Finished Result

Thanks for reading, hope you enjoyed this tutorial, Thank You. You can download the PSD file for free by going HERE

 

Enjoy

Hello welcome to another tutorial by hv-designs, in this tutorial il be showing you how to create a black and white themed car layout.

 

Lets Get Started

Start off by creating a new document 1200 x 1200 pixels, setup two vertical guides by going to “view > new guide”. Set the first guide at 125px and the second guide at 1075px, this should give us a canvas size of 950 pixels to work with.

Now set the colour #212121 as your foreground and #080808 as your background. Select the gradient tool with a radial gradient then drag the gradient from the top middle part of the canvas to about half way down.

Creating The Website Title

Select the text type tool then add your website title along with your slogan in the top left corner of the canvas.

Once you’ve done that add the following layer styles to your website title (not your slogan).

You should now have something like this.

Creating The Navigation

Select the rounded rectangle tool with the default radius settings (should be 10px). Drag out a rounded rectangle starting from the right guide. Fill the navigation with any colour.

Now add the following layer styles to your navigation rectangle.

You should have something like this.

Still with the rounded rectangle create another rectangle inside the navigation rectangle.

Fill the second rectangle with the colour white then set the layer opacity to 4%. Now with the type tool add your text navigation links.

In-between each link add a simple white ellipse.

Creating The Featured Area

Underneath your title and navigation create a rectangle with the rounded rectangle tool, the rectangle should span the width of the guides and should be about 320 pixels in height.

Fill the featured rectangle with a radial gradient in the same way we did our background at the start of this tutorial. Once you’ve done the radial gradient at a 1 pixel stroke using the settings below.

You should have something like this.

Were now going to add a big shine effect over the featured area, so select the pen tool and create a curvy path like the image below.

Fill your path in white then load a selection around the featured rectangle but keep the shine layer selected. Go to “select > inverse” then hit the delete key, you should be left with a white shape which resides inside the featured rectangle. Set the shine layer’s opacity to 2% then add a layer mask, drag a linear gradient from the right of the shine to the left.

Inside the featured area add some dummy text and title.

For this next part your going to need an image of a car, im using a car by reiger. Drag your car image onto your canvas, cut away the background using your favourite cutting method. Place the car on the right side of the featured area.

Create a new layer underneath your car layer, select the polygonal lasso tool and a make selection underneath the car. The way i do it is, i imagine the car’s wheels as four corners.

Fill the selection with the colour black then blur the shadow by around 2-4 pixels using the guassian blur. Now duplicate the car layer and flip it vertically, place the duplicated layer underneath its original. Move the car directly underneath to act as a reflection, you may need to distort the image to get a correct look.

Once you’ve moved the duplicated layer into place, add a layer mask then blend it in using the linear gradient. You should have something like this.

Creating The Content Area

Select the rounded rectangle tool and create two rectangles side by side, one big one and one small one. Fill each rectangle in the color #141414 and add a stroke using the settings below.

You should have something like this.

At the top of each content box add a smaller rounded rectangle big enough to add a simple content box title. Fill each new rectangle in the colour #080808.

Now add your content box dummy content, ive just added some lorem ipsum text a small list and an example image.

Creating The Footer

Underneath all the content add two 1pixel lines, fill the top line in black and the bottom line in white. These two 1pixel lines should span the width of the canvas up to each guide.

Once you’ve created your lines set the layer blending mode to “overlay”. Now, with the rectangular marquee tool or the rectangle tool create a rectangle underneath the lines, fill the rectangle in the colour #060606.

Finish the layout by adding your footer information to the footer area.

The Result

Here’s my finished layout.

You can download the free PSD to this tutorial by heading over to our freebies section.

 

 

Enjoy.

Hello, welcome to another tutorial by hv-designs. Today il be showing you how to make cool blue web design layout. The layout features a cloud theme and a screenshot of the new hv-designs coming 2010.

 

Lets Get Started!

Create a new canvas 1200 x 1200 pixels with a white background, setup two vertical guides by going to “view > new guide”. Create the first guide at 125px then the second guide at 1025px.

Select the rectangular marquee tool from the left menu, then drag out a selection spanning the width of the canvas. The rectangle should be around 113 – 115 pixels in height.

Fill the selection on a new layer with a linear gradient using the colors #f9f9f9 and #f0f0f0.

Double click the layer and label it “header”, then add a stroke using the settings below.

Creating The Featured Background

Using the rectangular marquee tool once again, create another selection underneath the header. This selection should also span the width of the canvas and be about 295 pixels in height. Fill the selection with a linear gradient using the colors #98c0e0 and #a4cff2. You should have something like this.

Lable your new blue rectangle “featured area” then add a layer stroke using the settings below.

Finishing The Header

Using the type tool add your website title and slogan to the top left hand side of the header area. On the right hand side of the header area add a simple text navigation using a rounded rectangle as the hover state for the first button.

You should have something like this.

Finishing The Featured Area

Select the elliptical marquee tool then make a small ellipse against the left guide at the bottom of the blue featured area.

Hold down the shift key then create another ellipse overlapping the first one you created.

Repeat the process over and over again until you reach the other side of the canvas. Make sure the last one ends at the right guide.

Fill the whole shape with the color white on a new layer, then add these layer styles.

You should have something like this.

Repeat the process again with the elliptical marquee tool, only this time create individual shapes like a cloud.

Fill the new shape with the color white then add these layer styles.

 

You should have something like this.

You should have something like this.

 

Add your featured image to the featured area, tuck the image behind the bottom row of clouds by dragging the layer beneaf the clouds layer. Im using an image of the new hv-designs layout coming 2010.

On the left side of the featured image add a title and description.

Now select the rounded rectangle tool and create a small button at the bottom of your featured description.

Add the following layer styles to your button layer.

You should have something like this.

Creating The Content Area

Using green headings and grey text build up the content area with some dummy content.

Under client images begin to create a gallery showcase, behind each image add a grey border with a darker grey stroke. Add your dummy text either side of the images then duplicate the green button from the featured area.

Creating The Footer

Simply duplicate the clouds and the featured area layers then drag them to the bottom of the canvas. Place the clouds at the top of the blue rectangle instead of the bottom.

Finally add your footer information to the footer.

The Finished Layout

Thanks for reading this tutorial, dont forget to DIGG and RE-TWEET this tutorial, your help is much appreciated.

Hello, welcome to another layout tutorial from hv-designs. Today il be showing you how to create a sleek looking business layout from scratch using photoshop CS3. The layout features some great colors and overall a professional look.

 

Lets Get Started! – The Header

Create a new document 1200 x 1200 pixels with a transparent background.

Select the rectangle tool or the rectangular marquee tool, then create a rectangle at the top spanning the width of your canvas. The rectangle should be around 14 – 15 pixels in height. Once you’ve created the rectangle select the paint bucket tool and fill the rectangle with the color #374e5e.

Select the pen tool and begin to jot down a path like the image below. (I’ve added a black background so you can see the path more easier).

Either side of the path that sticks out should be a perfect rectangle. You can achieve this by holding down the shift key on the keyboard when plotting your next anchor point. Once you’ve completed the path right click and go to “fill path”, fill the path with any color. Once filled right click once more and go to delete path.

Once you have something like the image above add these layer styles to your shape.

You should have something like this.

Creating The Navigation

On a layer behind your header create another rectangle about 50 pixels in height which spans the width of your canvas.

When you’ve created your navigation rectangle add these layer styles.

You should have something like this.

Create a new layer above your navigation layer but underneath your header layer, select the rectangular marquee tool then make a selection across half of the navigation.

Fill the selection with the color white (#ffffff) then set the layers opacity to 8%.

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

Once your done duplicating the pattern above go to “edit > define pattern” then label the pattern “lines”. Load a selection around your navigation by clicking the little thumbnail in the layers panel whilst holding down the CTRL key on the keyboard.

Create a new layer directly above your navigation labeled nav pattern. Select the paint bucket tool then at the top change foreground to pattern and select the pattern from the drop down box.

Fill your selection with your pattern then set the layer opacity to 2%, you should now have something like this.

Adding The Navigation And Head Elements

Inside the header where the like flap shape is add your website title and slogan along with your website logo.

On your navigation add some navigation text using the type tool.

Select the rounded rectangle tool with a radius of about 10 – 15 pixels, drag out a rectangle around your first navigation link then set the layer opacity to 25%, you should have something like this.

The Featured Product

Make a selection starting from underneath the navigation, selecting all the rest of the canvas. Fill the selection with the co lour white then add a gradient overlay using the settings below.

Directly underneath the navigation where the navigation’s stroke ends, create a 1 pixel line spanning the width of the canvas.

Were now going to start to add some content, for the main focus of my layout I’m going to use an image of an iphone. Place your image on the left side of your canvas underneath your header and stuff.

Using the elliptical marquee tool, or the circle tool make an oval selection underneath your featured image.

Fill the oval selection with the color black, then using the guassian blur, blur the oval by about 3 pixels. Finish off the shadow by setting the layer opacity to about 34%.

On the right side of the featured image add a sleek title and some example dummy text.

On the main title text add a drop shadow using the settings below. The little arrow icons are from an icon pack by “WooThemes“.

Finally after your dummy text create a little read more button. The button was made using the round rectangle tool, the styles for the button are identical to the navigation’s styles. You should have something like this.

Creating The 3D Sidebar Box

Make a selection underneath your featured area spanning the width of the canvas and the rest of the canvas at the bottom.

Add the following gradient overlay to the content background.

Again just like we did underneath the navigation add the 1 pixel white line spanning the width of the canvas, also this time add a 2nd line above the white line using the color #e0e0e0.

On the right side of the content area create a round rectangle, using the rounded rectangle tool. Chop the top set of rounded corners off using your preferred cutting tool.

Copy and paste your navigation layer styles over to your rectangle, once you’ve copied the layer styles add an additional drop shadow using the settings below.

Create a new layer underneath your rectangle then select the polygonal lasso tool. Make a triangular selection starting from the top corner and ending above the main content line. Fill the polygonal selection with the color #125971.

Load a selection around your rectangle then add the lines pattern we created earlier. Finally fill your rectangle with dummy content.

Adding The Main Content

On the left side of your 3D rectangle start by adding an example title and a couple of paragraphs.

Underneath your paragraph’s add some dummy business images. Load a selection around each image then expand the selection by about 10 pixels, fill the selection with the color white on a new layer underneath the image. Finally add a light gray stroke to the white box behind each image.

This effect adds a nice image border around each image. You should have something like this.

Creating The Footer

For the footer simply duplicate your navigation elements, then drag them down to the bottom of the canvas. Add your footer copyright information to the blank navigation.

The Finished Layout

You should finally end up with something like this.

Thanks for reading, hope you enjoyed this tutorial. Don’t forget to support hv-designs and digg this post. Thanks.

Hello welcome to another tutorial by hv-designs. In this tutorial il be showing you how to make a simplistic colourful web design layout from scratch using photoshop.

 

Let’s Get Started!

Create a new document 1200 x 1200 pixels with a white background.

Set your foreground colour to #151515, then fill your background using the paint bucket tool. Were now going to setup two guides so our layout stays within the center of our canvas, and has a maximum width of 900 pixels.

In the menu at the top go to “view > new guide”, in the box that pops up enter 150px. Repeat the step only this time enter 1050px.

Preparing Our Wooden Texture

For the header were going to use a wooden texture, the texture ive decided to use is by “Matt Hamm“, you can grab the texture from his flickr page.

Once you have the wooden texture drag it over onto your canvas. When the texture is on your canvas you’ll notice it maybe a bit too big so were going to resize it by 30%. Press ctrl + t to access the free transform tool, at the top of the screen you’ll see a little chain icon. Click the chain icon then enter 70% in the W: and H: fields.

Place the newly resized wooden texure in the top left hand corner of the canvas. Duplicate the wooden texture and place it next to its orginal. Keep duplicating the texture moving it next to the last one until you reach the other side of the canvas.

Once you reach the other side of the canvas merge all the wooden texture layers into one layer. Now go to “image > adjustments > hue/saturation” then colorize the wooden texture using the settings below.

Creating The Header

Select the rectangular marquee tool and make a selection around the whole wooden texture, leaving about 60px at the bottom of the texture.

Cut and paste the selection to a new layer, then re-align the texture you just cut back up with the 60px left over. Once re-aligned hide the small part of the wooden texture then add a drop shadow to the big part using the settings below.

Unhide the smaller part of the wooden texture then add a layer mask. Drag a linear gradient from the bottom of the texture to about half way up. The effect were looking to get is like a reflection, you should have something like this.

Select the rectangular marquee tool and make a selection around one of the floor boards.

Fill the selection with shade of red, do the same for the next floor board only filling the selection with a new colour, repeat the process until you have something like this.

Set each layers blending mode to “soft light”, you should now have something like this.

Duplicate all the colours then move the duplicate colours over until you have reached the right guide.

Adding The Header Elements

Select the rectangle tool or the rectangular marquee tool and make a black rectangle at the top of the canvas. Inside the black rectangle add the title of your website in white text. Mines called the design lab, so my first word would be “the” inside a black box.

Press ctrl + t to free transform the black rectangle. Rotate the black rectangle just a little bit.

Do the same for the text only rotate slightly in the opposite direction. Select your text layer then set the layer blending mode to “soft light”, then select the rectangle layer and set the opacity to 40% and the blend mode to “hard light”.

Repeat the steps above for each word in your website title, try randomizing the rotations of the text and rectangles. You should have something like this.

In the top right corner of the header add some social network icons, search bar or something you need for your website. I’ve opted for some social icons by “Jan Cavan“.

Creating The Featured Area

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

Drag out a rectangle underneath your header, make sure the rectangle stays within the boundries of the guides.

Add these layer styles to the featured rectangle.

Using the rectangle tool or the rectangular marquee tool create a black rectangle inside the feature rectangle. Rotate the rectangle ever so slightly using the free transform tool.

Load a selection around your black rectangle then contract the selection by 10px by going to “select > modify > contract”. Once you’ve contracted the selection paste an example image inside the selection.

Finish off the image by adding a shine effect by using the pen tool. Were now going to add some left and right arrows, select the arrow shape from photoshop’s custom shapes menu.

Drag out the arrow any where on the canvas filling the arrow with the colour white. Make a selection around the backend of the arrow.

Extend the arrow a little bit, then go to “edit > transform > warp”. Select the top and bottom left anchor points and drag them up so the arrow starts to bend.

Set the arrow’s opacity to 60%, add a drop shadow using the default settings then duplicate the arrow and place one on the right of the image. On the right side of the image add some example featured text.

Creating The Navigation

Select the rounded rectangle tool still with a radius of 10px, on a new layer underneath your featured area drag out a small rectangle.

Duplicate the rectangle as many times as needed.

Add your navigation text to each black rectangle.

Set each buttons layer opacity to 70% then free transform each button rotating them slightly either left or right. Load a selection around your featured area then go through and select each individual button, once selected hit the delete key, this should remove the excess button from behind the featured area.

Creating The Content Area

Create a big rectangle using the rounded rectangle tool with a radius of 10px. Keep the rectangle within the boundries of the guides. Copy the layer styles from the featured rectangle and paste them onto the content rectangle.

Inside the rectangle add your content, i’ve gone for a simple 3 column look with some nice bold headings.

Creating The Footer

Using the rectangle tool create a rectangle underneath your content area, fill the rectangle with any color then copy and paste the layer styles from either the content or featured rectangles.

Make a selection around your coloured header the same width as the footer. The selection doesnt need to be any higher than about 20-40px. Once you’ve made the selection go to “edit > copy merged” then paste the selection onto the footer at the bottom of the rectangle.

Finish off the footer by adding your footer information.

The Finished Concept

Hope you enjoyed this tutorial, many thanks for reading dont forget to DIGG and RE-TWEET my post. Your help is greatly appreciated, thanks.

Hello, welcome to another tutorial by hv-designs. In todays tutorial il be showing you how to replicate the windows 7 taskbar, only this taskbar will be a navigation bar for a website. In another tutorial il be showing you how to code it.

 

Lets get started!

Creating The Background

Create a new document 600×400 pixels, you dont need a massive sized document for this tutorial, feel free to do so if you want to. Set your foreground color to #1592d7 and background color to #136da2. Select the gradient tool with a radial gradient.

Once you’ve selected the gradient tool start from the middle of the canvas and drag in any direction. You should have something like this.

Adding The Background Light Streaks

Create a new layer above your background layer then select the custom shape tool from the menu on the left.

Once you’ve selected the tool, at the top you’ll see the word shape, click the little arrow to open the shapes panel. Find the “registration target” shape.

If you dont see then registration target shape click the little black arrow in the top right hand corner, you and load more preset shapes there.

Once you’ve selected the shape drag it out over your canvas, make the shape as big as you can. Place the shape so that the streaks are flowing nicely over the canvas.

Select the pen tool and right-click on your shape, when the menu opens go to “fill path”. Make sure you have the color white selected as your forground (#ffffff).

Right-click once more and go to “delete path”.

Now go to “filter > blur > guassian blur”, blur the shape by about 5 pixels then click ok. Set your shapes blending mode to “soft light” and opacity to “30%”. Finish off by labelling the layer “background streaks”.

Creating The Navigation Background

Create a new layer called “navigation” then select the rectangular marquee tool with the color black (#000000). Drag out a rectangle spanning the width of the canvas and about 45-50 pixels in height depending on how high you want the navigation. Fill the rectangle with the color black.

Change the fill percentage of the navigation layer to around 10%.

Create a new layer called “top line”, select the rectangular marquee tool and create two 1 pixel lines on top of each other, color the line nearest the bottom white and the top one black. Finally set the opacity to 50%.

Duplicate the layer “top line” then rename the duplicated layer “bottom line”. Move the bottom line down to the bottom of the navigation.

Creating The Navigation Buttons

Create a new layer called “button stroke”, select the rectangular marquee tool and make a rectangle the size of the button you need. The top bit of the rectangle should cover the top white line and the bottom of the rectangle should be above the two lines.

Fill the rectangle in the color black then add these layer styles.

Duplicate the layer “button stroke” then rename the duplicated layer “button shine”. Right click the layer and go to “clear layer styles” then add these layer styles.

You should have something like this.

Create a new layer called “white corner stroke”. Select the rectangular marquee tool and make two 1 pixel selections around the right edge and the bottom edge. Fill the selections with the color white (ffffff).

Add a layer mask to the “white corner stroke” layer, set the foreground the black and background to white. With a linear gradient start from the top of one right 1 pixel line and drag down about half way. Right click the mask in the layers window and go to “apply mask”, repeat the process for the bottom line only this time drag from left to right. You should have something like this.

Finally, select the pen tool and make a rounded path around the top left corner of the button.

Once you’ve made the path create a new layer called “button shine 2″. Select the pen tool and right-click inside the path, when the menu pops open select “fill path”, fill the path in the color white. While “button shine 2″ layer is selected, click on the “button shine” layer whilst holding down the CTRL key on the keyboard, this should load a selection. Now go to “select > inverse”, when the inverse has been done hit the delete key to remove the excess. Finish off by setting the layers opacity to 10%.

More Buttons

Duplicate all the button elements to create more buttons as needed, finally label each button as you would with any other navigation.

Thank You

Thanks for reading this tutorial hope you all enjoyed it and found it helpfull, now help me and promote this post, DIGG and RE-TWEET, you help is appreciated. I suggest you subscribe via twitter or RSS as the second part of this tutorial will be coding it. See you all soon.

Learn to code This Navigation

You can learn to code this navigation by following a follow-up tutorial written here.

Good evening everyone, today il be showing you how to make a colorful web design company layout. The website features multiple enlightening colors and a simplistic navigation with a 3D hover.

 

Creating Our Document & Guides

Create a new document 1200 x 1055 pixels with a white background.

Once you’ve created your document we need to create two guides. Go to “view > new guide” enter the settings below.

Repeat the steps above only this time use the settings below.

Now select the gradient tool with a linear gradient, set your foreground color to #e6f7ff and background color to #ffffff. Drag the gradient over your canvas starting from the top and ending towards the middle.

Creating The Website Title

Select the text tool with the font verdana, set the font size to 30pt then set the color to #92a6a6. Add your website title at the top of the canvas.

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

You should have something like this.

Creating The Search Field

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

On the right side of the canvas inline with the website title create a long rounded rectangle.

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

You should have something like this.

Were now going to create a 3D search button, create a rounded rectangle with a radius of 10px, create the rectangle about 80 x 50 pixels.

 

Using the rectangular marquee make a rectangle over the top half of the rectangle. Fill the rectangle the same layer as the rounded rectangle.

Duplicate the rounded rectangle then rotate the duplicated layer 180 degrees by going to “edit > transform > rotate 180″. Finally, place the shapes next to each other making sure there level

Make a selection around the bottom half of the duplicated shape using the rectangular marquee tool. Once you’ve made a selection, hit the delete key.

Align the duplicated shape next to the orginal shape, making sure they are not directly overlapping. Once moved into place, Ctrl + click your duplicated shape layer’s thumbnail within the layers window to load a selection around it.

Select the orginal shapes layer then hit the delete key to remove the selection. Repeat the steps above for the other side of the shape then finally you should have something like this.

Now add these layer styles to your shape.

Resize and place your shape over your search field.

On a new layer below your shape create two small circles where either side where the shape bends out. Finally label the tab like shape with the word search.

Creating The Navigation

Create a big rounded rectangle 850 x 250 pixels, fill the rectangle with the color white then add a 1 pixel stroke using the color #cfeaea.

Using the same methods as we did for our 3D part on the search field, do the same for the rectangle you just created. The rectangle will be a featured area and navigation all rolled into one.

Adding A Splash Of Color

Using the rounded rectangle with a radius of 5 px create another rectangle inside the bigger rectangle you just created. Fill the rectangle with any color.

Now add a gradient overlay using the settings below.

You should have something like this.

Click your multicolored rectangle whilst holding down the CTRL key on the keyboard, this should load a selection. Create a new layer then go to “filter > render > clouds”.

Now go to “filter > artistic > underpainting”, use the settings below.

Were now going to add abit of blur, go to “filter > blur > motion blur”. Make sure your selection is still active or else the motion blue will evade the rectangle and cover the bigger rectangle, which we dont want.

Finally set the opacity to 50% and layer blending mode to “vivid light”. You should have something like this.

Using the text tool add some nice looking text, if you add a heading like on mine add an outer glow to it using the default settings. Finish off by creating like a shine effect using the pen tool.

Creating The Service Boxes

Using the rounded rectangle tool with a radius of 10px create 3 boxes next to each other totalling 850 pixels, be sure to leave a gap inbetween each rectangle.

Fill the rectangles with any color then add these layer styles.

Im now going to use a few icons from “wefunction” to build up my service’s sections. Im going to start by adding a little icon then a heading, the color of the heading will picked from the colorfull featured area using the eye dropper tool.

After the heading im going to add a short paragraph using lorem ipsum text, after the paragraph im going to create a short list using the circle tick icon from wefunction as the list bullet. Im then going ti finish off the services section by creating a read more button, created with the rounded rectangle tool.

Creating The Main Content Box

Once again with the rounded rectangle tool create a full size rectangle with a width of 850px, fill the rectangle with the color #e7f7ff then add a 1 pixel stroke using the color #d5f0fc.

Add the little home icon from the wefunction icon set to the top left corner of the rectangle, next to it add your welcome message. Finally fill the rectangle with your dummy text.

Creating The Footer

Finish off the layout with a plain white small round rectangle underneath the main content rectangle, add a 1 pixel stroke to the footer using the color #d5f0fc. Finally add your copyright information to the footer.

The Finished Layout

Thats it all done, heres the final product.

Final Note

Thanks for reading through my tutorial, hope you enjoyed it. Dont forget to re-tweet and digg this turtorial, your help and support is much appreciated. Cheers…

Welcome to tutorial 230, in this tutorial il be showing you how to create a sleek, clean and spacious wordpress blog.

 

Setting Up The Canvas And Guides

Create a new document 1200 x 1520, fill your background layer with the color #e6e6e6.

The layout were making is going to be 900px wide, so were going to need to setup some guides. Go to “view > new guide” from the menu at the top, in the box that pops up enter the following settings.

Do the same again only this time enter these settings.

Creating The Header

Select the rectangular marquee tool, then create a rectangle the width of the canvas and about 80 pixels in height. Fill the rectangle with any color then add these layer styles.

You should have something like this.

On the left side add your wordpress website title and slogan, fill the text using the color #979797. Once you’ve added your title and slogan add a drop shadow using the settings below.

You should have something like this.

Creating The Navigation

Using the text tool add some dummy links to the right side of the header.

Using the rounded rectangle tool make a selection around each navigation link.

Fill the rectangles in any color then add these layer styles.

You should have something like this.

Creating The Welcome Area

Using the rectangular marquee tool make a selection underneath the header, make sure the selection is on a new layer underneath the header.

Fill the selection with any color then add these layer styles.

You should have something like this.

Were now going to add a character from wefunction, click here (http://wefunction.com/2008/11/free-character-pack/) and download the character pack. Once you’ve downloaded it, extract it too your hard drive then open up “002__002.eps” in photoshop. Drag the character over onto your canvas and position it like the image below.

Chop the characters legs off just below the stroke on the welcome area.

Finally add a drop shadow using the settings below.

On the right side of the character add a simple sentance about your blog.

Creating The Content Area

Select the rectangular marquee tool and make a selection on the right side of the canvas against the right guide. the rectangle should be about 600 pixels in width and as long as you see fit, you can always resize the rectangle later to fit the content.

Fill the selection with any color then add these layer styles.

Create a new layer underneath the content rectangle, then select the polygonal lasso tool. On the corner of the content rectangle create a triangular shape like the image below.

Make sure the selection doesn’t go below the welcome area’s stroke. Once you’ve created the selection fill it with the color #a9a9a9. You should have something like this.

Mocking Up The WordPress Posts

Inside our content area, lets begin to mock up our dummy posts. Select the type tool and add an example posts title using the color #666666 and font size 24pt. Underneath the post title add some meta data (E.G post time, post date, author and category).

Underneath the post meta data add a 1 pixel line using a light grayish color. Now head over to woothemes and download this icon pack (http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/). On the right side of the post title add the speech bubble icon with some text saying comment here.

Finish off the post with a dummy image and some dummy text. After you’ve added the dummy text add a read more button using the buttons from the navigation. Ive also thrown in some social buttons for good measure.

Creating The Sidebar

The sidebar will be located on the left side, opposed to many blogs which display it on the right. In the sidebar im going to add a flickr gallery first, create a heading using a font size of 18pt, use the color #666666 for the heading color.

Underneath the flickr gallery title add some small thumbnail like images to act as our dummy flickr gallery. Before we continue adding our sidebar elements let seperate each part using a simple separator. Select the rectangular marquee tool, then create two 1 pixel lines on top of each other. Fill the lines in two different colors, the line thats on the bottom fill with white and the line that sits on top fill in a grayish color darker than the sidebar background. Finally drag the separator lines layer underneath the content box layer so they disapear nicely behind the content box.

Continue to bloat out your sidebar with the elements you’d want in the sidebar, ive added a simple recent comments list and some website sponsors.

Creating The Footer

Duplicate your welcome area background then drag it down to the bottom of the canvas. Open up the layer styles window then switch the colors between the stroke and the inner shadow. You need the make sure the white line is underneath the dark gray line else you wont get the indented effect.

On the left side of the footer add a nice twitter icon with speech bubble next to it. The speech bubble was from the custom shapes libary from within photoshop.

Add a dummy twitter post inside the speech bubble then stick a header over the top. On the right side of the footer add your copyright information and maybe another little character image from wefunction.

Creating The Pagination

Select the rectangular marquee tool or the rectangle tool and create a couple of square boxes just over the footer stroke. Using the same method as we did for our content box , add the little triangular grey shapes to make them look as if they are wrapping around the footers stroke.

On the right side of the footer add 1 single square with a little arrow inside it, again use the same method as above to get the 3D effect.

Well Done… Finished

Thats it all done, heres the finished layout.

Final Note

Thanks for taking part in this tutorial, il look forward to your comments. Also look out for the finished wordpress theme which will be available to download for FREEEE. Subscribe via our RSS feeds to stay tuned.

Thank You.

Hello, welcome to another tutorial from hv-designs. Today il be showing you how to create a hosting layout with a 3D aspect to it.

 

Setting Up The Background

Create a new document 1200 x 1200 pixels, set your foreground color to #3e3e3e and background color to #191919. Select the gradient tool with a radial gradient.

Once you have the radial gradient selected, start from the top middle of the canvas then drag downwards about halfway down. Now go to “filter > noise > add noise”, use the settings below.

You canvas should now look something like this.

Creating The Website Title

Select the type tool then add your website title to the canvas. I used the font verdana and a font size of 36pt.

Add these layer styles to your website title text.

You should have something like this.

Creating The Navigation Bar

Select the rounded rectangle tool with a radius of 15 pixels.

Drag out your path along side the website title, leaving a decent size gap inbetween each element.

Once you’ve dragged out your path select the pen tool. Right-click inside the path and go to fill path.

Finally right-click inside the path again and go to delete path. Now add the following layer styles.

You should have something like this.

Using the same method as explained above create another rounded rectangle inside the navigation. Fill the rectangle with the color white.

Now set the opacity of the white rectangle to 8% then add your navigation links.

Inbetween each navigation link add a small circle using the elliptical marquee tool.

Fill the circle using the color #00688f then add a drop shadow using the settings below.

Your navigation should now look like this.

Creating The Content Area

Underneath the website title and navigation add a catchy sentance of some sort, then using the rectangular marquee tool create a rectangle on the right side.

Add a gradient overlay to the rectangle you just created using the settings below.

Inside the rectangle add some dummy content. Use the color #373737 for the titles and a size of 14pt, for all paragraphs use the color #898989 with a size of 12pt. Also within the content area throw in some snazzy icons in a nice list form, the icons ive used are from woothemes.

Creating The Sidebar

Duplicate your content rectangle layer, then drag the duplicated layer underneath its orginal. Press “ctrl + t” to free transform the rectangle, resize the rectangle to a thin rectangle, then move it side by side to the content rectangle.

With your duplicated rectangle layer still selected go to “edit > transform > perspective”. Select the top left anchor point and move it downwards whilst holding down the shift key on the keyboard.

Update the gradient overlay on the duplicated rectangle to the settings below.

Duplicate the content rectangle once more, resize the rectangle using the free transform tool. The rectangle should be resized to fit side by side the first rectangle we duplicated.

On each crease where the rectangles meet, add a divider using the color’s specified below. The dividers should span the whole height of the each crease.

You should have something like this.

Adding The Sidebar Content

Using the type tool and the plus icon from the woothemes icon set, create a simple list displaying dummy content.

Inbetween each list item add a dotted divider. You can easily create the dotted divider by using the type tool and hold down the full stop key. (………)

Underneath the list add a simple learn more button. Select the rounded rectangle tool with a radius of 15px same as our navigation bar, drag out a small sized button then fill with any color. Right click the navigation layer and go to “copy layer styles”, right click the learn more button layer and go to “paste layer styles”.

Repeat the steps above to create more plans as needed.

Finally inbetween each plan add a divider to seperate the content. Create two 1 pixel lines using the colors below.

Finally…

Finally add your footer content underneath the content rectangle using the type tool. Thats it all done, hope you enjoyed this tutorial, il look forward to your comments.

Dont Forget

Dont forget to digg and re-tweet this tutorial, your help and support is much appreciated. Thank You.!

Learn To Code This Layout

You can learn to code this layout into a working CSS template by following these two follow-up tutorials. Part #1 and Part #2.

 

 

Enjoy

Good evening everybody,…. today il be showing you how to create a PC mouse from scratch. Right lets get started!

 

You can download the PSD file for free.

Creating Our Document

For the purpose of this tutorial im going to be using a smaller background than you might use. Il be using 600 x 350 pixels, id recommed a nice big canvas size depending on how big you want your mouse. Create your a new document using your recommended settings, fill your background with a nice subtle color, nothing in particular just not white.

Drafting Out The Mouse

Select the rounded rectangle tool with a radius of 35 pixels.

Drag out a rectanglular path as big as you want your mouse to be.

Once you’ve dragged out the path to your rectangle select the pen tool from the side menu, right-click inside the rectangular path and go to “make selection”. Select the gradient tool with a radial gradient, using the colors #262a2d and #090f0d drag out the radial gradient.

Were now going to customize our rectangle’s shape with the warp tool, go to “edit > transform > warp” (if your using a version of photoshop before CS2 then the warp tool wont be available)

Once you’ve selected the warp tool transform the shape into your mouse. Drag the corner anchor points inwards towards each other, then drag the middle lines out towards the edges of the canvas. Your aiming for a bloated version of the orginal rectangle.

You should have something like this.

Cutting The Buttons

Duplicate your mouse layer then hide the duplicated layer as we’ll be using it later to create the mouses shadow. Select the elliptical marquee tool and make a selection around the top half of the mouse.

Once you’ve made the selection go to “edit > cut” then “edit > paste”. The top half of the mouse should now have been detached, re-position the top half of the mouse back to where it was cut from then add a gradient overlay using the settings below.

You should have something that looks like this.

Adding Some Mouse Body Details

Were now going to add some minor details to the mouse body just to bring it to like abit. Firstly lets add abit of noise to the mouse body, select the mouse body layer whilst holding the ctrl key on the keyboard this should load the selection. Once the selection has been loaded go to “filter > noise > add noise”.

Once the noise has been added keep the selection active. Select the dodge tool with a brush size of around 45pixels, change the exposure to 25%.

Gently brush some highlights around the top edge of the body, along the middle and towards the bottom. Check the image below for my result.

Next add a inner shadow to the mouse body layer using the settings below.

Lastly were going to add a stroke to the top half of our mouse body, to do this we need to load a selection around the mouse body, then go to “edit > stroke”, us the color #3f434a for your stroke. Once you’ve applied the stroke remove the stroke from around the sides and edges of the mouse leaving the top part.

Duplicate the stroke which is left then move it up by 1 pixel, color the new stroke black by adding a black color overlay.

Adding The Mouse Buttons

Select the rectangular marquee tool on a new layer create 3 single lines, color the first one #f8f8f9, color the middle one black #000000 then color the last one white #888a94. Place all 3 lines in the middle of top part of the mouse.

Add a layer mask to the lines then drag a linear gradient from the top downwards. The look were going for is to have the line faded at the top then gradually have it come back to normal as it reaches the bottom part of the mouse buttons.

Adding The Mouse Wheel

Select the rounded rectangle tool with a radius of 35 pixels, drag out a rectangle over the lines we created in the previous step.

Select the gradient tool with a radial gradient, set your foreground color to #4a4e55 and background color to #0d0d12. Drag the radial gradient from the top towards the bottom of the rounded rectangle.

Now add these layer styles to your mouse wheel.

Finally were going to add a second stroke around the mouse wheel, load a selection around your mouse wheel then go to “edit > stroke” change the strokes color to #a3a5ad. You should have something like this.

Adding The Mouse L.E.D

Select the circle tool or elliptical marquee tool and create a circle just below the mouse buttons on the mouse body.

Fill the circle with any color then add these layer styles.

You should have something like this.

Were now going to add a little light sparkle. Select the paint brush tool, then click the little black arrow where you select your brush and size. Inside this window there is another black arrow, click it then go to “assorted brushes”.

Now select the crosshatch brush from with the brushes window.

With the color white and a brush size of around 25 add the crosshatch in the middle of the L.E.D.

Once you’ve added the crosshatch remove two of the lines using your prefered cutting tool then add a gradient overlay using the settings below.

You should have something like this.

Finishing Up

Finally add your mouse brand or logo on the body of the mouse, you can use the warp tool to make the text slightly rounded. Unhide your duplicated mouse layer which we tooked away earlier, make sure its underneath all the other layers then add a guassian blur, blur by about 1.5 – 2 pixels. Set the shadow layers opacity to about 50% then move it a couple of pixels towards the right.

Thats it all done, you should now have something like the image above, BUT dont leave it there why not add a little bit more. Maybe a wire here and there or even the USB connection or even a different colored mouse.

Hope you’ve enjoyed this tutorial, dont forget to re-tweet and digg. Il look forard to your comments.

Hello welcome to another tutorial by hv-designs, today we’ll be making software layout with a nice wooden texture applied as a background.

 

Creating Our Document And Background

Create a new document 1200 x 1120 pixels with a transparent background.

Once you’ve created your document download this wooden texture by “Matt Hamm”. Once you’ve downloaded the texture place it in the top left corner of the canvas.

Duplicate the texture by right-clicking the layer and going to “duplicate layer”. Once duplicated flip the duplicated texure horizontally then place it next to its orginal.

Repeat the process until you’ve reached the other side of the canvas. Once you’ve reached the right side of the canvas repeat the process again only this time flipping the texture vertically. When the whole canvas is covered merge all the layers into one layer called background. Finally desaturate the background by going to “image > adjustments > desaturate”

Creating The Title And Navigation

Select the type tool then add your website title in the top left corner. The font and settings ive used are listed in the image below.

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

Once you’ve sorted the website title on the right side add a simple text style navigation using the color #b3b3b3. On the first text link change the color to white (#ffffff).

On the link that is coloured white were going to add a hover state. Select the rounded rectangle tool with a radius of 15px.

On a new layer underneath the navigation text create a small rectangle around the link.

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

You should have something like this.

Creating The Outer Content Area

Select the rectangular marquee tool and create a big white rectangle, the rectangle should be about 850 x 700 pixels. Once you’ve created the rectangle add 15% noise by going “filter > noise > add noise”.

Once you’ve added the noise apply these layer styles.

You should have something like this.

Creating The Inner Content Area

Click the “Outer Content Area” box whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 20pixels then fill the selection with the color white on a new layer.

Now add these layer styles to the new inner rectangle.

You should have something like this.

Creating The Featured Area

Click the “Inner Content Area” box whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 20pixels then fill the selection with the color white on a new layer. Once filled add a 1 pixel stroke using the color #e4e4e4.

Select the rectangular marquee tool OR your prefered cutting tool, make a selection around the rectangle you just created starting from the bottom. Leave about 200pixels at the top, then hit the delete key. You should be left with a 200 pixel wide box.

Click the “Rectangle” you just cut whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 5-10 pixels then fill the selection with the color white on a new layer. Once filled add this gradient overlay.

You should have something like this.

Click the “Rectangle” you just created whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Create a new layer then go to “filter > render > clouds”, now go to “filter > pixelate > mosaic” use the settings below.

Now set the layer blend mode to “soft light” and opacity to 75%. You should have something like this.

Inside the blue rectangle add some dummy content and maybe an icon of some sort. Im using an icon from one of smashing magazine’s icon sets.

Creating The Featured Area Buttons

Create two circles either side of the featured area, make the circles small dont make them too big. Once you’ve created the circles add these layer styles.

You should have something like this.

Finish off the little buttons by adding a dark gray arrow to it.

The Dummy Content

This next part doesnt really need a “step-by-step” as its just all text done with the type tool. Create simple blue headings with subtle gray text underneath, maybe add a list or two to break the layout up abit. Leave an area at the bottom for some additional content.

In the area at the bottom create a box in the same way we did our featured area outer box. The layer styles for this new box at the bottom are also the same as the featured area outer box. Fill the outer box with some a dummy paragraph or two and maybe an icon or two. The icons ive used this time are from “wefunction”.

Creating The Footer

Select the rectangular marquee tool and create a black rectangle across the bottom of the canvas, over the wood texture. Set the fill % of the black box to 40%.

Now add these layer styles to the layer.

Using a twitter icon and a speech bubble from photoshop’s custom shapes libary, create a follow us area on the left side of the footer. The twitter icon ive used is from smashing magazine.

On the right side of the footer add a duplicate of your website title and slogan. Then add your copyright information and any other information you would find inside of the footer area.

Finished Layout

Congratulations you’ve finished the tutorial, hope you found it intresting, thanks for reading il look forward to your comments.

Dont forget to re-tweet and digg this tutorial, your help and support is much appreciated.

Hello everybody, today were going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect.

 

Setting Up The Canvas & Background

Create a new document 800×600 pixels, you can use a bigger canvas if you wish to but for the purpose of this tutorial we’ll be using those dimensions.

For the background ive just added a simple gradient with a sun burst effect, just something better than boring white.

Creating The Icon Surround

Select the rounded rectangle tool with a radius of 15px, change the type to “shape layers”.

Using shape layers will let you resize your icon without loss of quality. Draw out your icon surround in the center of the canvas, make the surround fairly big.

Add these layer styles to the surround.

You should have something like this.

Creating The Inside

Select the rectangle tool again with the type set to “shape layers”.

Draw out a rectangle inside the surround, leave about 20 – 26 pixels all the way around the surround.

Add these layer styles to the rectangle you just created.

You should have something like this.

Creating The Bokeh Effect

Create a new document 600 x 600 pixels with a transparent background. Select the elliptical marquee tool and create a circle as big as the canvas, fill the circle with black.

Once you’ve filled the circle change the fill opacity to 50%.

Now add a stroke using the settings below.

Once you’ve added the stroke go to “edit > define brush preset”, save your brush as “bokeh”. Head back over to your layout and select the brush tool, find and select your brush from the brush menu.

Open up the brush settings window by press F5 or by going to “window > brushes”, once opened add the following settings.

Adding The Bokeh Effect

Make sure you still have the bokeh brush selected, randomly brush over the inner rectangle, try keeping the circles inside the inner rectangle, if they happen to go over on the surrounding rectangle inverse the selection and hit the delete key. Once you’ve brushed a few circles blur them by 3 pixels using the guassian. (filter > blur > guassian blur).

Repeat the process again on a new layer this time set the layer opacity to 50% then add a outer-glow using the settings below.

You should have something like this.

Repeat the process again including the outer-glow only this time set the layer opacity to 75%, your final result should be something like this.

Creating The Inner Rectangle Shine

Select the pen tool and make a path like the image below.

Once you’ve made the path right click and go to “fill path”, fill the path/selection with the color white. Make sure you have your layer selected then ctrl + click on your inner rectangle, go to “select > inverse” and hit the delete key.

Now you have your shine add a layer mask to the layer, reset your foreground and background colors then select the gradient tool with a linear gradient. Drag the linear gradient from the bottom of the shine upwards.

Creating The Shadow

Select the rectangular marquee tool and create a black rectangle towards the bottom of the surrounding rectangle.

Blur the rectangle by 6 pixels using the guassian blur (filter > blur > guassian blur).

Set the shadow layers opacity to 50% then cut off the left and right ends using your favorite cutting tool.

Creating The Second Icon

Select ALL layers apart from the background layer, merge all duplicated layers into one layer then place the layer behind the first icon. Press CTRL + T to free transform the duplicated layer, slightly rotate the 2nd icon behind the first icon.

The Finished Product

You should now have something like this.

I look forward to your comments.

License and Attribution

The PSD file is licensed under the Creative Commons license and can be used for personal purposes ONLY. No attribution is needed but it is always appreciated.

Good evening everybody, in this tutorial il show you how to create a sleek looking business layout from scratch. Currently the 6th business layout in our database.

 

Getting Started

Create a new photoshop document 1200 x 1200 pixels with a white background. Were going to use a fairly big canvas, the bigger the better.

Although our canvas size is 1200 pixels x 1200 pixels our actual layout will only be 850 pixels wide. The layout will be situated in the center of the canvas, and to make sure we don’t go over 850 pixels we’ll use some guides.

Setting Up The Guides

In the menu at the top go to “view > new guide”, do this twice using the settings below.

You should have something like this.

Creating The Header Area

Select the rectangular marquee tool and create a small rectangle about 33 pixels in height spanning the width of the canvas. Fill the rectangle with a dark grey.

Select the rounded rectangle tool and create a small rectangle, fill the rectangle in the same dark grey color then place the rectangle in the top right corner over your grey bar.

Merge the top grey bar and the rounded rectangle into one layer then add a gradient overlay using the settings below.

Using the rectangular marquee tool once more create a rectangle about 184 pixels in height spanning the width of the canvas underneath the top bar. Fill the selection with any color then add a gradient overlay using the settings below.

You should have something like this.

Add your website title and slogan to the header area, inside the rounded rectangle in the top bar add a business phone number.

Creating The Navigation

Using the rounded rectangle tool with a radius of 20px create a rectangle about 60px in height and about 430px in width, place the rectangle level with your website title on the right hand side.

Fill the selection with any color then add these layer styles.

You should have something like this.

Now fill in your navigation bar with some dummy links and separators.

Adding The Bokeh Effect

Create a new document 600 x 600 pixels with a transparent background. Select the elliptical marquee tool and create a circle as big as the canvas, fill the circle with black.

Once you’ve filled the circle change the fill opacity to 50%.

Now add a stroke using the settings below.

Once you’ve added the stroke go to “edit > define brush preset”, save your brush as “bokeh”. Head back over to your layout and select the brush tool, find and select your brush from the brush menu.

Open up the brush settings window by press F5 or by going to “window > brushes”, once opened add the following settings.

Randomly drag the brush along the blue header part, once you’ve added a few circles add a white color overlay and lower opacity to 75%. Finally add a guassian blur, blurring the circles by 2 pixels.

Repeat the process again only this time don’t lower the opacity or blur the circles. You should have something like this.

Creating The Featured Area

Select the rectangular marquee tool and create a rectangle spanning the width of the canvas with a height of about 257 pixels. Fill the rectangle with any color then add a gradient overlay using the settings below.

You should have something like this.

At the top of the featured area miss 1 pixel from the top then add a 1 pixel line spanning the width of the canvas, fill the 1 pixel line in the color #a7c9de.

Select the rectangular marquee tool and create a rectangle over your featured area, the rectangle should be slightly bigger and only be as wide as 850px. (up to the guides).

Using the rounded rectangle tool with a radius of 15px – 20px create a vertical rectangle. Place the rectangle on the left side of the blue rectangle.

Right click the rounded rectangle with the pen tool and go to “make selection”, once the selection has been made hit the delete key. Do this to both the left and right sides, you should have something like this.

Add a gradient overlay to the blue rectangle using the settings below.

In each corner of the blue box where the edge is rounded add half a circle in the color #72a8cb. This should give the effect that the rectangle is wrapped around the darker rectangle.

Complete the featured area by adding in some dummy text and images.

Creating The Content Area

Directly underneath the featured area make a selection around the rest of the canvas, select the gradient tool with a radial gradient. Set your foreground to #FFFFFF and background to #bee2f8 then drag the radial gradient from the middle of the canvas all the way down to the bottom.

On the right side of the canvas create a rectangle for your sidebar, on the right corner of the box chop it off using your preferred cutting tool.

Add these layer styles to your sidebar box.

Where the corner was cut from the rectangle add a triangle at a 45 degree angle. Add the same layer styles to the triangle as we did for the rectangle. You should have something like this.

Inside the box add your dummy content, repeat the steps as many times as needed.

On the left side of the sidebar boxes add some dummy welcome text. Underneath the welcome dummy text add some spiffy icons with some nice headings and paragraphs next to them. The icons i used are from dryicons.com.

Creating The Footer

Select the rectangular marquee tool and create a small rectangle spanning the width of the canvas. Apply the following layer styles to the footer.

Finally add your footer text to the footer.

The Finished Result

Congratulations you should have something like this.

Thanks for reading, il look forward to your comments.

Good evening everybody, in this tutorial il be showing you how to create a simple vector earth from scratch. The PSD file is available free to download.

 

Creating a New Document

Were going to start off with a canvas size of 600 x 600 pixels for the purpose of this tutorial, feel free to make your canvas much bigger if you require the image in a bigger size, the results should be the same.

The Background

For the background il be using something relivantly simple, fill your background layer with a dark blue color the color code i used is #081122. Were now going to add some minor noise, go to “filter > noise > add noise”, use the settings below.

You should have something like this.

Creating The Globe

Select the circle tool or the elliptical marquee tool and create a circle covering most of the canvas. TIP: Holding the shift key whilst dragging will ensure the circle is the right aspect ratio.

Dont fill your circle just yet, first select the gradient tool with a radial gradient. Set your foreground color to #439abf and your background color to #033e76, drag the radial gradient from the top right corner of the circle down diagonally towards the bottom left.

You should have something like this.

Now add these layer styles to your globe.

You should now have something like this.

Creating The Islands

Select the pen tool and randomly create the points that make up your first of two islands.

Once you’ve closed your last anchor point right click inside the island with the pen tool and go to “fill path”.

You should have something like this.

We now need to cut into the island so it wraps inside our globe. Click your globe layer whilst holding down the CTRL key. This should load a selection around your globe, select your island layer while the selection is active. Now go to “select > inverse” and hit the delete key.

Now add these layer styles to your top island.

You should have something like this.

Using the pen tool once again create another island inside the island you just created, fill the inner island with the color #f5b47a.

Creating The Second Island

Using the same methods listed above and create another island somewhere on your globe. When adding the island layer styles leave off the drop shadow.

Adding Smaller Islands

Using the pen tool create some smaller islands dotted around the globe. The islands at the top fill with a darker shade of blue, the small islands at the bottom fill with a lighter shade of blue. Finally set the small islands layer opacity to about 20%.

Creating The Globe Shines

Select your globe layer whilst holding down the CTRL key, this should load a selection around your globe. Create a new layer above everything and fill the selection with the color white.

Using the elliptical marquee tool make a selection like the image below.

Once you’ve made the selection hit the delete key. Now set the layers opacity to 2%.

Repeat the steps above a couple of times, ive done it 4 times, 2 shines at the bottom and 2 at the top.

The Finished Result

The finished result looks something like this.

Many thanks for reading, il look forward to your comments.

License and Attribution

The PSD file is licensed under the Creative Commons license and can be used for personal purposes ONLY. No attribution is needed but it is always appreciated.