Adding a semi transparent box to a picture

Requested by Yuki

Let's make into this

Paint shop pro (or the Gimp or Photoshop)
Open the picture you wish to add a box to, create a new layer.
On this new layer, use the select tool (rectangle or rounded rectangle)
Fill the select area with white or the color of your choice.
Go to the layers tool box (hotkey F8 for PSP8) and change the opacity of the layer.
Extra: I duplicated that layer, selected the box with the magic wand, contracted the selection by 2px and pressed delete to get the border.

Microsoft Paint
Make a grid in paint by superimposing lines, set the parts that will be transparent to a color not used on your original image (bright green or red for example). Here is the grid I used boxpgrid.gif.
Open that grid in Paint and cut it to the size you wish.
Click the select tool, then use the hotkeys CTRL+A then CTRL+C or right click menu to 'select all' then 'copy'.
Open the image you wish to add a box to in another Paint window, set the background color to the bright background color used on your grid by right clicking that color in the palette.
Click the select tool, then use the hotkey CTRL +V or right click menu: 'paste'.
Choose a color, zoom in and flood fill the grid.
Add a border using the rectangle shape tool.
Extra: I colored mine green.

Code trick
Create a new page called image.html in notepad.
Add an image code to make your picture appear: <img src="cow.jpg">
Add a semi transparent div: <div style="background-color: #ffffff; filter:alpha(Opacity=50); width:150px; height:300px; border: 2 solid #000000; position:absolute; top:40px; left: 40px">
You can edit the code above to change the color, the opacity (that's the transparency), the border, the size and where it appears on your image.
Then screencapture and crop what appears when you load image.html in your browser to get your image with box!
Note: you can also add the div to your html directly so you don't have to edit any images!