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…

I was messing around with Photoshop and NOVALISTIC’s Novalgen Logo a few days ago, which looks like so:

And got this within 15 minutes:

And found it so nice I decided on the same day that this would be the first candidate for NOVALISTIC 3.0′s new logo. I wanted to continue calling it Novalgen, but now that the electronic shells are gone it isn’t exactly an apt name anymore, so I’ll just call it the NOVALISTIC Logo or N Logo.

Yes, it’s official.

As mentioned in the first paragraph, the Color Schemer (yes it will be in the final design too because so many of my friends want it) will not affect the logo’s color and only a bit of the reflection’s for obvious reasons. The reflection may look funny to some by being cut off by the above image, but I don’t think it’ll be an official part of the logo.

Most people who commented on the candidate complained about the glow. Please tell me what you think about it, and please not just the glow! Be constructive as well, I will not hesitate to delete flammatory or spam comments kthxbai. And say as much as you can

About NOVALISTIC 3.0′s first layout, I will keep some of the interface graphics and effects because I love them so much, and it will remain Valid XHTML 1.0 and Valid CSS, and of course by default green <3

On a side note… happy July 4 to all Americans!