Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Create an Animated Shine Effect with jQuery Part 1

cdudley

temp

jQuery is an amazing javascript framework that equips you with the tools to create beautiful effects extremely easily. While designing an add to cart notification for an online store I knew I needed to create something that caught the user’s eye to let him/her know that their product had been successfully added to their cart. I drew inspiration from the “slide to unlock” animation found on the iPhone and ended up with the following.

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

base.png - the image to which we will apply the shine effect

base.png – the image to which we will apply the shine effect

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

base.png

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-3

Step 4: Create a New Layer Above the Base Image and Fill it with Any Color

step-4

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.

Open the layer style window for our new layer

Open the layer style window for our new layer

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.

6

Step 7: Apply the Following Gradient Overlay

7

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.

7b

Your image should now look like this:

8

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.”

9

Your Layers Palette should now look similar to this:

8b

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.

10

Step 11: Paste what You have Copied into the New Image (Menu: Edit -> Paste) (Mac: Command + V) (PC: Control + V)

11

Step 12: Lower the Opacity of the Shine Layer to 50%

12

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.

13

That’s it for Part 1. Part 2 will be posted very soon.

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\