effect

This is a guest post by John Lewis. If you want to guest post on this blog, check out the guest post guidelines.

So your fun little cover band decided to give it a shot and record an original album in your basement. While creating the cover art, you got stuck. You just could not find the right lighting effect, and the first album HAS to look cool!

Rather than scouring the internet, why not just create your own effects with the tools Photoshop already has? It really is a quite easy, and learning to manipulate the tools in Photoshop is always to your advantage.

Step 1:
Create a new new document , and select the Custom Abstract Brush. Set the size to 2500 X 2500px set to Grayscale with a 300 px/in resolution. Double-Check your settings below:

Step 2:
Use the Ellipse tool to draw a black circle at the center of the canvas. Right click on the circle layer, go to Layer Style and select Blending Options. First reduce the opacity to 0%, then add an inner shadow with the following setting:

Now go to Filter > Blur > Gaussian Blur and enter anywhere from 1.5 to 2.5px for the radius.

Step 3:
Add a layer mask by using a large soft black brush with the hardness set at 0% to remove the top left portion of the circle.

Duplicate this layer until the area on the bottom right darkens to your satisfaction.

Step 4:
Make a new layer below the circle, grab that large soft black brush again, and click once on the center of the canvas. Reduce the opacity to 20%, and now the circle should like this:

Press Ctrl+G to group all the circle layers.

Step 5:
Make a layer above the circles and fill it black with the Paint Bucket. Grab a soft white brush and make one spot on the center.

Now to have fun, go to Filter > Distort > Wave and have with the effects until you’ve distorted the circle to your liking. Apply the filter twice more by pressing Ctrl+F when you are finished.

Step 6:
Invert the colors in the image by pressing Ctrl+L, and setting the Layer Blend Mode to Multiply.

Add a layer mask and remove any unwanted areas with a large soft brush. Repeat this technique until you have the desired amount of this effect.

Step 7:
Make another layer, and use the Lasso tool , set the feather to 30px and follow the example:

Make sure at this point you have the foreground color set to white and background to black, go to Filter > Render > Clouds, and hit Ctrl+D.

Push Ctrl+L, and in the levels window increase the contrasts. Use the following settings;

Set the layer to Multiply, create a layer mask, and again remove unwanted areas.

Step 8:
Now for some more fun! Make a new layer with black as the foreground. Grab a round brush around the size 25px with a hardness of 100%. Go to Window > Brushes and use the following:

Paint over the canvas as you wish. When finished, go to Filter > Blur > Radial Blur and apply a radial blur with an amount of 2px.

Step 9:
Open this photo. Press Ctrl+L, invert the colors and set the Layer Blend Mode to Multiply. Press Ctrl+L again once at the levels window, follow the example below:

Go to Edit > Define Brush Preset. You can now name your lighting brush!

Step 10:
Make a new layer and use that shiny new brush to click once over the canvas, anywhere you’d like. You can move it quite easily.

Step 11:
Create a new group, switch the Blend Mode to Color Dodge and create a layer. Use a soft white brush to paint on any of the areas you’d like to enhance and reduce the opacity as wanted.

Look at that! You’re going to have an all-star album cover! Your band is sure to make the Top 40! Well, maybe the local college radio station? You have to start somewhere, after all. Enjoy your new brush and the light effects. Rock on!

This post is written by John Lewis and he works at PriceCollate as a writer.

When visitor roll mouse pointer over a image, s/he will see a different image, when s/he moves mouse pointer out of the image focus, s/he will see the previous image. This is called RollOver Effect. This method is mostly done using JaveScript. It is used mainly on images, while building menu etc.

Yesterday I had written an article about OnlineProfits re-lauch and I had used rollover effect to one of the images there, and some people asked me how I did it(Simple Ans: See the source code 😉 ).
So here is the simple code to achieve this design effect:

<a href="Destination Address" 
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" ' 
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" 
'><center><img src="ImageURL-to-be-shown-by-default" 
NAME="thinkwithsatish"/></center></a>

Explaination:
ONMOUSEOVER and ONMOUSEOUT are valid JS effects. Since all most all browsers support JS, this works fine.

Give a name to the actual image to be displayed:
<img src="URL-of-default-image" NAME="thinkwithsatish"/>
I have named above tag src as thinkwithsatish. Now Refer to this name by using ONMOUSEOVER and ONMOUSEOUT commands.

ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '

ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" '

Hope the rest of the code is self explanatory.

Code in action!:

Now you can test it by taking your mouse pointer in and out of image area. If you don’t see any changes, place the mouse pointer over the image for some time – because in some cases, it takes some time to load.

I see that, it works perfectly in Mozilla FireFox, Internet Explorer and Chrome. I haven’t tested it in other browsers. And interestingly, I saw it working even in RSS feed!

Many people use content management system software like WordPress, to publish their content. So in order to include a RollOver effect using JavaScript means – editing the header part or installing a plugin which does the job etc. So instead we can incorporate this simple coding to get the design effect.

Design Tip: This is just the coding/programming part. To get the effect on the design, you must choose such images which will have good effect on users mind. So choose the images wisely.

I am not sure, how helpful it is to you. But it surly helps me sometime to get some minimal design effects on my WordPress blog posts.

Tag: effect

Make Energy and Light Effects in Photoshop With Custom Brushes

Image Rollover Effect – using Simple HTML