You are here: Home > Blog > Animated Photoshop selection on a web page!

Animated Photoshop selection on a web page!

When part of an image is selected in Photoshop, the area is highlighted by an animated dashed line. Now I've figured out a way to get exactly the same effect on any web page! Here's a demo:

We can also select shapes in images

The image above has three selected areas. The selection animation is exactly the same as we see in Photoshop.

Animated selection is useful for making parts of your web page stand out above everything else, and it can also alert users to their current position on the page. Before we look at some more exampes of this effect let's see how it's done.

So how does the selection effect work?

The key behind the selection effect is a small black and white animated gif image. It's only eight pixels square and less than half a kilobyte in file size. Here it is: and if that's a bit hard to see, here it is again, ten times bigger:

Download a zipped copy of the selection gif (selection.zip - 273kb)

The trick with selection is in the layering. We start with a div that has the selection gif as a background image. This background is set to repeat-all so the animation tessellates, completely filling the div. Inside this we put another div with a white background colour and a margin set to one pixel. This second div sits on top of the first one and completely covers the selection animation except for a one pixel gap around the edge. This gap is important. The animation is visible through this space and we are left with the familiar animated dashed line of a select box.

Here is an animation showing how the layering works:

With images, the process is the same except the image replaces the top div. Simply make your image transparent where you want the selection effect to be visible and the animation will show through. Naturally, this will only work with image types that support transparency - so stick to gif and png files.

Adding the select effect to an image using Photoshop

1. First open the image, duplicate the background layer so layer one contains your image, then turn off the visibility of the background.
2. Next, make sure you have 'Anti-aliased' turned off, then select the area you want in your image using any of the select tools.
3. Now, create a new layer above your image and make it the active layer.
4. From the edit menu choose 'Stroke', set the width to one pixel and the location to 'Inside'. Click 'OK' and a line will be drawn on the top layer exactly where we want to make our image transparent.
5. Pick the magic wand tool, set the tolerance to zero and ensure anti-aliasing is still off, then select anywhere outside of the stroke we just added.
6. Now invert our selection so only the stroke is selected: Select » Invert.
7. Next make our main image the active layer then press delete to clear that part of our image (make it transparent).
8. Hide the stroke layer so we can see the result. You should see white and grey checkers in the transparent area - this is the default pattern for transparency in Photoshop.
9. The final thing to do is convert the image to indexed colour: Image » Mode » Indexed colour. Make sure 'Transparency' is on and save it as a gif (or png).
10. You're done! With a bit of practice you will be able to do all types of tricky selection effects.

Interesting uses of the selection effect

Now we understand how it's done, let's look at the many different things we can do with selection:

A menu with hovered selection

Move your mouse over the menu below to highlight each link with an animated select box.

• Photoshop art
• Vector art
• Web design
• Graphic design
• Nudes
• Portraiture
• Fractals

This menu is a simple styled list of links with the selection animation as the background image on each li (line item). The links have a green background colour that covers the animation but when you hover over the link a one pixel margin reveals the select effect around the edge.

Highlight selected radio buttons

Check the radio buttons below and your choice will be highlighted by a select box: (requires JavaScript)

Highlight focused text fields

Fill in the form below and each field will be highlighted by a select box when it is in focus: (requires JavaScript)

Hovered images with selected areas

Hover over this photo to see the real George Bush:

The above trick is quite simple to do. There are actually two images of George joined together, one is normal, the other has transparent lines where you see the selection effect. By default the normal one is visible and it blocks out all of the selection pattern below but when you hover over over the link the background position moves so the transparent one comes into view revealing the animation. If you are interested you can learn more about this CSS sprites method at A List Apart.

Highlighting table rows

Hover over the table below to see the rows highlighted by the select effect. (requires JavaScript)

2006	2007	2008	2009	2010
12	34	15	166	11
1	341	54	14	305
198	12	932	65	8
289	290	112	41	1901
7	190	932	13	14
76	274	229	103	321

Animated images with selection

For a really cool effect use an animated image to show the selected area moving. This would be especially useful for Photoshop tutorials where you need to show exactly how to select a part of a picture.

The rest is up to you

This is just a taste of what can be done with the select box effect. Why not download the animated selection image and see what you can create!

Cross-Browser compatible

The methods described above will work on all common web browsers because they are constructed in simple HTML and CSS. As noted some demos also require JavaScript to be enabled.

Date

16 Nov 2007

Tags

Animation Gif animation Photoshop art Tutorials Web design