Interfaces and Basic Shapes in 3D

This work is licensed under a Creative Commons License.

Interfaces and Basic Shapes in 3D

by Colin Smith
PhotoshopCAFE home

It seems that everyone wants to know how to build high-Tech interfaces these days. We will start out by creating your basic shape and making it 3D and shiny metal. Of course you can make yours any shape. Lets get started.

Lighting effects

Selections

Shapes

Alpha Channels

Curves

Difficulty 7/10

1)

Start with a blank transparent layer.

Here we have begun to draw our basic shape using the marquee tools.

To add to the selection hold the shift key. To subtract, hold down the Ctrl/Cmd key.

2)

Fill the selection with black.

We still want to play around with the shape, so keep drawing selections and filling with black, or deleting untill you get a shape you like.

3)

Use the polygon lasso tool, its really cool, just click, then click again, it will draw a straight line between the 2 points. You will have to click back to the beginning point, you will see a little circle when the pointer is over the start, then click to complete the shape.

4)

Cut out some circles and stuff, we will add buttons and gizmos here later.

Everything should still be on one layer.

Load the selection by holding Ctrl/Cmd and clicking on the thumbnail picture in the layers pallete.

5)

Switch to the Channels pallete.

Click on the "save selection to a channel" button. The new channel is called Alpha channel.

6)

Press Ctrl/Cmd+D to turn off the selection. (You cannot affect the pixels outside of a selection)

Filter > Blu r> Gaussian blur. The larger the blur, the more rounded the corners will be.

7)

Open the Adjust>Levels control. Move the sliders closer together to tighten up the edges a bit. Click ok.

8)

Go back to the layers pallete, click on our layer and select the object again (Ctrl/Cmd click) This time fill with gray.

Filter > Rende r> Lighting effects. Load alpha 1, add a blue colored ambient light.
See the channels tutorial if you are stuck.

Click ok.

9)

This is roughly what you should have now. Notice that there are little extra corners? We will get rid of the and clean it up a bit.

10)

Switch to the channels pallete and ctrl/cmd click on the Channel thumbnail. This will load the channel selection.

11)

Ctrl/Cmd+Shift+I to invert the selection.

Press delete and you now have a cleaned up image. But it still doesn't look like metal.

12)

Open the curves box. Adjust > Curves.

Make a similar shape and watch your image suddenly become shiny metal!
Download this curve

Thats it for this week.

Next week we will begin to add some buttons to our interface.

13)

Here is another example showing the result of this same technique. This time I used a smaller ambient light.

Top