Creating a Unique Interface Template Using Photoshop
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.
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.
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.
