Archive for June, 2007
How to animate a link on mouse over
This effect is much cooler if you use small gifs. I used large images in the Animate link on mouse over example just to make it easier for you to see what I am doing.
When the mouse hovers over the link, you see the animation. When the mouse is not over the link you see a still image. The best examples of this I have seen use small still image as a background, and a copy of that that has sparkles that appear and disappear when the mouse hovers.
You need two gifs; one a still image, and one animated version of that still image:
You can just drag these two images I used to your desktop to play with.
Here is the HTML/CSS for this example:
<html>
<head>
<title>Animated link mouse over example</title>
<style type=”text/css”>
#link {
position: absolute;
top: 100px;
left: 100px;
}
a {
background: url(animate-link-still.gif) no-repeat center;
height: 256px;
width: 256px;
padding: 125px;
}
a:hover{
background: url(animate-link-rotate.gif) no-repeat center;
}
</style>
</head>
<body>
<div id=”link”>
* Note: make the height and width of the link the same as your image size.
How to break an image into black and white and color using GIMP
This image started life in full color. I’ve made the background black and white and kept the main object of the photo in color.
First make a copy of your image!
Open the copy in GIMP.
Shrink the image to the size you’ll be using ( Image -> Scale )
Copy the image ( Image -> Duplicate )
Turn the new copy into black and white ( Image -> Mode -> grayscale )
Copy the black and white image into the buffer ( Edit -> Copy )
Go back to your color copy
Add a transparent layer ( Dialogs -> Layers ::: New Layer ( far left button and select Transparency as your Layer Fill Type )
Copy black and white image to new layer ( Edit -> Paste )
Anchor the image ( Layer -> Anchor Layer )
Now all we have to do is to erase the parts of the black and white image we want to be in color. Since the layer is transparent the color image will show through where ever we erase.
Click on the erase in the main GIMP window and select a brush size that works best for you. Erase everything you want to be in color. Don’t worry about the color looked faded we’ll fix that up shortly.
Once you are sure you have erased all the sections you want to be color and not the ones you want to be black and white Flatten the image.
Flatten image ( Layer -> Merge Down )
Now lets brighten the color back up.
Add a layer ( Layer -> Duplicate Layer )
Open the Layer Dialog ( Dialogs -> Layers )
Change the mode from Normal to Overlay using the drop down menu. Your colors should be back to being bright again.
Then just save your image ( File -> Save as )
Tip: Use the select rectangle ( dotted rectangle at top left on Gimp window ) to select large areas then delete them ( edit -> cut ). Then you just use the erase for the edges and small areas of your drawing.
