Smooth edges glass content box Tutorial
Interested in advertising? Well, we have been in the Tutorial field for quite some time now (4 years to be exact). We receive ±1300 unique visitors per day which totals a monthly average of 39000 unique visitors, so advertising with us will definitely get your site exposed to many tutorial lovers. Head on over to the Advertise page so you can familiar yourself with more details.
Intro:
This adobe photoshop tutorial will show you on how to make a really nice content box with smooth edges.
Download the image of the IPOD I'm using here.
Step 1:
Create new file with dimensions 400x300px.
Fill it with color: #eaeaea with the paint bucket (set foreground to #eaeaea, select paintbucket and click somewhere in the project.
Step 2:
Now we're going to create the round edges contentbox.
Select the Rounded Rectangle tool, set radius to 10px
Now make a shape similar to me. Don't worry about the width and height, because we will code this little box later on and give it the width and height we like. But ofcourse you have to check if the rounded edges are how you want them.
Step 3:
Now let's adjust this box, Right click on the shape layer we just created, and hit Rasterize layer, doubleclick "Shape 1" and name it box.
rightclick "box" hit blending options, activate color overlay, just click on the text not the tickbox, this will select coloroverlay and activates it.
Change the default red color to: #262f50
Step 4:
Now we got that done it's time to make the rounded edges more smooth which is VERY easy to do.
Ctrl+leftclick "box" layer, this will make a selection. Then hit this icon:
This adds a layer mask to the shape. The reason for making the selection before we make the layer mask is that it keeps the selected part as a whitepart (white=visible) and the part around the selection will be black (black=unvisible).
Hold the ALT key, and leftclick the layer mask, this will make the layermask visible.