Forum Moderators: not2easy

Message Too Old, No Replies

Crisp Screen Shots

from the web

         

txbakers

3:21 am on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I need to make CRISP screen shots at 300dpi of my websites for a print brochure. I'm using Fireworks and can't seem to keep the crispness as I reduce it from actual size to make it fit.

Is there a trick to doing this?

bedlam

6:17 am on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi,

I'm not a print guy, but 'dpi' only really makes sense when you're dealing with dots of a particular size. What you'll have in the first place when dealing with a screenshot is an image the measures a certain number of pixels in each dimension. Turning it into a 300 dpi image is a matter of sizing the dots it's made up of to match the size of the other dots in your print ready materials. To put it another way, '300 dpi' is a way of telling the software how big the pixels must be in printed output.

In Fireworks, the resolution of the source image is likely going to be displayed as 72 dpi (this may or may not make sense; Fireworks assumes a particular pixel size, but if your screen resolution is higher, 72 pixels in the image will be less than an inch...) You want to go to 300 dpi, but you have to do this by changing the size of the pixels, not by changing the number of pixels. If you simply tried to increase the resolution of the image that way, you'd just split each of the original pixels into approximately sixteen identically coloured pixels.

So, in the Fireworks dialogue (Modify > Canvas > Image Size), uncheck the 'resample image' box, and change the resolution to '300dpi'. This doesn't change the image, and you have not resized it. In all likelihood, you won't need to actually resize the image (or at least not much!) - a screenshot from my 1148 x 832 screen only yields a 3.827" x 2.773" image at 300dpi.

-B

incrediBILL

6:34 am on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



First, I would suggest starting with the largest resolution your screen has to give you the most pixels.

Next, use PHOTOSHOP if you have it as their resizing algorithms seem to be much smoother.

Last but not least, if you're shrinking or stretching to fit a specific size do it in smaller increments and sharpen a tad along the way. For instance when I take a screen shot and convert it to a thumbnail where I was the details to look crisp, going from 1024 to 200 pixels wide in one shot loses way too much information and it looks terribly muddy. Instead I reduce from 1024 to 800 to 600 to 400 to 200 and it retains a better image representation of the important data as it's dealing with more incremental changes and the important details tend to stand out better. Likewise, I would assume scaling up would work about the same.

bedlam

2:32 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First, I would suggest starting with the largest resolution your screen has to give you the most pixels.

This won't make a difference. A 200 pixel wide web graphic is always 200 pixels wide no matter the screen resolution - changing screen resolution just changes the size of the individual pixels.

As I mentioned, the only way to get more pixels out of a bitmapped image is to break the existing dots [pixels] into smaller pixels, and this results in no increase of detail because what used to be a single pixel in a single colour will simply become multiple, identically coloured, adjacent pixels.

-B

lZakl

3:31 pm on Jun 24, 2005 (gmt 0)

10+ Year Member



^^ bedlam, your logic is understandable, but consider the definition of resolution for a second. When I say the resolution of my monitor is x by x, am I talking about dpi? When we talk about resolution of a picture, we should be talking about it's physical size, not the dpi. I can have a camera that takes a 72 dpi picture at 5000 x 5000 px and have a pretty high resolution photo. That being said, increasing the dpi on this photo, before any work is done, to 300 pdi is a good idea. Breaking those dots down, helps preserve the original content as you scale the photo. So in fact, it IS a good idea to start with a high resolution photo. ;0)

-- Zak

bedlam

4:23 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



When I say the resolution of my monitor is x by x, am I talking about dpi? When we talk about resolution of a picture, we should be talking about it's physical size, not the dpi.

Almost correct. If we're talking about a printed object, we can talk about physical size, but if we're talking about a digital image we can't. How big is a pixel?

I can have a camera that takes a 72 dpi picture at 5000 x 5000 px and have a pretty high resolution photo.

No you can't ;-) Your camera has does not take a '72 dpi' picture. 'dpi' doesn't make sense outside of a context where the dots are a fixed size. This is not the case with pixels on electronic devices (notice that an an area of pixels on your desktop monitor the same size in pixels as your camera's lcd is a different size).

That being said, increasing the dpi on this photo, before any work is done, to 300 pdi is a good idea. Breaking those dots down, helps preserve the original content as you scale the photo. So in fact, it IS a good idea to start with a high resolution photo. ;0)

Sorry, this is simply wrong. Have another look at my first post.

The issue is information ('detail' if you like). If you subdivide the pixels in an electronic image, you have categorically not increased the amount of information. By way of analogy, if you subdivide the words in this post and count the number of letters, you will get a larger number, but there will not be any more information than if you had just counted the words in the first place.

Here's what happens if you increase the number of pixels in the screenshot (i.e. resampe it) and then bring it directly into your already ready-for-print artwork: the screenshot looks 'pixelated' and blocky. This is because, though you've increased the number of pixels in the screenshot, you've done nothing more than turn each original pixel into approximately 16 identical pixels (300 / 72 is almost 4. An item 4 times the width and height of another occupies 16 times the area of the other).

When you bring this screenshot into the ready-for-print artwork, it looks exactly the same as though each it's made of pixels 16 times the size of the other pixels in the print artwork. Try it.

This is why you want to change the resolution setting in the graphics program to 300 dpi without resampling. This effectively decreases the size that the pixels will appear when they're printed.

If you then import the screenshot into the print-ready image, you'll see that the pixels in it are the same 'size' as the other pixels in the image (zoom in; you'll see that the original parts of the image and the imported screen grab break down or 'pixelate' similarly). Again, try it, and you'll see what I'm talking about.

-B

SuperNovaCain

4:46 pm on Jun 24, 2005 (gmt 0)

10+ Year Member



Hi guys,
This is the begining of a wonky explanation, but let me give it a try...

Your screen resolution has little to do with dpi except in the vaguest sense of the term.
For it to mean anything, you would have to choose a screen resolution that truly measures 1 inch (real world, on your screen) when you display a 72dpi image.
Since your screen resolution is actually just an arbitrary scale that you choose to view by, dpi becomes meaningless. You "view" content in an aspect ratio, relative to the "screen resolution" you choose as compared to the true measurement of your screen.

With me so far?

When "Printing", this ratio is non existant because obviously, 1 inch... is 1 inch.
If you put 72 pixels across 1 inch, the human eye will see the pixels. It's not until you pack 250ish or more pixels in 1 inch that the pixels become individually indiscernable and blur together to become a smooth image. Under magnification you will of course still see the pixels.

Here's your dilemma...
Screens display at 72dpi. (no matter the actual measurment of the image across your screen).
So, if... for example

you have a 72px X 72px image (1 inch X 1 inch), displayed on your screen. It is irrelavant whether your screen resolution is set to 800x600 or 1024x768.... the image will appear larger or smaller onscreen (and in all likelihood never physically be 1 inch), but it's still only 72x72 pixels worth of information.
When you do a screen capture, you will only have 72 pixels by 72 pixels.

(Bedlam - got it right)
(incrediBILL - sorry, but for your # of posts, I have to say, you've included a serious amount of incorrect information)
(IZakl - Ignore your dpi, the important part is how much information your image has... you will never have more than the 5000 x 5000 pixels that your original image started with. You can't "increase your dpi" and get MORE detail out of the image.)

So what's the solution...
You have a couple of options to get the resolution up to "Print Quality".

1) Print the image at 300dpi... This of course means the the print version will be approx 1/4 the size of the onscreen version.

This is a key point where incrediBILL was wrong... onscreen this would show a terrible degradation, seeing a 72dpi image displayed at 1/4 it's original size (since screens display only 72dpi and you are trying to see 300px in 1 inch, obviously the screen is only displaying 1 pixel for every 16 [approx 4px X 4px])... but for print, all the details will still be there

(Side Note: Everytime you "manipulate" an image, it will degrade... so resizing 5 times, down to a certain resolution will do more damage than doing it in one step)

2) Convert the image to 300dpi while constraining its proportions... this means you will print 1/1 and it will truly be 300dpi BUT it will also just be a 300dpi representation of a 72dpi image. In effect, a high quality version of a low quality image, and actually no different than simply printing the 72dpi image at 1/1. It will be visibly pixelated exactly like printing the original.

3) I've never done this but I'm sure something must exist. Anyone who knows, please jump in here. Take #2 and apply some "smart" smoothing to it. There must be image editing software/plugins that can do decent, intepretive, massaging of images, such that screenshots can be cleanly printable.

This may not have helped you get what you want, but if you understood everything about what I've said then you will understand "why" you are getting the results that you are.

SuperNĪvaCain

Mr Bo Jangles

5:03 pm on Jun 24, 2005 (gmt 0)

10+ Year Member



This is a very interesting thread, and I've already had some success from trying some of what has been offered.
At the risk of hijacking txbakers original question, could I 'expand' it to cover the topic of images in .pdf docs and how one might get stuff in a .pdf that looks good on screen and prints well - is there a secret to that?

Cheers,

willybfriendly

5:33 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



txbakers - try an unsharp mask filter and see what happens. If that doesn't work. try to reduce it in increments, running a sharpen filter each step of the way.

I am not familiar with Fireworks, but these options are available in Photoshop and GIMP.

WBF

incrediBILL

6:00 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



(incrediBILL - sorry, but for your # of posts, I have to say, you've included a serious amount of incorrect information)

I'm a not a graphics pro - just offering suggestions, number of posts has nothing to do with my knowledge of graphics software :)

But when it comes to thumb reduction I know mine are crisp, enlargements and print material I haven't done, just web stuff.

txbakers

6:23 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm giving up.

Rather than try to capture the screen shots, I'm going to rebuild the screen in miniature in Fireworks using all kinds of mini fonts.

Oh fun.

moltar

6:25 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I agree with incrediBILL on scaling step by step.

Many people do not beleive this for some reason. I didn't either at first. But when I tried it with the same image scaled 2 ways side by side I clearly saw the dramatic difference.

SuperNovaCain

6:25 pm on Jun 24, 2005 (gmt 0)

10+ Year Member



incrediBILL
Sorry, didn't mean for it to sound so personal. I didn't mean it that way.

Your process for downsizing will in fact work better than a 1 step downsize BUT for different reasons than what you explained, and I didn't think it was necessary to get into it.

Cheers

SuperNĪvaCain

txbakers

10:47 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I found a software that will make a pretty darn good rendering of a 72dpi screen shot into a 300dpi image for printing - PhotoZoom Pro by Shortcut Software.

So far it's looking pretty darn good!

monkeythumpa

9:54 pm on Jun 27, 2005 (gmt 0)

10+ Year Member



I make printable screen captures all the time. The only way to do it and get your "crispness" is trace it with your favorite vector program. You can get a really accurate reproduction with a little time, cutting and pasting, and access to the high res images when you need to use a raster image. I then blow my screenshots up to poster size and hang them in the halls.