Quick Tip: How to create clean, professional gloss rays

I am sure you have seen plenty of times these gradient-looking glosses on websites, banners and all sorts of buttons. They are there, they make objects shiny and don’t stand out too much.
Then you and lied to yourself  “Ha! I can do this myself in a snap, it’s easy as pie”. Then, you used a large, soft brush, you painted a large white spot, erased half of it and rotated it 45 degrees.In reality, you saw this:

and you did this:

This is partially ok, but it’s not complete.
It’s not terrible, but it’s far from being similar to your reference. Let’s pick it up from here and polish it to perfection![private]

STEP 1

Let’s start with a document of a decent web image size, let’s say, 1000 x 1000 px @ 72 dpi in RGB color mode.
Go to File > New.. and input the values shown above. Hit OK.

STEP 2

Grab the Paint Bucket Tool (G), select a saturated, blue color (#0099d2) and fill the background color with it.
Don’t know what to do with the color code? Double-click your foreground color and input the 6-digit code in the box with a “#” tag and hit OK.

STEP 3

Go to Layer > New > Layer (CTRL+SHIFT+N). Now grab the Polygonal Lasso Tool (L) and make sure the “Feather” setting is 0 px.

STEP 4

Click   on the 3 points shown below to load a selection. One of the edges is very important, so choose your angle carefully.

STEP 5

Grab the Brush Tool (B), grab a soft brush and increase its size to about 700 px. Double-click the background color and move the picker to a really light blue color.

STEP 6

Paint in a spot like below, but make sure you position the brush like me, to use only the edge. Hit CTRL+D to deselect.
The brush has a really intense center spot and we don’t want a strong gloss in a background.

STEP 7

Go to Filter > Noise > Add Noise and use a 1% Gaussian, Monochromatic setting. Hit OK.
The large brushes create some subtle rings that become more visible if you change the Opacity. The noise breaks their edges, making them look seamless and smooth.

STEP 8

In the Layers palette, set its Blending mode to “Overlay”.
Since we only work with lighting, there are only a few blending modes you use.

STEP 9

Go to Filter > Sharpen > Sharpen. Now it looks alot cleaner and the edge has a small glow.

STEP 10

Grab the Elliptical Marquee Tool (M), create a new layer, make a selection with it and paint in a yellow spot, with the brush positioned on the edge, like in STEP 6. Hit CTRL+SHIFT+[, then CTRL+] and hit CTRL+D  to deselect. Run the Noise and Sharpen filters, then change the Blending mode to “Vivid Light”.

STEP 11

Let’s crop the image! No, do not use the Crop Tool. It will compress the pixels and will ruin everything we polished. Here’s how you do it!
Create a new document with the desired size, but make sure the “Background” settings is “white”. Select all (CTRL+A), copy it (CTRL+C) and paste it into our document. Set its Fill to 0% and add a “Stroke” setting in the Blending properties.

STEP 12

Place the frame in the area you want cropped and rearrange the gloss elements if needed. CTRL+click its thumbnail, then go to Image > Crop. Hit CTRL+D to deselect.

STEP 13

Go to Select > All (CTRL+A), hit CTRL+SHIFT+C (copy merged) and paste it. In the Layers palette (F7), click the “fx” button  and select “Stroke”. Use the settings below.

If you want to create more of these, but in different directions, do NOT duplicate the original and rotate it. Build a new one, on a different layer. Here’s why!