Download Source Files
One of the coolest digital artists around is Chuck Anderson, a.k.a. NoPattern. After seeing a recent Psdtuts+ reader request, I decided to show you how to create a light effect similar to NoPattern’s Jumper Poster. At the end, I’ll show you how a technique like this can be used in a variety of different ways to make stunning images…
Step 1
Create a new document sized to 600px x 800px. Unlock the background layer and fill it with a dark blue color (#091417).
Step 2
Create a new layer, fill it with black, and change the Blend Mode to Color Dodge. Then go to Filter > Render > Fibers. Use 16 for Variance and 4 for Strength.
After that, duplicate that layer and move it to the left, so you will have two layers, one next to the other. Select both layers, make sure that the layers are aligned from the top, and go to Layer > Merge Layers.
Step 3
Go to Filter > Blur > Gaussian Blur, use 10 pixels for the Radius. After that go to Filter > Artistic > Plastic. For the Highlight Strength use 5, and for the Detail and Smoothness use 15.
Step 4
Now rotate the layer, say 45º, and go to Edit > Transform > Warp. Use the image below for reference.
Step 5
Now let’s add more blur. Go to Filter > Blur > Radial Blur. Use 72 for the Amount. The Blur Method will be Zoom and the Best Quality.
Step 6
Go to Layer > New Adjustment Layer > Brightness/Contrast. Place the adjustment layer above the light’s layer. You can use 80% for Brightness and 100% for Contrast.
Step 7
Select the Color Dodge Tool (O). Pick a large brush, 175px Master Diameter, and Hardness 0%. Choose Highlights for the Range, and use 10% for exposure.
Now, just start painting over some areas to highlight them, mainly the brighter area, because the idea here is to intensify the rays of light.
You can select the Burn Tool (O) to burn some areas too. That means if you want to make some areas darker use this tool, it’s exactly the opposite of the Color Dodge Tool.
Step 8
Now select the Polygonal Lasso Tool(L) and create a selection like the image below. Then select the Burn Tool and as the brush is really big, it’s not necessary to paint directly over the selection, so paint far from the edges just to create a little shadow in the area. Tip: Click once and holding shift, click again where you want the end to be. Then it will create a line for you.
Step 9
Repeat Step 7 and 8 a couple of times until you think it’s OK, but change the Color Dodge Tool Exposure when you don’t want too much light. Use 5%, for example.
Step 10
Now let’s create a folder, place it above all other layers, and call it “lights”. Change the Blend Mode to Color Dodge. Then create a new layer inside the lights folder.
With the Brush Tool (B), select white and a brush with 30px and 0% Hardness. Create a line like the image below. After that, go to Filter > Blur > Motion Blur. Use -29 for the angle and Distance of 107%.
Duplicate the layer, resize it, and place it above the other ray. One of the lights is a bit strong, so select the Burn Tool (O) and with a few clicks you can make it a little weaker.
Step 11
Now select the Color Dodge Tool (O) again. This time use a small brush—10px and let’s use 30% for exposure. We will create that shining effect on the edge of some rays of light.
To do that, just create lines on the edges of the rays, repeat the click, and holding the Shift key, process to create straight lines using brushes.
Step 12
Here you can create more rays of light, just repeating Steps 8, 10, and 11. You don’t need to create new folders, though. Just create new layers inside the “Lights†folder.
Step 13
Create a new layer above all of them. Fill it with black, and go to Filter > Noise > Add Noise. Use for the Amount 10%, for the Distribution use Gaussian, and select Monochromatic.
Step 14
Create a new layer inside the “lights” layer. Select the Brush Tool (B), and go to View > Brushes to change some of the brush settings. After that, just paint some sparks over the image.
Step 15
Here we will place a photo in our design. Get a photo and delete all the background. We need just a person. The photo I used can be found at www.sxc.hu.
Step 16
Go to Image > Adjustments > Hue/Saturation. For my image, I used 12 for Hue, -68 for Saturation, and -5 for Lightness. But these values depend on the image you will use.
Step 17
Now go to Image > Adjustments > Brightness/Contrast. Increase the Contrast to 38 and add a bit of Brightness.
Step 18
Here we will add a bit of blue and green to the image. Go to Image > Adjustments > Curves and follow the image below.
Step 19
Create a marquee selection of the person by holding the Ctrl and clicking on the layer’s thumbnail. Then create a new layer inside the “lights” folder.
Now select the Brush Tool (B), use a big brush, 125px diameter, and Hardness 0%. Use 50% for the Opacity. After that, start painting some parts of the person to highlight them.
Step 20
Place the person’s layer beneath the “lights” layer and change the layer’s Opacity to 80%. After that, you can add the text and make some final adjustments like painting or hiding some parts of the image.
Conclusion
There are many different ways to create this effect. This time I wanted to use the Color Dodge and Burn Tools because they give you a lot of freedom to draw and create the lighting effects. You can even add some gradient overlays for a different effect. What’s important here, I think, is the technique and all the effects we can create with it.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Fabio
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very thorough Tut thank you!
The girl in Jumper was an hottie. At least worth watching.
Suggestion: I think the quality of the image you used lets it down. It seems very grainy and the color on the original is very saturated.
I’d love to see it again but with a better quality image (maybe one of the following)
http://www.sxc.hu/photo/950732
http://www.sxc.hu/photo/912842
http://www.sxc.hu/photo/894779
http://www.sxc.hu/photo/911965
http://www.sxc.hu/photo/911957
http://www.sxc.hu/photo/756512
Thats my thoughts :) Nice look overall.
Thanks :)
nice tutorial agree with the comments on adding a high res pic to show the final result
@ San:
Quote:
“Unlock the background layerâ€!!! – meaning?
Right click the background layer and select “Layer from background”
or
Duplicate the background layer and delete the locked one.
I’m with Alberto once i group the first layers together the colour disappears help !!!
http://alltutorials.ru/ – уроки фотошоп, уроки photoshop cs3, уроки по фотошопу
step 13 makes the whole page black (with noise)…there’s no mention on how to blend it in to the other layers…i’m confused!
noise is used here to “smooth” gradients. In my opinion: better fill the layer with white, than add noise and nlend to Multiply – play with opacity to get the best effect (I ended up with 22%)
I love your tutorials, Fabio. But, I have a little problem…
This might sound kind of dumb but, I have been having some trouble on a part in Step 2 on this tutorial. I have duplicated the layer but I have no clue what the “and move it to the left” means.
I went ahead and skipped it and just re-merged the layers and went on. Then in Step 3 I couldn’t do the “Filter > Artistic > Plastic” part. The option for it was shaded out and I couldn’t use that effect. I have tried going on to Step 3 without duplicating the layer also, and that doesn’t work either.
I think you left out instructions for the effect to the white layer in the beginning so the blue color will show through…yes?
Sorry for the double post but, I found out why I could not make the effects. I forgot that I had it at 16bit, and most of the Filters only work at 8bit.
Fabio… you never seize to amaze us :p
very nice lightning effects, always a pleasure to see and experiment on these nice tutorials.
dont the tutorial is too good, what is unlock the background layer???, in step 2 , when you duplicate the layers and then merge, the blends of the layers are change, do we need to put them again in Color Dodge Mode… i think this tut is not clear enough your resut is great. Not the explanation how to do it.
I was trying to follow along in your tutorial, but there are pieces missing.
Go to Layer > New Adjustment Layer > Brightness/Contrast. Place the adjustment layer above the light’s layer. You can use 80% for Brightness and 100% for Contrast.
What light’s layer ?
And it is not clear how you created your background color. Your overlay has no eye and the gradient you don’t mention.
Please help, I am lost with this tutorial.
Thank You.
not bad. But still to blurry, to noisy.. The jumper dude is TO noisy on quality..and the effect, sorry to say this but it lacks quality. It kinda looks like something i could pull-off in about 10min or so..
I dont meen to be disrespectfull or anything…=)
But still great Tut for those new to photoshop..
excellent tutorial !
It’s a Flamboyant Effect. but will it be use full for News paper printing? Can you give me tips on image handling for newspaper ads?
I’m slowly getting better and better at photoshop thanks to this site. Everybody who writes tutorials on this site is a GOD
Excellent,thanks for ur teaching in ur site,espesially wiyh photos. can u teach making (design) beautiful photos of marriege celebrations? Thanks
kool tutorial but umm step 3 to 4 how did you manage to get from blur/plastic wrap to original fibers again? doesnt make sense lol
did you create a duplicate layer after you merged the original two fiber layers down so that one would be blurred or not?
anyways thanks
Hmm, I just can’t seem to get through the first few steps. As mentioned above, Unlock the backgroundlayer(?) and what’s with the gradient? And why do I have to merge those 2 layers in step 2?
Anyway, I just can’t come further than step 4. I hope you can still explain some stuff :) Would be great.
Can someone please explain what happened between steps three and four? All of a sudden we are looking at a completely different layer image than the plastic filter we just used!! You really can’t finish the tutorial properly from that point on.
yea i found this tutorial abit hard to follow.. great outcome though
Awesome ………….
OMG I love almost all your tutorial, it’s very usefull, nice effect + cool imagination ^^q
VERY nice! I liked the gradient overlay one… Especially since that really reflects NoPattern’s image style, more than with the guy in there.
I certainly learned quite a bit from this, thanks.
omg i get stuck halfway.. I really loved the movie and i really want to practice this effect!!!!
PLease fabio help me.
Maybe can you do a video tutorial on this?
Really like this effect. Fabio makes great tutorials, always
Although i liked the end result i think this piece suffered from too many “DIY” steps.
First off all, as mentioned above, you have effects on the white background in step 2 that you have not clarified. Besides that, there clearly are some effect attacthed to the plastic wrap layer when you rotate and wrap it, that i didn’t have when i followed the tutorial (the blue color as an example). Although this might be a screendump you took later on, it’s still confusing and annoying.
Thirdly the warp part of the tutorial is horibly explained. If i press CTRL + T and rotate my layer 45 degrees and then right click and choose warp then i’ll get one type of warp selection. If i rotate, press enter, and then press ctrl + t again, right click and select warp, then i’ll get a second kind of warp selection. It’s impossible for me, as the reader, to know which one you used, and it seems to me that you threw in some perspective as well. I’m no master with the warp tool, but then again no total newbie and i could’nt produce anything close to what you did, with the warp tool alone. So if you did that only with the warp tool, hats off to you man.
anyway, ill give it another go sometime soon. Your stuff is usually a good learning experience.
wrap = warp :/
excellent tut!
Great idea, it didn’t really work though. Yes I followed all the directions, but it just got screwed up. What version of photoshop are you using? I’m using CS2, that might be the problem.
Liked the film…
Luv the tut!
pwnage!
I liked it very much. Great piece of work.
Thanks for Posting.
Great Tut.
rectangular marquee tool is way more easy
but nice technique though^^
i’m trying to create this image myself, but i dont get number/stage 4, can you give me/put more detail on number/stage 4. thankz
i honestly feel tat if anyone follows tis tut exactly as in the steps mentioned above then we will end up in totally diferrent design wen compared to wat u have shown in the final pic there. lots of steps or points may be missin. ur designing part is great but tut part is bad. sorry..
I agree with TL Kumar. The design is excellent but somewhere in steps 3 & 4, you will see that you will not get the right result as show in the reference images.
Sorry…didnt work out for me and i am really annoyed with tutorials that left out some steps and caused me scratching my head all the time…I do hope that you would try to be more lenient with us esp the amateurs. You started from scratch as well so i do believe that you know how it felt to be left out by someone.
Thanks alot for sharing this great tutorial.
Thanks alot for this great tutorial. You inspired me so much.
this is the one of the Good technics, wounderful steps, nice….keep it up
you skipped a step between plastic wrap and warp…
AWESOME
OMG! thanks man
this tutorial should be taken off or modified,becouse its unfinished the steps are frustrating not clear enough and how could psd tuts aproove this? sure is preeeeeeeeeetty but whats the point if 80% of the readers doesnt understand this?
Step 3 through 4 is missing something. Sooooo frustrating! Please modify it.