This is one of those nice and easy tutorials that require absolutely no artistic skill in order to achieve the desired result. Just follow the steps and you’ll have your rays of light.

I recently used this technique when creating a background for my Twitter page, you can see it here.

Step 1

First of all, create a new document. Once we’ve finished this tutorial, the light rays will look as if they are being emitted from the center of your page. So keep this in mind when choosing the dimensions; if your intention is to have the light rays coming from the side of an image, you’ll need to create an image that is a little more than twice as wide/tall as it needs to be so that you can crop it later. For example, if the effect that you are trying to achieve is light radiating from the lower left corner of a 728×90 banner, then you’ll need to create a document that is initially roughly 1500×1500 pixels. If this is at all unclear, the reason for doing this will quickly become apparent as we progress through the tutorial.

Step 2

Now, we will need to create a gradient, so choose a color for both your foreground and background. Make sure that the gradient type is set to “Foreground to Background” then create a vertical gradient to fill your layer.

Step 3

Once you’re happy with your gradient, go to Filter > Distort > Wave.

First, change the Type to Square.

Number of Generators is fine at 5. The important thing to know here is that the Min and Max Wavelength values must be the same. You can set them as high or low as you’d like, but they must equal one another. Lower values will create more rays of light whereas higher values will result in fewer.

You can play around with Amplitude until you achieve the result that you’re going for. Basically, lower amplitude values will preserve more of the gradient within each vertical strip while higher values will create much more contrast, essentially giving you bands of color that match your initial foreground and background picks.

Leave Scale untouched.

Step 4

Odds are, once you apply the filter, that you’ll be left with a vertical band on the right side of your image that isn’t quite as wide as the others. This will affect our final image, so crop it out. After having done so, ensure that the vertical band on the far left is the opposite of that which appears on the far right. If it’s not, crop it out.

Step 5

Now that you’ve prepared the image, you can apply the final filter. Choose Filter > Distort > Polar Coordinates.

The default setting of Rectangular to Polar is fine, you can apply the filter.

Done! Your final image should look something like this

You can play around with this to get the effect that you’re looking for. Try applying a Twirl or Ocean Ripple filter.

I hope that you find this helpful!

Design Photoshop, Tutorial

This is a quick and easy way to get a nice image mouse over effect using only one image, some CSS, and without resorting to any javascript.

The real trick is in the preparation of the image.

Open Photoshop, or whatever tool it is that your prefer, and create a new file. To keep things simple, I’m just going to draw out a quick shape on a 100 x 100px canvas. Make sure that you draw your shape on a new layer.

You can go ahead and delete your Background layer.

Next, rasterize your shape and select it’s mask (Ctrl + click on the layer in Photoshop).

Invert the selection so that you now have the transparent surrounding area selected. From the Select menu, shoose Modify > Contract. The value by which you choose to contract the selection will be the thickness of the mouseover highlight.

Fill the selected area with the color of your website background, in my case, white. You should end up with a logo that has a thin transparent outline against a solid background.

Save your image as .gif or .png in order to preserve the transparency.

Now, onto the code

This is the easy part. We are only going to make one class to control the mouse over effect. First, however, add the HTML for your image link (you could always use a span, etc instead of a link, I’m just demonstrating it this way as I would imagine that a link would be the most typical application for this trick):

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

Now, for the CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

That’s it! Your result should look like this.

You can get creative with the shape and size of the transparent section in your image; there’s absolutely nothing saying that it has to be a solid continuous outline. Have fun!

Update: I just realized that this doesn’t work in IE8 Beta… not sure about 6 or 7. Firefox and Chrome are fine, though… I’ll adjust it to be compatible with IE8 (and likely 6 & 7) later tonight.
Another Update: Nope, it’s not just IE8; This won’t work in any version of Internet Explorer. Just another example of their refusal to adhere to the standards.

Web Site Stuff CSS, Photoshop, web design