Posted in Effects, Featured, Photoshop, Tutorials

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Quick Tip: How to create clean, professional gloss rays in Photoshop

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:
a pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop
and you did this:
b pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop
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!

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.

1 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

2 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

3 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

4 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

5 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

6 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

7 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

8 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

STEP 9

Go to Filter > Sharpen > Sharpen. Now it looks alot cleaner and the edge has a small glow.
9 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

9.1 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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”.

10 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

11 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.

12 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

12.1 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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.
13 pixel77 gloss rays tutorial photoshop Quick Tip: How to create clean, professional gloss rays in Photoshop

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!

Hit the Printscreen button and paste in the screenshot. Hit CTRL+T, rotate it a bit and hit Enter. See how it got a bit blurry? This will happen to the gloss too if you change its angle.


Pixel 77

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Related posts:

  1. How to Create a Clean Navigation Menu in Photoshop
  2. Photoshop: Create a Professional Web 2.0 Layout
  3. How to create a concept from an idea to final design in Photoshop
  4. Create a Vintage Movie Intro Wallpaper in Photoshop
  5. Create a Beautiful Animated Effect in Photoshop

Comments are closed.