
Reader Request: MSNBC Style Effect
Feb 20th in Effects by FabioIn this tutorial, I will create an effect like the one in the header of the MSNBC.com website. This effect is a reader's-request tutorial.
If you have an effect you want to know how to achieve, just let us know in the comments and we will try to write a tutorial about it.

I am a Brazilian designer living in Porto Alegre (south of Brazil).In 2003, I founded a web design studio called ZEE, with Fabiano Meneghetti, an architect and friend of mine. It's a small studio now, with 4 people working basically with web.
Step 1
Create a new document. Double-click on the background layer to open the Layer Styles. Select the Gradient Overlay and use black and a dark blue for the colors. Select Radial for the Gradient Style.
Step 2
Create a new layer and fill it with black.
Step 3
First select black for the foreground color and a medium grey for the background color. Go to Filters>Render>Fibers. Set 36 for the Variance and 1 for the Strength.
Step 4
Go to Filters>Blur>Motion Blur. I set the distance to 999, the maximum value, but feel free to test another value. For the angle use 90º.
Step 5
Double-click on the blurry layer in order to open the Layer Styles dialog box. Select Gradient Overlay and Overlay for the Blend Mode. For the colors, use the rainbow colors: start with violet, blue, green, yellow, and red. I think those are the colors :)
Step 6
Using the Lasso Tool (L), set the Feather option to 30px and create a random selection like I did. After that go to Layer>Layer Mask>Reveal Selection.
Conclusion
This is a very simple but cool effect. You can use it for website headers, CD covers, and wherever you want. I've just created a beautiful wallpaper for my blog. Again, there are lots of ways to achieve the same result, maybe using other filters and settings. It's all about playing with the tool. Additionally, if you are using the CS3 version of Photoshop, you can use the Smart Filters to test different values and see the effects without worrying about losing the previous version.
User Comments
( ADD YOURS )chandan February 20th
awesome again.
( )JBL February 20th
Nice and siple..Keep up.
( )Adis February 20th
Very nice effects!
( )andrej February 20th
Great one, I wonder just whether I should just use it as a simple header and lose originality, or try to fine tune it a bit and find it another use.
And Fabio, you think another category “requests” should be added?
( )Deny Sri Supriyono February 20th
just great!
( )your tut come to my reader in a perfect time.
thanks a lot, fabio.
kuldeep February 20th
I think not quite same quality of finish, but good job!
( )giackop February 20th
Good indeed..
( )Lamin Barrow February 20th
Very good tutorial. Thank you.
( )yokoto February 20th
no words
( )Alexander February 20th
Very simpele but very cool…
( )Katalog Stron February 20th
Simple but nice
( )TommyP February 20th
Thats the bee’s knees man!
( )Ben Jacob February 20th
Wow.. Thats just Great !!.
( )How about adding some Gaussian Blur to it ? It will look more like MSNBC Header .. Just a suggestion
Vlaszlo February 20th
Nice tutorial!
Request for another: I’d like to see a tutorial of how to create an image that looks like if it was in some kind of way hand made. It’s difficult to explain, but see the following examples:
http://www.cristiancontini.it/images/tempo_170255_cover_pp.jpg
http://www.fanboy.com/images/tv-guide-magazine-covers.jpg
http://farm1.static.flickr.com/16/22804037_49bc260015.jpg?v=0
http://www.calendars.com/images/069/6975/200700004227_hs.jpg
( )nico February 20th
soo simple, and soo cool
( )akari.it February 20th
Hello!
I like your tuts very much, tanks!
I’d like to know something about this effect:
http://flickr.com/photos/andreaskoller/2163086771/
…if it is possible
thanks
( )Alberto February 20th
Nice one.
( )Btw, I posted something very similar to this in the “A cool lighting effect” tutorial (http://psdtuts.com/tutorials-effects/a-cool-lighting-effect-in-photoshop/). It was a comment to Mahalie’s question about the “rainbow vertical lighting effect” seen at MSNBC.
MikBeck February 21st
Very Nice!
( )Not that difficult like other tutorials on this site, but sure one off the best looking!
Keep up the good work!
Psdfreak February 21st
How do you do that. its a simple instruction and a great result. keep on doing this lovely site
( )S. February 21st
Fabio very nice made tutorial.If your offer still stands…
Can you explain this kind of effect ? Can it be done in Photoshop ?
http://www.hostingpics.net/viewer.php?id=9054912007ins_31.jpg
( )Markus February 21st
I like it, many colors, but still nice!
( )goldenthunder February 21st
very nice! thanks again!
( )Fredro February 21st
Love how this site is actually listening to its readers. Gonna try this out today!
( )Constantin Potorac February 21st
Real nice.
( )Chris Laskey February 21st
Nice Tut Fabio.
Just to throw in my two cents. An alternative to a gradient overlay is to use a number of radial gradients in separate layers. Just set them to overlay, and voila, almost identical effect.
Its the same result, just a slightly different way to get there. Each have their positive and negative aspects.
Cheers,
( )vp February 21st
much simpler than my way. thanks.
request: the windows vista login background effect
cheers.
( )Marc February 21st
This effect may be easy to do, so excuse me if it is I am new to this. Look at the 3D effect here – http://dragoninteractive.com/ – it looks like you could rest the content area on top of it. Any tips, directions, etc on how to do this. Great site btw.
Marc
( )Ryan February 21st
Very nice tutorial!
( )Shane February 21st
Nice tutorial – great that you’re taking requests too! I’ll have to think of something
Just tried this one out – quite simple to achieve, but the effect’s great.
Thanks!
( )Ryan February 21st
Very cool. Very animate-able (in photohshop even!
)
R
( )Josh February 21st
Great tutorial. This site has become a daily stop for me while I’m at work, as well as the first site I tell others to go to when they’re learning Photoshop. I’ve been using PS for about 10 years now, and I’ve never come across so many useful tutorials.
Thanks again!
( )Anatere February 21st
Simply WOW!!!! =D
( )Colin Stein February 21st
i request help on the HTML for submitting a tutorial…that’s all i’d like
…for now
( )Dudeguy February 21st
If you are running in CS3, you can click the refine edge button after making a selection and mess around with the sliders. I found that if you increase the radius slider, then you get a smoother design like Fabio got in his final result. Simple, yet effective tutorial!
( )Fabio Sasso February 21st
Thanks a lot for the comments and for the requests, they will help us a lot.
@alberto: I saw your tutorial I think a couple of days after I sent the tutorial to psdtuts, very cool. It’s the same technique even though there are other ways to do the same thing.
@S: I wrote a tutorial last year showing how to create an effect like that, take a look at http://www.abduzeedo.com/displace-filter-vector-effects. It’s not exactly like that but Im sure it can be done using the same technique and filters.
( )Joefrey Mahusay February 21st
Really nice tutorial. Great job Fabio.!
( )Renasos February 21st
Nice tutorial u r gr8
*If you have an effect you want to know how to achieve, just let us know in the comments and we will try to write a tutorial about it.*
could u find out how they did this
http://images.apple.com/finalcutserver/images/header_finalcutserver20070414.jpg
thanks alot =)
( )RyderXXL February 21st
Niceeee
it’s easy-to-do and very coool 
( )great job
bemoo February 21st
Very very Nice …
( )so easy too ; )
Shmook February 21st
Hi, could you tell me what the font is on the image plz?
(btw I think what you’re doing with this website is great!!)
( )craZed February 21st
easy nice awesome !
( )Majid February 21st
Request!!!!
How can i make an effect like this? Check out the links to see the examples.
http://df.img.v4.skyrock.com/df3/black-music/pics/570721224.jpg
http://images-eu.amazon.com/images/P/B00022UOI4.08.LZZZZZZZ.jpg
http://fc.img.v4.skyrock.com/fcd/rainb-fever/pics/69994972_small.jpg
THANK YOU!!!!!!!!
( )Sheryl February 22nd
Fabulous! Thank you!
( )marc February 22nd
fabio,
http://www.abduzeedo.com/displace-filter-vector-effects.
doesn’t work for me (maybe only happens to me)……..
btw, awasome tutorials……….
http://www.abduzeedo.com/displ
S: I think that effect its done with displacement map photoshop’s technique
( )(something like that http://wirestyle.deviantart.com/art/Drift-Solo-Remix-26471659)
in computer arts webpage you can find that tutorial (http://www.computerarts.co.uk/tutorials/2d__and__photoshop/displacement_effects). and in http://wirestyle.deviantart.com/gallery/ you can find, (and maybe asking few questions) to wirestyle (the guy who make that displacement tutorial)
S. February 22nd
thanks for the link Fabio !
( )Hailu February 22nd
I’m curious as to how do you produce the explosion effect as seen in Nick Ainley’s work “keep it together”, “black dog” and “icarus”. http://www.shinybinary.com/
This is the effect when an item is blown apart and the image captures that particular moment. I’ve searched hi and low all over the internet and couldn’t find any info on it. Does this effect require some 3D program or can it be done entirely in Photoshop? Any insight would be greatly appreciated.
( )Fabio Sasso February 22nd
The link is http://www.abduzeedo.com/displace-filter-vector-effects without the “.”
Sorry, my mistake.
( )marc February 22nd
thanks
………………….
( )Tomas February 22nd
nice work!
( )Mody February 25th
BEAUTIFUL! Thanks a lot.
( )San February 25th
You worte: “Double click on the background layer to open the Layer Styles”. Sorry, but double clicking on the Background layer doesn’t open the Layer Styles. As it is locked by default. I noticed that you always write this. I hope I am mistaken in this. But when you double click on the Background Layer, it will open New Layer dialog box. Please, correct me if I am wrong. I know what you mean, but it is not done as you described in here as this could be confusing for newbies.
Nevertheless, This is one of the nicest tutorials I’ve ever seen, thanks a lot.
( )Malik Smith February 25th
Very cool effect and easy to understand tutorial!
( )mahalie February 28th
As mentioned earlier, I was collecting input on just this technique. I just used this tutorial and modified it slightly by duplicating the gradient overlay layer and applying screen to the bottom and linear dodge to the top to achieve that higher contrast glow-ey effect. Many folks offered tutorials and ideas, I’ll be playing with this quite a bit myself as I just like the look but want to come up with something significantly different than the MSNBC header. THANKS AGAIN! This site is the bayste! (That’s Nacho Libre for ‘best’).
( )arun November 13th
simple technique and good effect thanx for your tutorial
( )Andrew D February 28th
Very useful! I used this tutorial in class today as an example for my fellow fullsail students
( )paula March 3rd
very nice tutorial!
but i’d like to know if you can make a tutorial about doing this kind of light line effect…
http://www.flickr.com/photos/kamilos/2301832529/in/pool-psdtuts
thank you and good job!
( )Jose March 4th
Excellent tutorial! Keep up the good work.
( )wickido March 5th
I usually dont comment tutorial sites, but when I do so, it means its pretty solid.
( )Nice use of creativity and photoshop skills.
Lately the best tutorials Ive seen are to be found at psdtuts, from abduzeedo especially.
Great going, hope to see more of this quality stuff.
escanive March 8th
Great tutorial, thanks
( )Raido March 8th
great! – thanks alot, i’ll try it right now
( )Toucouleur March 10th
That’s the first time ever I Must admit those kind of tutorials are well done ! I’ve juste browsed the whole content of your site, and it’s amazing how it’s well explained. You really made things different with so nice tutorials ! Thanks again Fabio
Cédric from France
( )h@wk March 13th
nice tutorial
keep on
( )SniperFox March 13th
@San: Double click on the background layer to bring up the “New Layer” dialog. Click “OK”. This will unlock the background layer, and you can apply layer styles and such to it.
( )John March 14th
Hi, this tutotial is excellent. I like it. But please tell me what is the name of the font.
( )paul james March 26th
thanks for the tut…. a already used it as my desktop! hehe… ^^,
( )Joomla Designer March 27th
Great tutorial folks! – i recently redesigned my website – and used this tutorial for the basis of the header (and footer) of the new website – have a look http://www.mozami.net
( )Suv April 1st
great
( )and yes a request is coming 4 smoke
there is a lot of fire ones out there but not many smoke ones
cheers
Rob April 2nd
Excellent tutorial. Thanks very much.
( )Sewerraccoon April 23rd
Another thing that looks cool, instead of the Fibers, I tried some monochrome noise, came out with some smaller lines that look nice
( )Cobus Bester May 21st
Awesome technique, thanks for sharing!
( )Kumran July 21st
very nice
( )Mansoor July 24th
Thanks for Posting.
( )Great Tut.
Scissor August 1st
Great job and impressive one.
( )Alexandra August 23rd
Appreciate your tutorials. Someone who finally publishes professional tutorials for Photoshop users.
One thing tho…. I always get confused with these. You never mention if you make a new layer or not. Makes a user to guess and to experiment. Would like to see tutorials more in detail.
Other than that. Thanks for posting and making such great, useful website as psdtuts.com
( )FixedHDD September 7th
hey cool!
good effect and easy to make.
Well done!
~FixedHDD
( )max September 11th
Great tutorial, thanks a lot..
( )bigyst September 16th
nice..
( )very cool and smart
MOSTAFA September 22nd
VERRRRRRRRRRRRRRRRRRRRRRRRY NICE
THANKS !!
( )Raj October 18th
Extremely amazing effect! I love it! Looks very good with transparent text too =D Thanks alot for making this tut.
( )Dnyanesh November 17th
Everything was going fine until Step 3 arrived. The “fibers” option was greyed(locked) when I tried to use it. I am on CS3. I hope I have done some mistake.
Anybody to correct me?
( )simon January 8th
I have followed this tut a few times and have just published it as a background on a new website, see the image at : http://theledlightingcompany.co.uk/
Steps are basically the same, but I repeated Step 6 on a new layer, but a bit inside the edge of the original then added a pixel texture layer and tweaked around with opacity to get it to look right.
Comments welcomed, keep up the good work fella, inspirational!!!
( )Eric February 7th
You’re probably working in 32 bit color mode. I’m not an IT guy so I don’t know the computer science differences between the different modes, but a lot of filters only seem to work in either 8 bit or 16 bit. To change this, just go to to Imge>Mode>8-bits
( )tfw January 25th
very nice !!
( )7aji88 May 22nd
Nice and fool proof tutorial!
Thanks
( )Amir Ghazizadeh May 23rd
GREAT…!
( )Good Luck My Dear Friend.
DAVID AVISROR May 23rd
TNX MY FRIEND. WAS HELPFUL.
( )DAVID, ISRAEL
ekramy May 24th
good work..simple and beauty..thanks
( )Ankit Agrawal May 24th
Great tutorial.. thanks.. nice website ..
( )hitesh June 28th
i got the same effect as shown thanks for that
( )KimberleyJo July 24th
Thank you for posting this tutorial…I love your work.
( )zenaire September 1st
Simply I am speechless…Thaankkss
( )Smashing Themes September 6th
This killer effect is so easy to achieve? Awesome.
( )JuanMarin September 29th
Fantastic, so simple and beautiful
( )arun November 13th
very nice good effect thankyou
( )nadia December 15th
Awesome tutorial to learn. Very easy and well defined . thanks for sharing this nice post.
( )Faz December 27th
Thank you. Such a simple yet useful desgin !
( )