WPDFD Issue #75 - June 01, 2004

Transparency made clear

Using transparency with a GIF or PNG file can solve a lot of problems when it comes to overlaying type on backgrounds. The GIF file on the left has a background colour that matches the page's background. As the GIFs background is exactly the same colour as the background, and the background is a plain colour, it works just fine. This PNG also has a background colour the same as the pages, at least it is supposed to.

by Joe Gillespie This month we have the last three sections of the CSS from the Ground Up series. The series is intended to be an introduction to Cascading Style Sheets and as such, doesn't go into a great deal of detail nor does it tell the whole story – by a long shot. It gives a taste of the basics which will, hopefully, encourage the reader to find out more. A list of other CSS articles on this site is given on the last page and the CSS page in the Resources Section has links to a wealth of others.

This month we have the last three sections of the CSS from the Ground Up series. The series is intended to be an introduction to Cascading Style Sheets and as such, doesn't go into a great deal of detail nor does it tell the whole story – by a long shot. It gives a taste of the basics which will, hopefully, encourage the reader to find out more. A list of other CSS articles on this site is given on the last page and the CSS page in the Resources Section has links to a wealth of others.

Transparency made clear

Using transparency with a GIF or PNG file can solve a lot of problems when it comes to overlaying type on backgrounds.. The GIF file below has a background color that matches the page's background. As the GIFs background is exactly the same color as the background, and the background is a plain color, it works just fine. This PNG also has a background color the same as the pages, at least it is supposed to.

Screen Grabbers

Taking screen grabs is a common enough task for Web designers. Whether you need an image for reference or for a portfolio, having the right tool for the job makes things a lot easier. Windows has a very basic screen grabber build-in. Hit Print-Screen (F13) and it puts the contents of the window onto the clipboard ready to paste into a graphics editor. Hold down the Alt key and press Print-Screen to capture the front window only.

SnagIt

SnagIt is hard to beat. Not only will it capture the screen, windows, objects and selected regions – rectangular or irregular – it can capture the contents of scrolling windows(such as an entire web page) and it can capture editable text as well as images. So you can 'snag' both images and blocks of text off Web pages or anything else on your computer screen. The captured images can be sent to the clipboard to be opened in other programs, saved as files or sent directly to an email program.

HyperSnap-DX

Another Windows screen grabbing solution that captures scrolling (Web) pages. In addition to the usual rectangular grabs that all the other programs do, it can also do non-rectangular shaped grabs. Like SnagIt, HyperSnap can also capture images from PC games that use DirectX™ (and also Glide™) technologies. There is an image editing program here too for quickly touching-up or manipulating the captures but most Web designers will probably prefer to use their favorite graphics editor, this one is aimed more at the 'occasional' user who won't have the more heavy duty programs.

SnapzPro

SnapzPro X 1.0 is the premier screen grabbing utility for Mac (OS9 and OSX) and gives all the most-used options for grabbing windows, objects and selections. Unlike SnagIt and HyperSnap-DX, it doesn't have a built-in image editor but Mac-based Web designers will already have one and it can save files to most image formats with optional scaling, compression and color depth. Having to go through a built-in image editor can feel like an unnecessary encumbrance if you have Photoshop or Fireworks.

ScreenCatcher

Unlike SnapzPro, ScreenCatcher can grab whole Web pages at once – along with all the usual windows, area selections etc. and it does a good job too. I've been using this one myself, until recently. It can copy to the clipboard or save to file in all the usual formats with optional scaling, color reduction, etc. It doesn't attempt any kind of movie image capture or recorded output like some of the other programs.

SnapWeb

Not a screen grabber in the usual sense, more a dedicated Web page grabber and it will capture entire Web pages including the hidden areas off-screen. SnapWeb uses WebKit, so the captures are the same as taking a screen grab from Safari, which is fine if you are only concerned with how a page looks in Safari and not in other browsers. I find that a bit of a limitation myself but if you want a whole page capture and you use OSX, this is the only easy answer that I know of at the minute.

Last month's review of MacGimp stirred up quite a hornet's nest. Someone put a link to it on slashdot.org and it opened up a long and heated debate about the GIMP, graphics editor and open source software in general. Some of that debate spilled over onto the WPDFD Forum and varied between total agreement with my review to immature rantings about how awful Mac OS is – "Hey, real men use Linux and drive their kids to school in a Mack truck!".