Create an Animated Shine Effect with jQuery Part 1
This tutorial assumes that you have a basic understanding of Photoshop, HTML and jQuery. Note that while I explain how to accomplish certain things using Photoshop, any advanced image editor will work.
This tutorial is split into two parts. In Part 1 I’ll show you how to create the necessary images in Photoshop and in Part 2 we’ll dive into the jQuery code to create our animation.
Part 1: Creating the Base and Shine Images in Photoshop
Step 1: Create the Image that the Shine Effect will be Applied to
I’m not going to go into detail here about how to create this particular image, because that would be out of the scope of this tutorial but the shine effect that we will produce can be applied to any image. If you like, save the image above that I have created so you can use it to follow along. From here on out I will be referring to this as the “base” image and have saved this image as base.png
Step 2: Open the Base Image in Photoshop
Step 3: Create a Selection that’s 50 Pixels Wide and as Tall as the Base Image.
In this case our base image is 30 pixels in height so our selection will be 50×30 pixels. You can see how large your selection is by looking at the Info Palette (Window -> Info)
Step 4: Create a New Layer Above the Base Image and Fill it with Any Color
Step 5: Open the Layer Style Window for this New Layer
Deselect your selection (Menu: Select -> Deselect) (MAC: Command + D) (PC: Control + D) and double click the new layer in the layer palette to open the Layer Style window
Make sure you don’t double click on the text as this will allow you to rename the layer. Double click on the layer’s icon, or in any of the empty space to open the Layer Style window.
Step 6: Lower the Fill Opacity to 0%
Make sure you lower the “Fill Opacity” not the “Opacity” This will allow any layer effects we apply to remain visible.
Step 7: Apply the Following Gradient Overlay
Our gradient has three steps of white color at the following locations: 0%, 50%, 100%.
The outer two steps (0% and 100%) have an opacity of 0, and the middle step has an opacity of 100%. Click the OK button in the Gradient Editor window, then back in the Layer Style window set the Angle to 0 degrees. Finally click the OK button in the Layer Style Window.
Your image should now look like this:
Step 8: Create a Layer from the Gradient Effect
In the Layers Palette, right click on “Effects” underneath your new shine layer, and choose “Create Layer.”
Your Layers Palette should now look similar to this:
Step 9: Copy the Contents of the New Layer
Click on the newly created layer (Gradient Fill) in the Layers Palette, then select all (Menu: Select -> All) (Mac: Command+A, PC: Control+A) and copy what’s selected (Mac: Command+C, PC: Control+C)
Step 10: Create a New Image (Menu: File -> New…) (Mac: Command + N) (PC: Control + N)
Make sure that the background is set to Transparent, then click OK.
Step 11: Paste what You have Copied into the New Image (Menu: Edit -> Paste) (Mac: Command + V) (PC: Control + V)
Step 12: Lower the Opacity of the Shine Layer to 50%
Step 13: Save this Image as a Transparent PNG Called shine.png
The easiest way to do this is through Photoshop’s “Save for Web” interface. (Menu: File -> Save for Web & Devices)
Choose PNG-24 as the preset and make sure “Transparency” is checked.
That’s it for Part 1. Part 2 will be posted very soon.