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.

In this round-up ive listed 14 examples of some weird image/photo manipulations. You wouldn’t believe how realistic some of these are, and you definetly dont see things like this everyday.

Wall Waterfall

Velocity

The Art Scholar

Our Evil Side

The Skin

Breaking Apart

Nature

Slow Tongue

No Strings Attached

Lose Weight Fast

Oooops

Peugeot Hibernating Beer

Extreme Thirst

Huevo Refresco

Pretty Cool Uh?

Thanks for reading, maybe you’d like to share some of your photo manipulations???? feel free to list them below or add them to the hv-designs flickr group.

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

Lets get started!

Creating The Background

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

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

Adding The Background Light Streaks

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

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

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

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

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

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

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

Creating The Navigation Background

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

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

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

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

Creating The Navigation Buttons

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

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

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

You should have something like this.

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

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

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

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

More Buttons

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

Thank You

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

Learn to code This Navigation

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

Check out these two videos, giving us a sneak peak and some of the technologies coming to adobe photoshop cs5.

Patchmatch

CS5 technologies

Want More????

I’l try and keep you all posted on any more videos coming and any other information regarding CS5. In the mean time you can DIGG and RE-TWEET this post.

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

Creating Our Document & Guides

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

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

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

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

Creating The Website Title

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

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

You should have something like this.

Creating The Search Field

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

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

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

You should have something like this.

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

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

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

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

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

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

Now add these layer styles to your shape.

Resize and place your shape over your search field.

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

Creating The Navigation

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

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

Adding A Splash Of Color

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

Now add a gradient overlay using the settings below.

You should have something like this.

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

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

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

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

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

Creating The Service Boxes

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

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

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

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

Creating The Main Content Box

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

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

Creating The Footer

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

The Finished Layout

Thats it all done, heres the final product.

Final Note

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

2 weeks left of the official hv-designs contest to kick the month of october. Get your submissions in before 31st October or miss out.

About The Contest

All’s you have to do is create a hv-designs featured wallpaper. The theme for the wallpaper should be what you think hv-designs is all about.

How To Enter

To enter the competition, contestants must submit designs into the HV-Designs Flickr Group. (located in the sidebar). Be sure to follow these guidelines

• All entries must be tagged with “comp_wallpaper”.
• Submit a JPG image that is 1680x 1050 pixels or larger.
• Include in the description of your Flickr entry any stock or source images you have used including URLs to those images. (always credit your sources).
• Please make sure your entries are added to the hv-designs flickr pool.

What Do We Win?

1st Place Prizes:

• 10 Vector packs, 10 icon packs & 10 Photoshop brush packs with extended license (Worth £261)
• Fanurio time tracking & billing license (Worth £36)
• Any 1 book from packt publishing (Worth £22.49)

2nd Place Prizes:

• 5 Vector packs, 5 Icon packs, 5 Photoshop brush packs with extended license (Worth £131)
• Free PSD to HTML conversion service from SB Designs Uk (Worth £85)

3rd Place Prizes:

• 1 Vector pack, 1 Icon pack1, 1 Photoshop brush pack with extended license (Worth £26)

Terms and Conditions

• Entries must be submitted before OR on 31/10/2009.
• Entries into the competition must be entirely your work.
• All stocks used must be credited with a working URL. (triple check your allowed to use the image)
• No prize can be redeemed for cash.
• If you live outside europe or USA the book from packt publishing will be substituted as a digital E-Book.

Sponsors

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 #2

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.