Beijing 2008 Logo Light Painting in PhotoshopListThumbs

Beijing 2008 Logo Light Painting in Photoshop

August 11, 2008

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 the author

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. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

36 Comments

starlight8608/11/2008

nice one fabio..

CornéM08/11/2008

Wow, fabulous Fabio! Thanks!

I'm definitely going to try this soon.

Zim08/11/2008

Nice, it's a very cool idea!

Andrew Houle08/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!

Daan08/11/2008

Nice tutorial Fabio ;)
Good job!

<!--break--><!--break-->Cave Community

puffgirl08/11/2008

thats lovely. :)

Anonymous08/11/2008

Nice but it should read Free Tibet

Tom Ross08/11/2008

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

Anonymous08/12/2008

photoshopped

Bruno Gurgatz08/12/2008

Wow! nicr tutorial, i will try it

Shigaepouyen08/12/2008

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

K4k4du08/12/2008

Like the glowing effect - pretty cool!

Kyle08/12/2008

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

Great tut to

raxxxor08/13/2008

WOW!! man! I love you ^^

YOU ARE THE ANDREW KRAMER IN PHOTOSHOP ILLUSTRATOR & CO

KEEP DOING !

gonzaouo08/13/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.!!!

André Luíz08/15/2008

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

John08/18/2008

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

peace John

Anonymous08/18/2008

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

from step 10 till 13 ..rubbish !!!

Anonymous08/18/2008

You are Pro Photoshop

angse08/20/2008

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

Anonymous08/20/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 !

DanielPK10/12/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...

liko10/18/2008

awesome work... thank Fabio Sasso

Gary10/18/2008

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

Jolyon11/28/2008

Key setting missing from Step 11 in the tutorial:

Change the Lights Folder filter from Pass Through to Color Dodge to get the light paint coloring after gaussian blur is applied.

Other than that tiny but crucial detail, this is a really great starter tutorial on how to make this effect work at a production level.

Be sure to play a lot with the base layers Try different multi-color gradients for the gradient base and faded black & white patterns or images for the color-dodge base until you get the right effect for whatever you are designing.

This is a really neat effect, thanks Fabio!

xphunt3r12/24/2008

I really enjoyed doing this and create a wallpaper link to this page:

http://hussain72m.deviantart.com/art/Merry-Christmas-n-New-Year-09-10725...

sertcagri01/10/2009

thank you but i cant open this folder in photoshop cs3 can you help me?

sertcagri01/10/2009

hi to all... i started to develop projects with PSD...But some p?ctures had layer definition... In this picture i downloaded it but i couldnt be able to open it.It seems as undefined file..I coludnt reach the PSD file of this picture...

I'm using CS3... Please send your advices and helps ...

Phill01/16/2009

I cant get the psd file to download. Everytime I go to open it it tells me its invalid. Your help would be greatly appreciated.

Nom03/11/2009

Hey! Could anybody give that photo with man, but in a large size and free?

Jom jom jom04/13/2009

I cant get the color dodge step at the beginning :S When i set the clouds to color dodge mode, it gets this weird light blue color. And how do i get the clouds lighter some places ? Help please =)

Ulysses04/21/2009

I got stuck when I place the letter and I go to filter>blur>gaussian blur. My letter just blur but no glow effect takes place. CAn someone help me please!!!! I will appreciate it very much. Thank you

Stavely05/22/2009

Hey this is a great tut man. i added a bit extra but heres mine http://i193.photobucket.com/albums/z104/rednekgrunt/Stavelylrg.jpg

OyunCambazi11/12/2009

I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.

peynir
- peynir yap?m? ve hakk?nda di?er her?ey.
kulevinç Kulevinç hakk?nda arad???n?z her?ey.

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?