For this reason we are lucky enough to have a wide variety of free PSD website templates for your use and enjoyment. I have collected some of the best ones I found from around the web to bring to you, already split up into layers in Photoshop. Enjoy!

1) Design Studio PSD Template

2) Orange PSD Template

3) SanduneBiz PSD Template

4)Cambridge PSD Template

5) Crisp Presentation PSD Template

6) Citrus Square Burst PSD Template

7) Audryhipburn PSD Template

8 ) MyTwoCents Property PSD Template

9) Old Victorian PSD Template

10) Bright Colors Radio PSD Template

11) Blackboard PSD Template

12) Colorful Video PSD Template

13) Shape PSD Template

14) DelliStore PSD Template

15) Midnight Sun PSD Template

16) Environmental PSD Template

17) Smashing Multimedia PSD Template

18 ) Slideshow PSD Template

19) Fresh PSD Template

20) 5 Webdesigns PSD Template

21) 3 Free PSD Template

22) Organic Conference PSD Template

23) Summer of Love PSD Template

24) Herbal Treats PSD Template

25) Solitude PSD Template

About the Author
Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Final Result

A Transparent Website Layout is what we are about to make. You can click on the image to see a full-scale version.

Background

Step 1
Lets start off by creating a new document 2000×2000px.

Step 2
Using the marquee tool, create a box 500px wide by 1500px tall. Fill with black

Step 3
Go to Edit>Define Brush Preset. Change the name to “Square Brush” and press ok. Now we should have our brush in with the rest of the brushes.

Step 4
Close out of the 2000×2000px document, because we are done with that one. Now open a new document 1200×1200px and fill with black.

Step 5
Create a new layer (Control + Shift + N) and fill it with black also.

Go into Filter>Render>Fibers. Adjust the settings like I have to get a real good contrast.

Step 6
Now Go into Filter>Blur>Motion Blur and adjust the settings to 999px.

Using the transform tool (Control + T), hold down shift and rotate to the left one spot. Stretch out the fibers so that it covers the entire area.

Step 7
Open up the Levels (Control + L) and adjust them as I have. This is going to darken our fibers.

Step 8
Change the blend mode of the fibers layer to Color Dodge.

Now select the brush we made, then push F5 to open up our brush settings.

Change the settings as I have them.

Step 9
Create a new layer (Control + Shift + N), and move it under the fibers layer.

Pick a blue color and paint a little area with our brush. Since we changed our brush settings, the brush we made should be scattered something like what I have.

Step 10
Go to Filter>Blur>Motion Blur with the distance at 999 px.

Step 11
Repeat steps 9 and 10 with different variations of blue, creating a new layer for each color, until you get something you like.

Step 12
Create a new layer just under the fiber layer. Click on the gradient and choose the Reflected Gradient tool. Make sure the color is white to nothing.

Click and drag a gradient in the middle of the document, following the line of the fibers.

Change the Blend Mode to Overlay, and drop the opacity down to 60%. This will give us a light source in the middle of the document.

This is the finished product of our background. Now we are going to get started on putting together the actual website.

Website

Step 13
Before we get any further I am going to take all of the layers from my background and put them into a folder to keep it organized.

Click on the background layer, then click and drag a guide out to the middle of the document. The guide should snap into place at the middle. If it doesn’t go to View and make sure Snap is checked.

Using the Marquee Tool create a box 960×1200px. We are going to move it over using the transform tool (Control + T) to get the anchor points on the corners and the middle of the box. Line up the middle anchor points with the middle guide. Put a guide on each side of the box.

Step 14
Using the marquee tool create a box 375×60px and rest the right side of it on the right guide and the top on the top of the document. Hold down shift and move it down six times. Put guides on the top, bottom and left sides.

Using the Rounded Rectangle Tool, create a box inside the guides, with a radius of 10px.

We are going to add some layer styles to the box, so go into the first icon at the bottom of the layers palette, and click on Inner Glow. Change the settings as I have them with a color of #666666, then click on Stroke with a color of #000000.

Step 15
Click on the marquee tool. Now Control and click on the shape we just made. Hold down shift and move the shape up three spaces. Using a linear gradient fill the area with white. Drop the opacity down to 60%.

Step 16
Create a new layer and change the foreground color to #3399FF. Control + click on the box. Now, using the linear gradient again, create a blue gradient at the top of the box.

Step 17
Do Control + Shift + I to get the inverse selection, then select the white gradient layer and delete. This will get rid of the extra part that we don’t need.

Step 18
Using Myriad Pro Black at 16 pt type out your navigation in white.

Using the square marquee tool click and drag a box 1px wide and the height of the box. Fill it with #333333. Move the marquee over one spot and fill it with #000000.

Step 19
Repeat step 18 so there is a break in between each button. Put all the navigation layers into a folder.

Step 20
We are going to create the body of our website. Using the marquee tool create a box 960×970px and rest the top of the box on the bottom of our navigation bar. Hold down shift, and move it down three spaces. Put a guide on the top and bottom of the marquee.

Using the Rounded Rectangle tools, Create a box within those guides as well as the far left and right ones.

Click and drag the layer styles from the navigation box onto the website box.

Step 21
Grab a logo and bring it into your document. Line up the left side of the logo with the left guide.

Step 22
Using the marquee tool create a box 600×240px and put guides around it like we did with the navigation and the website box. Using the rectangle tool make a box on the guides we just created. Give it the same layer styles as the navigation, fill it with white and change the opacity to 20%.

Put the white box into a new folder called “Post 1”.

To add the reflection, use the Ellipse tool to create an oval on the bottom half of the box. Control and click on the circle and then do Control + Shift + I to get the inverse selection. Select the linear gradient with white to nothing selected for the color. Click and drag a gradient.

Once you get a gradient you like do Control + Shift + I and delete the extra area.

Step 23
We are going to go and grab this laptop image (http://www.sxc.hu/photo/1185958)from stock.xchng.

Open it up in Photoshop and click on your Crop Tool. Adjust the settings so it is 200×200px at 72 pixels/inch.

Bring it into our document.

Step 24
Put the photo at the top left of the post box, then holding down Shift, move the photo down twice and to the right twice.

We are also going to add some layer styles. So click on the layer styles icon and click on stroke. Change the settings like what I have, with a color of white. Now add a drop shadow.

Step 25
Now lets put in some dummy copy:

Etiam ultricies nisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. ac, enim. Continue…

The “Etiam ultricies nisi” will be our title. Arial/Helvetica Bold at 32 pt. The rest of the copy will be Verdana at 11pt. The color of the “continue” will be #3399FF.

Step 26
Right-click on the “Post 1” folder, Duplicate Layer Set and call it “Post 2”. Put the top of the second post on the bottom of the first post and then hold down shift and move “Post 2” down two spaces.

Step 27
Repeat step 26 for the third and fourth posts. For the fourth post click on the “Post 4” folder, then click on the layer mask (second icon from the left on the layers palette). Use the marquee tool to create a box around the area of the fourth post that is on the website box. Hold down shift and move the marquee box up two spaces. Then do Control + Shift + I to get the inverse selection and fill with black.

Step 28
Now let’s make the sidebar. Using the square marquee tool make a box 300px wide and put it on the far right guide. Hold down shift and move it in two spaces. Put a guide on the left and right sides of the square marquee.

Step 29
Using the rectangle tool make a box within the guides we just made. Make sure the box lines up with the first post box at the top and it goes below the bottom of the website box at the bottom.

The sidebar box is going to be white and have the same layer styles as the post boxes.

Step 30
Click on the mask icon on the layers palette. With the square marquee tool, create a box that covers the sidebar from the very bottom of the document to the bottom of the website box. Hold down Shift and move the square marquee up two spaces. Fill the area with black. This should get rid of that extra area.

Step 31
We want to add a reflection like we have on the posts. To do this we have to duplicate the layer with Control + J and move it over above the sidebar box. Control and click on the sidebar box, then Control + Shift + I to get the inverse, and delete the extra area.

For the search bar make a white box with the square marquee tool. The size of the box is going to be 260×30px and it is going to be placed at the top left of the sidebar. Hold down shift and move it over two spaces to the left and two spaces down.

The search box is going to have the same layer styles as the sidebar box.

Using the text tool create some text that says “Search” with 16pt Verdana and a color of #CCCCCC.

Step 32
Now we are going to put in some ads. These ads are 125×125 and are going to go two spaces down, holding Shift and two spaces from the edges.

The bottom two are going to be Shift and down one space from the bottom of the top ads.

While you are at it put a guide on the left and right sides of the ads.

Step 33
Click on the Rectangle Tool and in the options, click on the down arrow to the right of all the different shapes. Click on fixed size, and change it to 260×30px. Put the rectangle so the top is touching the bottom of the ads, and holding down shift move down two spaces.

Change the color to white, at 20% opacity

Step 34
Now to get the reflection, Control and click on the rectangle we just made. Push Control + Shift + N to get a new layer. Now click on the square marquee tool and move our selected area up so the bottom is at the middle of the rectangle.

Fill with a white to nothing linear gradient.

Step 35
Type in “Related Links” with the font, Myriad Pro Black, and a size of 16 pt.

We are going to give it a slight background shadow to make it stand out a little better.

Step 36
For the links we are just going to use the generic Wordpress links:

Development Blog Documentation Plugins Suggest Ideas Support Forum Themes Web Hosting WordPress Planet Wordpress Themes
The text is going to be white 12pt Verdana. We are going to hold Shift and move it in two and down one from the “Related Links” head.

Step 37
To get the arrow bullets, select the custom shape tool (same button in the toolbar as the rectangle tool) and choose the same arrow I did.

Change the color to #3399FF and add a Bevel and Emboss from the layer styles icon.

Step 38
Repeat steps 37 and 38 except our header is going to be “Categories” and for our mock up we will just put:

Category Number One Category Number Two Category Number Three Category Number Four

Step 39
Repeat steps 37 and 38 except our header is going to be “Archives” and for our mock up we will just put:
March 2009 April 2009 May 2009 June 2009 July 2009

Step 40
We want to add a blue glow on the website box like we have on the navigation bar. To do this Control and click on the website box and create a new layer with Control + Shift + N.

Using the linear gradient click and drag a #3399FF gradient from the top down.

Step 41
Finally we will put in our footer information. Hold down shift and move the footer text down two spaces.

Final

Here is the final version. The great part about working with a transparent website is that you can change the background image to completely change the look of your website.

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

In this tutorial, I will show you the process involved in creating this golden flame text effect with soft smoke texture in Photoshop.

Final Result

To complete this tutorial, you will need the following stocks:
Font
Soft Smoke Texture

Step 1
Create a new document sized 1200 * 800px, fill the background with black colour. On the background type, use the font we’ve just downloaded to type some texts onto it.

Step 2
On the text layer, apply the following layer blending options:
Outer Glow

Inner Glow

Bevel and Emboss

Contour

Stroke

And you will have the following effect:

Step 3
Duplicate this text layer FIVE TIMES. For each duplicate layer, slightly adjust each layer’s position on the canvas, also alter the opacity of each duplicated layer for creating more depth. Here is what I have after adjusting each layer:

Step 4
Duplicate all preview text layer ONCE. Rasterize those duplicated text layers and merge the duplicated layers together. On the merged layer, apply the following Gaussian Blur Settings:

Change the blending mode of this merged layer to “Hard Light”, you will have the following effect:

Rename this merged layer to “Glow”, we will continue to use this layer for the next step.

Step 5
Duplicate this “Glow” layer THREE TIMES. From bottom to top, adjust each layer’s blending mode and opacity according to the following settings:
Duplicated layer 1:
Blending mode: vivid light
Opacity: 90%
Duplicated layer 2:
Blending mode: overlay
Opacity: 80%
Duplicated layer 3:
Blending mode: soft light
Opacity: 70%
And you will have the following effect:

Step 6
Load the “Soft Smoke texture” into Photoshop, use the Lasso Tool with a 20px feather setting, select a portion of the smoke texture, copy and paste it onto our text document.
Use the Free Transform tool (Ctrl +T) to rotate the texture until reaching the effect as follows:

Name this new layer as “Flame”, duplicate it a few time. Again on each duplicated layer, use the Free Transform tool to rotate and resize, so that the shape of each layer differs from each other. Also make sure the Smoke Texture covers the whole text. Here is what I have after the Free Transformation:

Step 7
Merge those duplicated layers from the previous step and keep its name as “Flame”. Change the blending mode of the merged layer to “Hard Light”. You will have the following effect:

On this layer, hit Ctrl + U and apply the following Hue and Saturation adjustments:

And you will have the following effect:

Step 8
Still on the “Flame” layer, add the following layer mask to it: (Hint: use a soft round brush with different flow and opacity settings to create depth)

Here is the effect after applying the mask:

Then we duplicate this “Flame” layer three times. Set the layer blending mode of the duplicated layers (from bottom to top) as “Hard Light”, “Overlay”, “Overlay”. You will have the following effect:

Step 9
Now we can add some smoke around the text so it doesn’t look too isolated. To do this, duplicate the “Flame” layer one more time and remove the mask. Desaturate this duplicate layer, change the blending mode to “Screen” and decrease the opacity to around 30%. Here is what I have so far:

Step 10
For some final adjustments, I added the following image adjustment layers on top of all previous layers:
Curves

Brightness and Contrast

Hue and Saturation

And here is the final effect:

OK, that’s it for this tutorial! You can of course add some of your own texture or filter effect and see what the end results are! Remember to always keep your own creativity! Here is an alternative version I have: (adjusted the colour balance a bit)

Hope you enjoy this tutorial, drop me a comment if you have any question, I will try my best to help you out. Cheers and have a nice day!

About the Author

Hello, my name is James from Gold Coast, Australia. I love Photoshop as a hobby and have been playing around with it for a long time. I currently work full-time as a system administrator and run my Photoshop tutorial blog psdvault.com during my spare time.

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

A modern and easy to use Admin User Interface is the key to success of web applications. We are going to show you How To Create a Web Application Admin User Interface in Photoshop. So that you can easily create your own admin user interface for your web applications.

Final Result
This Web Application Admin User Interface is what we are about to make. You can click on the image to see a full-scale version.

Background
Step 1
Create a new document in Photoshop that is 1200×1112px. Fill the background with black (#000000).

Using a Linear Gradient and a dark gray (#333333), click and drag it from the top down. You want your gradient to end about half way down the document.

Header
Step 2
Using the marquee tool we are going to make a 1200×77px box. To do this click on the marquee tool and change the style settings to Fixed Size. Change the size to 1200×77px and click on the top left corner of the document for a starting point. Fill with #33CCCC.

Step 3
Now we are going to add a Gradient Overlay to our header. Click on the first icon from the left on the bottom of the layers palette, and click on Gradient Overlay.

Step 4
Using the line tool, create a 5px line going across the entire document. This is going to go at the bottom of our header. Change the color to #CCCCCC.

Now we are going to create a bevel look to it. Click on the Single Row Marquee Tool, and create a line on the top of our 5px line we just created. Fill that selected area with #FFFFFF. Create another line at the bottom and fill with #999999

Finally add another Single Row Marquee to the very top of the document using #009999.

Step 5
We want to create a 950px box in the middle of the document, which we are going to build our interface around. To do this first click on the background layer then go to View>Snap and make sure it is checked. Now click and drag a guide out from the ruler to the middle of the document. When you get to the middle the guide should snap into place.

Now using the Square Marquee tool create a new layer (Control + Shift + N), and create a square that is 950px wide and 1112px tall. Fill with #FFFFFF. When you use the transform tool (Control + T) there will be anchor that come up on the corners and in the middle, line up the top and bottom middle anchor points with the guide. Take that guide that you created and drag it over to the right side of the box we created (it should snap into place). Also, click and drag another guide to the left of the box. Now click and drag the box layer into the trash (last icon on the right at the bottom of the layers palette).

Step 6
While we are at it, we are going to add some more guides to get the basic layout of our design.

Using your square marquee tool create a box 250×1112px so that the left edge is on the left guide. Click and drag a guide out to the right side of the selected area.

Holding down shift, move the box over to the left once with the left arrow. Put a guide on the right side of the selection.

Hold shift again, and move the box over to the right twice. Put a guide on the left side of the selection.

Move the box over two more times, holding shift, and put another guide on the right side of the box.

Now we are going to make another box that is 950×113px. Put it at the very top and put a guide at the bottom of the box.

Step 7
Before we go any further we want to start organizing our layers. So create a new folder (third icon from the left at the bottom of the layers palette) and call it “Header”

Using the rounded rectangle tool, create a box with a radius of 10px that goes from the left guide to the fourth guide in, and down to the guide that goes across. Fill with #CCCCCC.

Step 8
Using the layer styles (first icon at the bottom of the layers palette) click on Inner Shadow. This will give us a dark look on the edges.

Next we are going to add a Bevel and Emboss. This will make our box pop, kind of like we did with border on the header.

Finally we are going to add a Gradient Overlay. This will give us a dark edge on the bottom of our box.

Step 9
Now you can add in your logo, and give it the same Bevel and Emboss as the box. You can do this by dragging the style from the box layer to the logo layer.

To give it an extra embossed look, you can first duplicate your logo with Control + J. Control and click on the logo and fill it with #CCCCCC. Move that layer down two spaces.

Step 10
We are going to give the box a metal look to it. To do this we are going to create a new layer, then create a box using the marquee tool and fill it with black. The size doesn’t really matter, as long as it is bigger than our box.

Make sure your foreground and background colors are black and white, then go to Filter>Noise>Add Noise. Change your settings to something like what I have.

Using Control + U drop the saturation all the way down to -100.

Do Control + D to deselect the area, then go to Filter>Blur>Motion Blur.

Move the metal we are creating over the original box. Then do Control + click on the original box layer, the do Control + Shift + I to get the inverse and delete.

Change the blend mode to Soft Light. Open up the levels menu with Control + L and bring in the left and right arrows towards the edges of the graph.

Then drop the Opacity way down until you get something you like. I put mine at 20%.

Step 11
Let’s add some navigation. To do this we are first going to add another guide. Using the square marquee tool create a square that is 120px wide and put the left edge on the last guide on the left side of the document. Drag a guide over to the right of the box.

In that box we are going to take the Rounded Rectangle Tool and create a box in that area, except make sure that to top of the box, including the rounded corners goes above the header.

Create a new folder and call it “Nav”. Change the color of the box to #33CCCC, and drag the layer into the folder. Move the folder below the header.

Step 12
The first button is going to be our “Dashboard” button, so create a new folder inside the “Nav” folder, and call it “Dashboard”.

Now we are going to add some layer styles to our button. So lets add an Inner Glow, and Bevel and Emboss. This will really make our button pop.

Step 13
Let’s add some text to our button. Use the Type Tool, to type out the word “Dashboard”. I am using the font ITC Franklin Gothic Demi at 16pt. Make sure you make your text box the same width as the navigation button and center the text.

Step 14
Duplicate the text layer with Control + J and change the color to #CCCCCC. Move it down two spaces. This will give us a bevel for the navigation words.

Lastly we are going to add a shadow at the top of our button. To do this Control and click on the button layer to get the selection, then create a new layer with Control + Shift + N. Now click on the gradient tool and make sure you have the Linear Gradient selected, as well as black as your foreground. Click and drag a gradient from top to bottom until you get something you like.

Step 15
Right click on the “Dashboard” folder and click on Duplicate Layer Set. Rename the folder “Users”.

Holding down Shift, move the button over 13 spaces. This should put it just off the original button.

Change both the text layers to say “Users” and change the background to #CCCCCC.

Repeat this with “Pages” and “Settings”. So you should end up with four buttons total.

Step 16
Now we are going to add the login information at the right of our webpage.

Sidebar
Step 17
Now it is time to start on the sidebar. First lets start off by taking the Rounded Rectangular Tool, click and drag a square the same width as the logo box and a height something like what I have (it doesn’t have to be a certain height because we are going to mask it off). Make sure the top is resting on the horizontal guide. Fill it with #FFFFFF for now.

Click on the layer mask (Second icon from the left on the layers palette). Click on the square marquee tool and create a square 250×35px and put it on the far left and horizontal guides. Get the inverse selection with Control + Shift + I and fill the area with black. This should get rid of the area we don’t need.

We are going to add the headline, so using the Type Tool, type out “System Messages”. Move the text to the far left guide then holding down shift, move it over to the right one space.

Step 18
We are going to add some layer styles to our sidebar head, but before we do that we want to create a new folder and call it “System Messages”.

Now go into the layer styles and add a Bevel and Emboss, also we are going to give it a Gradient overlay.

Go ahead and change the color of the box to #333333. Holding down Shift, move the box down three times.

Step 19
Using the Square Marquee tool, create a square, 250×435px. Line it up at the far left and horizontal guides. Create a new layer with Control + Shift + N and fill it with #CCCCCC.

Add a Bevel and Emboss and holding shift, move the box down seven spaces.

Step 20
Repeat step 17, change the headline to “To Do List” and put the layers into a new folder called “To Do List”.

Step 21
We are going to repeat step 19, except the box is going to line up with the left guide and the bottom of the “To Do List” head. Change the height to 340px and move the box down five spaces from that spot.

Step 22
Now we can start creating the information inside the first sidebar. Let’s start off by grabbing the talk bubble icon. I’ve created a transparent PNG of all the icons so you can use them. Duplicate the “System Messages” headline and change the color to #333333. and change it to “Recent Messages”. Put your talk bubble next to the text and line up the icon with the left guide. Hold down shift and move it over one spot.

Step 23
Let’s go in and add a break under the “Recent Messages”. To do this, click on the Line Tool and create a 1px line in between the inner two sidebar guides.

Now grab the red “x” icon and set it one Shift + space over from the left side of the sidebar.

Add some dummy text: “Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.” Change the font to Verdana, font size to 10pt and the color to #333333. To underline it (because these will be links) highlight the text and open up the text options with Control + T, then select the underline option.

Put the icon and dummy copy into a folder called “Message 1”.

Step 24
Repeat step 23, and put the layers in a folder called “Message 2”.

Step 25
To add the message form we are first going to create a headline. Duplicate the “Recent Messages” folder and replace the talk bubble icon with the talk bubble and the green “+” icon. Hold down shift and move it down fifteen spaces.

Also, duplicate the line break and move it one shift + space down from the bottom of the “Created New Message” head.

Step 26
Now to add the form, create a new folder called “Message Form”. Using the type tool Write out “Subject:”. I’m using ITC Franklin Gothic Demi at 13pt.

Create a 229×30px box using the square marquee tool and fill with #FFFFFF.

Step 27
Now we are going to give the box a bevel. To do this we are going to duplicate the white box with Control + J. Control and click on the layer, then fill with #333333.

Now make sure you have the marquee tool clicked, and move down and right one space each. Then delete the selected area.

Step 28
Repeat steps 26 & 27 except the white box is going to be 229×100px and instead of “Subject:” it is going to say “Message:”.

Step 29
Now we are going to create the “Send” button. Duplicate the “Users” folder from the navigation buttons, and bring it down five spaces below our form. Click and drag the shadow layer and the light gray text layers from the navigation into the trash can.

Change the color of the button to #333333 and the text to #33CCCC. Change the text to say “Send”. Add a layer mask to the button. Now take your marquee tool and create a box so the bottom of the box is at the bottom of the message form. Move the marquee box down five spaces and fill with black.

Move the text down four spaces.

Step 30
Repeat steps 17-19, except change the box size to 250×336px.

Now for the bottom sidebar, we want to duplicate the two message folders and bring them into our “To Do List” folder. Shift and move the text down four times. Unclick the underline options on the text and replace the “x” icons with the “check” icons.

Step 31
We are going to add the “To Do” and “Done” tabs at the top of this part of the sidebar. Duplicate the “Send” button folder and change the name to “To Do”. Go into that folder and find the actual button. We are going to go to rotate it 180 degrees.

Bring the tab down to our sidebar and move it down five spaces and rest it on the second guide from the left.

Step 32
Duplicate the “To Do” folder and rename it “Done”. Change the color to #33CCCC and the text to #333333. Hold Shift and move the “Done” button nine times.

Duplicate one of your line breaks and move it so it is resting on the bottom of the tabs.

Step 33
Duplicate the “Create New Message” folder and rename it “Add New Item”. Change the text to “Add New Item” also. Make sure you duplicate the line break also. Hold down shift and hold this headline down fourteen times.

Step 34
Duplicate the message part of the form and the send button. Bring them into our “To Do List” folder (minus the “Message:”). Hold down shift and move down two spaces from the line break. Change the button from “Send” to “Add”.

That will do it for our sidebar.

Main
Step 35
Repeat steps17-19, except instead of a width of 250px make it 670px. Change the headline to “New Form”.

Step 36
Now add the form to our main section. To do this we are going to repeat steps 26 & 27. The size of the Subject part of the form is going to be 630×30px. Hold down shift and move the box down five times.

Above the box we are going to create a headline called “Subject” by duplicating the “Subject” from the sidebar.

Step 37
We are going to add another box for the “Message”. Again, repeat steps 26 & 27. This box will be 630×260px. Duplicate the “Message:” from the sidebar.

Duplicate the “Send” button from the side bar and line it up with the right side of the box.

Step 38
Repeat steps 17-19 to get the header and table. The table will be 670×336px.

Step 39
Now we are going to duplicate the “Add” button from the bottom side bar and bring it over to our “Tables” box. Change the text so it says “Apply”. Line up the button at the bottom right, then hold shift and move the button up one and to the left twice.

Step 40
Create a new folder called “Names” and we are going to add the first line of the table.

First we are going to add a check box. To do this we are going to repeat steps 26 & 27, except the box is going to be 12×12px.

Hold down shift and move the check box from the top left corner, over three spaces and down two.

Step 41
Now put any name you want. I’m going to set mine at 15pt with Verdana as the font. Hold down shift and move it over three spaces from the check box.

Take the “+” icon and the “x” icon and bring the into our “Tables” folder. Add “Edit” to the “+” icon and “Delete” to the “x” icon. Change the color of the text to #666666.

Move that whole group over three spaces from the right, holding shift.

Add the e-mail address in the middle of the name and “Add” with a bold #CC3333 Verdana.

Add a break below the name line. This is going to be the same size as the form in the “New Form” box.

Step 42
Duplicate the “Name” folder five more times, spreading them out so the last one ends one space above the tabs.

Step 43
Click on the very top layer, then click on the fourth icon from the left at the bottom of the layers palette. Open up the Photo Filter and change the filter to Sepia.

Step 44
To create the footer, we are simply going to duplicate the “Header” folder and drag everything to the trash except for the #CC3333 and white bars. Rotate that folder 180 degrees and bring it all the way down to the bottom of our document.

Add your footer information in the bottom left corner.

Step 45
To give the website a grungy look we are going to go and download a texture from Zen Textures (http://www.unsigneddesign.com/film/4.jpg). Bring the texture into our document ad size it so it fits the entire area.

Change the blend mode to Soft Light, and drop the opacity down to 50%.

Hold down control and click on the background and header for each sidebar and main section, navigation and the green header. Get the inverse selection with Control + Shift + I and delete.

Control and Click on the box around the logo and fill the mask on the texture with black. This will get rid of the texture on that box.
Finally we want to get rid of the texture in the gaps between the headers and the #CCCCCC background.

Final Result
If you followed throgh the tutorial, you should end up with something like this.

Hope you enjoy this tutorial. Please feel free to leave a comment and tell us your opinion. Would you like more Photoshop tutorials like this?

Download: PSD Source File

About the Author
Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Eventually, they have come up with The 100 Most Popular Photoshop Tutorials of 2008. These are selected from their published tutorials, with over 1 million votes and views from Photoshop users and readers. Most of the tutorials are high quality with detailed steps, they are suitable for both beginners and advanced Photoshop users.

Source: The 100 Most Popular Photoshop Tutorials of 2008

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Source: Photoshop Lady – Best Free Photoshop Tutorials around the World

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

I should have posted this great photoshop tutorial site long time ago, but I do not know which category I should put this in. Now, I am going to share this great site no matter what. PSDtuts is a blog/photoshop site made to house and showcase some of the best Photoshop tutorials around. They publish tutorials that not only produce great graphics and effects, but explain in a friendly, approachable manner.

Photoshop is a fantastically powerful program and there are a million ways to do anything, they hope that reading PSDtuts will help us learn a few tricks, techniques and tips that we might not have seen before and help us maximize their creative potential!

You can see two of the amazing photoshop tutorials as above. All tutorials are really practical and helpful. The quality of every tutorial is really high. I high recommend this site to all web designers and developers.

Requirements: No Requirements
Demo: http://psdtuts.com/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images