TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Step 1:  Create a blank 200px by 100px document and fill the background with anything you like (white may be best at first). Create a new transparent layer on top and, using the Rectangular Marquee Tool, Elliptical Marquee Tool, or rounded Rectangle Tool, draw a rectangular shape and fill it with a light blue (hex colour: #8CB1D1)

Step 2:  With the shape layer still selected in the layers palette, choose Layer > Layer Style > Gradient Overlay from the menu. This will pop up a dialog like the one in the example opposite. Apart from the blend mode and angle, there is little to change from the Photoshop Defaults.

Step 3:  Without exiting the Layer effects dialog, go to the Stroke subsection and enter in these settings.  This will add a reinforcing outline to the shape.

Step 4:  Go to the Inner Shadow subsection and enter these settings. This will add a sharp white highlight to the top of the shape.  If a deeper feel is desired, just increase the Distance parameter until satisfied.

Step 5:  Progress onto the Inner Glow subsection and duplicate these settings. This will add a slight light haze to the outside of the shape and help reinforce the pseudo-3D illusion.

Step 6:  No self-respecting PS artist would leave out the drop shadow!  So, simply go to the Drop Shadow subsection and enter the settings on the left. 

Step 7:  Now press OK to exit the layer effects dialog and admire your work!  The object created in this walkthrough is ideal for interfaces and navigation buttons but, with a little work, you can do so much more....

Variations:  Feel free to experiment with the layer effects settings, and you'll be amazed what you can create.  The gooey gel on the left, for example, took mere moments to make using default Photoshop tools. Feel free to download the .PSD and see what makes it tick.

Thank You for this tutorial, was just what I was looking for. Very well done!

Reply to this post

a nice idea, cute for my scrapbook!

Reply to this post

Thanks again for your simple, creative, and appealing effects.

Reply to this post

Thanks, man! Nice looking effect. And it's always nice to deal with different settings dialogs and panels with proper guidance to understand them better. That's where the real power of any app is, and where all the mind twisting for beginner starts.

Reply to this post

nice work, i put in my tutorials files

Reply to this post