BRINGING DIRTY METAL AND ROUNDED CORNERS TOGETHER
So you've got your dirty metal plate, and you've got the rounded corners technique down. What do you do next? Here's how to start building your interface.

Begin with a background that will contrast with the brownish color of the dirty plates you're going to make.

Here, I've chosen a bluish/black background, darker than my plates to provide contrast, and added lines to make it more interesting.

Remember, this is just a background. Don't go overboard with details.

Then, using the Dirty Grimy Metal technique, you'll need a master texture-one from which you can pull all your plate shapes.

Now, it's time to plan your primary plate, which will house most of your elements.

For most interfaces, you'll need areas for buttons or sets of buttons. You'll need a large area for a computer screen. You'll need cutout areas (negative space) for wires to show through. You'll need an area for a speaker grill.

Here's my channel, already rounded with our rounded corner technique, with lots of room for the computer screen, buttons, etc. Good use of negative space (black area) as well.

Next, I need a plate that fits under the above primary plate.

This is just a partial plate and will give the interface depth by showing through and around key areas (single layer interfaces can be boring, so 2 or 3 plates is a good number to go with).

And finally, here's a small subplate that fits on top of the 2nd plate above.

Remember, the purpose of having these rounded corner channels is merely to create selections so that we can copy from our master dirty grimy texture at the beginning of this tutorial.

 

So, in the Channels Palette, COMMAND-CLICK (PC: CONTROL-CLICK) the primary plate channel.

This will give you a selection.

Switch back to the Layers Palette, and with the selection on, copy from the master texture, then paste.

This will create a new layer with the primary plate shape.

Hide the master texture so that you see something like what's at left.

Then bevel the primary plate, and give it a drop shadow. This adds some nice depth to the plate.

Don't go overboard with the bevel. Thick bevels appear amateurish.

Also, avoid using white as a highlight color for the bevel. Either choose overlay mode on the highlight, or change the white to some lighter version of the overall color of your plate.

Here's our secondary plate, beveled and shadowed, and made a bit darker.

Here's our 3rd plate, beveled and shadowed.

Here's all 3 of our plates.

Note how the middle plate and bottom plate are darker than the primary plate to provide contrast and make the primary plate stand out. The other two are just there as atmosphere.

All that is left to do is to populate the plates with elements, which we'll learn in future tutorials.

In the meantime, here's one possibility of how it might look when it's finished.

And here's an alternate set of plates with some interesting negative space going on.

The possibilities are endless as far as the shape of the 3 plates goes.

Here is the channel used to make the primary plate of the alternate...
Here is the channel used to make the secondary plate...
And channel number 3 for the 3rd plate.

[COMMENTS? NEED HELP? JOIN OUR PHOTOSHOP FORUM]

[VIEW] Other Tutorials