Stylish content box with Photoshop 

I made this small tutorial for a new content box as part of a bigger web project, and I want to share the tutorial with you so you can make one of your own.

So here is how to make a custom stylish web content box.

First start by making a big rounded rectangle on the stage as I did.

Then go to the layers panel, right click the shape layer and choose rasterize layer, and double click the shape layer to get into the layers styles panel and give it settings as below.

Now here is a bit tricky part, but try to follow anyway.

Hold down ctrl and click the shape layer to load the selection, then choose the polygonal lasso tool and set the selection mode to intersect with selection.

Now click around the left part of the shape selection as I did below to make a selection for the content box title.

Make a new layer and fill the selection with a random color (we will change it later).

Now in the layers panel double click the new layer to get to the layers styles panel and give it settings as below.

Now type in some text and rotate it 90 degrees and put in on top of the green bar.

The last thing we will do is to add a bit of reflection to make the green bar look a bit like glass.

So hold down ctrl and click the layer containing the green bar to load the selection then with the elliptical selection tool, make sure to use intersect with selection and drag half across the selection as shown below.

Give the selection a gradient from white to transparent horizontal.

And we are done. you can now put some text in the content box.