Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Making a Glass Bar

Making a Glass Bar

For this tutorial, I am going to show you how to create a nice looking bar with a glass-reflection effect to it.

Step 1: Create a new 600x100 document, it doesn't matter why type of background it is as we'll be changing it. Now, select the gradient tool and choose any 3 color gradient. Double click on the gradient image to open up the gradient dialogue. Set the left color to C7D991, the middle color to 7EA409 and the right color to 9CCF02 It should look like this:

image 1

Step 2: While having the gradient tool active, drag your cursor from the top the the bar to the bottom of it.

image 2

Step 3: Create a new layer. Select the pen tool and create a start point about halfway down the bar. Now hold down the shift key and create another on the other side of the bar. This is where you can get creative with how you want the glass effect. Create points along the line you've already created, and then control-drag them around until you have a nice effect that goes moves up and down.

image 3

Step 4: To close the point, you must create an ending point at the first point you created. since you want the twisted line, as well as the area above it to be glassy, create points up from the line, but outside of your image do this until you've reached the starting point and have closed the path.

image 4

Step 5: Right click around any part of the line (with the pen tool still selected) and select make selection. The line should now turn into a selection line (dotted-moving one). Press D and then X to make white your foreground color, and then choose the white-transparent gradient. Now, depending on how much of a glass effect you want, drag the gradient tool from the top of the bar to either the bottom of the selection line, or a little bit further than it. That's pretty much it! Just press control+d to deselect, and you're finished.

Making a Glass Bar

subscribe to newsletter