In This Issue

  1. Welcome
  2. This Month's Tutorial
  3. Resources

Welcome
I want to personally welcome back for our second newsletter.  I am going to devote this newsletter to two questions (one was asked by a second person also).  Those two member each got a new Photoshop CS2 book for their questions. Thanks John and Rick.

1. Can you offer some pointers for making images smaller for web presentation (i.e. file size / compression optimization)?

2. Scanning tips - How can you work around the bit pattern that shows up when scanning magazine content?


This Month's Tutorials
Optimizing Pictures for Web Use
When you start putting pictures on a website you will find out pretty quickly (especially if you have users with dialup instead of a cable modem) that file size is VERY important. Even if all your users do have broadband, you would still want the smallest pictures possible to avoid high bills for excessive server bandwidth.  There are two things to consider for this.

1. Picture size (height x width - not file size in megabytes) - Let's say you just got a new 8 mega pixel digital SLR (like me) that can output a picture at a huge size of 3456 pixels x 2304 pixels and you want to put that on the web for someone (of course if you have a ton of pictures, you will want to refer to last month's newsletter for information on Web Galleries. The first thing to consider is what the user is going to do with the picture.  Are they wanting to use it for a desktop background or do they just want to see what your new lawnmower looks like? If the item is to be a desktop background, then you will probably want to drop the image down to 1600 x 1200 pixels.  This alone will make a major file size drop (about 1/4th of original - if this does not make sense, sketch out a rectangle 34 x 23 units and then starting at the top left corner sketch out another of 16 x 12 units).  If it is just a picture of your lawnmower, you might drop it in half again.  This is the easy part - the second decision is compression.  I will assume you will be wanting to output a jpg since that will give the best size / quality combination (gif images are smaller, but only have a palette of 256 colors - this may be a problem if you have a very colorful picture.

2. Image Optimization (jpg compression) - Once you have your image to the size you want, you may just be tempted to click "File" and then click "Save As" - this would be a mistake and you would be missing out on one of the greatest features of photoshop for web users (it has been in Photoshop since version 5.  Instead of that, click "File" then click "Save for Web" and you will be presented with a screen like this:

I did a photo shoot for a client yesterday and this is an image I used in an animation.  I would say that the first thing you would want to do is click on the 4-Up tab so that you can compare 4 different optimization settings side by side - it looks like this:

What this does is allow you to set up to 4 different optimizations and compare them all on the screen at the same time.  The more you compress a jpg image, the more compression artifacts you will see so you have to walk a fine line between small file size and acceptable image quality.  When you are in the 4-Up mode, you can click on any of the pictures and then go to the right of the window and play with the settings.  As you make a change it will be reflected in that window (note that file size and download time will also be updated.  If you would prefer download time for something other than 28.8, right click the image and you can change that. For most of the stuff I do, I tend to stick to the "JPEG High" or "JPEG Medium" presets since they seem to work well for me.  You can also change over to GIF and see what kind of file size you get there (and insure the color depth is not an issue). Once you decide which one you like best, click on it and click Save.  You will then be prompted to enter a file name. I use Save For Web every day and if you do much work for the web (or just want to optimize files for other use) I hope you will find it very useful.

Scanning Tips (or "What is that weird pattern in my scans?")
If you have ever scanner a page from a magazine at high resolution, you have probably been rather annoyed to see this ugly pattern on your screen:

These nasty patterns are called Moire patterns (pronounced more-ay). Webster's dictionary states moire patterns are "an independent usually shimmering pattern seen when two geometrically regular patterns (as two sets of parallel lines or two halftone screens) are superimposed especially at an acute angle". You can notice these outside of the computer also (hold one comb over the top of another and rotate one a little).

These patterns are a result of the way images are printed combined with the way the scanner works. If you look very closely at a magazine you will notice they consist of  tiny coloured dots ink in a grid-like pattern. Scanners sample individual dots on an image in a grid pattern. The combination of the grid pattern in a printed image, and the scanner's scanning grid combine to produce a moire pattern of circles and dots in the final image. Luckily for use, most scanners drivers have a "descreen" option which will reduce this problem. There are more involved methods of removing the pattern, but this one should be more than adequate for most use. Go ahead and start to scan a picture. In your settings window you will most likely see an option for "Advanced Mode" or "Custom Settings".  Click on that and you will be presented with something like the following:

I have highlighted the option you want to turn on (if given a selection for media type, be sure to select the appropriate one since magazines and newspapers are printed at different resolutions).  Once you check the box you will notice that what once looked like the left side of the picture below smooths out to look like the right side of the picture (these are blown up several times their normal size to show the detail.


Resources
Here is where I will tell you about resources for learning Photoshop.

NAPP
Membership for one year is only $99 and in addition to getting 12 issues of their magazine, you will often get a free dvd, booklet and cd filled with training videos, samples and tutorials. You also get various discounts on car rental, services at Kinko's, as well as a website filled with thousands of tutorials. If you think you might be interested, pop on over - you will love it.

Canon Photoworkshop
Canon has some online learning for their EOS camera.  Some of the training is generic enough for any camera.  You may want to give it a look.

Free Web Seminars
I came across a bunch of seminars from Adobe - check them out.


Closing
Well, this wraps up our second official newsletter - I hope you found it to be helpful and interesting. I am willing to go in whatever direction everyone wants just take a moment to send me your thoughts. Was this too basic? Too advanced? Just right? Drop me a line at stjacobphotoshop@klompy.net and let me know. If you have a question send it in and I will give you something.

Thank you very much.

PS - I am planning on having a physical meeting soon.  Any preference for day or time?