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

Lets Get Started! - The Header

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

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

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

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

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

You should have something like this.

Creating The Navigation

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

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

You should have something like this.

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

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

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

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

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

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

Adding The Navigation And Head Elements

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

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

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

The Featured Product

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

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

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

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

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

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

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

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

Creating The 3D Sidebar Box

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

Add the following gradient overlay to the content background.

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

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

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

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

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

Adding The Main Content

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

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

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

Creating The Footer

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

The Finished Layout

You should finally end up with something like this.

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

Download the FREE PSD file of the design lab #2 layout. Enjoy.

The Layout

License and Attribution

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

Download The File

The internet is full of great artists and in this round-up ive listed 19 exceptional illustrations from “deviantART”. You’ll be amazed at some of this work.

Sunless Skies

Batman Inferno

Blood Pig

Dante And Vergil

RM Amor Zombie

Velkan Vs Al

Drifting

Nasga Darkonline Comission

Sarika Genocide

Aphrodite

Knight

Elsabeth Muriel And The Toaster

Japanese Motif

Where The Wild Things Are

Thor Vs Silver Surfer

Nero Devil May Cry

No Snow White, No Finish

Tatakai

CP9

Whats Your Favourite?

These are some awsome illustrations but my favourite would have to be “No Snow White, No Finish“, i think the quality of detail is amazing……

Thanks for reading. Dont forget to promote this post with twitter and digg.

Fancy winning a DVD full of hv-designs goodies????? Read on.

What Do I Have To Do?

All’s you have to do is DIGG an article on hv-designs.

There is a digg button located next to the “re-tweet” button at the top of every article and tutorial on hv-designs. Simply digg any article or tutorial (or both) on hv-designs then include the link to the article or tutorial in the comments area ON THIS PAGE. You can digg and enter as many times as you want.

What Do We Get In Return?

In return il send out a DVD full of PSD files, CSS templates, PSD Sitebuild Tutorials, Icons and Bonus Unpublished Material to one LUCKY winner chosen at random. Obviously the more times your name pops up in the comments area the more chance you have of winning.

Dont get to carried away though as il be keeping a close eye on spammers……

How Long Do We Have?

The winner will be annouced on Monday 30th November, be sure to include a VALID e-mail address when commenting.

Good Luck.

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

Let’s Get Started!

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

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

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

Preparing Our Wooden Texture

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

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

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

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

Creating The Header

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

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

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

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

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

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

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

Adding The Header Elements

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

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

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

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

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

Creating The Featured Area

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

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

Add these layer styles to the featured rectangle.

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

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

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

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

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

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

Creating The Navigation

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

Duplicate the rectangle as many times as needed.

Add your navigation text to each black rectangle.

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

Creating The Content Area

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

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

Creating The Footer

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

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

Finish off the footer by adding your footer information.

The Finished Concept

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

It seems we have a few problems regarding entries…. NEED YOUR HELP from the people who entered.

The Problem

ALL ENTRIES should have been submitted and added to the hv-designs flickr group. All entries also should have been tagged with “comp_wallpaper”. There is only one submission from what i can see inside the flickr group.

For Those Who Entered

If you entered the competition can you please please e-mail me the link “admin@hv-designs.co.uk” so i can get this competition wrapped up.

What If…

If no-one manages to get in touch by the 30th November il assume only one person entered the competition. (Hopefully this is not the case).

Thanks for your help, il look forward to seeing your entries.

Every month up until christmas i’l be giving away a FREE PSD pack. Each pack will contain 10 FREE PSD files for your photoshop pleasure.

PSD PACK #3

License and Attribution

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

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template. (Submission On Six Revisions)

Minimal And Modern Portfolio Layout

As some of you know i sometimes write articles/tutorials for other blogs, one of the recent tutorials i’ve wrote has just been published over at six revisions. Check it out!

I look forward to your comments.

In this round-up ive listed 15 examples of some wonderful inspirational typography.

Panna

The 4 Elements

Surealizam Broken

Well Being

Fire Starter

Bob Marley

Balance

3D Colorfull Text

Soldier

Victory Over Death

For Someone Special

Red

Spirit

Danger

Changing Actions

Favourites??

Id honestly have to say there all really good but my favourites are… Fire Starter, Balance and Changing Actions. Which wants do you like?? or maybe you like some typography not listed here, feel free to share it with us below.

Download the windows 7 navigation PSD file for free. Download also includes the fully functional CSS coded versions. Enjoy.

Windows 7 Coded Navigations

Windows 7 PSD File

License and Attribution

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

In this Photoshop web design tutorial, we’re going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template. (Submission On Six Revisions)

Minimal And Modern Portfolio Layout

As some of you know i sometimes write articles/tutorials for other blogs, one of the recent tutorials i’ve wrote has just been published over at six revisions. Check it out!

I look forward to your comments.

hello, welcome, in this tutorial il be showing / explaining how to transform the windows 7 inspired navigation into a fully working CSS navigation.

Lets Get Started!

Before we start diving into the HTML and CSS we need to make a few adjustments to the PSD file and create a background to demonstrate the PNG transparancy. We’ll start with the background first.

Create a new document 800 x 600 pixels, set your foreground color to #1592d7 and background color to #136da2. Select the gradient tool with a radial gradient.

Once you’ve selected the gradient tool start from the middle of the canvas and drag downwards about half-way. Create a new layer above your background layer then select the custom shape tool from the menu on the left.

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

If you dont see then registration target shape click the little black arrow in the top right hand corner, you and load more preset shapes there. Once you’ve selected the shape drag it out over your canvas, make the shape as big as you can. Place the shape so that the streaks are flowing nicely over the canvas.

Fill the shape with the color white then add a guassian blur of 5pixels. Finish off by setting the layer opacity to 30% and blending mode to overlay.

We now need to blend in our streaks with the background, add a layer mask to the streaks layer, select the gradient tool with a linear gradient. Drag the linear gradient from the left of the canvas towards the right, BUT dont go all the way across the canvas, you just want to fade in the edges. Repeat the process for the right side also, you should have something like this.

Create a new folder for your navigation, inside this folder create another folder called images. Save the background as “background.png” inside the images folder.

Modifying The PSD File

Open up your windows 7 navigation PSD file, select the zoom tool and zoom into the top and bottom lines.

Select the eye dropper tool and pick the colors of the white and black line.

Re-create the top and bottom lines using the colors from the eye dropper. The reason were doing this is because the lines were orginally white and black with the opacity lowered. When we save the images for the navigation the lines wont retain there opacity, they’l simply change back to black and white.

Slicing The Navigation Background

Select the rectangular marquee tool and make a 1 pixel wide selection around the navigation background. Hide the background layer and the white streaks layer.

Once you’ve made the selection go to “edit > copy merged”. Create a new document, the dimensions of the selection should automatically be inputted into the dimension fields. Paste the selection into the new document then delete the background layer, save the image as “navigation_background.png” inside the images folder.

Slicing The Navigation Button

Still with the rectangular marquee tool this time make a selection around one of the buttons.

Once you’ve made the selection hide the background and background streaks then go to “edit > copy merged”, copy and paste the selection to a new document and save as “nav_button.png” on a transparent background inside the images folder.

Creating The Hover Button

Duplicate the button shine layer then change the gradient overlay to the following settings.

Hide the orginal button shine layer, then select the rectangular marquee. With the rectangular marquee tool make a selection around the new button.

Hide your background layer and the white streaks layer then go to “edit > copy merged”, paste the selection to a new document with a transparent background. Save the image as “nav_hover.png” inside the images folder.

Were now ready to start coding.

Setting Up Our Files

You should already have a folder in which we created earlier, inside the folder create a blank CSS and HTML file. You should have 2 files and 1 folder, index.html, styles.css and a folder called images.

Open up your HTML and CSS file in your code editor. The first thing we’l do is add our 800×600 pixel background so that we can see that the PNG files are still transparent.

In your CSS file add the following code.

body {
	background-color: #1570a4;
	background-image: url(../images/background.png);
	background-repeat: no-repeat;
	background-position: center top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 10px;
}

Marking Up The Containers

Before we start with all the navigation stuff lets first create a couple of containers so that our navigation centers across our streaky background. Create a new DIV called container, inside the container DIV create another DIV called navigation1.

The menu im going to show you how to code will be a fixed width menu spanning 800 pixels. There are four menus in total but im only showing you this one, il provide all menus for you to download though.

<div id="container">

<div id="navigation1">
</div><!--NAVIGATION 1 ENDS-->

In your CSS file add the following CSS rules.

#container {
	width: 800px;
	margin: auto;
}

#navigation1 {
	height: 50px;
	float: left;
	width: 800px;
}

The container styles are pretty simple, were just setting a fixed width of 800 pixels and setting the margins to auto, settiing the margins to auto will center the container in a browser. The navigation 1 DIV is pretty much the same only this time its floated left and has a fixed hieght. The fixed height is the height of our navigation image.

Marking Up The Navigation

Now mark-up a simple navigation using an unordered list inside the DIV navigation1. The code should look something like this.

<div id="navigation1">
<ul class="nav1">
<li><a href="#" title="#">Button1</a></li>
<li><a href="#" title="#">Button2</a></li>
<li><a href="#" title="#">Button3</a></li>
<li><a href="#" title="#">Button4</a></li>
<li><a href="#" title="#">Button5</a></li>
<li><a href="#" title="#">Button6</a></li>
<li><a href="#" title="#">Button7</a></li>
<li><a href="#" title="#">Button8</a></li>
</ul>
</div><!--NAVIGATION 1 ENDS-->

We start off with an un-order list which has a class of “nav1″, we then have our list items with our links.

Adding The CSS Code

.nav1 li {
	display: block;
	background-image: url(../images/nav_button.png);
	background-repeat: no-repeat;
	float: left;
}

.nav1 li a {
	display: block;
	float: left;
	height: 50px;
	width: 91px;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 48px;
}

.nav1 li a:hover {
	color: #FFFFFF;
	background-image: url(../images/nav_button_hover.png);
	background-repeat: no-repeat;
}

CSS Code Explained

We start off by styling our individual list items (li), each link will be displayed as a block element which is floated left. We then add our navigatiob button PNG as a background then set the background-repeat property to no repeat.

Next we have our list links (li a), the links are also displayed as a block element and floated left. Any text inside the list will be centered, will have a font size of 12px in the color white (#ffffff) and finally have a line height of 48px. The line height pushes the text into the center of the button vertically. Each link item will also have a fixed width and height, the width and height should be the same as your nav-button image.

Finally we style our hover state of our navigation (li a:hover), we simply add a navigation hover button as background which isn’t repeated. You can also change the color of the text if you wish or keep it set to white (#ffffff).

The DEMO

Heres the demo for you all to look at, ive provided 4 navigations some with text and some with icons, the menus also range from fixed width menus or ones with 100% width background. The navigations should all be transparent without using any additional CSS code, try using a busy background to really notice the difference.

Thanks

Thats it for this tutorial, hope you found it worth reading. Dont forget to DIGG and RE-Tweet, your help is much appreciated.