Full Interface Template Tutorial


Creating Interface Web Designs in Adobe Photoshop

Basics to shapes: Cube


First of all you will need some knowledge of brushing and photoshop. If you’re a beginner this tutorial will be useless for you.

This is an intro to brushing shapes and making them look 3D.

First of all here are some tips that could help you:

Every shape needs a light source

Every shape has shadows and highlights

Never use dodge and burn for making shapes. Dodge and burn is only good for touching up highlights/shadows

Now we will try to do the same with a box.

Start by making a new canvas and filling it with color.

Now for the box i made the shape using the Polygonal Lasso Tool. Of course the color of the boxes depend on where the light source is. Mine will be from your eyes.

Select the Brush Tool with 20% opacity and 40% flow. Start developing the shadows/highlights. The highlight will be in the front, because it is the spot where our light source hits the shape.

Delete any unneeded parts with the Polygonal Lasso Tool or the Pen Tool.

Select the Smudge Tool and start smudging our shape. Make sure you follow the lines of the shape.

Some more cleaning up. Same technique as i explained before.

Now we add the box shadow. I did this step with the Brush Tool.

This shadow depends on where our light source is. And where it hits the shape.

At this step i went to Filter-Blur-Gaussian Blur and selected 3. Hit OK and you have your own 3D box.

Now you are ready to move on to making an interface ball.

Basics to shapes: interface ball in photoshop

Ok we start by making a simple ball.

Make a new canvas i made it 300×300 pixels and fill it with a dark gray color.

Make your ball shape with the Elliptical Marquee Tool. My result:

Ok. Now before you start shading/highlighting you need to determine where your light source will be. The lightsource determines where the shadows and highlights will be.

Now select a slightly darker color and start brushing at the end of your shape.

Now select a lighter color and start making the highlights. This is my result.

Now we will smooth our ball. Select the Smudge Tool with 20% strenght and start smudging gently. Don’t over do it.

Now we putt our shape into some space. Depending on where the light source hits the ball it will give a shadow behind it. You need to have some imagination to know where this shadow will be.

Now i just added some background shading. Nothing special just to give it some more extra touches.

This is where the Dodge Tool comes in. Select an airbrush around 10px. Just make a tiny dot this is the place where the light source hits our shape.

Now you are ready to move on to making an interface template!

In this tutorial you will learn how to make an interface template. Before starting you need to have advanced knowledge of Photoshop or you will get lost.

We will learn how to make this:

Ok, we start by making a new canvas and filling it with a dark blue-cyan color. Then we select the brush tool and start brushing our shape.

Note: You can also do this with the pen tool, but i prefer brush tool, since i have a wacom.

This is my result:

Now we decrease the opacity on our brush tool to about 20% and start to mark the areas where our highlights/shadows
will be.

My result:

As you see it already has a 3d look but its very rough. Don’t worry about that yet. Now we pick the eraser or pen tool and

delete the areas we don’t want. For the inset i used polygonal lasso tool to clean it up and give it straight edges.

Now we select the smudge tool at around 10-20%. Select a round hard brush and start dragging it over the areas that need to be smoothen.

Now duplicate your interface part and go to Filter-Scetch-Chrome and play around with the settings. Change the layer Blending Mode to color dodge.

Now pick the pen tool and make the shape for the vents at the side. Then select a small airbrush and make the light highlights.

Make the same for the big inset.

Duplicate your part and move it up a bit.

Duplicate both of your parts and to go Layer-Transform-Flip horizontal and move it to the right side.

Use the same technique that i explained before to make the middle bit of your template.

I started to define the edges at this stage. With the Brush tool at around 20% opacity.

Defined the shape a bit more and cleaner up the vent.

Select the pen tool and make the selection for the orb bit. Make a vertical gradient from black-white. Duplicate the layer move it up and use this gradient:

This is my result:

I started to develop the highlights here.Duplicate the layer then go to Filter-Scetch-Chrome again and set the blending mode to color dodge.

This is how it looks when the banner is duplicated and flipped horizontally.

Select the orb, go to edit-transform-scale and make it smaller. Then play with the level around (image-adjustments-levels). Just keep trying until you are satisfied.

Now i selected the Single Row Marque Tool and selected a part from the enginees. I erased the unwated parts. Then i went to

Edit-Transform-scale and stretched the part down. To give an illusion of bars going to the vents i just erased some parts of the borders using an airbrush.

Now we will do some futuristic flames or whatever you want to call it. At this stage just experiment you can get really cool results. I selected an ordinary hard brush with some scatter options and slapped in a blue outer glow to the layer.

Now you need to cutt out the places that you don’t want. I used Polygonal Lasso Tool.

Make a new layer and select an airbrush. Start brushing lightly, don’t overdo it. Then set the layer to overlay or color dodge (whatever looks best). My result:

Now duplicate thoose layers flip them horizontaly and move them to the other side.

Okay select a 3px airbrush and make a line at 100 opacity. Go to Filter-Blur-Motion Blur and play around with the options. Again I added an outer glow to the line. Then just duplicate it and move it down.

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

Make a new layer and select the Rounded Rectangle Tool and radius 10px. Fill it with a light cyan color. You can experiment with Blending Modes again. My result:

Okay, now we make a bar for the content box. Make a selection with Rectangle Marque Tool and add a Gradient Overlay to it. After that I moved the layer down abit and changed the blending mode of it. My result:

Now i added text font verdana size 11 on black and added a drop shadow with these settings:

My result:

Just inserted some dummy text at this stage.

Now duplicate 2 of the enginees we made before and move them down. My result:

Now we are going to make some smoke come out, hehe. Select the Brush Tool and a hard brush just make some circles etc. Doesn’t really matter. Select the Eraser Tool and cutt out some parts just to make the shape more “smoke” like. Now go to Filter-Blur-Gaussian Blur and use around 10-20. My result:

Just duplicated it and flipped it horizontaly again.

Okay, now we make some vents. Read carefully!

Make a shape with the Pen Tool and fill it with a dark cyan color. Select the Eraser Tool and select an Airbrush.

Now erase the end of the shape.

Erase a tiny bit more in the middle. You can also decrease the opacity if you will like it.

Duplicated the vent 2 times and moved it down. My result:

Now i selected the Brush Tool and an airbrush again. Just filled the inside abit more so that the text will stand out. My result:

Slaped in some copyrighting text. Font is verdana size 11 on bold again.

Now we will make the whole template stand out. Select the Brush Tool with a dark cyan color and an airbrush and brush along the outside of the template. If you get the template brushes erase the areas with the pen tool. My result:

Congratulations the template is DONE! Hope you learned something.

You now may want to move on to: Creating a Unique Splash Page Using Photoshop
and Our Advanced Interface Website Template Tutorial

Recommended for you:

4 thoughts on “Full Interface Template Tutorial”

  1. Wow…I’ve been doing photoshop for about 2 years and started web layouts seriously a couple of months ago.Your knowledge of lighting is incredible..I learnt quite a lot from this and i’m going to read the rest of your tutorials now! My site is still in development and i’m almost done with the intro / splash page.
    Thanks for the tutorial i learned a lot !
    – Nick

  2. oh..i really thanx to you coz this things helps me so much,i ‘ve project to do and it is something like this,to make an interface of a website,so you have help me so much by your guidance..now i know something to start all over my work…

Leave a Reply

Your email address will not be published. Required fields are marked *