newbie screen-shot reduction question...

[Frankster]

Greetings to all!

I'm just starting to learn about web graphics. I'm hoping some kind soul(s) will provide some assistance. Here's my problem...

I'm a LAN adminsitrator, and I want to create some intranet tutorials of software procedures for my staff. I know how to capture screen images, but I'm having trouble maintaining image quality after reducing their size.

I have access to Photoshop 6, Illustrator 9, HiJaak, and the Macromedia suite (but I haven't yet used any Macromedia products).

I've found a previous thread (410.htm) where a nice person named "Mivox" offered some Photoshop advice - something to the effect of 1) switch to indexed color, 2) increase the resolution (by some multiple of a power of two), 3) then "reduce the image dimensions by an even number...reduce an 8"x8" image to 4"x4" or 2"x2"".

I'm still having problems. Could someone elaborate? Although I can specify that Photoshop reduce the image dimensions, this seems to be counteracted by the increased resolution - at least as far as the browser is concerned, meaning that, within the browser, the image size is determined by the pixel dimensions. Am I making sense?

Thanks!
Frank

[BlobFisk]

Welcome to WebmasterWorld, Frankster! Check out Marcia's excellent WebmasterWorld Welcome and Guide to the Basics [webmasterworld.com].

If the screenshot has lots of text, the more you reduce the size the more you will loose quality. It may help if you change your monitor resolution to 800x600 and capture the page with your browser maximized.

Maintaining the aspect ration is important - you can do this in Photoship by clicking on the chain link icon within the Image Size dialogue box.

How small are you trying to reduce the screen shot to (in pixel dimensions)?

[mivox]

After you increase the resolution to 288ppi and reduce it down to the dimensions you want -- say, 4x4 -- what happens if you reduce the resolution back down to 72ppi?

[Frankster]

Greetings to all,

Thanks for your speedy reply!

>> Welcome to WebmasterWorld, Frankster! <<

Thanks!

>> If the screenshot has lots of text, the more you reduce the size the more you will loose quality. <<

Absolutely. I'm finding that out.

>> Maintaining the aspect ration is important - you can do this in Photoship by clicking on the chain link icon within the Image Size dialogue box. <<

Yes, I've been doing that. I've always maintained the original aspect ratio.

>> How small are you trying to reduce the screen shot to (in pixel dimensions)? <<

Good question. Subwindows are usually not a problem, since they're usually small enough to use as-is. It's the full window shots that are problematic. If I could reduce a full window capture down to 60-75% of it's original size, then that would be great.

Thanks,
Frank

[Frankster]

Greetings to all,

Thank you for your speedy response!

>> After you increase the resolution to 288ppi and reduce it down to the dimensions you want -- say, 4x4 -- what happens if you reduce the resolution back down to 72ppi? <<

It looks pretty bad! As I understand your suggestion, we increase the resolution (to give the graphics algorithms more flexibility and power when cranking down the dimensions), then we crank down the width/height dimensions while maintaining the original aspect ratio, then we crank down the resolution.

Does this generally work for you? If so, then I'm doing something wrong.

Now haven't been doing alot of experimenting with this, but the attempts I've made so far have not been encouraging. I thought it best to check in with the experts before pursuing further.

Thanks,
Frank

[amznVibe]

I've found that reduction on even pixels helps alot (ie. reduce to 20% not 23%) make sure you are using a RESAMPLE fuction for better quality and you are going to have to use a sharpen mask at 5-10% increments to get the text pixels to be defined enough.

IMHO, using photoshop for screenshots is like hitting a small nail with a sledgehammer - you can get the job done but its overkill. I use Irfanview for stuff like that. But its up to you to use whatever you are comfortable with.

If you can, adjust the screen display (in your code) before the screencapture for darker background color and lighter text colors for greatest contrast on reductions.

[mivox]

Hmm... you might want to try skipping the index color step, and try saving as a high quality JPEG? Doing it in print, you can just up the resolution to save the details, but if you're trying to stay at 72ppi/screen resolution, I don't know if it can really be done well as a GIF...

My suggestion would be -- if you're trying to use a screenshot to illustrate a step-by-step process or something complex like that -- take a bunch of 'zoomed in' photos of individual parts of the process, so they don't have to be taken down as small.

[BlobFisk]

Adding to mivox'x suggestion of using zoomed-in captures of the process, Opera is a great browser to use for this.

The reason I say this is that Opera has a zoom function that allows you to zoom into a page area (by percentage)... perfect for screen captures of text intensive pages.

HTH

[Frankster]

Greetings,

Thanks to all of you who have responded! You've been most kind in sharing your wisdom. I've got my homework now; I'll take your suggestions, do some experimenting, and then get back to you.

Take care,
Frank