More on Beams of Light, this Time in Colour

Mar 6th in Photo Effects by Collis

A few days ago, we published a tutorial titled How to Break Sunlight Through the Clouds by the fantastically talented Kyle Pero of Lumedia Design and lots of comments came in asking whether the effect could be reproduced in color. Kyle has kindly done up a quick sample:

Author: Collis

Hello! I started PSDTUTS because years ago reading Photoshop tutorials was how I got into design. I hope the site helps and inspires others! You can find me on Twitter!

The 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!

Keep reading with more great tutorials and articles!

Enjoy this Post?

We'd love your vote!

Join Now

User Comments

( ADD YOURS )

Nate March 6th

Good stuff collis. Thanks for the extra info on light rays.
Brad Frost March 6th

Subtle and effective. Great job.
Cain March 6th

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

nice i like the effect
Andrei Constantin March 6th

very slick
Arnaud March 6th

That light effect is very realistic and change the mood of the scene
Shane March 6th

Like the rollover - makes it easy to see how good the effect is
shdw March 6th

one of the weaker effects tbh
Connor March 6th

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

i like the rollover effect.. the effect is cool anyway..
Ben March 6th

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

It could really be done on a colourized picture
BogDinamita March 7th

thank you
sct March 7th

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

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

Thanks for rollover effect.
Naykris Crowley April 11th

got nice! realistically!