MSNBC Style Effect

Average: 4.9 (226 votes)

This GIMP tutorial will teach you how to create an effect similar to the one used at MSNBC.com.

The orignal tutorial can be found here. all credits go to Fabio from psdtuts.com, I'm just demonstrating how the effect can be done in GIMP.

Step 1

Depending on what your going to use the effect for pick a suitable canvas size..i'm going to create a 600x450 to fit the width of the site and fill the background to Black.

Step 2

Grab the "Blend tool" and set your foreground color to 28188f and background color to black and in the "Tools options" dialog under Gradient select FG to BG (RGB) and shape to Radial.

Step 3

Now apply the the gradient from centre to lower bottom corner.

This is how it should look

Step 4

This step isn't 100% as in the PS tutorial but close enough :).
Now create a new layer fill it with black then go to Filters>Renders>Clouds>Difference clouds. in the dialog set the following values:

  • -Random: 3
  • -Tick Turbulent option
  • -Detail: 15
  • -X size: 16
  • -Y size: 0.1

Step 5

Now will sharpen the image to give it better detail to the lines. go to Filters>Enhance>Sharpen and set to 72

Step 6

Create a new layer.Now i used the pre-made Gradient that comes with GIMP 2.4 named which isn't exactly the same as the one Fabio used but it will do.
Now Grab the "Blend Tool" and in the "Tools options" dialog select "Full saturation spectrum CW" as your Gradient and set the shape to Linear and then apply it horizontally.

Step 7

Next change the the Mode to Overlay and then duplicate the layer.

you should have something like this

Step 8

Now will merge all the layers except the background so unclick the "Eye" icon infront of the "Background layer" then right click>Merge Visible layers.

Step 9

Now re click the eye icon. Grab the "Free Select tool" and draw a wavy selection then go to Select>Feather and set it to 70.

Step 9

Now for the final step. right click on the Rainbow layer with your selection still active and click on "Add Layer mask" and select the Selection option.

Final Result

its a simple effect that can be used in a range of designs with little tweaks here and there.

As always the XCF GIMP source file can be downloaded from the link below under Attachments.

Shashwat's picture

Re: MSNBC Style Effect

Thanks a ton Gimper , You taught a lot of things from this Tutorial .. Thanks again for gr8 and detailed Tutorial :D

Regards Shash

Tim MacQueen's picture

Re: MSNBC Style Effect

hey gimper, your doing a good job on converting all the psd tuts! keep it up!!

Gimper's picture

Re: MSNBC Style Effect

thanks guys, more tutorials on the way :)

AreoX's picture

Re: MSNBC Style Effect

Wow, this is cool. First time I've ever done something using Masks.
This would make an awesome Gimp splash screen.

lolzlolz's picture

killer effect, ima try the

killer effect,
ima try the tut later today even though im on spring break,
i gotta work on some stuff first, then ill do it, (ill make into splash and post on forums)

Gimper's picture

Re: MSNBC Style Effect

great lolz. try not to stick wilber in there unless he looks really good :D

lolzlolz's picture

Re: MSNBC Style Effect

dont worry i didnt :P
http://gimper.net/index.php?topic=791.0
i posted at the bottom

Dorin's picture

Re: MSNBC Style Effect

every where i look for a nice tut i see "Submitted by Gimper..."
and the part that i love is that you got realy good color combinations , 10x for inspiration and for being such a good "teacher"

Superchild's picture

Re: MSNBC Style Effect

Wckd got that saved as my background very detailed and great as i've just started using gimp. Thanks agian!

kristarella's picture

Ripper effect Gimper! I like

Ripper effect Gimper!
I like it below you mask out the shape, the texture is cool!

~ http://www.kristarella.com ~

Piggaletto's picture

Thanks Literally just

Thanks
Literally just downloaded GIMP and this is the first thing i tried out. Pleased with the result :-D
Good tutorial *thumbs up*

rush2611's picture

Re: MSNBC Style Effect

Great work! Easy to understand, also for beginners.

Thank you (again) very much!!

Leendert's picture

Nice tutorial! Can I

Nice tutorial!

Can I translate it for dutchgimpers.nl?

Gimper's picture

Re: MSNBC Style Effect

you sure can :)

Leendert's picture

Re: Re: MSNBC Style Effect

Thanks! I've used the "Coloured stripes effect" for this tutorial: http://dutchgimpers.nl/readarticle.php?article_id=101
I've insert a link to your tutorial in it.

amy's picture

love it :) all your

love it
:)
all your tutorials are mega cool

Mosselman's picture

Re: MSNBC Style Effect

Very nice!

Codenomics's picture

I LOVE IT! I went a slighty

I LOVE IT!
I went a slighty different path though http://codenomics.deviantart.com/art/Patriomics-85054139
TY for the great tut.

Gimper's picture

Re: MSNBC Style Effect

looking good Codenomics

tim's picture

Re: MSNBC Style Effect

All these tutorials are wonderful and I thank you very much for sharing them with all of us. I'm mostly concerned with using them as guides to creating backgrounds for my web pages. I should add here that I am a newbie to all of this including web design. My problem is I can't seem to get them to show up on the net once I've published the site. I can place them on the local version of my site but once the site is published the background is missing. I think it might be in the way I save them. I seem to be able to make logos and images and save and publish them to the net but not the images I chose as backgrounds. What am I doing wrong? tim.

Gimper's picture

Re: MSNBC Style Effect

hi tim, could you share with us the link to your site? it might be you have the URL to your image wrong that's why it not showing up.

tim's picture

Re: Re: MSNBC Style Effect

Of course it's http://www.optionswebhosting.com
thanks alot for the quick response. The sites not finished yet. Also I just tried doing a reflection for the header following your tutorial on building websites with gimp and it turned out beautifully but again it doesn't show up on the net so I resorted back to the old header for the time being. tim.

Gimper's picture

Re: MSNBC Style Effect

as i thought, your linking the image source to your pc, look

background-image: url(../../My%20Pictures/gimp/gradient10.jpg);

it should be hosted in your hosting account for example

http://www.optionswebhosting.com/foldername/gimp/gradient10.jpg

hope that helps

beginner_alyanna's picture

Re: MSNBC Style Effect

Uh. can you help me on how to save works from Gimp ?. Just like this , i finished this work , and i wanna save it , but after saving it , and i wanna preview it , Only Gimp can preview it . I can't even upload it on net . So yea.

Gimper's picture

Re: MSNBC Style Effect

save it as .jpg or .png extension.

universalmaster's picture

Re: MSNBC Style Effect

This tutorial is very nice!!! Very good work!!!

LOOK AT THIS!!!: http://img181.imageshack.us/img181/6867/aurorayv5.png

Ashley's picture

Re: MSNBC Style Effect

kaleesh's picture

Re: MSNBC Style Effect

This rocks!!! i'm going to install gimp on my xp pc l8er :) and do the tuts! i love it and thank you so much :D!

Steve's picture

Re: MSNBC Style Effect

This is most likey your easiest and most fun tutorial ever! Keep up the good work Gimper.

Steve's picture

Re: MSNBC Style Effect

This is most likey your easiest and most fun tutorial ever! Keep up the good work Gimper.

MyNameDidntFit's picture

Re: MSNBC Style Effect

Great work :)

jamespinto's picture

Re: MSNBC Style Effect

brilliant effect..... and really simple...

K-ja's picture

Great tutorial! Can I

5

Great tutorial! Can I translate it for gimpuj.pl ?

Gimper's picture

Yes you may :)

Yes you may :)

Barbiene's picture

Meh. this tutorial is

Meh. this tutorial is awesome.

Thanks, I made a great banner for my blog with this. :)

james182's picture

good tutorial

good tutorial

Post new comment

The content of this field is kept private and will not be shown publicly.
 
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options