Throughout the month, Steve at Teach42 has been writing about how to become a better blogger. The tip for day 25: Add a picture.

He suggested a few types of pictures that you might include – product logos, mash-ups/charts, stock photos, and screenshots.  That’s the topic I’m interested for the day.

Steve suggested that you might need some third party software to take screenshots on a Windows PC. It’s a common misconception, but entirely untrue. I commented there with some suggestions for screenshot taking, but I thought it’d be a good topic to expand on a bit.

Taking a Screenshot the Easy Way

First, find the screen you want to shoot. Open the website, open the application, start playing the game. Do whatever it is you want to capture.

Then hint the “Print Screen” button.

And… you’re done.

Uhh…. Now What?

Now come the options. When you press the “Print Screen” button (usually found just above the “Insert” button on US-layout keyboards), Windows captures an image of the current screen and stores it on the system’s clipboard. (Note: The mouse cursor is not displayed in this screenshot).

In order to make the screenshot useful you need to get it out of the Clipboard and into an image editing program.

The simplest thing to do would be to use Microsoft Paint, since it’s built into every Windows system. After opening paint, hit Ctrl-V to paste the image onto the canvas. (Note: You could also go to Edit -> Paste, or right click on the canvas and choose Paste.)

The document should automatically resize to include the entire image. If you only wanted a screenshot of part of the screen, use the rectangle tool to outline the portion you want to keep, then click on Image -> Crop. This will resize the canvas to include only the selected portion of the image.

No third party application necessary.

But a Third Party App Wouldn’t Hurt…

It’s certainly unnecessary to download or buy anything to take a screenshot in Windows. However, it would be helpful to have a more powerful image editing program than Paint.

My two favorites: GIMP and Inkscape. Both are Open Source, therefore both are legally free. They’re also awesome.

GIMP is a photo/image editing program similar to Adobe Photoshop. Most of what you could do in Photoshop can also be done in GIMP. I’m pretty sure you can do just about everything, but I’m not experienced enough with either to know for sure.

You might, for example, shade the entire screenshot and only highlight a certain portion of it to draw the viewer’s attention to something important. 

Although you can paste screenshots directly into GIMP, it won’t automatically resize the canvas like Paint does. In order to do that, you should use the File -> Acquire -> Paste as New option (Ctrl-Shift-V is the keyboard shortcut).

So… go take some screenshots and use them on your blog. Shoo.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.

[Editor's Note: GIMP is also available for Windows, and this method will work fine in either a Windows or Linux environment.]

Create a Blank Image (120px x 120px)

First thing – fire up GIMP and create a new image. Usually a gradient background image is 1 pixel wide. For now we’ll create a bigger image so it’s easier to see what we’re doing – 120 pixels by 120 pixels. You can crop the image down to a 1 pixel width later.
 

Set the Foreground and Background Colors

When you create a gradient, you need to set two colors – the beginning color (usually the foreground) and the ending color (usually the background color). To change these colors, click on the square swatch of the foreground color in your toolbar (see the circled area in the screenshot to the right).

This should bring up a box titled, “Change Foreground Color.” Pick a dark color – I used #981313. Then, click on the Background Color Swatch (the one right behind the Foreground color). Change the background color to a lighter version of your foreground color – I used #f17b7b.

Select the Gradient Tool

Now that you’ve chosen the two colors, you’re ready to create the gradient. Click on the “Gradient” tool – it’s the square that fades from black to light gray. See the screenshot to the right. There are a bunch of options you could customize, but for a standard gradient background image you’re better off leaving them alone.

Draw the Gradient! Then Crop Away

Now you can actually create the gradient by clicking and dragging on your image canvas. Position the tool at the top border of your canvas (if you look in the bottom left, it’ll tell you when you’re over pixel “0″). Hold down the Control button to force GIMP to draw a straight line, and drag the cursor down to the bottom pixel of your canvas.

Let go. Voila! You’ve got a nice gradient image created.

You could use it as-is in your css stylesheet, but it’s usually a good idea to trim your picture to 1px wide. The browser can simply repeat the image across the entire width of the element – so making it wider than 1 px is simply wasting bandwidth. Go ahead and crop the image now, and in the future make your gradient images 1 px wide by whatever height you want.

Now, let’s write the css to use this as a background image for an html element.

.gradient {
  background: #f17b7b url(images/gradient.png)
    repeat-x top; }

There’s four pieces to this shorthand css declaration.

• #f17b7b sets the background color. This is the same as the bottom color in our gradient, so that if the container is taller than the gradient image it seems to blend smoothly.
• url(images/gradient.png) sets our gradient image as the background image. Make sure you change the path to where-ever you uploaded your gradient image.
• repeat-x tells the browser to repeat the image left-to-right for the entire width of the container. This is what makes our 1-pixel background image “stretch” across the entire width.
• top simply tells the background image to align itself to the top edge of the container. Not always necessary, but your better safe than sorry.

And that’s all there is to it. Create an html element with class gradient and it should have your lovely gradient background.

So get to it. Start drawing.