More on Beams of Light, this Time in Colour
In Photo Effects by CollisThe steps and process are much the same as in the original tutorial, so this is really just an image to show it can be done. Here are Kyle's comments:
..also just did a real quick and dirty version of the light tute in color. People seemed to want to see it in color so I just did one real quick.
Rollover Before/After
You can roll over the image below to see the before/after effect in color, and as always I've uploaded the PSD file to the PSDTUTS Plus download area.

By the Way
Thought you might also be interested to know that Kyle is an expert retoucher and you can see some of his really amazing advertorial work here. Just wait for all the images to load and run through the rollovers, some of them are mind-blowing!Comments
Leave a CommentAdd a Comment


























Nate
March 6th, 2008
Good stuff collis. Thanks for the extra info on light rays.
Brad Frost
March 6th, 2008
Subtle and effective. Great job.
Cain
March 6th, 2008
Thanks Collis, I never expected my idea to be posted, but you guys went out of your way to make it. Thanks alot!
alberto
March 6th, 2008
nice i like the effect
Andrei Constantin
March 6th, 2008
very slick
Arnaud
March 6th, 2008
That light effect is very realistic and change the mood of the scene
Shane
March 6th, 2008
Like the rollover - makes it easy to see how good the effect is
shdw
March 6th, 2008
one of the weaker effects tbh
Connor
March 6th, 2008
While I like your rollover technique for before/after shots, it doesn’t work in RSS readers or printable versions, or for users without JS enabled.
A good solution would be to put both the before and after images within your “tutorial_image” div, and apply some CSS to the “tutorial_image:hover” state to show/hide the required image. In this way, the same HTML could be used in the RSS reader to show both images, and JS would not be required to support the mouseover. This would have the added bonus that both images are loaded at the time of page-load, and there would be no delay between the first mouse-over and the image appearing.
Here’s a quick example:
CSS
———–
.tutorial-image .before {
display: block;
}
.tutorial-image .after {
display: none;
}
.tutorial-image:hover .before {
display: none;
}
.tutorial-image:hover .after {
display: block;
}
HTML
———–
giackop
March 6th, 2008
i like the rollover effect.. the effect is cool anyway..
Ben
March 6th, 2008
The light beams are landing on shaded areas, which kind of kills it in this example, but I can see its use in other situations. Nice.
Markus
March 6th, 2008
It could really be done on a colourized picture
BogDinamita
March 7th, 2008
thank you
sct
March 7th, 2008
If you just cut out the part where it overlays on the trees it would look a lot better. Still a great effect though.
jonasbmf
March 11th, 2008
i was wondering if any of you guys know where I can find a tutorial changing cloudy weathered images into sunny? and I dont just mean changing the sky, but to add sunlight and shadows on elements in the picture. anyone?
Katalog Stron
March 19th, 2008
Thanks for rollover effect.
Naykris Crowley
April 11th, 2008
got nice! realistically!