Photoshop Tutorials

Home About Contact

Hi Tech Interface

This tutorial will show you step by step how to create a nice looking hi-tech interface. You can use it for your website or softwares..

- Start a new document 600x200 and fill the background with #3E3F49.
- Select the rectangle shape tool and create a long horizontal bar like mine.

- Now apply the following layer styles to it:

DROP SHADOW | INNER SHADOW | GRADIENT OVERLAY | STROKE

- Now select the Rounded Rectangle Tool , and set the Radius to 60px:

- Then draw a shape about similar size to mine.

- Now go to Edit » Transform » Skew. This will give you handlers on each corner so you can resize/adjust the shape.
- Now use your cursor to pull the top right and left handle inside to give the sides a inward slant. Use your own judgement to make sure both sides slants equally.

Now apply the following layer styles to this shape. Layer » Layer Style

DROP SHADOW | INNER SHADOW | GRADIENT OVERLAY | STROKE

- Create a NEW LAYER
- Set your foreground color to WHITE,
- Now CTRL+CLICK on this layer to load the selection, then select the Brush Tool , set the brush size to 65 Soft Edge and make a straight stroke across the top edge of the selection. Start from outside the selection, then all the way through to outside the other end. (see image). Hold down shift while you do this to get a straight stroke.

- CTRL+D to deselect.
- Now move this layer (the one you just brused) up by about 3 or 4px.
- Now set the layer's opacity down to about 50%

Now choose the rounded rectangle tool, set the radius to 20px, then draw a shape just near the top edge of the shape. Make it smaller than the shape and not to go outside it.

Then set this layer's opacity down to 20%

Now lets add some details to our pipe. choose (by choose, i mean select it as the working layer in the layer's pallete, a working layer pallete is highlighted dark blue) the pipe layer (the first layer we created), then go to layer » rasterize » shape.

Now, use the rectangular marquee tool and make a 225 wide and 5px high selection on the bottom of the pipe.

Now press DELETE, this will delete selected area of the pipe, but because it has some dropshadows on it, it will give it some depth.

now, use your imagination with the above step, create different size selections, different places. Note that this will only look good if done with thin selections, and a more towards the bottom of the pipe.

Now maybe you can add some wires to the interface to make it look hi-tech. Adding a wire is pretty easy.
- Create a new layer
- create a selection using the circular marquee tool (if you know how to use the pen tool, you can make more advanced wires).
- Go to Edit » Stroke, enter 3px, and choose your wire's color.

Then apply the following Bevel and Emboss layer style to it. Now just use the eraser tool with hard edge brush and delete away the unwanted part of the wire.

 

Here is mine.
DOWNLOAD PSD FILE

 

Like this tutorial? Share it


User Comments

subrat(subu) Mar/19/2011 21:13realy i most appriciate to ur idea........ur tooooooo good thanks
MAGNET Feb/01/2011 17:32I think the tutorial is great. The whole idea is to give you the basic concept of make a hi tech design. You guys need to start looking at the postitive side of the tut. Make your own creation using the same technique. Post your results and be grateful. If you can do better than I would suggest doing a tutorial of your own.
MAGNET Feb/01/2011 17:32I think the tutorial is great. The whole idea is to give you the basic concept of make a hi tech design. You guys need to start looking at the postitive side of the tut. Make your own creation using the same technique. Post your results and be grateful. If you can do better than I would suggest doing a tutorial of your own.
0_0 Dec/08/2009 08:21thats stupid
Ganesh Mar/8/09 23:13It is very useful for creating website and such images thanks to tutrialwiz
Noobster Jan/12/09 03:26Looks really really good. and VERY easy to make... thnx for sharing buddy :)
http://www.tuties.com - hacking, sex, photoshop, f Oct/15/08 16:11http://www.tuties.com - hacking, sex, photoshop, flash and much more tutorials.
Magnetic269 Jan/24/08 19:48Very cool and useful detailed tutorial, it will help beginners like me a lot...
Pro Dec/7/07 08:16you know, its a "valient" attempt. And im not trying to troll or what not. But this is not very good at all. The design in essence. If such were your attempt, it does reminisce late 70's early 80's, humorous ideology of the "high-tech" illusions. Otherwise i dont think this would work as a modern display of the illusion. More detail, more realistic reference and overall identification is necessary.
Harel Dec/5/07 11:05Great tutorial , thank you !
Ryan Oct/14/07 04:52little problem, When i use the rectangular marquee tool to cut out the shapes it wont let me cut them out
Michael Oct/1/07 07:34Hi just so people know it looks better if you make the blue wires #0012c4, in the texture make the scale 45, satin them and make sure you make a drop shadow..... that makes it look way better and for the green wire use #00a513 with the same fx.......
There is a cock in ur ass lol im so funny 11 years Sep/28/07 08:03Nice tut! Thanks for sharing.
ace junjie Jul/31/07 06:40nice tutorial
Rudementry Jul/11/07 01:54mmmhh.... the wires look a tad lacking... I think you could've made a smidgen of a better tech border, and mayhaps an orb centered with a steel frame within that green st00f. However that thing on skewing is very nice that teaches some nice essentials to tech. I think it would just look a tad better with an abstract background and a nice orb with some better wires. Towards the end it also gets a littler harder for new photoshoppers.
sef Jul/5/07 21:34There is a green bit u fogot to erase at the bottom ^_^
www.unlimited-forums.info Jun/10/07 02:20Kul, very good and nice tut. Keep up the good work
redo May/15/07 20:47very good
Settor May/5/07 16:27Hello, very nice site! Please also visit my homepages.Thanks!
kiran Apr/5/07 23:21solet
designonline@rediffmail.com Mar/21/07 04:54v v v good
mohamed aboelneil Mar/3/07 12:49wow
Robert Langdon Feb/21/07 08:58Cool tutorial! Looks marvellous (I used blue), its just too sexy!!
Brother.alshaikh Jan/5/07 03:09lovely taches
zack Dec/22/06 05:12gooood
See 26 - 50 of 132 comments

Leave A Comment

Your Comment:
Your Name:
Your Email:
Your Website: (optional)
ecover design tutorial tutorial tutorial
FakeAZine

\