Home  >  Tutorials  >  Photographic Enhancements  >
Photo-Negative Mouseovers
E-mail this tutorial to a friend Email to a Friend

Photo-Negative Mouseovers
Created by: Doro Sensen


Negative mouseovers can be a nice way to show your photo index on a webpage. Here's how to do it!

Download the attachments for this tutorial  Download Files

If you haven't got some photos ready for this tutorial you can download the ones that I used in this tutorial.



Note: I worked with the measures of photo negatives in Germany and converted them to pixels [a universal measure! :-)]; I don't know, however, if these measures are the same for negatives all over the world. We will work on a picture double the size of the "real-life" negatives and resize it in the end.


Standard Toolbar - New (image) button

Begin with a new image:
– Width = 220 pixels
– Height = 192 pixels
– Resolution = 72 Pixel/inch
– Background = transparent
– Image type = 16.7 Million Colors


Tool Palette - Selection tool

We want to turn the edges of our negative black, so now double-click on the Selection tool in your tool palette:
– Left = 10
– Right = 210
– Top = 28
– Bottom = 164
– Custom size and position = checked

Click on OK, then go to Selections || Invert so that the outer edge of your image is selected.


Set both your styles to Solid Color (click on the little arrow in your style boxes and choose the brush icon on the left), then click into your style boxes and set your foreground colour to Black and your background colour to White. Your textures should both be set to None.


Check the Lock option beneath your texture boxes.

Tool Palette - Flood Fill tool

Click on the Flood-Fill tool in your tool palette:
– Blend mode = Normal
– Match mode = None
– Tolerance = not available
– Opacity = 100
– Sample merged = not checked

Now click into the selection at the outer edge of your image to fill it with Black. Deselect with Selections || Select None (Ctrl+D).


Set your foreground style to None (click on the little arrow in your foreground style box and choose the icon on the right). Leave background style and colour as is.

Tool Palette - Zoom tool

We're now going to draw a very small white rectangle on the top edge of the image. We will draw it as a vector shape so we'll be able to copy and paste it a few times. Since the rectangle will only be 10x16 pixels you better zoom in once or twice.


Tool Palette - Preset Shapes tool

Click on the Preset Shapes tool in your tool palette:
– Shape = Rounded Rectangle
– Retain style = unchecked
– Antialias = unchecked
– Create as vector = checked
– Line width = 1
– Line style = Default line


Go with your mouse over the top edge of the black frame and draw a rectangle of 10x16 pixels. The exact position of the rectangle doesn't matter at the moment, but watch the pair of numbers in the third brackets in your status bar for the dimensions of the rectangle.

Probably your rectangle hasn't got rounded corners now, that's because of its size. If we had worked with Antialias = checked the corners would have been rounded, but then, you wouldn't have been able to save your finished piece of work as a transparent GIF in the end (if you wish that) because you would have got semi-transparent pixels in the corners.

Tool Palette - Vector Object Selection tool

Click on the Vector-Object Selection tool in your tool palette. Your white rectangle is still selected (otherwise click once on it to select it), so right-click into your image and choose "Copy" from the pop-up menu. Right-click again and this time choose "Paste New Vector Selection", place the second rectangle somewhere near the first one.

Repeat the pasting until you've got 9 rectangles all in all on the black top edge of the frame. Again, the exact position of the rectangles doesn't matter for now.


Next, with your Vector-Object Selection tool still active, click on the very left rectangle in the row and drag it to the left edge of your image. Watch the pair of numbers in the status bar: release your mouse button when the first number is "5" (half the width of your rectangle).

Now take the very right rectangle in the row and drag it to the right edge of your image. Again watch the numbers in the status bar and release the mouse button when the first number is "215" (the width of your image minus half the width of your rectangle).


Then right-click into your image and choose "Select All" from the pop-up menu to select all your vector rectangles at once.

Now first go to Objects || Align || Bottom, then to Objects || Distribute || Space Evenly Horz. Your white rectangles now form a neat row that runs from the left to the right edge of your image.


Hold your Shift key down and then press your Up or Down Arrow key to move the row of rectangles to their place; there should be about double as much black above the rectangles than below.

Then right-click again into your image, choose "Copy" from the pop-up menu, right-click once more and choose "Paste New Vector Selection". Move and place the newly pasted row of rectangles to the bottom black edge of the frame, then position them correctly again by holding the Shift key down and pressing the arrow keys (that way you can move your selected objects pixel-wise to the left/right or up/down).


Now we've got 9 neat little white rectangles at the top and the bottom edge of our image. Actually, we don't want these rectangles but rectangular holes at their position. So, with your Vector-Object Selection tool still active, right-click into your image and choose "Select All" from the pop-up menu.

Then go to Selections || From Vector Object. You should now have "marching ants" around each one of your little rectangles.


In the Layer palette, click on the bottom layer ("Layer1"), then hit the Delete key to delete the selected rectangles from the black top and bottom edge. Click on "Layer2" again (the vector layer) and then click on the little trash can icon to delete this layer. Deselect with Selections || Select None (Ctrl+D).

Our photo-negatives frame is almost finished. We just have to crop it a bit at the side edges now so that they form neat rectangular top and bottom holes at the seam when you put two of them together on your webpage (at present, there would be double holes at the seam).


So, go to Image || Canvas Size:
– New Width = 210
– New Height = 192
– Center Image Horizontally/Vertically = both checked

Now we've got a frame that tiles seamlessly in a horizontal row.


Standard Toolbar - Open (image) button

Now it's time to put a photo into the frame. Open "/tutorial/html/tutphoto/Flower1.jpg" from your download, duplicate it with Window || Duplicate (Shift+D) and close the original image.

Our photo has to have a size between 200x136 pixels (that's the big transparent space in the center of our frame) and about 206x142 pixels (so that it won't show through the rectangular holes at the top and bottom edges). To avoid an unnecessary large download file I have already resized "/tutorial/html/tutphoto/Flower1.jpg" to 207x155 pixels. That's still too large for our frame, so we have to crop it a bit now.


Tool Palette - Crop tool

Double-click on the Crop tool in your tool palette:
– Left = 0
– Right = 206
– Top = 0
– Bottom = 142
– Custom size and position = checked


You now see a white frame on the flower image of exactly the size that we need our photo to be. Go with your mouse over the frame and move it so that it covers the part of the photo you want to keep, then click on the "Crop Image" button in your Tool Option palette.

Your photo is now exactly the size you need it.

Standard Toolbar - Copy button

Now go to Edit || Copy (Ctrl+C), then click on your image with the photo-negative frame and go to Edit || Paste || As New Layer (Ctrl+L). The flower image is now pasted exactly in the center of your image.

Now just move the top layer in your Layer palette (the flower layer) below the bottom layer (the frame layer).

You now have your photo framed as a negative.


For our mouseover we also want it as a real negative, so first duplicate your image with Window || Duplicate (Shift+D). Then click on the bottom layer in the Layer palette to make sure the flower layer is active.

Now just go to Colors || Negative Image. Voilà – your photo as a negative!


For putting your photos as mouseovers on your webpage, as a photo index maybe, you may want to resize your images to half their size first. To do that, go to Image || Resize:
– Percentage of Original = selected
– Width and Height = both 50%
– Resize Type = Bilinear resample
– Resize All Layers = checked
– Maintain aspect ratio ... = checked

Your image will then be about the size as the mouseover on the left. Maybe you will want to sharpen your image after resizing: try Effects || Sharpen || Sharpen.


The last step would be to put your webpage background on a layer behind the photo layer and save them as .jpg files. Then you can put them in a row on your webpage, without a space between them. As you can see in the example on the left, they tile neatly at the seam. (The images on the left are again resized by 75% so I could show you two photos in a row; and, like the image above, they're done as mouseovers – try them out! :-))


I hope I could show you another interesting way to present your photos on a webpage. Of course you could also put them into a vertical row – just rotate the frame by 90 degrees and resize/crop your photos accordingly, then put just a <br> tag between the lines so there's no space between the pictures; that way you can write an explanation to each of the photos on the right side of the negatives. A click on the negatives would then lead to the larger photos.

To see how the mouseover is done, just go here – or have a look at the source text of this page. ;-))