Creating Product Images for Your Website With GIMP

Some people might want to take product images to put on their websites, but it's hard sometimes to make them look nice.  Feathered edges is an elegant touch, and here's how to do them.

First off, let me thank the stock.xchng site for yet another free picture.  It’s where I usually go when I’m a-hunting for images to use on my own site.  FYI, the people I’ve contacted seemed happy that I liked their images and thanked them…

So, onto the walkthrough.

First off, you’re going to need GIMP.  It’s a free “photoshop-ish” app, available at gimp.org, that’s both free and open source.

Next, you’ll need a picture.  I picked some white silk to imitate what people might be resting products on during the photo shoots.

There are a couple of select tools.  Click on the next image (a couple of paragraphs down from here) and you can see that I’ve got arrows drawn to these.  One selection tool is a rectangle (and if you use this, you can round the corners to soften the edge), one is an ellipse (the one I used here — there’s an arrow pointing at it), a lasso (you just kind of draw a line willy-nilly and that becomes the edge of your selection), and a magic wand.

The wand is a little hard to explain here, but suffice to say that one use would be to click on something red, and any other red pixels touching where you clicked would be selected.  Were I to click on one of my arrows with the wand, the whole arrow would be selected.

With the rectangle and ellipse tools, you can opt for perfect squares or circles as well by checking the Fixed box and leaving Aspect Ratio alone in the drop down next to it.

So, check the Feather Edges box and set the pixel slider for whatever you choose.  I did 60px, but the initial image I was working with was around 3500px wide.  You’ll have to dork with this a few times before you get the feathering you like.

Draw something (with whichever select tool suits you) around where you want to crop your image.  You should have the “marching ants” now, and what you’ve got is what’s called a selection.  You’ve selected everything inside of your square/circle, but what you want is everything OUTSIDE of it to be selected instead.  Go to the Select menu (between Edit and View) and pick Invert.  Now you’ll see marching ants along your selection path, and also along the image boundaries.

Cut out the selection with a Ctrl + X (that’s holding the Ctrl key and pressing the X key as well) and you’ll end up with this, or something like it:

That’s IT!  Mess with the feathering slider, with rectangular vs. elliptical, rounded corners, etc.  Eventually, you’ll find what’s going to work on your site.