Tutorial: Page (1) of 2 - 03/11/05 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Interface Design in Adobe Photoshop, Part 3

Bringing dirty metal and rounded corners together By John Selvia
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. (See Part 2 in this tutorial by clicking here.)

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 (Mac) or Control-click (Windows) 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 below.

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.

Page: 1 2 Next Page

Related Keywords:adobe photoshop, interface design, metal


Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved