The Photoshop Tip of the Week for the Clients and Friends of Ben Willmore
(www.digitalmastery.com):

We haven't talked about web related tips for quite awhile, and since most of us are exposed to the web in one way or another, I think it's time to reexamine that area. I'm in the process of creating a bunch of ImageReady tips (the web graphics editing software that comes bundled with Photoshop) and I'll share them with you when they're ready. Until then, we'll stick to Photoshop which is no slouch when it comes creating web graphics.

I find that most people scan their images with a resolution of 300. That's fine, if your end result is destined for print, but it's way too high for the Internet. When scanning an image for the web (or to just e-mail to a friend), I usually use a resolution setting of 85 pixels per inch (PPI, but often referred to as DPI). That will make it so your original should appear at something close to actual size in a web browser.

When you open an image in Photoshop, it will zoom out far enough so you can see the entire image. To see how large you image will appear in a web browser, double-click on the Zoom tool in your Tool palette. That will get you to 100% magnification, which is how your browser displays images. If you find that's too large, then open the Navigator palette and move the slider at the bottom until the image looks like the size you'd like it to be in a browser. Note the percentage listed in the lower left corner of that palette and then choose Image>Image Size. Next, make sure the Resample Image checkbox is turned on and then set the width pop-up menu to Percent in the Document Size area (i.e. the bottom portion of the dialog box). Enter the percentage that was shown in the Navigator palette and then click ok. Finally, to make sure everything worked out, double-click on the Zoom tool once again and your image should be the size you desired.

The resolution setting attached to your image isn't used when displaying an image for the net. Only it's width and height in pixels determines its size. So, resolution is only important when you are scanning an image (the higher the scanning resolution, the wider the image will be in pixels). After the image is scanned, just use the technique I mentioned above to get the size just right.

Ok, now let's shift gears and talk about creating images. One thing that seems to be rather popular these days are graphics with a striped look. Just visit www.ibm.com to see what I mean. We'll you can easily create that look with the following technique: 1) Choose File>New and create a document that is 1 pixel wide, two pixels tall and has a transparent background (the resolution setting doesn't matter). 2) Zoom in on the document so you can see what you're doing and then use the Pencil tool to fill just one of the pixels (be careful not to fill them both). 3) Choose Select>All and then Edit>Define Pattern. 4) To apply the striped look, select the area you want to fill, choose Edit>Fill, set the Use pop-up menu to Pattern, then click on the pattern preview and then choose the bottom pattern from the list. Images that use this pattern are best saved in the GIF file format.

You can also apply the pattern we just created by choosing the Pattern Stamp tool (just click and hold on the Rubber Stamp tool to find it). But, before you start painting with that tool, be sure to click on the pattern preview in the Options Bar at the top of your screen (in 6.0 only).

Once you're done creating an image, choose Image>Trim (in 6.0 only) and use a setting that points to the background color of your web page (or any color that isn't needed in the document). That will remove all extra solid areas of color that match the background color of your web page, and will therefore reduce the file size of the final image.

It seems like there are a lot of people that aren't aware that Photoshop can create a complete photo gallery out of a folder full of images. To do so, choose File>Automate>Web Photo Gallery. Ok, now here's a tip about that feature. You can edit the overall look of the templates by editing the HTML files that appear in the Photoshop>Presets>WebContactSheet folder.

In my next installment of web tips, I'll concentrate on Adobe ImageReady (which came bundled with Photoshop 5.5 and 6.0). I hope you're having a great week. Talk to you soon.

-Ben Willmore