its like a void, but with ix on the end
nav shadow left nav shadow right
nav bar left nav bar right
nav bar left   nav bar right
nav bar left
recent articles
recent forum activity
transportation
Create your own website with our premium website builder solution
The largest collection of original website templates
Leading Free and Paid Web Directory Top 10 Google Rankings
Business Web Hosting. Low Cost and reliable service. Friendly 1-888-222-1495 support.
line

Interface With Styles Photoshop Tutorial

Layer styles can make your interface-making days much easier if you learn how to work them, and save your styles for use later. Lets see how to make a simple interface. Make a new layer, and create a shape using the Round Rectangle tool. Apply a Linear gradient of light gray to medium gray

photoshop interface tutorial 1

Now lets make our layer style. Choose Layer > Layer Style > bevel and Emboss. This will open up the styles menu, and place you in the Bevel and Emboss section. As you look to the left, you can see we can apply quite a few other options as well. First step is the bevel and emboss, use the options I have below.

photoshop interface tutorial 2

Once you are done we are going to move onto the next section of the style, click on the "Inner Glow" tab to the left. Use the settings below.

photoshop interface tutorial 3

Not apply an Inner shadow with the following settings.

photoshop interface tutorial 4

And finally a drop shadow.

photoshop interface tutorial 5

Click ok and your gradient should be transformed into a nice rounded interface canvas! Lets add a screen to it, make a selection like the one I have below. Choose Layer > Add Layer Mask > Hide Selection.

photoshop interface tutorial 6

You should have something similar to the image below. You can continue to edit your selection and the layer style will automatically compensate. What's nice about the layer mask is the your preserve your original gradient, and your can adjust the layer mask without ruining your background image.

photoshop interface tutorial 7

Create a new layer below your interface, and fill your selection with a nice linear gradient. I chose to color it green, but you can use whatever colors you like.

photoshop interface tutorial 8

Contract your selection by choosing Modify > Contract, and contract it by 4 pixels. Change your foreground color to white, and click on your gradient tool. Towards the top you will see various gradient options, choose "Foreground to Transparent" and apply a linear gradient to your selection. Use your circular selection tool to delete the bottom right portion of the gradient so your image looks like mine.

photoshop interface tutorial 9

Create a new layer above all of the rest. We are going to add a simple button. Use your circular selection tool and make a selection, holding shift to insure that its a perfect circle. Fill the selection with a linear gradient of light grey-medium gray, making sure that the darker gray is towards the top.

photoshop interface tutorial 10

Contract your selection by choosing Modify > Contract, and enter a value of 2. Fill your selection with a Radial Gradient. Add some text and you should have something similar to mine!

photoshop interface tutorial 11

 

website templates
nav bar right
rss valid css valid Valid XHTML 1.0 Transitional
Copyright (C) 2005-2006 Voidix.com - Sitemap | Free Wordpress Layouts | Free Wordpress Themes