Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glass Content Box

Glass Content Box


Create a glass content box for your website.

01. In the end, the glass content box will be transparent so you can have images beneath show through it.

02. Create a rectangle.

03. Open up the layer styles menu and use the following 'Drop Shadow' settings: Opacity 80%, Distance 2px, Size 7px. (Note: The layer style descriptions only highlight changes from the default values.)

04. Apply 'Inner Glow'. Set the color to white (#FFFFFF).

05. Use the following settings for Bevel and Emboss: Size 8px, Shadow Mode: Overlay White, Opacity 50%.

06. Now set the layer 'Fill' to 0%. This layer style can be applied to other shapes as well, not just this rectangle.

Glass Content Box Tutorial: Final Result



Author's URL: Solinari.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Glass Content Box"

Only registered users can write comment

Reader's comments