Lets start with the simplest 3D button and you can practice with the others as you gain in confidence. Below is a sample of one of them with a shadow image, and I suggest you save these to work on for starters.

Use the 'Canvas Size' option in the Image Menu and add enough pixels both horizontally and vertically to cover the new addition - 50% bigger bottom and right hand side should do. Refer to the pic below on the left if you do not understand what increasing the canvas size means. The canvas is the full background area of a bitmap in a painting program. Picaso probably got the wife to make his canvas bigger with cotton and thread, but we can just click on a few simple options!

Keep an eye on the tool options
Before you go any further make sure that the Rectangle Selection Tool and Magic Wand Tool are set as follows by choosing them and observing the Tool Options box.

Choose the Rectangular Selection Tool and Magic Wand Tool and in turn check the following. For Photoshop check that Antialiasing is set "off" (tick box), Feather set to 0 and Tolerance is set to 0 on the Magic Wand - Tool Options. For Paint Shop Pro, Feathering is 0, Match Mode equals RGB and Tolerance set to 0 on the Magic Wand - Tool Options.

Change the Colour Depth to RGB, apply your changes and later change back to Indexed colour if using GIF images. (For  Photoshop choose 'Mode - RGB' via the Image Menu. For PSPro choose 'Increase Colours - 16 million' via the Colours Menu)

Prepare
Zoom into both images with the Zoom Tool. With the Magic Wand Tool, activate the button image and select the white area  as shown below left. Also activate the shadow image and select the large white area, PLUS hold down the Shift key, both programs, and also click carefully in the three corners as shown below on the right. (the Shift key allows you to Add to a selection)

You have now selected only the white pixels in each image.

While the shadow image is still active, choose 'Invert' via the Selections Menu. Now only the grey pixels of the shadow will be selected. Choose 'Copy' via the Edit Menu. The 'Copy' command places the selected pixel information into the programs memory Clipboard

Put it all together
Again activate the button image by clicking on its top bar and choose 'Paste - Into Selection' via the Edit menu and only the grey shadow pixels will appear on the button as shown on the left below. Because you have zoomed in and enlarged the view of the button, it should be a simple task to nudge the shadow up to the edges of the button - shown below on the right (try the arrow keys!).

Neatly Crop the combined image and Save
Also shown below on the right is a new selection. To achieve this choose the Rectangle Selection Tool and carefully drag from the top left down to the bottom right to just include all of the grey pixels. Obviously the last thing to do is crop the image so choose 'Crop' via the Image Menu and the finished image will be trimmed nicely to the limits of the coloured pixels. If the Crop option is not available, the selection is not perfectly rectangular or is anti-aliased.

the finished button with a drop shadow

Saving GIFs with Transparency
When saving GIF type bitmaps and you want parts of the image to be transparent displaying the background, your painting program has to have the GIF version gif89a export filter installed. Earlier versions of Photoshop had to have this filter installed as a plugin and for PSPro I believe you had to do with out. Now both  install with the filter by default (as do all decent painting programs).

The options usually available with the gif89a filter appear quite differently from program to program but I have included the current screen captures from Photoshop and PSPro to help with a simple step through of how to go about using it. PSPro has an option button for opening the transparent colour options when the GIF file type is selected via 'Save As'. With Photoshop you will find the filter listed under 'Export' via the File Menu. Of course you must first make sure the image is converted to 256 colours or less (one channel - "Indexed")

Change the Colour Depth back to 256 (or less). For  Photoshop choose 'Mode - Indexed' via the Image Menu. For PSPro choose 'Decrease Colours - 256' via the Colours Menu.

When creating an image for transparency, keep in mind which colour in the image you want to use and do not use that colour in any other area. This will keep the inexperienced out of trouble - it can be made a little more complex if you have the right program. As already mentioned elsewhere the transparent pixel colour I chose is white, and most people choose the background colour whatever it is (you can apply any colour that is not in the image area).

First we will look at Saving with Photoshop:
Choose File Menu - Export and then 'gif89a' and the window displayed below will open. If it does but has options greyed out or missing then the image is not the correct colour type. You can enlarge or reduce the sample image with the inbuilt Zoom Tool, and Pan an enlarged sample image with the Hand Tool. The "nitty gritty" is all in the use of the eye dropper tool (picker).

Select the picker and carefully click on one of the white corners. Clicking on a light grey near the white would be disastrous, so if you want to reset, press the 'Alt' (apple) key and click on "Reset" which will replace the 'Cancel' button as you do so (if you are unaware of it, this option is available in most Photoshop effects windows).

The instant the picker clicks on and selects a colour that colour will change to a default grey. (all gif89a filters do this to my knowledge, which is why, when you open a .GIF file with transparency the transparent pixels look strange displayed as grey). However because some Web Browsers cannot display transparent pixels and show the grey instead, I elect to change the default to white which is a little less offensive on any background colour. Once the pixels are selected with the picker, click on the square panel in the middle of the window and change the grey to white IF YOU WISH TO. Other wise leave it as is.

Interlace it and Save
It is advisable under most circumstances to also select 'Interlace' so that the image will gradually build bit by bit in the browser, allowing the viewer to see what is coming on slow Internet connections. Click 'OK' and save the file with a new name in a familiar folder or overwrite an existing one - whichever situation is correct for you. All done !! (a thought for later - never interlace images that are to be combined as .GIF animations)

Photoshop gif89a filter option window

Now we will look at Saving with Paint Shop Pro:
Once the image is changed to a colour depth of 256 colours or less select Colour Picker Tool (eye dropper) and place the cursor carefully over the white pixels in one of the corner of the image. Make sure you do not pick a light grey as this would mean disaster. For this image we want to use the white background for the transparent pixels. Now cast your eyes across to the PSPro Colour Palette. If it not displayed then quickly select it via the View Menu. On the left, below, is a sample of  values that appear as the picker hovers over an image and on your PSPro screen note the fourth value that only shows with Indexed colour bitmaps. Take Note of the number next the the "I" just below R, G & B. It will probably be different to the value shown below.

Interlace it
Now choose 'Save As' via the File Menu, select the GIF file type from the drop down list and give the file a new name or select an existing one if you wish to overwrite.Select 'gif89a - Interlaced' from the bottom drop down list - this makes the image gradually build bit by bit in the browser, allowing the viewer to see what is coming on slow Internet connections. (a thought for later - never interlace images that are to be combined as .GIF animations)

Click on the 'Options' button and then select the GIF tab as shown below - if not already displayed by default.

The different options seen will be understood with time as they are fairly obvious, but the one I want you to select is the bottom one - as shown below. The drop down list now active will display all the colours in your image by number. You have noted the value needed for your button so enter that value. If the image can be seen and the Preview button is clicked, the white will be replaced by a default marker grey. (all gif89a filters do this to my knowledge, which is why, when you open a .GIF file with transparency the transparent pixels look strange displayed as grey)

Save it
Click 'OK' and then 'Save' the file in a familiar folder. All done !!

the PSPro 256 palette colour number (I) < and >  the PSPro gif89a filter Option window

 
A comment about the shadows
Your brand new button should now be ready for viewing. But with the shadow created on a white background, it will only look good on white or near white colours. On these tutorial pages one should see the blue lines display right up to the edge of the shadow - if a line happens to fall under it. These shadows should also be suitable for light texture backgrounds as well.

The problem with these shadows is that when viewed with coloured backgrounds the near white looks false and hard edged.

I will be adding a simple tutorial on shadow creation but in the meantime carry out the Colour Changing Tasks as suggested below. Then with a background colour placed in a suitably sized New Canvas, Copy and Paste the shadow file used above, and while it is still "floating", see if you can change the colour so that it will look more natural on the chosen background colour. (Hint If the option you try has a "Saturation" value, try it below middle or 50% while you change the colour) It should again stretch your imagination for when other design ideas come up and you have to think of a way to achieve them. Enjoy.

Below are compilations of the major colour changing windows for Photoshop and PSPro. Advanced Prepress colour correction topics are not for people inexperienced in the field so if you realise that a few "heavy" options are not listed for Photoshop, understand why.

Change the Colour Depth to RGB, apply your changes and later change back to Indexed colour if using GIF images. (For  Photoshop choose 'Mode - RGB' via the Image Menu. For PSPro choose 'Increase Colours - 16 million' via the Colours Menu)

Practice with these colour control tools and like all of the introductory How To! pages, your imagination will probably run riot once the simple basics are accessible and understood.

Photoshop colour change options

Image colour controls in Photoshop via the 'Image - Adjust' Menu:

• Colour Balance

• Hue and Saturation

• Variations

Paint Shop Pro colour change options

Image colour controls in Paint Shop Pro via the 'Colours - Adjust' Menu:

• Hue/Saturation/Luminance

• Red/Green/Blue

via the 'Colours' Menu only:

• Colorize

Converting back to 256 (or less) colours
Photoshop. Choose 'Mode - Indexed' from the Image Menu. Click "Yes" to flatten the image (if) into one layer and select "OK" to the defaults that appear next. Go to the File Menu and choose 'Save As" and give the file a new name in the desired folder. From the drop down list of file types, select GIF. Click "Save".....

PSPro. Choose 'Decrease Colour Depth - 256 colours' from the Colours Menu. Go to the File Menu and choose 'Save As" and give the file a new name in the desired folder. From the drop down list of file types, select GIF. Click "Save".....

 
If you find these tasks helpful, please let me know - and leave some money on the fridge as you leave!

using the supplied buttons & frames

• Changing a frame or button size

• Adding a picture to a frame

• Adding your text

• Adding text to the animations