First take a screenshot of the webpage where the logo is you want to use. Or you can usually right click and save the logo to your desktop.
Go into your graphics editor such as Macromedia Fireworks or Photoshop and create a new file. I used Fireworks for this example. If you have taken a screenshot you can easily click on Ctrl + N to create a file that matches the size of your screenshot. Click ok and paste the contents into your new file. Now you want to crop your logo using the crop tool leaving about 3-5 pixels around edges.
You want to use the same background color as your site so grab that color and create another layer in your image and fill it with that color. If you don't know the exact hexidecimal color your site uses then take another screenshot of your site and paste it into your new logo file. You can use the eye dropper tool to select the background color to fill in the new underlining layer. This new layer needs to be under your original layer with the logo in it. Note: this works best with logos that are originally on a white background.
Select the top layer with the logo in it and change the layer attributes from normal to multiply. This will multiply the images so that the colors are combined. The white of the original logo background now fades to your background layer color as seen below. To make the logo look faded just change the opacity to around 40 instead of 100.
The area in the red box is where you make the above changes.
Now it's time to export. Since we want the logo to be monochrome I usually choose grayscale gif as the optimized output. You don't have to use this setting if you want the colors of the logo to remain intact.
Here is what the output looks like:
You probably want to create several monochrome logos for your footer so now is a good time to create the others by using the same file you used to create the first one. You can see the logos I just created at the footer of Bravenewmedia.org a webmaster resource site.
