Beijing 2008 Logo Light Painting in Photoshop

This is not new, I have already shown this effect a few times but as last week I created a wallpaper for CSNGLOBAL, using an image of a guy painting their logo and I have received some emails asking me to write a tutorial, I decided to do that.

In this tutorial I will show you how to create a nice light painiting effect for texts and logos. You will be able to design nice wallpapers and images using this technique and even different light effects. Also, celebrating the Olympic Games we will use its logo for the example.

Step 1

Open a new document and Photoshop, unlock the background layer and apply a Layer Style to it. Use Gradient Overlay, for the colors use Black and a dark red (#1d0c0c). Use Radial for the style and Normal for the Blend Mode.

Beijing 2008 Logo Light in Photoshop

Step 2

Create a new layer and go to Filter>Render>Clouds. Make sure you have black and white for the background and foreground colors. Change the Blend Mode to Color Dodge.

The Gradient Overlay and this cloud layer is necessary to increase the light effect. As we will use color dodge to create the effect, it's necessary to have some areas lighter than the others. Otherwise the color dodge wouldn't work.

Beijing 2008 Logo Light in Photoshop

Step 3

With the Rectangular Marquee Tool (M), create a rectangluar selection at the bottom, there will be the floor of the image. The copy and paste that. Change again the Blend mode to Color Dodge and go to Edit>Transform>Distort. You can apply a perspective or scale just the height of the image.

Beijing 2008 Logo Light in Photoshop

Step 4

Here I used a photo from iStockphoto, you can buy it here. Select the Pen Tool(P) or the Magnetic Lasso Tool (L) and extract the guy from the photo.

Beijing 2008 Logo Light in Photoshop

Step 5

With the "dude" layer select go to Image>Ajustments>Brightness/Contrast and change a bit of the values. Use the image below for the exactly values for Brightness and Contrast.

Beijing 2008 Logo Light in Photoshop

Step 6

Let's change the Hue and Saturation, go to Image>Adjustments>Hue/Saturation. Again use the image below for the correct values.

Beijing 2008 Logo Light in Photoshop

Step 7

Create a new layer on top of the "dude" layer. Go to Layer>Create Clipping Mask, after that, select the Brush Tool (B), for the color use a red (#f22625) and paint over the guy. Change the blend mode to Multiply.

Beijing 2008 Logo Light in Photoshop

Step 8

Select the Eraser Tool (E) and delete some parts of the red layer. The idea is just make the highlights more red.

Beijing 2008 Logo Light in Photoshop

Step 9

Let's create the dude's shadow. To do that is really easy. Create a markee selection from the "dude" layer, create a new layer and fill it with black. Then just go to Edit>Transform>Distort. Following the illumination of the photo you can have an idea of where to distort the shadow.

Beijing 2008 Logo Light in Photoshop

Step 10

Go to Filter>Blur>Gaussian Blur and add a little of blur to the shadow, 1.5 pixels for the Radius will be enough. Then just change the Blend Mode to Multiply.

Beijing 2008 Logo Light in Photoshop

Step 11 (Light Painting)

The light effect is the easiest part I think. I've shown you this effect quite a few times so I think it won't be a problem.

Create a new folder and rename it to "Lights". Inside this folder Paste the Beijing 2008 logo. You can get it from Google Images. Probably the text will be black, but that won't be a problem, just go to Image>Adjustments>Invert. We will need all the text and all symbols in white.

Beijing 2008 Logo Light in Photoshop

Step 12

With the Beijing 2008 layer select just go to Filter>Blur>Gaussian Blur. Use 3.5 pixels for the Radius.

Beijing 2008 Logo Light in Photoshop

Step 13

For the emblem, the 5 rings. Repeat the same thing as the previous step. However if you want to make it even better, and that can apply to the others too, duplicate the layer so you will have 2 layers of the same symbol. In one apply the gaussian blur with a big radius and the other, the one on top apply the gaussian blur with a very small value like 1-1.5 pixels.

Beijing 2008 Logo Light in Photoshop

Step 14

Repeat the same thing for the other symbol. The tip here is change different Gaussian Blur values.

Beijing 2008 Logo Light in Photoshop

Step 15

Create a marquee selection from de "dude" layer again, exactly as we did in the step 9. The go to Select>Modify>Expand. Expand 3 pixels and create a new layer, inside the Lights folder. Fill the layer with white and go to Filter>Blur>Gaussian Blur. Use 3 pixels for the Radius. After that select the Eraser Tool (E) and start deleting the glow (1-4). Use a big brush very soft, 0% hardness. Just leave the top left part of the layer, exactly the parts closer to the light effect.

Beijing 2008 Logo Light in Photoshop

Conclusion

You can add more details like the sparks or different gradient colors. Just keep in mind that the color dodge will work with darker colors but now with black, and if the colors are too light the effect won't work either. Try different colors to see how they behave with the lights I'm sure you will understand.

I hope you liked the effect and enjoy the Olympic Games.

Beijing 2008 Logo Light in PhotoshopClick on the image to see a full preview

Another Example

Light Painting in Photoshop

Download the PSD File

Click here to download the Photoshop File for this tutorial

About author

User picture

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through abduzeedo.

Sponsored Links:

Kinda' irritating you´re using a photo people need to buy to use. Otherwise, nice tut.

Gary's picture
Gary (not verified) 10/18/2008

awesome work... thank Fabio Sasso

liko 10/18/2008

I Swear...your a photoshop MASTER..because of the tutorials you've provided i was able to create nice photoshop work. Specially with this picture..i made one and added a little extra effect...but for the guy's picture..it didn't turn out to be same...anyhow..here's my work.

http://photos-c.ak.facebook.com/photos-ak-sf2p/v359/55/61/716314890/n716...

DanielPK's picture
DanielPK (not verified) 10/12/2008

Why can't I open the sample file in the archive ? There's no extension and when I add .psd for the extension it still doesn't work.
Because I think there's a lack of explanations between step 11 and step 12.
Thanks a lot !

Anonymous's picture
Anonymous (not verified) 08/20/2008

WOW~! It's Fantastic~! I'll try it. Thanks a lot~!!!!

angse's picture
angse (not verified) 08/20/2008

You are Pro Photoshop

Anonymous's picture
Anonymous (not verified) 08/18/2008

another crappy tutorial :o(( ..with steps left out

from step 10 till 13 ..rubbish !!!

Anonymous's picture
Anonymous (not verified) 08/18/2008

yeah cool tut ;o)) ...but why is step 3 needed ??

peace John

John's picture
John (not verified) 08/18/2008

Qual o nome dessa fonte usada na logo ABDUZEEDO???? Com esse gradiente?
obrigado desde já!

André Luíz's picture
André Luíz (not verified) 08/15/2008

This is a really nice Job and Tecnica I will practice it until I could make something even better looking. Thanks 4 sharing this tutoring God Bless you.!!!

gonzaouo's picture
gonzaouo (not verified) 08/13/2008

WOW!! man! I love you ^^

YOU ARE THE ANDREW KRAMER IN PHOTOSHOP ILLUSTRATOR & CO

KEEP DOING !

raxxxor's picture
raxxxor (not verified) 08/13/2008

Hey there, was just wondering what text type you used in the very last logo you showed here.

Great tut to

Kyle's picture
Kyle (not verified) 08/12/2008

Like the glowing effect - pretty cool!

K4k4du's picture
K4k4du (not verified) 08/12/2008

Very good job Fabio !
Exactly the tutorial that I want !

Shigaepouyen's picture
Shigaepouyen (not verified) 08/12/2008

Wow! nicr tutorial, i will try it

Bruno Gurgatz's picture
Bruno Gurgatz (not verified) 08/12/2008

photoshopped

Anonymous's picture
Anonymous (not verified) 08/12/2008

Fantastic tutorial Fabio. I always like to see creative ways to play with lighting effects.

Tom Ross's picture
Tom Ross (not verified) 08/11/2008

Nice but it should read Free Tibet

Anonymous's picture
Anonymous (not verified) 08/11/2008

thats lovely. :)

puffgirl 08/11/2008

Nice tutorial Fabio ;)
Good job!

Cave Community

Daan's picture
Daan 08/11/2008

Dude, that effect is sick. :) I couldn't help but say that, with all the references to the dude layer. Very nice tut!

Andrew Houle's picture
Andrew Houle (not verified) 08/11/2008

Nice, it's a very cool idea!

Zim 08/11/2008

Wow, fabulous Fabio! Thanks!

I'm definitely going to try this soon.

CornéM's picture
CornéM 08/11/2008

nice one fabio..

putera_aladin 08/11/2008

Post new comment

The content of this field is kept private and will not be shown publicly.
If you have a Gravatar account, used to display your avatar.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.