Glossy & Shiny (Highlight) Effects

Effects | on June 28th, 2006 with 31 Comments
Advertisement

In this simple Photoshop tutorial we’ll be looking at a simple technique that’s quite popular at the moment. The technique is using gradients/brushes to make soft highlights/glows on things, it’s particularly popular with some styles of forum skins. You can see the end result of this tutorial below.

Glossy & Shiny Effects (Photoshop Tutorial)

1.

Start by making a new document in Photoshop – something around 800 x 600 pixels will be good for practicing. Use the default resolution (72) and default color settings (RGB).

Fill the background with a (radial) gradient of your choice. I had a hard time deciding between a dark grey gradient and a relatively dark orange/red gradient. I went with the grey gradient for this.

Radial Gradient + Color Hex Codes

2.

Start by finding and getting out the Pen Tool (P). Set the options to what I’ve shown in the below screenshot:

Pen Tool Screenshot + Settings

Now I’m hoping you know how to use the pen tool! All you have to do here is select the pen tool, click on the canvas, click again, drag the mouse around to make a curved path, connect the dots.

You want to come up with a smooth & curvy shape like this one:

Pen Tool Path + Screenshot

3.

Making the path was the main part, now for the easy part. Once your path is complete, right-click the path with the pen tool still active, then go to make selection. After you’ve made the selection out of your path, create a new layer then get the brush tool (B) out.

Using a large, soft brush, brush inside of your selection a little bit, very lightly.

Large Soft Brushing

As you can see, I basically used a moderate grey from the background gradient, it’s fine doing this. Change the layer mode of your brushing layer to something suitable – something that looks the best, so you may need to go through all of the layer modes! I ending up using Color Dodge.

Color Dodge Layer Mode

See, much better!

4.

OK, so basically we should repeat step 2 and 3, but make the path smaller inside of our first one, then we use a layer mode that multiplies the brushing onto the background.

Darker Brushing Visible

Here are the steps that I used to achieve what’s shown below:

  1. Make a new path, inside of your first lot of brushing
  2. Make your path into a selection and softly brush inside of it (same color as before)
  3. Change the layer mode for your brushing layer mode to something like Multiply or Linear Burn

That’s all. Now it’s time to mess with different paths, shapes, brushes, and all that ;)

Subscribe

You may also want to consider subscribing to our site, to keep up-to-date!


Advertisement

  • MaZa

    I´m liking this one, simple but stylish.

  • http://elitegfx.com/ EliteGFX.com

    Nice simple tutorial for begginers ;) good job :D

  • http://designercraze.com/wordpress KewL

    good tutorial, ive been wondering how crete that effect.

  • Nightmare

    Cool man…it’s nice & stylish

  • rugged lion

    cool thanks!

  • http://www.firesoulsdomain.com fsd

    nice tutorial
    short and simple

  • Jeb

    Can you do that on Photoshop Elements 4?

  • http://www.electroarab.com amr darwish

    good

  • http://www.eliburford.com/ admin

    Jeb: Should be able to.

  • aparecium

    this is going to sound like a dumb question, but how do you get it to curve like that? when I try freeform, it comes out looking really bad :-/

  • http://www.eliburford.com/ admin

    aparecium:
    Click once outside of the document in the window (This will start the path)
    Click in the middle somewhere, while holding the click down move your mouse downwards and toward the right or something similar, that will make it curved.
    Make sure you’ve got the right settings for the pen tool etc.

  • bhoobala

    NICE GOOD

  • yenis aka chato

    This is a good tutorial for begginers maine for i feel this keep postin up more tutorials this is interesting stuff…its all good ima keep coming back to do more tutorials.. ANYONE KONWS HOW TO POST UP BANNERS? LET ME KNOW THANK U =D

  • http://ivan4o-pras4o.hit.bg SkAkAuEcA

    So,i want banner in my site ;)

  • http://www.thelordofthedirs.com/detail.php?id=25 fuser

    Great template…i will use in a design ;)

    Thanks, fuser

  • kmsl

    cool, nice lookin

  • WelshAngel (student doing photoshop)

    I was reccomended to use this site from my teacher. That is a cool banner, i tried it and i failed, so jealous.

  • http://www.shinegame.com shinegame.com

    Cool, simple and useful for begginers.

  • Noobie

    How do you get the transparent gradient like that? when i try it is a solid white selection!!

  • Joseph

    Hi, Can some one explaine to me how can I do that step by step, because I can get it, my email is jamarchi@yahoo.com

    Thank you

  • http://kristjan.eprostor.net Kristjan

    Looks nice :P Its very similar to default mac background

  • ganesh

    thank you

  • razi

    i couldn’t design because lack of description about pen:9=(

  • http://www.ds-sof2.net Jacky

    I have no idea how to create curvy shape with pen, can some one explains that to me please :$

  • goldbraun

    thank you for sharing this, your site is full of inspiration

  • John K

    Cool!
    I’m wondering if I can do some great smoke effects with this technique…

  • messo f

    The banner is cool

  • mangesh chavan

    Very nice tutorial. its useful for website creaton or designing.
    thank u.

  • http://yotorrents.com ArT

    Superb ;) yet yet :) everything just like that to keep ;)

  • AA

    Superb ;)

  • http://www.goldstonesilver.com goldstonesilver

    Thanks very much for this post, this is exactly what I was looking for, and you explain this clearly and to the point, so I am off to try it now! Cheers