adv banner
Photoshop  Home Photoshop Web Layout Clean Content Box
rss

Clean Content Box

Author: Admin More by this author


Step 1

Open up a 500(width) x 300(height) white document.

Step 2

Create a new layer by going to Layer - New - Layer, or holding and pressing Shift+Ctrl+N. Now select the Rectangular Marquee Tool, which is located on the top left of your toolbar and select a section and fill it in with a colour of your choice. In this tutorial, I used the colour (#5c859d) to fill in my selection box like the picture below.

image 1

Step 3

Now that you have your selection filled with a colour, right click on "Layer 1" and click on Blending Options. With the blending options window up, use the settings below in the pictures in the blending options.

image 2

image 3

image 4

image 5

Step 4

Once you have applied the blending options, your content box should look something like this.

image 6

Step 5

Now it's time to add some text, add whatever you want in the box, I decided to write "100+ Free Photoshop Tutorials" Once that is done, position the text the way you like and give them a bit of colour like what I did.

image 7

Step 6

It's time to add a little detail to our content box, select the pen tool and select "Paths". Now follow the little diagram below, start from point 1, and then point 2, then 3, and point 4 and 5 doesn't have to be exactly the same, they just have to be outside of the content box.

image 8

Step 7

Once you've completed the outline with the pen tool, right click on the line of the pen tool and click on "Make Selection". A window should pop, simply press OK and it should create a selection for you. Once you have your selection, create a new layer by going to Layer - New - Layer (Shift+Ctrl+N). Once you have your layer created, fill in the selection with a simple solid colour, or a gradient. The colour I chose to fill in the selection was white, once the selection is filled, move the layer down below all the text layers, and above the first layer you made from the tutorial. So now you'll have something like this, it'll basically look like you deleted a half of the content box, but don't worry, it's still there.

image 9

Step 8

Select the content box layer (layer 1) and then hold Ctrl and click on the same layer. A selection should pop up on the canvas, now goto Select - Inverse and it should inverse the selection. Once you have inversed the selection, click on Layer 2 and simply hit the delete key on your keyboard. With that done, the white that wasn't inside the content box should be deleted. Change the opacity of Layer 2 into 10-20% and play with the Blend Mode for better results and it should look like something like this.

Clean Content Box Tutorial: Final Result




Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Clean Content Box"