BoltPress ^2.1

I reckon you’ve seen them before: fading corners. As frames, boxes, headers, etc — they serve a nice purpose. The fade gives a sense of softness yet a sense of depth.

Many a Google search failed to bring any tutorials except a resource. That resource wasn’t enough because I needed a custom-made fading corner. Messing with Photoshop, I got this and so wrote a tutorial for all of you.

We’re going to make something like this today:

Example 1: preview

Look at that. So simple, yet so attractive. This effect really gives an impression. You can even expand upon or customize it in any way you like.

1. Create a file

The obvious first thing to do is create a new file, of width 200px and height 140px with a white background (color doesn’t reeally matter actually).

2. Draw a rectangle as the guide

Now pick the Rounded Rectangle Tool, and in the top Options panel ensure that its radius is 10px.

Example 2: 10px radius

And draw a rounded rectangle over your canvas. It should have a slight margin away from the top and left edges, and go past the right and bottom boundaries, like so:

Example 3: the rectangle

3. Give it a border

We have to give it a border now. Actually, a border for another layer: the one the fading corner will actually be on. We’ll be removing the shape later unless you want to get a bit more creative.

Anyway, create a new layer, name it border, giving it an opacity of 25% or so. CTRL+click the thumbnail of the shape layer and hide that layer so you get an outline of the rounded rectangle in the border layer.

Example 4: the new layer and selection

4. Stroke it (no pun intended)

I swear, no pun intended. Really!

Anyway back to this thing. Go to Edit > Stroke…

Example 5: Edit > Stroke…

Give it a size of a single pixel, and color it black. Make sure it’s Outside.

Example 6: stroke attributes

Click OK and deselect. You’ll get something like this:

Example 7: the result of stroking

5. Now for the fading

What you were here for… see, patience indeed is a virtue

For that soft fading effect you’ll need the Rectangular Marquee Tool and a feather, but one not too itchy or ticklish!

Example 8: tickle it with a feather

Now drag it from the top edge over the part of the border you want to keep. Then invert the selection with either CTRL+SHIFT+I or choose Select > Inverse. You’ll get something like this:

Example 9: the new selection

Now you can hit DEL to dust off that portion of your border.

The final result

Aaaaand you’re done! You may remove the shape layer right now, and maybe also the background layer, then either save a PSD of your fading corner or copy it and paste it elsewhere.

Example 10: the final result

Summary

That was quite fast, wasn’t it? You now have your very own Web 2.0 fading corner and can join in the fun, laughter, joy and all in the party! If there even is a party…

Back to top