Transparent .GIFs

1. I am assuming that you already have a rectangular signature made that you wish to add an extension to. Mine is below:

2. This is a pretty basic signature with a width of 370 pixels and a height of 100 pixels. We are going to spice this signature up by adding the render below "onto" the current image, and have parts of it outside the standard dimensions of 370x100.

3. Note: Always "Defringe" renders before using them. Please see this. tutorial. As you may have guessed, we are going to need to expand the dimensions of the original signature to fit this render. Make the height of the original signature about two times as big which will now make the height 200 pixels. Go Image>Canvas Size, set the units to "pixels" and manually enter 200 and OK it:

4. Now the image will be centered vertically with its new height like this:

5. We need to move all the layers down to the bottom of the image, so link ALL the current layers by clicking on the box immediately to the right of the eye symbol in the Layers Palette and chains symbols will appear like this, depending on how many layers you have:

6. Now, all you have to do is move them down. Press V for the Move Tool, and slide everything down to the bottom.

7. It is time to insert the render, open whichever one you want (I will be using the one near the top) and paste it into the signature file. Scale (resize) it if you need, press Ctrl+T, hold Shift, and drag a corner in. Position it where you want, and be sure to delete any parts of the render that cover the border on the BOTTOM and the SIDES. Below, my highlight border effect still shows around the bottom and right-side of the render, but NOT on the TOP.

8. Time to use another of Photoshop cool functions, go Image>Trim, and use these settings, then OK it:

9. This will get rid of any excess transparent pixels that aren't needed. All the remains is to save the image, go File>Save for Web, and use these settings:

10. You'll notice that is says [Unnamed], so start with "GIF 128 Dithered," but then set the Matte to None. Final result below:

You can download the .PSD (Photoshop Document) source file here.