Web Development Tips and Tricks

Last modified - 03-19-10

How to use this site:

This site features various tips and tricks as well as solutions I've found while doing web and Flash development. Most of the information that I've found on these subjects has been through tutorials. Two sites I've found to be particularly useful are Actionscript.org and World Wide Web Consortium (W3C) www.w3c.org. Both offer a wide varied of tutorials on various subjects all completely free. They offer these tutorials to better the web though open source. That's why I'm here. I've used their knowledge to make my work better, now I hope you can use my tips and tricks to make your work better and so on.

Getting a printable image from a still-screen capture.

Have you ever had a client ask you to get a screen capture of some software, or a website, or anything that can appear on screen and then include that screen shot in a printed proposal? If you have, you have probably run into the following problem. When you create your screen capture and go to print it out the image become extremely pixelated and looks aweful. Here is the solution to that problem.

  1. First of all you have to know how to make a screen capture. It's easy on both a PC and Mac. On a PC you simply hit the Print Screen key on your keyboard. On a Mac you hit Shift-Ctrl-Open Apple-4 and then drag the little target around the area you want to capture. Once you've done this the image data is stored on your clipboard.
  2. Next, open up your image editing software (Photoshop, Photoshop Elements, MS Paint, etc).
  3. Once the program is open you want to create a new blank canvas. File > New.
  4. Once the new canvas is open hit ctrl-v or Edit > Paste and the image data you saved to your clipboard will show up in your image editing software.

At this point you can save the image but if you try to print it you'll notice all the pixelation. The reason for this that screen resoltuion is 72dpi and Print is usually a minimum of 180dpi. That brings us to the solution. This is more of a graphics trick. What we're going to do is trick the computer into giving us more pixel data than we actually have. It's rather clever.

  1. First, in Photoshop go the the Image menu and select Mode and change the image to Indexed Color. Image > Mode > Indexed Color as shown in figure 1.1

    Change Color Mode to Indexed Color
    Figure 1.1
  2. Next, we're going to blow up the image. Usually this will pixelate the image but because we're working in indexed color mode the effects are not as severe. Go to Image > Image Size and increase the Resolution to 300. as shown in figure 1.2

    Change Resolution to 300
    Figure 1.2
  3. Finally we're going to change the color mode back to RGB. Image > Mode > RGB and save the file. Now you have something you can work with for print.

I hope this little tip helps you. As always if you have questions email me