Learn more about the best open source alternative to expensive image editing programs. Lots of screen shots will help you learn tricks of the GIMP.

Once installed, Colorzilla resides down in the left, bottom corner of Firefox. You’ll see a little eye dropper icon. Click the eyedropper and the mouse pointer changes to a cross hair. Hover over any spot on the page and the RGB and #hex values are noted at the bottom of your browser. Click again and the color values are stored temporarily until you click on the eyedropper again.

If you leave the current tab and come back you’ll note that the color values have disappeared from the bottom bar, but they’re not really gone. Right-click the eyedropper and you’ll be presented with a menu of choices.

Right-click menu for ColorZilla Firefox browser extension.

Have fun exploring all the features of ColorZilla, but take note that the details of the last color picked are ready for you to copy in your favorite format.

The Options menu has a hidden feature that you might want to check out:

ColorZilla Firefox browser extension options menu.

Right-click on the eyedropper, click on Options, then click on Statusbar Format…. Here, you can modify the information that you see in the bottom bar of the Firefox browser when you activate ColorZilla.

ColorZilla menu for statusbar formatting.

Now, along with color values, you can “see” elements of a webpage, their paths, URLs and distances to other page elements.

A great feature that I must point out is the Webpage DOM Color Analyzer that you can reach from the Options menu. Visit a page where you like the color scheme, right-click the eyedropper and choose the Webpage DOM Color Analyzer…. A window at the bottom of the screen will show the main colors of the page, but not from the images on the page. Clicking on any of the colors in the palette will show you the css rules that are using that color.

ColorZillla – what a neat way to explore a page and all its colors!

Don’t have a site yet? Post your widgets to iGoogle, a Google “homepage” that you can modify as you see fit. Click on the iGoogle link at the the top right of www.google.com and you’ll see a version of google that you can modify to your liking by arranging tabs and blocks of content.

Here’s the widget I’m talking about:

Try moving either color pointer and see the resulting color and #hex value in the top box.

On the widget’s page at widgetbox, look under Get Widget on the right side of the page. If you’re not familiar with some of the icons, just hover your mouse pointer to get a tool tip that tells you the name of the site that the icon represents. Click on “more…” to see other icons. Here, you can also choose your language and modify your widget, if possible. Code is available for WordPress blogs – just look for the big W in the icon list.

To post the widget at iGoogle, click on the big G icon. A small window pops up that directs you to click on the “Add Widget” button to open the iGoogle installer. When the installer page opens click on the “Add to Google” button. Your new iGoogle page opens with the new widget displayed. Drag and drop the widget into the place you prefer and make sure to sign in to Google to save your page.

Same thing with WordPress. Add your favorite widget to a post or put it in your sidebar.

The only catch here is to grab the right code. If you take the code from one of the icons presented, the widget will be in its default state. Should you modify or customize your widget – like I did with Farbtastic by changing the language to English and enlarging the widget to 300 x 300 px – make sure to click on the small “Get Widget” button that has a little checkmark – it’s right below the customize part of the Get Widget section. Post your customized widget and make sure it’s what you want before you finish up with widgetbox.

Click the Random button to see randomly chosen color schemes or input your own RGB or Hex value to start the color selection.

Copy the screen to save an image of the color scheme containing nine colors and their hex values.

But you don’t really need to download the software to pick up the color schemes that you like. Just hover your mouse pointer over the color blocks in your favorite color scheme and write down the #hex code from the tool tip. Now you’re all set to use your favorite new colors!

Better yet, sign up for a free account on ColorSchemer. For parting with an email address you’ll be able to build a personalized Favorite Schemes list. Once you sign up, go to the Scheme Gallery and browse to a scheme you like. You’ll see who made the scheme, the number of times its been downloaded, the scheme’s rating out of 5 stars (and how many people rated it), and a link called “Add Fav”. Click on Add Fav to put the scheme you like into your Favorite Schemes.

My Favorite Schemes will show what you have saved so far. What a nice service to allow us to collect these color schemes and save them for later.

Bookmark ColorSchemer!

Don’t miss the fantastic post on 140 Named Colors!

The first site I looked at for color schemes was ColourLovers and I came away duly impressed.

Colors, palettes and patterns can be viewed endlessly. Over 230,000 patterns and over half-a-million color palettes await your scores and comments.

The color community is thriving here with an active forum and lots of colors, patterns and palettes for free downloading.

Once you register with the site – it’s free – check out the palette maker. Under the Palette tab, click on Create New and start dragging colors from the color picker to the five spots just underneath Create a Palette. When you’re ready you can fill in some details for your final palette and add it to the community.

Colors are identified with their RGB and #hex equivalents, so it’s easy enough to plug those values into your css stylesheet or into The GIMP color picker when you need them.

There’s even more fun under the Patterns tab! Over a hundred patterns are ready for you to customize.

Colourlovers.com – what a wonderful site!

Even if you don’t have Photoshop on your machine, the information is pretty applicable to The GIMP. So, if you’re a GIMP user download the photoshop tutorial book today and learn how to work with menus, buttons, backgrounds and mocking up your next site in your favorite graphics editor.

Right now, sitting on my bookshelf I have five books produced by sitepoint and I can tell you everything they have published is top quality. Nice color illustrations and screenshots throughout their texts are top notch. Explanations are clear and the texts are laid out well.

Download the Photoshop Anthology today – it’s free!

JPGs Can’t Handle Transparency, So Use A PNG Instead

Earlier today I got lost in the details while using The GIMP to create a couple icons for a new WordPress theme. I kept seeing this colored background for an icon that I knew just wasn’t there. I could see that the image had only one layer and no background layer in the layers dialog of The GIMP, but every time I saved the image and viewed the result in my browser I saw the colored background.

This drove me mad until I spotted the obvious mistake. I had been saving the file that I wanted to have a transparent background as a jpg file. Since jpg files can’t handle transparency The GIMP tries to accommodate by exporting the file as a .jpg. Unfortunately, the current background color is used to fill in the transparent parts of the image, so you end up with a non-transparent image.

To make a transparent image or an image with a transparent background, save the file as a png file. PNG files can handle transparency, so once I saved my image as a .png the colored background went away.

One caveat here is that image files with the extension .png are not recognized by older browsers so the colored background will show through and the image won’t be transparent.

Even though the size of standalone monitors and laptop screens are much larger than they were 3-4 years ago, I would bet that many people do not run their browsers at full screen on such large monitors. With Windows Vista, for example, the new sidebar feature takes up a width of 150px which may take away from the browser real estate.

Also, with the ability of modern computers to run several programs at one time, people operate them in this fashion. It’s convenient to be able to see more than one program at a time and if browsers are constantly run at full screen that’s not allowed. Besides, it’s very difficult to read all the way across such large computer screens.

So, we are left with the current state of affairs where most blogs and Web pages have these spaces running down the sides of the real content. Should those spaces be left blank to have a white background?

Let’s make it a bit more interesting and put some color in there. Instead of choosing a background color for the body tag, why not use a gradient? Gradients can be designed with any choice of colors and blending between the colors is up to your imagination.

Open up The GIMP and create a new file 300-400px wide and at least 1000px in height. The width doesn’t really matter here as we’ll trim that down to a couple pixels when we’re satisfied with the gradient we’re making. The height can be much longer – it just depends how fast you want to see the gradient run out when you scroll down your pages.

Double-click on the gradient tool button to open the gradient tool options dialog:

The gradient tool is selected in The GIMP.

The last-used gradient appears in the gradient toolbox window.

Click on the gradient to bring up a list of the available gradients. Click on a gradient that you like to make it the current gradient. Checking the Reverse checkbox will flip the gradient left-to-right. Changing the shape from linear to radial or conical by clicking the Shape drop-down arrow can give some interesting effects, but for our background gradient we’ll leave the shape at linear.

In your new image click-n-drag the cursor from the top to the bottom of the image. When you release the pointer the gradient will appear and fill the whole image.

Considering download times we’ll trim the gradient background image instead of using this giant image as the background. Click on the rectangle selection tool so you can cut out a slice of the huge gradient image.

The rectangle selection tool is used to select or cut out portions of an image.

In your gradient image select a rectangular portion that is 1-2 pixels wide and 1000 (or more) pixels tall, then copy your selection to the clipboard with Ctrl-c.

Open a new file using the menu, File/New. Notice that the new image size matches your selected area of the large gradient image, so click on OK. Type Ctrl-v to paste the skinny gradient into the new image. As you can tell it is difficult to see the colors in such a skinny image. That is why we use 300-400 pixel wide image to start with – it gives you an idea of what the gradient on your Web page will look like.

Save the new skinny gradient image as a jpg file and export it from The GIMP.

An export jpg window may come up as you save the jpg file. Click “Export” to save it.

To place the gradient in your Web page add a couple lines to both the header and body tags in the CSS stylesheet:

background-image: url(skinny-gradient.jpg);

background-repeat: repeat-x;

This tells the browser to repeat the skinny gradient across the page, but not down the page. Save the gradient jpg in the WordPress theme folder and now it becomes part of your new theme.