- Media Overview
- Templates
- Free Templates
- Quality Templates
- Premium Templates
- Tutorials
- Photoshop
- HTML/XHTML
- CSS
- All-in-Ones
- Other
Photoshop Tutorials » FadingContentBox Tutorial
Step 1 - Starting Out
Make a new document, any size you want. I'm using 500x400 for this time. Create a new layer.
Step 2 - Rounded Rectangle
Select the "Rounded Rectangle Tool", and create a shape like the one below (use a radius of 20px.)
Step 3 - Aligning to Center
With the rectangle layer selected, hold down ctrl and click once on the background layer. Now align the vertical centers and horizontal centers with the "Move Tool", and hitting the align vertical center and horizontal center buttons at the top.
Step 4 - Blending Options
Right click on the rectangle layer, and enter blending options. Follow the blending options in the animation above to achieve the effect we want.
Step 5 - Layer Mask
Create a new layer, and then merge it with the rectangle layer. This will remove it's blending options allowing us to alter it with other editing techniques. For the layer mask, you have to select the rectangle layer, and then go to Layer»Layer Mask»Reveal All.
Now with that selected, use the gradient tool to make a gradient like in the image above. This should make the image look like the one below.
Step 6 - Title Text
Select a font you like, and add the title to to the top area of the content box. Align it wherever you want, I'll put it to the left in my example.
Step 7 - Content/Filler Text
Add some filler text from lipsum.org, and welcome in your new content box.
End! Job well done! :)
