In this tutorial I'll be covering some questions asked by members of the AHS E-Mail Robin concerning resizing, image formatting and Photoshop layers. We'll also be discussing alpha channels and what all are involved with these most useful things called layers.

Resizing is something we are often called upon to do. With today's multi-megapixel cameras we often will find ourselves needing to scale down an image for use on the web, to send someone as an e-mail attachment or for use in a publication - each of which may require special considerations in the process. Therefore, it's probably a good idea to discuss the Image Size Dialog, and what the major options are and what some of the implications are for different purposes and tasks.

My Canon Digital Rebel is a fine camera, but it's already two full generations older than the current model. Mine is a 6.3 megapixel camera. The newer models are 8 and 10 megapixels. These large images are wonderful! My camera takes an image that is 11" x 17" at 180 dots per inch.

The key thing to remember is that when resizing you should try to only make images smaller. While Photoshop can and will enlarge images, when it does so it must 'make up' information in the process; something called interpolation. The results are usually pretty poor. Let me show you an extreme example to illustrate this point...

I have resized this image of Hemerocallis 'Siloam Double Classic' down to 350 pixels wide at 72 dpi. I then resized
it again down to 75 pixels wide and saved it...

Lots of things to look at here, so let's start with the pixel dimensions. 3072 x 2048. Notice that the "pixels" have the blue backed triangles to the right. This can be changed to reflect percentages if need be. Notice too that there's a black bracket to the right that has a small icon that looks like links in a chain. (It's supposed to look like that anyway!) This shows that the box below labeled "Constrain Proportions" is checked. When this is checked, if you change the width, the height will automatically be adjusted to retain the correct proportions for the image. To resize an image, just change the number of pixels to be what you need - or do it below in inches or click the triangle for centimeters.

Lee Pickles asked "Is there anyway in Photoshop to stretch an image one way? " Lee, if you uncheck this box you can resize an image's width or height independently. Quality of the results will vary depending on the 'stretch' imposed.

Generally, leave all three checkboxes below checked, however, or you'll get some surprises.

The other important piece within this dialog to consider is the Resolution.

Dealing with resolution could be a whole tutorial in itself. The key here is to understand that images are used for different purposes and each purpose may require a different resolution. This is actually a good thing since each purpose is served best by different resolutions.

For example, for working on the web, or for sending an image via e-mail, where the computer monitor is the final "use" for the image, the resolution recommended is 72 dpi or pixels per inch.

However, if you want to print an image, you would want a higher resolution image and what that resolution should be depends on your printer. Many printers today can handle 600 dpi output or higher. However, to make things really confusing, this doesn't mean you should necessarily have an image that can match the maximum resolution of the printer's highest quality output - you need to look at each printer manual and experiment. Often lower resolution give better results (Well, they do for me!)

If your final output is for printing by a commercial printer - say for a color newsletter, check with your printer to determine what resolution they require for their processes. It gets even more complicated since printers use lines per inch when creating the color print screens to produce the pictures so check with the printer.

Improper resolution for the purpose is why images on your computer screen don't print as nice as they look on the monitor. The screen resolution is 72 dpi, the printer often is 600 dpi or better. Look at the resizing example above, the same thing happens when you try to print an image from the web or e-mail, the printer and or computer must interpolate the data to the size of the image and you'll often get poor print quality - the same thing's happening as in the resizing up example above.

The key point here - images have different intended uses: web, home printing, commercial publishing. Each of which may require different resolutions to get you the best quality for each task. Save/archive the original image and resize appropriately for each task.

Now, let's look at image formats - another possible tutorial in itself, but I'm going to deal briefly with just four here: TIFF, PSD, JPG and GIF. What are the differences and what is each used for?

TIFF stands for Tagged Information Formal File. It's the highest quality 'flat' image and commonly the format requested by commercial printers. TIFF is a 'lossless' image format; there is no compression going on when the image is saved, thus retaining the most information and highest quality. TIFF images are also usually large.

PSD is Photoshop's native file format. When we begin looking at layers below and you want to save an image and make changes to the layers later, you MUST save a version of the file in the PSD format. None of the other formats mentioned here supports layers. Even if the eventual outputted format may be a TIFF, GIF or JPG file, saving the PSD is almost always a good idea, especially if you think you may have to make changes to the image at any point in the future. PSD files, because they support layers, can be very, very large however. The PSD format supports alpha channels - more on these later.

JPEG or JPG - Joint Photographic Experts Group - (Pronounced "Jay Peg").

This is the format of choice for photo images which must be made into very small files; for example, for web sites or for E-Mail. JPG is also used in digital cameras, but TIFF or RAW formats may be options too, in order to avoid the JPG Format.

Why avoid it?

JPG files can be amazingly small, often compressed to 1/10 of the size of the original raw image data. However, this compression comes with a very high price. JPG uses "lossy" compression (lossy here means "with loss of image quality and data "). Lossy means that some image data is lost when the image data is compressed and saved, and this data can never be recovered. This is another reason for always retaining a PSD file image - the compression and loss of data occurs during the conversion to the JPG format.

Photoshop offers a Save For Web... option in the File menu. The key here is to work in the .psd file format up until the image is completely scaled, adjusted, labeled, and/or what ever else needs to be done. Save the image in psd format and then as the last step do a Save For Web... while ALWAYS retaining the original .psd. If you have to go back later to modify a .jpg file and do a Save for Web... again, further data and quality will be lost.

Photoshop and most other graphics program let you set the amount of compression during the saving process; smaller file sizes means more data and quality loss but load faster on the web, especially over modems.

GIF - Graphics Interchange Format.

This format includes some features which makes it a unique and a valuable format for the Internet. These features include file compression, transparency, interlacing and storage of multiple images within a single file (which allows for a primitive form of animation). This is the only web file format here that supports a "transparent" color in the image (web browser can't display .psd files). GIF files are also responsible for the annoying animated pop-ups and dancing/moving images on web sites. Their biggest "problems" are they only support a maximum of 256 colors in any one image and they are inappropriate for printing purposes of any kind. Their advantages are they can be very small when needed, can be animated and have parts that can be transparent.

Transparency leads to our discussion and demonstration of Photoshop Layers.

When you first open an image in Photoshop there is only one layer - the background layer. By default the background layer is usually opaque and set to the background color - usually white. We'll look at how to get around the opaque issue below and just so you are aware, there is an option in New File to create the new image with a transparent background too.

There are a number of way to add additional layers to an image and each layer can have parts that are opaque, completely transparent or something in between.

An easy way to visualize Photoshop's layers is to imagine a photo with sheets of glass stacked on top of that background image. Each piece of glass represents a layer. If you place a leaf on each piece of glass, each layer can be moved independently with part of the layer still being transparent.

An alpha channel is the part of an image that describes transparency. We learned in earlier tutorials here that each pixel is made up of RGB or HSB values, in fact, each image has a Red, Blue and Green channel. The Alpha Channel adds one more item of data, a level of transparency for each pixel in the layers.

Photoshop has a layers palette - it appears by default on the right when you open a new image.

To demonstrate how layers work and some of their features, I'm going to go step by step into creating the image below:

This image is built on a white background initially. It's got 4 layers altogether and uses the same image of H. 'Siloam Double Classic' as I used above for the background and for the flower. I started by creating a new image and making it 450x450 pixels. I chose white for the default background color here. To create the two colored frames I first used the Rectangular Selection Tool. I held the Shift Key down while I dragged the Tool to form a square (holding the Shift key down restrains the tool to a perfect square rather than a rectangle.) I chose a dark brown foreground color. I then went to the Edit Menu and selected Stroke... and chose 25 pixels set to "Inside" in the Dialog that appears. This created the darker frame. I then chose the Magic Wand selection tool. and clicked inside the brown frame to select the white area inside the frame. I selected a neutral gray color and using the Stroke dialog again I applied an 18 pixel inside stroke. I then once again used the wand selection tool to click inside the new frame to select the white area inside both frames.

Now, I want to make this selection transparent. This takes two steps - first, I need to make the background layer into a layer that can support alpha channel transparency. Here's the layer palette at this point:

The 'eye ball' icon above indicates that this layer is currently 'visible'. You can click on the eye to have the layer become 'invisible' and click again to have it reappear. This is handy for trying various things to see which looks better.

You can see a couple of things here we should note. First, there's just the one layer still and it's locked. All the options above are grayed out because the layer doesn't support alpha channels yet. Changing this layer to support alpha channels is really simple, just double click the word Background in this palette and a dialog will appear.

Click OK and the background layer will be converted to Layer 0 which does support alpha channel transparency.

Now, if we still have the inner white square inside the frames selected (if not, select it again) we can make this transparent. To do this, go back to the Edit menu and select Clear. This inner square should now have a gray and white checkerboard pattern. This is Photoshop's way of telling you that portion of the image is now transparent - when there's no opaque background layer the 'bottom' is shown by this checkerboard - it doesn't show in your final images, it's just a visual clue for you.

To prove this is now transparent, I open my original large image of H. 'Siloam Double Classic' and select an oversized portion of the background area (you can have more than one image open at the same time and switch between them at the bottom of the Window menu.) I got a nice out of focus mix of green and black. My selection was overly large because I don't want to worry if it's big enough. With this area selected I chose Copy from the Edit menu. I now switch back to my frames image and chose Paste from the Edit menu. Each time I choose Paste, Photoshop will create a new layer for the pasted item and put it on this new layer.

However, when I do this I get the new layer placed above the frames. Thankfully, Photoshop's programmers have made rearranging the layers easy.

To rearrange the layer order, simply click on Layer One in the palette and drag in down below Layer 0 in the palette area and release the mouse button. It should now appear as the palette at the right and you should be able to see the green-black background layer beneath and through the opening in the frame on the image you are working on. I now want to select the flower in the Siloam image.

To do this I can use a number of tools, go back to Tutorial 3 to see how to use the Magnetic Lasso Tool. Since I just got Photoshop CS3 I used the new Quick Select Tool. This tool alone was worth the upgrade, as I was able to simply paint around the flower area and 20 seconds later the whole flower was selected - it's amazing! You can also try using the wand tool and holding down the shift key keep clicking on parts of the flower until it's all selected - you'll probably have to do some cleanup with the 'normal' lasso tool like described in Tutorial 3 as well.

Once you have the flower selected, choose Copy from the Edit menu and then select New under the File menu. Photoshop should open a new file dialog that's set to accept the size image that's last been copied and is on the clipboard. Click OK and then Paste from the Edit menu. I did this as a new graphic because I need to resize the flower before I paste it into my image - the image at this stage was roughly 1600 pixels square at 180 dpi. I used the Image Size dialog to change the resolution to 72 dpi and the width to 300. I then selected the layer with the flower in the Layers palette by clicking on it, chose Select All in the Edit menu and chose Copy from the Edit menu again. I now switched back to my project image and selected Layer 0 again. I want to Paste the flower above Layer 0 and Photoshop creates the new layer above the currently selected layer. I now chose Paste from the Edit menu and the flower appears - looking like this.

This got the flower in place, but it appears flat. One nice thing about layers is that different effects can be applied to a layer, so in this case I'm going to select the layer with the flower and then go up to the Layer Menu - Pick Layer Style and within that menu choose Drop Shadow. I opted to change the Distance to 12 and the Size to 10. This makes the flower appear to float above the frame and background. When you have multiple layers you can move the items on each layer around independently using the Move selection tool, it's the one that looks like this. I chose that tool and dragged the flower image layer up and to the left - notice the drop shadow, which has various degrees of transparency, moves with the flower - the rest of the image stays put. I now want to label this image. I first want to select the color so I used the eye dropper and picked a pink from within the flower image. I selected the Text Tool from the main tool palette, the one that looks like the letter T. I clicked on the area and typed the name, choose a font and size and in this case choose to right justify the text. I then also moved it to just where I wanted it and applied a drop shadow to the text layer.

This leaves me with the four layers - dark black green background, frames with white outline, flower with large drop shadow effect, text with default drop shadow effect, the palette looks like this now. A couple more things about the layer palette - at the bottom are a number of icons, the two most often used by me are the trash can - select a layer and click the trash can to delete that layer and the one next to the trash, the New Layer icon - click on that to create a new empty layer. If you select a couple of layers at the same time (try holding the Control Key, PCs and Command Key - Macs) and select more than one layer at once. Now you can click the chain icon to link these layers together - now if you move one, those linked together move as a group. You can lock a layer once you have it 'perfect' by clicking the lock icon. Each layer can also be adjusted for opacity - I often create label text and set it to 50% opacity to make it less 'glaring' and distracting from the flower. Many of the layer effects have the Preview option as well so you can see how they affect the layer before you apply them - note too that the layer effects have the eye icon, so you can hide an effect without hiding the whole layer.

Next to last in the process, you should Save this as a Photoshop PSD file - this will retain the layers, so if, for instance, you misspelled the name of the flower, you could go back and edit the text layer and not have to start the image over from scratch to fix that.

The last step is to 'flatten' the image and save it in another format. For saving as a JPG file you can use the Save for Web... dialog - this will bring up a dialog panel ( full screen so too big to show here). If it's not by default shown, click the 4-Up tab and you will see four versions of the image, all with different compression levels shown - you can make adjustments to the compression level slider - try to make the image as small as possible while retaining the highest image quality. A quality setting of 65% yields good results for me on most images. A JPG file doesn't support layers so the saved JPG file will already be flattened. However, say you want to Save As... in the TIFF format. You should manually flatten the image before doing that. Go to the Layer Menu and choose Flatten Image and then Save As... and choose the TIFF format in the pull down menu for file formats.

For those of you interested, here's a link HERE to my .psd file for this project, with the layers still intact. PC users, right click on the link and choose Save to Disk, Mac users without a two button mouse, Control-Click on the link to download the file as well. Please note that as a .psd file with four layers, this will be a 1.8 meg download, the final jpg image below is just 36K.

Once again, here's the final image.

Now, Veronica Glover stated. "I would appreciate a tutorial on how to cut out a daylily with a transparent background. I worked 3 hours trying to do this but when I transfer the image the background is white."

Veronica, part of the answer maybe that you pasted the cut flower onto a white background - new files in Photoshop often default to having a white background layer. Or, the answer may be you chose the wrong image format for final output. Had you chosen GIF you may be been able to retain the transparency, but you would have been limited to just 256 total colors; one of which is assigned to be transparent. There's also a newer file format called PNG which supports a transparent layer, but not all web browsers support the .png format. Hopefully, you can look at the process above and figure out what went wrong in your attempt.

One easy way to 'force' a transparent background is to paste the flower onto a white background, then double click the background layer and answer OK to convert it to a standard layer. Then select this white layer by clicking on it in the layers palette and then click the Trash Can icon at the bottom of the layers palette to delete the background layer. I used this technique to create the flower image below, and saved this as a GIF - since there's a transparent background in the image, Photoshop assigned the background "color" to be transparent.

As a final example, I created a bee striped background and saved it as a GIF file too - no transparency. With only two colors in this file, it's less than 2K in size, despite it's being 770 pixels wide by 409 pixels high. With limited colors, GIF files are great. I created an HTML table below and set the bee stripe image as the background for the table and then put the GIF file I created from the same H. 'Siloam Double Classic' image and placed it in the table too "on top" - you can see how the background of the image is transparent (and I went with a loud and gaudy background to make that point!) But also notice there's a little white around the edges in places and especially in the throat area, if you look closely, you can see there's only a limited number of colors there - Photoshop does do an incredible job of selecting the best 256 colors to use for this process.

The GIF image of the flower however is 53k whereas the JPG file above with far more colors is only 36K.