Go To Page: [ 1 ·
2 ]
This tutorial will explain to you how to create vents in your interface. These subtle effects add an great sense of depth to an interface. This tutorial is a small offshoot of our full tech layout tutorial. I suggest you check it out if you are serious about learning the techniques used to create such layouts. This tutorial is available here. Look at our site and you'll see that l've used this technique all over the place. It's quick, and the ending result looks great. Here l'm going to start with a pre-existing interface.

Page 1 of 2

Step 1.)
Start a new document in photoshop, or open an existing one. I will be working with an existing file for this example.

Step 2.)
First get out the rectangular marquee tool, and select a square about about this size. Notice it is MUCH larger than the ending result of the vent. We'll make the vents large, and scale them down when we're finished.

Step 3.)
Next get out the gradient tool, and use these settings:

Step 4.)
Now hold down the SHIFT key on your keyboard, right click your mouse, and drag it in the direction shown here:
5.jpg
Here's how it should look:

Step 5.)
Now we'll do this again from the top of the selection, to the center:
and the result:

Step 6.)
Once more from the bottom, to the center:
and the result:

Step 7.)
Now bring the opacity of this layer down to around 35%

Step 8.)
Now that we've got the first vent made, we'll resize it to the proportions that we need it. Do this by pressing CNTRL + T on your keyboard to bring up the "free transform" tool.

Related Tutorials: Glossy ButtonsIn this tutorial you will learn how to make quick and effective looking round gl ... Interface VentsThis tutorial will show you how to add a techno depth to your layouts with the u ... Plastic TechIn this tutorial l will cover the techniques used to create very good looking gr ...