Category Archives: Photoshop Tutorials

Digital Curriculum Vitae

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

What We’ll Be Creating

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

The Finished Result

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”.

Digital CV Tutorial

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

Digital CV Tutorial

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

Digital CV Tutorial

Creating The Background

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

Digital CV Tutorial

Digital CV Tutorial

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.

Digital CV Tutorial

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.

Digital CV Tutorial

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.

Digital CV Tutorial

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.

Digital CV Tutorial

You should have something like this.

Digital CV Tutorial

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.

Digital CV Tutorial

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.

Digital CV Tutorial

Digital CV Tutorial

Digital CV Tutorial

You should have something like this.

Digital CV Tutorial

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”.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Digital CV Tutorial

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.

Digital CV Tutorial

Digital CV Tutorial

You should have something like this.

Digital CV Tutorial

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.

Digital CV Tutorial

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.

Digital CV Tutorial

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

Digital CV Tutorial

Digital CV Tutorial

Finishing Off The Header

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

Digital CV Tutorial

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”.

Digital CV Tutorial

You should have something like this.

Digital CV Tutorial

Adding Your Content

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

Digital CV Tutorial

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.

Digital CV Tutorial

Finally add your description explaining about the skills.

Digital CV Tutorial

Continue With The Style

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

Digital CV Tutorial

Digital CV Tutorial

Digital CV Tutorial

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“.

Digital CV Tutorial

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

LCD Monitor Tutorial

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

tutorial_final

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Lipstick Illustration

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Lipstick Illustration final_thumb

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.

Lipstick Illustration

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.

Lipstick Illustration 2

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

Lipstick Illustration 3

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.

Lipstick Illustration

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.

Lipstick Illustration

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

Lipstick Illustration

Lipstick Illustration

You should now have something like this.

Lipstick Illustration 8

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.

Lipstick Illustration 9

Creating The MIddle Part

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

Lipstick Illustration 10

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.

Lipstick Illustration 11

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.

Lipstick Illustration

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

Lipstick Illustration

Lipstick Illustration

You should have something like this.

Lipstick Illustration 15

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.

Lipstick Illustration 16

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.

Lipstick Illustration 17

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.

Lipstick Illustration

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

Lipstick Illustration

You should have something like this.

Lipstick Illustration 20

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.

Lipstick Illustration 21

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

Lipstick Illustration

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.

Lipstick Illustration 23

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

Lipstick Illustration 24

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

Lipstick Illustration 25

Lipstick Illustration 26

 

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

Lipstick Illustration 27

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.

Lipstick Illustration 28

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.

Lipstick Illustration 29

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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%.

Lipstick Illustration 30

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.

Lipstick Illustration 31

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

Lipstick Illustration 32

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%.

Lipstick Illustration 33

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).

Lipstick Illustration 34

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%.

Lipstick Illustration 35

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.

Lipstick Illustration 36

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.

Lipstick Illustration 37

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.

Lipstick Illustration 38

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.

Lipstick Illustration 39

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.

Lipstick Illustration 40

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

Lipstick Illustration

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.

Lipstick Illustration

Lipstick Illustration

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

Lipstick Illustration

Lipstick Illustration

You should have something like this.

Lipstick Illustration

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).

Lipstick Illustration

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

Lipstick Illustration

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.

Lipstick Illustration

Lipstick Illustration

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.

Lipstick Illustration

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)

Lipstick Illustration 50

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%.

Lipstick Illustration

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

Lipstick Illustration

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%.

Lipstick Illustration

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.

Lipstick Illustration

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.

Lipstick Illustration

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

Lipstick Illustration

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.

Lipstick Illustration

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

Lipstick Illustration

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

Lipstick Illustration final_thumb

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Carbon Fibre Style Inset Navigation

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

Carbon Fibre Style Inset Menu

Carbon Fibre Style Inset Menu

You should have something like this.

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

Creating The Navigation Buttons

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

Creating The Navigation Orbs

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

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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”.

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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

Carbon Fibre Style Inset Menu

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.

Carbon Fibre Style Inset Menu

Your finished hover state should look something like this.

Carbon Fibre Style Inset Menu

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Business Layout #8

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Business Layout #8 Result

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

Business Layout #8

You should have something like this.

Business Layout #8

Creating The Top Bar

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

Business Layout #8

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

Business Layout #8

Complete your top bar by adding the following layer styles.

Business Layout #8

Business Layout #8

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

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

Business Layout #8

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.

Business Layout #8

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%.

Business Layout #8

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

Business Layout #8

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Business Layout #8

Business Layout #8

Business Layout #8

Business Layout #8

You should have something like this.

Business Layout #8

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.

Business Layout #8

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”.

Business Layout #8

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

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

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

Business Layout #8

Business Layout #8

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

Business Layout #8

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.

Business Layout #8

Business Layout #8

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

Business Layout #8

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Web Design Layout #14

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Finished Layout

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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

Web Design Layout #14

Web Design Layout #14

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

Web Design Layout #14

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

Web Design Layout #14

Web Design Layout #14

Web Design Layout #14

You should have something like this.

Web Design Layout #14

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.

Web Design Layout #14

You should have something like this.

Web Design Layout #14

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

Web Design Layout #14

Web Design Layout #14

On the remaining tabs add the following layer styles.

Web Design Layout #14

Web Design Layout #14

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

Web Design Layout #14

Creating The Featured Area

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

Web Design Layout #14

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

Web Design Layout #14

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.

Web Design Layout #14

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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

Web Design Layout #14

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”.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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”.

Web Design Layout #14

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

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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”.

Web Design Layout #14

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.

Web Design Layout #14

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.

Web Design Layout #14

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

Web Design Layout #14

All Done

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Create An Apple Ipad

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Apple Ipad Tutorial

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”.

Create An Apple Ipad1

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.

Create An Apple Ipad2

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

Create An Apple Ipad3Create An Apple Ipad3

Apple Ipad Tutorial

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.

Create An Apple Ipad4

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

Apple Ipad Tutorial

Apple Ipad Tutorial

You should now have something like this.

Create An Apple Ipad45

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.

Apple Ipad Tutorial

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

Create An Apple Ipad46

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

Create An Apple Ipad47

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.

Apple Ipad Tutorial

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.

Create An Apple Ipad48

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Create An Apple Ipad49

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.

Create An Apple Ipad50

Create An Apple Ipad51

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.

Create An Apple Ipad452

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

Apple Ipad Tutorial

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

Create An Apple Ipad454

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.

Create An Apple Ipad455

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.

Create An Apple Ipad56

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

Create An Apple Ipad457

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

Create An Apple Ipad458

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

Create An Apple Ipad459

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

Apple Ipad Tutorial

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

See You All Soon.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Personal vCard

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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)

The Finished Result

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.

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

Creating The vCard Frame

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

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

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

VCard Tutorial Pt.1

VCard Tutorial Pt.1

VCard Tutorial Pt.1

VCard Tutorial Pt.1

You should have something like this.

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

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

VCard Tutorial Pt.1

VCard Tutorial Pt.1

VCard Tutorial Pt.1

You should have something like this.

VCard Tutorial Pt.1

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”.

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

VCard Tutorial Pt.1

VCard Tutorial Pt.1

VCard Tutorial Pt.1

You should now have something like this.

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

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

Label each icon using the following settings and layer styles.

VCard Tutorial Pt.1

VCard Tutorial Pt.1

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”.

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

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

VCard Tutorial Pt.1

VCard Tutorial Pt.1

You should have something like this.

VCard Tutorial Pt.1

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%.

VCard Tutorial Pt.1

The Content

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

VCard Tutorial Pt.1

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.

VCard Tutorial Pt.1

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

VCard Tutorial Pt.1

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

VCard Tutorial Pt.1

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

The Finished Result

Learn To Code This Layout

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Creative 3D Layout

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Creative 3D Layout

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”.

Creative 3D Layout

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

Creative 3D Layout

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.

Creative 3D Layout

On your main title layer add the following layer styles.

Creative 3D Layout

Creative 3D Layout

Creative 3D Layout

Creative 3D Layout

You should have something like this.

Creative 3D Layout

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.

Creative 3D Layout

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

Creative 3D Layout

Creative 3D Layout

You should have something like this.

Creative 3D Layout

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.

Creative 3D Layout

Now add the following layer styles to the inner rectangle.

Creative 3D Layout

Creative 3D Layout

You should have something like this.

Creative 3D Layout

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

Creative 3D Layout

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

Creative 3D Layout

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”.

Creative 3D Layout

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Creative 3D Layout

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.

Creative 3D Layout

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”.

Creative 3D Layout

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.

Creative 3D Layout

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

Creative 3D Layout

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

Creative 3D Layout

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.

Creative 3D Layout

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.

Creative 3D Layout

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”.

Creative 3D Layout

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.

Creative 3D Layout

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.

Creative 3D Layout

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.

Creative 3D Layout

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

Creative 3D Layout

You should now have something like this.

Creative 3D Layout

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.

Creative 3D Layout

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.

Creative 3D Layout

All Done

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

Creative 3D Layout

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Portfolio Layout #12

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Portfolio Layout #12

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”.

Portfolio Layout #12

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

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

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

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

The first word now looks like this.

Portfolio Layout #12

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

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

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

Portfolio Layout #12

Creating The Navigation

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

Portfolio Layout #12

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.

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

Your navigation should look something like this.

Portfolio Layout #12

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

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

Add the following layer styles to your featured box.

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12
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.

Portfolio Layout #12

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”.

Portfolio Layout #12

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

Portfolio Layout #12

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Portfolio Layout #12

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

Portfolio Layout #12

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

Portfolio Layout #12

Add the following layer styles to the two big circles.

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

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

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

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

Portfolio Layout #12

Portfolio Layout #12

You should have something like this.

Portfolio Layout #12

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.

Portfolio Layout #12

Add these layer styles to your rectangle.

Portfolio Layout #12

Portfolio Layout #12

Portfolio Layout #12

You should have something like this.

Portfolio Layout #12

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.

Portfolio Layout #12

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

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

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

Portfolio Layout #12

Creating The Gallery

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

Portfolio Layout #12

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).

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

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.

Portfolio Layout #12

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

Portfolio Layout #12

Thanks

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Monitor Icon Design

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Monitor Icon

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”.

Monitor Icon

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

Monitor Icon

Creating The Monitor Surround

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

Monitor Icon

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”.

Monitor Icon

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.

Monitor Icon

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

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

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”.

Monitor Icon

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

Monitor Icon

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

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

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”.

Monitor Icon

Add the following layer styles to your screen layer.

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

Select the pen tool then change the settings to paths.

Monitor Icon

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

Monitor Icon

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.

Monitor Icon

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Monitor Icon

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.

Monitor Icon

Add the following layer styles to each button.

Monitor Icon

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

Creating The Power Light

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

Monitor Icon

Add the following layer styles to your power light circle.

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

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.

Monitor Icon

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.

Monitor Icon

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

Monitor Icon

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.

Monitor Icon

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%.

Monitor Icon

Monitor Icon

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.

Monitor Icon

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.

Monitor Icon

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

Monitor Icon

The Finished Icon

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

Monitor Icon

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Hosting Layout #3

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Hosting Layout #3

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

Hosting Layout #3

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.

Hosting Layout #3

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%.

Hosting Layout #3

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.

Hosting Layout #3

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

Hosting Layout #3

Creating The Master Header

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

Hosting Layout #3

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.

Hosting Layout #3

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

Hosting Layout #3

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.

Hosting Layout #3

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

Hosting Layout #3

Hosting Layout #3

So far your layout should look like this.

Hosting Layout #3

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.

Hosting Layout #3

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

Hosting Layout #3

Hosting Layout #3

Hosting Layout #3

You should now have something like this.

Hosting Layout #3

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

Hosting Layout #3

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.

Hosting Layout #3

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

Hosting Layout #3

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.

Hosting Layout #3

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Hosting Layout #3

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.

Hosting Layout #3

Now add the following layer styles to your website tite.

Hosting Layout #3

Hosting Layout #3

You should have something like this.

Hosting Layout #3

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.

Hosting Layout #3

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.

Hosting Layout #3

Adding A Catchy Tag Line

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

Hosting Layout #3

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

Hosting Layout #3

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.

Hosting Layout #3

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

Hosting Layout #3

Hosting Layout #3

Hosting Layout #3

You should now have something like this.

Hosting Layout #3

Inside the content box add your website add your content.

Hosting Layout #3

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

Hosting Layout #3

Adding Additional Content

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

Hosting Layout #3

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

Hosting Layout #3

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.

Hosting Layout #3

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.

Hosting Layout #3

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/).

Hosting Layout #3

Inside each box add your hosting plans.

Hosting Layout #3

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.

Hosting Layout #3

The Finished Result

Hosting Layout #3

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

 

Enjoy

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Car Layout #6

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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

Car Layout #6 Tutorial

Car Layout #6 Tutorial

You should now have something like this.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

Now add the following layer styles to your navigation rectangle.

Car Layout #6 Tutorial

Car Layout #6 Tutorial

You should have something like this.

Car Layout #6 Tutorial

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

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

In-between each link add a simple white ellipse.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

You should have something like this.

Car Layout #6 Tutorial

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

Inside the featured area add some dummy text and title.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

You should have something like this.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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.

Car Layout #6 Tutorial

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

The Result

Here’s my finished layout.

Car Layout #6 Tutorial

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

 

 

Enjoy.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Cloud9 Web Design Layout

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

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

Step3

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

Step4

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.

creating the featured step5

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

Step6

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.

Step7

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.

Step8

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

Step9

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.

Step10

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

creating the featured step6

Step12

Step13

You should have something like this.

Step14

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

Step15

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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

Step16

Step17

Step18

Step19

 

You should have something like this.

creating the featured step8

You should have something like this.

creating the featured step7

 

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.

Step22

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

Step23

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

Step24

Add the following layer styles to your button layer.

Step25

Step26

You should have something like this.

Step27

Creating The Content Area

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

Step28

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.

Step29

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.

Step30

Finally add your footer information to the footer.

Step31

The Finished Layout

Step32

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Business Layout #7

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

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).

Step3

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.

Step4

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

Step5

Step6

Step7

Step8

You should have something like this.

Step9

Creating The Navigation

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

Step10

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

Step11

Step12

You should have something like this.

Step13

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.

Step14

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

Step15

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.

Step16

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.

Step17

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

Step18

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.

Step19

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

Step20

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Step21

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.

Step22

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

Step23

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.

Step24

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

Step25

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%.

Step26

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

Step27

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

Step28

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.

Step29

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.

Step30

Add the following gradient overlay to the content background.

Step22

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.

Step31

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.

Step32

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.

Step33

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

Step34

Adding The Main Content

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

Step35

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.

Step36

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.

Step37

The Finished Layout

You should finally end up with something like this.

Step37

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

The Design Lab #2

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

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.

Step3

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.

Step4

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.

Step5

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.

Step6

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.

Step7

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.

Step8

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

Step9

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.

Step10

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

Step11

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

Step12

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.

Step13

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

Step14

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”.

Step15

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.

Step16

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“.

Step17

Creating The Featured Area

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Step18

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

Step19

Add these layer styles to the featured rectangle.

Step20

Step21

Step22

Step23

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.

Step24

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.

Step25

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.

Step26

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.

Step27

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.

Step28

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.

Step29

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.

Step30

Duplicate the rectangle as many times as needed.

Step31

Add your navigation text to each black rectangle.

Step32

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.

Step33

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.

Step34

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

Step35

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.

Step36

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.

Step37

Finish off the footer by adding your footer information.

Step38

The Finished Concept

Step39

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Windows 7 Inspired Navigation

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

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.

Step3

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.

Step4

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.

Step5

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).

Step5

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

Step7

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”.

Step8

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.

Step9

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

Step10

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%.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Step11

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

Step12

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.

Step13

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

Step14

Step15

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.

Step14

Step16

Step17

You should have something like this.

Step18

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).

Step19

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.

Step20

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

Step21

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%.

Step22

More Buttons

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

Step23

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Web Design Layout #11

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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

Step2

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

Step3

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.

Step4

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.

Step5

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

Step6

Step7

You should have something like this.

Step8

Creating The Search Field

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

Step9

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

Step10

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

Step11

Step12

You should have something like this.

Step13

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.

Step15

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

Step16

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.

Step17

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.

Step18

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.

Step19

Now add these layer styles to your shape.

Step20

Step21

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Resize and place your shape over your search field.

Step22

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.

Step23

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.

Step24

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.

Step25

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.

Step26

Now add a gradient overlay using the settings below.

Step27

You should have something like this.

Step28

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”.

Step29

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

Step30

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.

Step31

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

Step32

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.

Step33

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.

Step34

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

Step35

Step36

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.

Step37

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.

Step38

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.

Step39

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.

Step40

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.

Step41

The Finished Layout

Thats it all done, heres the final product.

Step42

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…

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

WordPress Layout #6

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

Do the same again only this time enter these settings.

Step3

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.

Step4

Step5

Step6

You should have something like this.

Step7

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.

Step8

You should have something like this.

Step9

Creating The Navigation

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

Step10

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

Step11

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

Step12

Step13

Step14

You should have something like this.

Step15

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.

Step16

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

Step17

Step18

Step19

You should have something like this.

Step20

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.

Step21

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

Step22

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Finally add a drop shadow using the settings below.

Step23

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

Step24

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.

Step25

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

Step26

Step27

Step28

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.

Step29

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.

Step30

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).

Step31

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.

Step32

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.

Step33

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.

Step34

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.

Step35

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.

Step36

Step37

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.

Step38

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.

Step39

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.

Step40

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.

Step41

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.

Step42

Well Done… Finished

Thats it all done, heres the finished layout.

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Hosting Layout #2

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

You canvas should now look something like this.

Step3

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.

Step4

Add these layer styles to your website title text.

Step5

Step6

Step7

Step8

You should have something like this.

Step9

Creating The Navigation Bar

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

Step10

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

Step11

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

Step12

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

Step13

Step14

Step15

Step16

You should have something like this.

Step17

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

Step18

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

Step19

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

Step20

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

Step21

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Your navigation should now look like this.

Step22

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.

Step23

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

Step24

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.

Step25

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.

Step26

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.

Step27

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

Step28

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.

Step29

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.

Step30

You should have something like this.

Step31

Adding The Sidebar Content

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

Step32

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. (………)

Step33

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”.

Step34

Repeat the steps above to create more plans as needed.

Step35

Step36

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

Step37

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.

Step38

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

PC Mouse Tutorial

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

Drafting Out The Mouse

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

Step2

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

Step3

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.

Step4

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.

Step5

You should have something like this.

Step6

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.

Step7

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.

Step8

You should have something that looks like this.

Step9

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”.

Step10

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%.

Step11

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.

Step12

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

Step13

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.

Step14

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

Step15

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Step16

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.

Step17

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.

Step18

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.

Step19

Now add these layer styles to your mouse wheel.

Step20

Step21

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.

Step22

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.

Step23

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

Step24

Step25

Step26

Step27

You should have something like this.

Step28

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”.

Step29

Now select the crosshatch brush from with the brushes window.

Step30

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

Step31

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.

Step32

You should have something like this.

Step33

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.

Step34

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.

Step34

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

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Software Layout #5

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

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.

Step3

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”

Step4

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.

Step5

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

Step6

Step7

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).

Step8

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

Step9

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

Step10

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

Step11

Step12

You should have something like this.

Step13

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”.

Step14

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

Step15

Step16

Step17

You should have something like this.

Step18

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.

software layout step19

Now add these layer styles to the new inner rectangle.

Step20

Step21

Step22

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Step23

You should have something like this.

Step24

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.

Step25

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.

Step26

You should have something like this.

Step27

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.

Step28

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

Step29

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.

Step30

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.

Step31

Step32

Step33

You should have something like this.

Step34

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

Step35

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.

Step36

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”.

Step37

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%.

Step38

Now add these layer styles to the layer.

Step39

Step40

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.

Step41

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.

Step42

Finished Layout

Step43

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Sleek Icon Design

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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

Step2

Creating The Icon Surround

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

Step3

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.

Step4

Add these layer styles to the surround.

Step5

Step6

Step7

You should have something like this.

Step8

Creating The Inside

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

Step9

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

Step10

Add these layer styles to the rectangle you just created.

Step11

Step12

Step13

You should have something like this.

Step14

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.

Step15

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

Step16

Now add a stroke using the settings below.

Step17

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step18

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

Step19

Step20

Step21

Step22

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).

Step23

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.

Step24

You should have something like this.

Step25

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.

Step26

Creating The Inner Rectangle Shine

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

Step27

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.

Step28

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.

Step29

Creating The Shadow

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

Step30

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

Step31

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

Step32 width=

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.

Step33 width=

The Finished Product

You should now have something like this.

Step34 width=

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Business Layout #6

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

Step3

You should have something like this.

Step4

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.

Step5

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.

Step6

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

Step7

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.

business layout step8

You should have something like this.

Step9

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

Step10

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.

Step11

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

Step12

Step13

Step14

You should have something like this.

Step15

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

business layoout step16

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.

Step17

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

Step18

Now add a stroke using the settings below.

Step19

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.

Step20

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

Step21

Step22

Step23

Step24

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step25

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

Step26

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.

Step27

You should have something like this.

Step28

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.

Step29

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).

Step30

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.

Step31

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.

Step32

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

Step33

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.

Step34

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

Step35

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.

Step36

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.

Step37

Add these layer styles to your sidebar box.

Step38

Step12

Step13

Step14

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.

Step39

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

Step40

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.

Step41

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.

Step27

Step42

Finally add your footer text to the footer.

Step43

The Finished Result

Congratulations you should have something like this.

Step44

Thanks for reading, il look forward to your comments.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Vector Style Earth

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

Step1

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.

Step2

You should have something like this.

Step3

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.

Step4

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.

Step5

You should have something like this.

Step6

Now add these layer styles to your globe.

Step7

Step8

You should now have something like this.

Step9

Creating The Islands

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

Step10

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

Step11

You should have something like this.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Step12

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.

Step13

Now add these layer styles to your top island.

Step14

Step15

You should have something like this.

Step16

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

Step17

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.

Step18

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%.

Step19

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.

Step20

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

Step21

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

Step22

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.

Finished Result

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.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.