Lighting effects can make or break any digital artwork. When done properly, lighting can add visual impact, draw the viewer’s eye, convey depth and emotion, and tie together all the elements of the piece for a quality finished result. However, achieving brilliant lighting is not always an easy task, particularly for newer digital artists. Perfecting contrast, color variation, sharpness and depth will help make your digital art more enticing.
In this tutorial, you’ll learn the essential process of achieving brilliant lighting effects in Photoshop. Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.
This is tutorial is jam packed with tips, shortcuts and techniques, and each detail is explained to allow beginning users to follow along. But even if you’re an advanced user, you’ll be inspired and take away some useful new ideas for your artwork. Let’s get started!
Tools Required
- Adobe Photoshop CS2 (or higher)
Final Image Preview
Step 1 – The Background:
Start by creating a new canvas, sized 1970×1320 pixels. Then, grab this custom background that I made (click the image for the full size):
Next, we’re going to combine this with another background, so click the image below or visit the following link and download this background: http://jakezdaniel.deviantart.com/art/Texture-3B-108044404
Next, reduce the ‘Fill’ option of this second background to 79% (see screenshot below):
Step 2 – The Foreground:
Now, we need our foreground subject image. We’re going to use this little rocker boy. You can use the following image that I used: http://tonya-tjphotography.deviantart.com/art/Rocker-6-86012281 or you can use any of your own images that you desire. One thing you’ll notice about this image is the hair, which will be a bit difficult to extract. Software such as Vertus Fluid Mask can easily extract these images, but for this tutorial, I will be extracting it manually using the pen tool and I will apply some cutting techniques.
Using your pen tool, slowly trace around the subject, then go to the “Paths” tab and then right click the path you made, make selection, and then you have your foreground subject. If you’re a bit unfamiliar with extraction techniques, read this article on Types of Extraction in Photoshop.
Notice that there are still some white edges left in the hair, so again you can use the pen tool to cut it off. You could manually try to remove only the white area, but I found it quicker and more effective to give him a haircut. And for finishing I used a soft brushed eraser and Layer>Matting>Defringe (width 1) and resized it to fit the document.
Now we will make some shadow for the boy, which will help create depth for our image. For the shadow I used a soft brush, 200px using black color to brush the perspective shadow (see below screenshot or use your judgment). Then, go to Filter>Gaussian Blur>30px to give it a more natural feel. Reduce the opacity if necessary, erase some overlapping black parts caused by the gausian blurr, and you should have a result like mine:
Now, we need to make the boy seem less ‘pasted’ onto our background. To do this, we’ll burn the edges of the boy a little bit, using the burn tool with the settings of 100px, Range: midtones, Exposure: 50 and then go to Layer>Adjustments>Brightness/Contrast. Check the use layer clipping mask and apply the following settings:
Add some crack to the walls to have more details and add visual impact. You can use a stock image, or the following brush: Download.
Step 3 – Adding Abstract Elements:
I used a rendered C4d. There are packs of C4D renders all over the internet, deviantART is a great place to start.
Resize it and use desaturate (CTRL-SHIFT-U) to make it pure grayscale. Next, move it into your desired position, for this image, I wanted to make it seem as though it was the boy’s wings.
Next, erase some areas that you don’t want in your image. It should match the foreground subject and the shadowing we created already, in order to allow the perspective to remain. You can use the selection of your foreground subject to remove areas and make it seem like the render is wrapped around the subject.
Duplicate the C4d layer, then bring back the duplicated one to the bottom of the layer’s boy. By doing this, you can add a backup of unwanted erased parts, and you can make the render feel more solid.
Next, we use the same C4D render, desaturating it and resizing it. Slowly we can add more elements, varying the size to achieve our desired effect. Erase any unwanted areas, and try to build your render around the boy.
Step 4:
In making the light effects, I only used default tools in Photoshop. Using the pen tool for illustration, you can draw some paths and stroke them. Create a new layer, then set your brush to white, 7px, soft (hardness set to 0%). Next, draw paths along the subject where you want light to appear. While the pentool is active, right click on the surface, choose stroke path, and check the ‘simulate pressure’ option.
Open the blending options, and apply the following settings to your layer.
Duplicate the line layer twice, and then blur the duplicated one. Filter->Blur->Gaussian Blur at 10px. Duplicate it again, and make a new group and then set the blending option to linear dodge (see below screenshot). Linear dodge is one of the most powerful layer modes in achieving quality lighting effects.
Next, make a new layer and then fill it with black and set the blending options to linear dodge. Grab the brush tool, and brush a little bit of red in his shoulder and use this command CTRL+F three times (to blur it again). This will enhance the glow effect from the lighting.
Repeat this process and try to make some brush adjusments make it bigger or smaller. Try making it 10px,5px,3px, whatever you want. Try to put some it to the bottom layer of the boy. Here’s how it looks after my illustrations and repeating the process of previous grouped layers. Just experiment use soft eraser to fade it some parts nicely. I used motion blur to achieve some movement in the piece. Overall, I had 7 groups for the lighting effects.
Step 5 – Extra Effects:
Add some small particles, like it’s splashing away from the boy. In this step, I used a nebula stock. There are many available through http://resurgere.deviantart.com/ or http://hameed.deviantart.com/gallery/?3949421#Stock:
Place it on canvas and change the blending option to Linear Dodge, then desaturate it to make it black and white. This will add some extra contrast to our image, apart from just the red. Now that it is desaturated, you can duplicate and place it anywhere you want, just play around to see what gives a good result. I suggest putting some of it behind the boy, to create a nice illusion and enhance the depth. Erase any unwanted parts using a soft eraser.
Step 6 – Smoke:
I added some smoke, for the original work I used a stock image of smoke. Unfortunately, I was unable to find the same image I used, but I will still show you the erased parts of the smoke. There’s plenty of free stock images of smoke (check http://sxc.hu for example) and see what works for you. If you want the same image that I used, it is available below:
Simply paste this smoke image into the document, move it over the boy and set the blending mode to ‘Screen’ or ‘Linear Dodge’ depending on your desired result. You can adjust your layer order to achieve the appearance of the smoke behind or in front of the lighting effects.
Step 7 – More Effects:
Next, we can add awesome lighting effects to dramatically increase the visual impact of the piece. First create a new layer (CTRL-SHIFT-N) . Fill it with black and change
the blending option to ‘Linear Dodge’. Grab the rectangular marquee tool, and use your gradient tool (from white to transparent), then erase the sides a little to make it softer.
Step 8 – Final Lighting Adjustments:
We are almost done. Now we will add some more red lights to incorporate the extra color into the piece. We’ll be using a soft brush, paint bucket and blending options here. Create a new layer, fill it with black, change the blending option to ‘Linear Dodge’. Use the brush, and then refer to the screenshot below:
We’re essentially done now, but we should make some adjustments to achieve better depth and sharpness. Create a new layer, and ‘Apply Image’ (CTRL-ALT-SHIFT-E). Next, go to Filter->Sharpen->Sharpen. Then, apply a curves layer by going to Layer->New Adjustment Layer->Curves. Apply the following settings:
After applying the curves, add a layer mask (Layer->New Layer Mask) and erase some of the curves layer (particularly around the head of the boy. Reduce the opacity to 42%, and then you can add your own gradient maps and adjustments if you so choose. Here’s my result after adjustments:
Conclusion
You can add any more effects you want, but for now I’m satisfied with the result, and hopefully you are too. Remember to keep experimenting, as small changes can have incredibly different results and you never know what may end up looking incredible. Hopefully you learned something from this tutorial, and thanks for reading!
03.24.10
Hey Mark. Really nice tutorial. The final effect is really great!
03.24.10
This tut is great!
03.24.10
Really cool effect man!
03.25.10
awesome tutorial Mark simple and yet effective – give me a shout if you wanna write for us ; )
cheers Ben
03.25.10
Nice Mark, my team mate in Liga Grafica
03.25.10
…. awesome lighting effects tutorial for Photoshop, thank you !!
03.26.10
Just amazing tutorial and design technic
03.27.10
thanks for your wonderful support guys
03.31.10
Hey great Tutorial My ending result was pretty sick!!! thanks
03.31.10
Glad you found it helpful Sean!
04.01.10
can i see your final result?
04.01.10
Beautiful composition. Great work pal.
04.03.10
Dear Mark Jay Caccam,
It is wonderful tutorial.i just want to try it now.
Thank you very much.
04.09.10
great use of effect
web designer
http://www.scrapsforever.com
04.15.10
Very beautiful effect ! I like the light accents and the end result looks great!
04.15.10
cool tut, tnx
04.16.10
Damn it ! It is looking great !
04.18.10
Thank you for sharing, need som lighting efects on my new home page…
05.06.10
Heyy dude this is epic!! But can you please please please do a photshop for me =[, i am epicly crap with photoshop and i really need YOUR help!? plzzzzzzzzz can yu photoshop an image for meeeeeeee =[ plzz
05.07.10
What a fantastic and creative design. Hope I can do it.
05.14.10
Dear,
I really needed a nice tutorial for some lightning effects..
So I started to read this tutorial.. and I got this far:
http://img96.imageshack.us/img96/3820/thisr.jpg
But how do I get the effect like this:
http://design.creativefan.com/files/2010/03/image-20.jpg
05.14.10
Try duplicating your lighting layer, and then setting the duplicated layer’s blending mode to ‘Linear Dodge’.
05.16.10
Well this is all nice and lovely, but hey, using my image (the nebulae stock, really? More like one of my artworks bluntly painted over with clone tool http://elenasham.deviantart.com/art/2009-Wallpaper-flyer-artwork-105574587). Not impressed with a cheap move like that.
05.16.10
Apologies Elena! We ask that all tutorial contributors clear their stock images, and the author said that all stocks had been cleared, evidently this was not the case. The image has been removed from the tutorial in the steps where it is shown. Sorry again for this, and if you have further concerns, please email us using the contact form.
06.01.10
The final effect is very nice.Cool tutorial.
06.04.10
nice creativity,if possible can u teach me?respond me on my e mail.tknx
06.13.10
tanx …. l love u
06.25.10
Gettin frustrated with these tutorials….dont seem to be complete step by step instructions…I have started from scratch numerous times and still dont get the same effect….In the red “light effect areas” I do not get the bright white light in the middle…what am I doing wrong?!
06.25.10
Make sure your blend mode is set to Linear Dodge.
06.25.10
OK I figured out what I did (or didnt do) wrong! When drawing the light effects my color for the brush went back to red! and was supposed to be white! Duh *slaps forehead*
06.25.10
yes….blend mode is set to Linear Dodge
06.25.10
Step 7 what do you do with the rectangular box?
07.05.10
Hi mark i would really like to know where i can buy the 3d model u use in this tutorial if you can mail me a link thanks a mill.
07.05.10
Ryan,
If you’re referring to the black abstract C4D, it was created by the author, however there are a plethora of free C4D packs on deviantART.com.
07.23.10
Gracias por el tutorial.
akí está mi resultado:
http://i433.photobucket.com/albums/qq53/nextor64/efectobrillante.jpg
08.19.10
Very Nice Great work in photoshop
09.04.10
OmG its looking hard to do !
09.23.10
i love such lightning styles…. now i will try by myself
cu Dennis
10.21.10
Really cool effects.
Looks like a pretty thorough tutorial as well.
I would be more likely to attempt it if you had used source files that I could download, though.
10.22.10
I actually went ahead and attempted this tonight.
Took a bit of extra concentration to apply your settings to my Mac setup and to improvise the effects onto my own layout. But it’s actually a very cool and useful tutorial.
Thanks very much for taking the time to share.
I’ll post my results asap.
10.22.10
Here’s mine: http://twitpic.com/2zwak2
I used this 3D element: http://11plus.deviantart.com/art/3d-Abstract-Render-vii-72759297
11.29.10
I am a designer,it helps me lots
12.02.10
Awesome site yo have ghere by the way