Posted by ljmacphee on June 29, 2007 under HTML, css, graphics, how to | 
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.
Posted by ljmacphee on June 27, 2007 under gimp, graphics, how to |
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.
You Tube Tutorial, The Gimp - Selective Decolorization
Posted by ljmacphee on June 25, 2007 under HTML, blogger, wordpress |
If post a table of information in Blogger and you look at your post and see the table way down at the bottom of the post it is because the editor added in line breaks for you.
It is ok to use tables to display tabbular information but they confuse the editors. You know that when you type a line and hit return the editor adds a line break. Well it does this for tables as well. But rather than add the line breaks inside the table it posts them all just before the table.
This can be fixed.
This will add 5 empty lines before your table:
<tr>
<td>data</td>
<td>more data</td>
<td>some junk</td>
</td>
This will add one empty line for each and every row in your table before it prints the table:
<tr><td>data</td><td>more data</td><td>some junk</td></td>
So what you have to do is take your entire table. Everything between <table> and </table> and put it all on one long line. That will remove the line breaks before your table.
The best thing to do is use your favorite non-blog editor to create and check your table. Then remove all the line breaks and test it again. Once you have no line breaks and the table is correct, just cut and paste it into the blogging software editor.
Blogger Tips and Tricks has a different Solution which he just posted this week as well
Posted by ljmacphee on June 22, 2007 under gimp, graphics, how to |
Before enhancement:
After enhancement:
Open a copy of your image — never work on the original image!
Go to: Tools -> Color Tools -> Levels
Select Auto
Select OK
Go to: Dialogs -> Layers
In the Layers window duplicate your layer ( 2 sheets of paper 4th button from left )
Go back to the image and select
Filters -> Blur -> Selective Gaussian Blur and use the default settings -> click ok
( this part make take a minute depending on image size and how fast your computer is )
When the blur is done go back to the Layers window
In Mode select -> overlay
Adjust the Opacity till you like the result
Back to the image and select
Layer -> Merge down
This makes whites whiter, blacks blacker, greens greener &c. Some images have an almost 3d effect after doing this set of image enhancements.
Also try this with out doing the Gaussian Blur. Every photo is different and you just have to play with each one to get it right.
See also:
3 Step Quick Gimp Photo Clean ups
You Tube, Gimp Tutorial Photo Manipulation