Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Technical Interface

Technical Interface


This is not your average tech-interface...

Create a document with, on a new layer, an orb

Cut on both sides some orbs out of it

Click to enlarge
Click to enlarge

Follow my Smooth Tutorial to get the desired shape

Click to enlarge
Click to enlarge

Get the Rounded Retangle-Tool and set the radius to 60 pixels

Create long shapes like below

Click to enlarge
Click to enlarge

Create a few around the shape;

Click to enlarge
Click to enlarge

Give all these objects these blending-options;

Technical Interface

Technical Interface

Technical Interface

Technical Interface

Technical Interface

Technical Interface

It should look like this (Note: if you want different colors, just use different shades of green)

Click to enlarge
Click to enlarge

Press CTRL and select all the layers;

Go to SELECT>MODIFY>EXPAND and expand it by 5 pixels;

Fill the selection with black and place that layer after pressing CTRL+D beneath the other layers;

Click to enlarge
Click to enlarge

Give this layer these blending-options;

Technical Interface

Technical Interface

Technical Interface

Technical Interface

Click to enlarge
Click to enlarge

If you want you can also add a shine

Click to enlarge
Click to enlarge

And after adding your text, your interface is done and you can place it in your website:

Technical Interface Tutorial: Final Result
Click to enlarge


Author's URL: MickM.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Technical Interface"

Only registered users can write comment

No comments yet...