Animated Photoshop selection on a web page!

by Matthew James Taylor on 16 November 2007

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:


Most people will recognise this paragraph is selected because of the animated dashed line surrounding it. Photoshop is not the only application to use this convention, selected areas are represented in most programs the same way.

This selected box is also completely dynamic. If you change the size of your browser or enlarge the page text, the box dimensions will adjust to compensate. Give it a try!

We can also select shapes in images

Image with selected parts

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: Animated selection pattern and if that's a bit hard to see, here it is again, ten times bigger:

Animated selection pattern

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:

The layering of divs that create a selected box

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.

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.

An animated image with the select effect

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.


[Update] A big thank you to Darren Slatten of SEO Mofo for an updated set of animated selection gif images. Thanks Darren!


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor

Related articles