|Page (1) of 2 - 03/11/05||email article||print page|
Interface Design in Adobe Photoshop, Part 3Bringing dirty metal and rounded corners together
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.
Related Keywords:adobe photoshop, interface design, metal
Source:Digital Media Online. All Rights Reserved