This tutorial explains how to save images for sharing on the web or in online galleries.

When you layout is complete, the first step is to flatten your layers. Doing this prevents your layer styles from needing to be rescaled when your image sizes is reduced, which can happen on occasion, particularly in Photoshop Elements.

To flatten your layers, go to the layers palette and click on the more button in PSE or in Photoshop, the small button with a triangle pointing to the right of your screen.

From the menu which appears select flatten image.

This will flatten all the layers in your layout to a single layer.

After you have done this it is time to resize your image. In the digiscrapart.com gallery, the maximum size you can upload to our gallery is 600×600pixels, and 125kb. In your image menu, select Resize> Image Size. (or in Photoshop just select Image Size)

In the window that appears, you can select the size you wish to make your image.

Firstly ensure that Resample Image is checked so that you are able to access the pixel dimensions portion of the window. (constrain proportions should also be checked) In the Width and height the maximum amount of pixels should be 600. You may make it smaller if you wish however 500-600pixels is a good viewing size for the web. For a square image, you can resize it too 600×600 pixels, and for rectangular images, the maximum Width or Height is 600pixels. Just change the largest Dimension to 600 and providing Constrain Proportions is checked, the other dimension will change automatically. Once you have changed the amount of pixels to 600 or less, click on ok. This reduces the viewing size to a suitable size for viewing on the web.

Next we need to save our image for the web. This allows us to reduce file size as much as possible without reducing viewing quality. (do not use this method for layouts you wish to print)

Go to your file menu and choose Save for Web.

A new window will appear with two versions of your image. (in Photoshop you may need to click on the 2 Up tab) On the left is your original image and on the right is the sample of the image as you adjust its compression settings.

In the Preset box, ensure that you have JPEG selected in the box for file types. To the right of this box is a Quality box. This is where you adjust your compression level. Adjusting the level in the Quality box directly effects the file size shown under your sample image. The aim is to get the maximum viewing quality possible, with minimum file size. Play with the levels in the Quality box and see how it affects your sample image in comparison to your original image. Brightly coloured or high contrast images tend to be large file sizes than lower contrast images.

To be able to upload your image to the digiscrapart.com gallery, your image file size must be less than 125k. Check the file size under JPEG shown as above below the sample image. Generally speaking you should be able to keep your images under 100k for most layouts. If you need to zoom in to get a better view of the effect of the compression, you can click on the magnifying glass at the top left and click on your image to zoom in. (hold down the alt key and click to zoom back out)

Once you are happy with your adjustments, click on the Ok button.

Be sure not to overwrite your high resolution images by saving as the same name. You might like to put -lowres or -forweb at the end of your file name to indicate that the image is a low resolution image for web/email viewing.

Once you have named your file and chosen an easy to remember place on your hard drive to save it, click on Save, to save your new, low resolution version of your image.

Tip: When going back to your image in PS or PSE, remember not to resave your original as your full printing size will be lost. You may wish to undo your sizing and layer changes before saving again, or in Photoshop you can click on Revert in the File menu to revert to the last saved version.

© Robyn Gough 2006

All Rights Reserved

Not to be reproduced without express written permission.

Below is a photo with six different drop shadows to illustrate the different effects a drop shadow can give.

The first image has a subtle drop shadow, a short distance from the image, with the shadow being heavier on two sides of the photo, illustrating that the light source is coming from the top left. The small size of the shadow also suggests that the photo is likely to be directly on top of the background paper as it might be on a traditional paper layout.

The second photo has a heavier and larger drop shadow again heavier on two sides of the photo indicating that the light source is coming from the top left. The increased size and softness to the drop shadow makes the photo appear that it might be further away from the background paper. Such a shadow might also be used for objects such as page pebbles, or other embellishments which would appear to be thicker in real life than a photo. In this instance, used on a photo which is less than a millimetre thick, it makes the photo appear to float on the page.

The third photo has a very large drop shadow and is much softer looking than the previous two. The shadow has dispersed just as shadows do in real life when an object is a distance from something. The closer the object is to where the shadow is being cast, the darker, smaller and sharper the shadow will become. This shadow makes the photo appear as if it is floating some distance above the page and does not lend itself towards a realistic looking paper style layout as much as the first shadow does.

The fourth photo has a small brown drop shadow with the colour altered from black to dark brown. The shadow is set at zero distance giving an even size around the photo and indicating that the light source might be directly above the photo. This form of drop shadow gives a lovely soft look and is useful for creating a realistic and soft looking shadow around the photo. This effect is particularly useful for freestyle layouts and a variety of other effects and looks.

The fifth photo has a larger, softer drop shadow, at zero distance with the colour altered from black to dark brown. The shadow has also had noise added to give a less even look. The size of the drop shadow does not lend itself to a realistic photo on top of paper look, however it does almost give the appearance that the photo is set behind the paper instead of on top of it. To enhance this effect you may wish to reduce the opacity of the shadow and include an inner shadow on the photo itself. It is another style of drop shadow which may be useful for freestyle layouts.

The sixth photo does not look at all like it has a drop shadow but like it has a frame around it or that the paper may have been embossed. This look was achieved by using zero distance, changing the colour to dark brown and experimenting with the contour of the drop shadow. Once again, not a very realistic looking drop shadow, but perhaps an interesting effect to experiment with!

Knowing how to make the most of your drop shadows is a very useful tool to have under your belt and it can be fun to experiment with them. Why not give it a go in your next layout?

© Robyn Gough 2006

All Rights Reserved

Not to be reproduced without express written permission.