This is the finished result:

Ok, here we go. Make a new canvas around 900×900 pixels. Fill it with this color:

Now select the Brush Tool with opacity around 60% and flow around 40. Start laying down the basic shape of your part.

My result:

Don’t worry about how its not smooth at this stage yet. Its just to get an idea how your result will look like.

At this stage i cleaned up the outer shape of our interface. You can do this with the Eraser Tool (if you have a wacom it helps alot)

or you can do it with the Pen Tool, but make sure you select 0 feather and tick anti alias to give it smooth edges.

As you see the outer edges are cleaned up now.

Now select the Smudge Tool with a round hardbrush
and strenght around 20%. Start smudging the interface.

Try not to smudge on the edges, becouse it will give them a blurry look. My result:

At this stage i cleaned up the inset. I just used Polygonal Lasso Tool and gave it some depth with a black brush.

Duplicate the inset bit and move it above and to the right. Decrease the opacity of the layer to suit your taste.

My result:

Now erase the parts that go out of the first inset that we created. You do this by selecting the first inset (select-load selection)

then select the second inset layer and go to select-inverse then just hit delete.

My result:

I selected the Dodge Tool with 3px airbrush. Started making strokes at the corners of our inset. Make sure your strokes are even, if not

you can also smudge them abit. Just experiment.

Made a 3px airbrush highlight of our gray interface part. You have to make sure it flows with the interface part your working on.

I duplicated all the layer we had now and moved them right above the background layer. Then i used the Move Tool to position

them under the top interface part.

Ok now i selected both of the gray bits layers and then go to image-adjustments-brightness and contrast.

Play with the settings. It varies alot, just experiment till you come out with something good.

Now duplicate the whole inset of the top interface part. And move with the Move Tool like shown below:

Do the same step all over.

Now select the Pen tool and add an anchor point to make a slight curve to your selection. Right click-Make Selection.

This is a screenshot on how i did it:

This is my result:

Now duplicate the inset once again and move it just a little above the rest.

Now decrease the opacity of the layer to around 20% so that it gives a look like its ingraved.. My result:

Now duplicate all the parts we have till now and to go Edit-Transform-Flip horizontal. Then use the Move Tool to position the part correctly.

Select the Brush Tool with opacitiy 60% and flow 40% this is when i started laying down the basic content shape.

I cut off a part with the Polygonal Lasso Tool. Just to make the shape flow better. Don’t worry about the parts not being simetrical yet.

Now make a selection with the Rounder Marque Tool with radious around 30px.

Now select the Polygonal Lasso Tool and make sure you click the square like i shown below. It will cutt off a part of the selection.

This is what you should’ve had if you made everything good.

Filled the selection with a very very dark gray color.

Used Polygonal Lasso Tool to make a feel like its ingraved into the template. Erase the bits you don’t need with the Pen Tool.

Okay, you can also do this step with the burn tool if its better for you but i like the brush tool better. Select a dark gray color and brush around the edges

of the interface like so.

Select the Dodge Tool again with a 3px airbrush. Brush around the corners of the ingraved bit. Like so:

Duplicate the highlights to the other side. My result:

Adjusted the Brightness and Contrast and made the ingraved bit slightly darker.

Cleaned the shape up with the Polygonal Lasso Tool becouse the highlights looked really messy.

My result:

Select the Rounded Marque Tool with radius around 30 px and fill it with any color (doesn’t matter, becouse we will give it a gradient).

Now go to Layer-Layer Style-Gradient overlay. And use a gradient like this.

Hit OK.

Duplicate the layer. Go to Select-Load Selection. Then go to Select-Modify-Contract and select around 5 pixels.

Then go to Select-Inverse and hit delete.

Go to Gradient Overlay again and use a gradient like this:

Then select Inner Glow and use these options:

This is my result after all the above effects that we did.

Now insert some text to the banner area and go to Gradient Overlay again. This time use something like this:

This is how my text looks. I tried to gave it a kinda chrome feel.

I changed the font size. You do this by simply clicking on the text and choosing a bigger size.

Then we
make a reflection with a blue color and cutt off the unneded parts. I used an ordinary hard brush.

Use the same technique on the other side and on the bottom. You can also try and experiment with diffirent blending modes of the template.

I added a blue outer glow to the banner area. Just experiment with the options and see what you can come up with. Its nothing hard.

Started making the navigation and used the Rounded Marque Tool to give it a slightly rounded feel.

Now go to Layer-Layer Style-Gradient Overlay and use these settings on every button.

Or you can make 1 button and then just duplicate it, it will also duplicate the effects of the layer.

This is my result after the gradient overlay:

Inserted some text. The font is visitor it works really good with small sizes. You can get it at www.dafont.com

I cutt out the parts of the navigation that were looking out of the ingraved part. You can make the selection with the Pen Tool

or you can just use Eraser Tool like i said before.

Started laying down the basic shape of the “tube like thingy”. Use Brush Tool with around 40 opacity and 40 flow.

Select the smudge tool at around 20% strenght and start smudging your shape. I also gave it more contrast. Go to

Image-Adjustments-Brightness and Contrast and select aronud 20 contrast.

Cleaned up the shape using the Pen Tool. Make sure you tick anti-alias or you will have choppy edges.

Now make a black circle with the Pen Tool. This really gives it a touched up feel plus more contrast to the template.

Cleaned up the shape abit more and gave it a bigger curve.

Go to Image-Adjustments-Brightness and Contrast and increase the brightness just abit to make it fit the rest of the template.

Now we are going to make a big vent. Start by making a shape with the Polygonal Lasso Tool like so:

Select the Eraser Tool with a big airbrush. Start erasing parts around the edge of the shape.

This may take some tries to get it right.

My result:

Now duplicate that layer 4 times and move each of them down abit. This is my result, pretty nice huh?

At this step i duplicated the tube thingy and went to Edit-Transform-Flip Horizontal and moved it to the other side.

I noticed that the blue banner didnt quite fit the rest of the shape. So I selected the layer and went to Edit-Transform-Distort and

moved the corners abit more to each side so that it flows better.

I selected the vent layer and deleted it so taht it leaves a tiny stripe and gives it a better look in my opinion.

Now duplicate the tube thingies and move them like so. If they cover the part where the navigatino is, use the Pen Tool to cutt that part off.

At this stage i meant one more vent. Its the same technique so i won’t explain this step again.

Select the Dodge Tool with a 40px airbrush and lightly brush under the banner.

I also cleaned up the shape for the content with the Pen Tool.

I duplicated the 4 parts as you can see then go to Edit-Transform-Flip vertical and use the Move Tool to move them to the bottom of the template.

Select the Rounded Marque Tool and radius around 30px and make a selection for the content box.

Fill it with a dark gray color. My result:

Now make sure your selection is still opened, if not go to Select-Load Selection. Then go to Select-Modify-Contract and select 3pixels.

Then go to Image-Adjustments-Levels and make make the content box darker.

Now select the Single Row Marque Tool and make a selection like this. You have to select the Black inset layer that we made at the beginning of the tutorial.

Now go to Edit-Copy. Make a new layer and go to Edit-Paste. Then go to Edit-Transform-Scale and drag it down this should give you something

like below.

Now clean the shape up using the Pen Tool. This is my result:

Now do the same on the other side so it doesn’t touch the content box.

My result:

Now duplicate the layer and go to Filter-Pixelate-Fragment. Play around with the layer Blending Modes.

Now select the whole part and go to Select-Load Selection. Next go to Select-Modify-Expand and select 3 pixels. Now select the layer that we just roughly

brushed out before (the big gray part) and go to Image-Adjustments-Levels and darken it abit. My result:

Then go to Select-Modify-Contrast and select 3px. Now select the Burn Tool and a big airbrush and burn around the edges of

the content box.

Now select the big gray layer again. Make sure you dont have any selections opened. Select the Dodge Tool with a 40px airbrush

and dodge around some parts like this:

Cleaned up some shadows here and there with the Pen Tool to give it much more flow.

Select the Brush Tool and a blue color. With a 10px airbrush just click once to make a glowing dot. Duplicate it and use the Move Tool to position it.

Duplicated the bits that we created to make things simetrical.

Now select the Pen Tool and make a shape like this so that it flows with the vent that we created.

I used the burn and dodge tool to make a bar that is shown below. Just use a round airbrush and see what you can come up with.

Insert some text. I used verdana size 11 on bold.

Now we are going to start working on our footer.

Make a shape with the Pen Tool and duplicate it on the other side.

This is the shape i will go with:

Make a new layer and select the Burn Tool. now with a hard brush at around 20 opacity and 60 flow try to make something like below.

This will really give it that 3D kick that we are going for.

Now select the Dodge Tool with a 2px airbrush. Make a highlight at the edge of the ingraved bit.

My result:

Duplicate the part that we have and move it to the other side.

Select the brush tool opacity 40% and flow 40% and start developing the shadows and highlights. Don’t worry about it being clean just yet.

Now bring out the Smudge Tool at around 20% strenght. Start smothing the shadows.

I decreased the opacity of the layer and cleaned out the unnecesary parts with the Pen Tool.

Duplicate the layer and go to Edit-Transform-Flip Horizontal and move it to the other side. This is my result:

Make 2 shapes like below. I used Pen Tool and to fade the start of the part in i used Eraser Tool with a 40px airbrush.

Continue making shapes to give it an ingraved feel. My result:

Make 2 highlights with the Dodge Tool and a 2px airbrush.

Started developing the shapes abit more. Just used the Brush Tool at 60% opacity and 40% flow

Cleaned up the shape and i used the Dodge Tool to highlight the edges. My image so far:

Now make 2 tiny highlights like we made before. Select the Brush Tool and just click. Then duplicate the layer and use the Move Tool to move it to the

other side.

Select the Brush Tool and a 20px airbrush. I am gonna make some selections for the footer that we made. You can also play with the

Blending Mode of the layer at this stage, but i didn’t.

Use the Brush Tool and an airbrush to give the template some more eye-candy. This step is basicly optional, but i really like to

give it some extra feeling. You could also make some smoke or lasers or such. Just play around and you can come up with something

really cool.

Duplicate the layer and use the Move Tool to position it. Then go to Edit-Transform-Flip Horizontal and move it to the other side of

the template.

Insert some text. I putt in “PS” becouse the site name is PhotoshopSpot.com. Just give it a blue outer glow and hit ok.

My result:

Now select the banner text layer and duplicate it. Go to Filter-Blur-Motion Blur and select around 100. Make sure your angle is horizontal.

Set the layer to overlay or color dodge (it depends on your taste).

Putt in some dummy text. I used verdana size 11 on bold. You can copy the dummy text from lipsum .

Now make a new layer and select a slightly darker gray. Just fill a part in the content box like i did.

Now we are going to make the whole template ingraved in. Select the Brush Tool with a big airbrush and brush around the corners with a darker

color then in the background.

My result:

Clean the drop shadow up with the Pen Tool.

My result:

I decided it didn’t look quite right. So i gave the drop shadow all around the template. It looks alot better then before.

Duplicate the drop shadow and go to Edit-Transform-Flip Horizontal and use the Move Tool to position it correclty.

This is the last 100 step!

Duplicate all of the layer and go to Layer-Merge Layers. Now go to Filter-Scetch-Chrome and play with the settings. It depends on

which color and how much contrast your template has. Set the layer to soft light and use the Eraser Tool to remove the unneded parts.

If you have finished the tutorial i have to congratulate you becouse not many people have the patience to follow 100 images.

Hope you learned something.

Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact!

1. Document & Background

Obviously the first thing we’ll want to do is create a new document in Photoshop! I used a standard document size of 1000 x 900 pixels, but we won’t be using the entire size of the document. Now we want to make a nice, suitable background for the design.

Start with the background by filling the canvas with a dark-ish grey-blue color (or any color you like). For this I used #4c535b. Next, we need to find a simple pattern we can blend into the background. For this you can find some nice patterns over at SquidFingers. Fill a new layer with your chosen pattern then erase away the pattern except for one corner:

Next, lower the opacity for your pattern layer to around 10-20% and change the layer mode if you want something more unique. For the layer mode I usd Luminosity.

That’s a pretty neat effect right there! That’s all we’ll be doing for the background, unless you have a good idea for something more.

2. Navigation Bar

For the navigation area, find and get out the Rounded Rectangle Tool and set the settings for the tool like I’ve shown here:

OK, after you’ve got the settings, draw a rounded rectangle onto the canvas (after you’ve made a new layer). Now cut the bottom part of your rounded rectangle off, so it has a flat surface on the bottom.

Please note: it doesn’t matter what color you used for the navigation bar shape. Next, apply the following layer modes to your newly-made layer:

• Inner Shadow
• Gradient Overlay

And now we have a result like this:

I finished off with the navigation bar effects by adding a slight hightlight to the top of the bar (use one pixel) and also a shine kind of thing at the bottom of the bar.

If you’re unable to add these, don’t worry about them, they’re not important. Lastly for the navigation bar we need to add text! Start by getting the text tool and writing out your navigation buttons using the font you like.

You’ll want to make plenty of space between each of your links, so that there’s room for a nice divider. You may also want to apply a Drop Shadow to the text to make it stand out a little bit more.

To finish this part of the tutorial off we’ll add some simple dividers inbetween our links. Start by getting out the Pencil Tool and making a new layer. Using the smallest brush available (1 px) brush a few dots onto the canvas, like I’ve done here:

Duplicate your divider and move it along so it’s inbetween the other links. Do this as many times as it takes then merge them all together. To finish off, apply a simple Drop Shadow to the now-single dividers layer.

3. Base Area

Now this is a really easy part. All you have to do is create another rounded rectangle shape underneath your navigation layers. What you have to do though is hide the top part of your ‘base’ shape underneath the navigation bar, otherwise delete the top part. Like this:

Very easy! Finish off by adding your copyright notice underneath.

The perfect font for this is ‘Arial’ and it comes with Windows. Use a size of 11 pt, all caps.

4. Header / Banner

Find a nice stock photo from a website such as iStockPhoto for the banner image.

Copy your stock photo onto the canvas and crop it to the width of your ‘base’ layer. After you’ve resized it and cropped it (something around 130 pixels in height will do) you might want to make some adjustments to the picture, possibly to make it stand out better.

To finish off with the header, add some text/a logo that you may want to come up with! I just used some basic text for the business name and slogan beneath it:

To make your text stand out better on a photo better you may want to add an outer glow using a dark color from the background. The two fonts that you can see in the above image are NeoSans, and Myriad Pro.

5. Content Area

Alright, we need to add some text and maybe some interesting images inside of the content area, this is to explain ‘what we do’ and some other stuff. Start by making a heading with the text tool.

Alright, add some dummy text below the heading, then a stock photo if you think it will look good!

Obviously, since this is just a dummy text, I’ve added in some random text *cough*

6. Client Login

Every web host website should have a client login area, if not a link that leads to the client login area. Start by getting the Rounded Rectangle Tool out and make a shape onto your canvas, around 220 x 105 pixels is a good size.

The color isn’t particularly important, but use a dark grey for it. Change the fill for this layer to 10%, then apply the following layer styles:

• Gradient Overlay
• Stroke

Add the necesary text and all that, including some boxes that you’re meant to put the text in, and this is what I’ve got:

Obviously it would take me a while to explain every detail about adding all of that stuff, so please download the PSD at the end of the tutorial and you can see all of the layers!

7. Special Deal Button

Just for a nice touch we’ll add in a button to the sidebar that will state what sort of hosting deals are going on. Start by making another rounded rectangle, or duplicate the one you used previously.

As you might observe, the shape also has a dark gradient inside of it, the colors used were #3f3f3f and #292929. Now add in some text for your banner.

As you can see, the font used in the above image is Myriad Pro, various weights & sizes. Mess around with some different fonts and sizes and you’ll get something nice.

I thought it was still a little boring, so I added in a few extras:

1. Add in a dark star shape, lower the opacity to blend it into the main shape
2. Add a nice highlight to the top of the rectangle shape
3. Finish off by adding another dark gradient to the bottom of the shape

8. Testimonials

What site would be complete without testimonials? Let’s start by making another rounded rectangle in the sidebar area, use the color #c3c3c3 for making this shape.

After you’ve made the shape, copy the layer style from the client login box and paste it onto your new box.

Now, using Arial as your primary font, add in some random filler text, and a name underneath, like so:

Now duplicate all of your testimonial layers and move them down a little bit so you have two.

Complete

Well, we’re done for this tutorial! I hope you enjoyed it, if you have any questions please feel free to leave a comment below, but be sure you’ve checked out the PSD file before you ask a question!