Step 1 is setting up your workspace. Make sure that you have any/all of the images you want to work with open and visible, so that you're able to get an overall view of what you want to do. This will also help you recognize early on if you're trying to use too many or too few images. Some images end up very small on a banner, especially when used alone, and thus don't make a good single-image banner.

The image of Chibi Vegeta that I'm using will work well for a single-image banner, as he consumes almost the entire frame; even when it's reduced in height to banner size, he will still be easily recognized and a prominent image for the eye to settle on.

Additionally, you will need to set up your blank canvas right away. Here I created a new canvas to the required banner size (1000px wide by 175px tall). I set the initial banner resolution to the same resolution as the images I'm using; this makes working with them less complicated and gives you a better final resolution. Don't worry if it's initially larger than 72 dpi; this will be fixed later on. (If you don't know what this means, please see the notes at the bottom of this tutorial. Understanding the technical aspects of digital art isn't absolutely mandatory for creating banners, but it can sometimes make it easier for you to get what you want out of a banner.)

Since my original image is one of my screen caps, it has a border around it that I don't want in the final banner. I remove this by reducing the canvas size. Compare the "Current Size" listed in the Canvas Size dialog box with the "New Size" I am setting it to. If you're new to this tool or have not used it very often, you'll want to reduce in smaller steps; I've done this so many times in creating restitched panoramics that I can usually eyeball it within one to two pixels.

It is also possible to use the Cropping tool at this point; if I only wanted a small segment of the image, such as his eyes, that would be what I'd be using. Afterward, I would use the Canvas Size tool to refine it to the exact size I want. I simply use the Canvas Size tool for purposes of accuracy.

Next, resize your image! Since you've cropped it down to just what you want on your banner, all you have to do is open the Image Size dialog box and set the Height to 175px. If you're working in Photoshop, leave the "Scale Styles," "Constrain Proportions" and "Resample Image: Bicubic" checked, so that there is no distortion when it is resized. Also, when you do this, the Width will automatically set itself to scale, so you don't have to alter that at all.

With your primary image resized and set as the "active" or "current" image, click on the "Select" menu and choose "All." This will select your entire image, and you'll see a dotted frame or "running ants" around the picture. This will indicate that your image is selected. Then, Copy the image - Ctrl+C. This will copy the image to your clipboard.

Click on the blank canvas for your banner and Paste the image into the canvas - Ctrl+P. The image should paste as a new layer centered in your canvas. (If it does not, check your program's settings, and create a new layer if necessary.) Layers are important from here on out, so you'll also want to pay attention to the Layers pallet through the rest of the Tutorial.

I chose this image for a couple of reasons. The primary one is that it's clean and has an "open" edge, or a portion where the character is not cropped by the screen. The other is because I am fond of right-aligned banners, since I tend to read and look at art from right-to-left these days. The alignment and placement of your images are entirely up to you; the biggest thing to keep in mind is the visual direction of the image and how much image editing you're going to have to do to make it clean and easy to look at. (If you don't know what "visual direction" means, see the notes below the tutorial.)

Banners are easier on a viewer's eyes when the background does not change radically from one side of the image to the other. To make the background of this image match the background in the screen cap, I am going to start by selecting a mid-tone from the left side of the screen cap using the Eyedropper Tool (tagged in cream on the left side of this image). This will change the foreground color to the color I select from the screen cap.

This is just a cap to show how the foreground color has changed in the color pallet. You can see it tagged in cream on the left. With this color set, your brushes will automatically use that color.

Choose the Brush tool from your Tools Pallet. (I wasn't able to catch the tag on this one, but you can see it outlined on the pallet to the left of the workspace.) Next, create a new layer to work with for background color. The "Create a new layer" button is tagged in cream on the bottom right of the Layers Pallet. I have "Background" selected for the layer, because I want the new layer to be above the Background but below "Layer 1," which is where the screen cap is pasted.

Set your brush size to a large size, so that you can cover wide areas very quickly. You are going to end up covering the entirety of "Layer 2" in this type of banner, so you could also use the Fill tool, but I prefer to make a habit of using the Brush tool. There are other types of banners where you don't necessarily want the entire background filled with one color at this point, and that is where the Brush becomes handy.

With the background brushed in, the image now looks like this. Notice the border region where I've circled in red. The colors do not match up exactly; this is because a sponge-style gradient was used in the background of the original screen cap and we used a flat color for the background of the banner. This is also why I chose a mid-tone with the dropper tool; the flat color will be the base for blending a gradient to match the screen cap.

Use the dropper tool once again to change your foreground color. The foreground color should come from the darkest portion of the gradient - in this case, the color at the top left of the screen cap. Then, use the dropper tool again to change your background color. This is the color swatch sitting directly below the foreground color in the Tools Pallet. This will be the lightest portion of the gradient, in this case from the bottom left of the screen cap. (Those of you with a keen eye will also notice that I'm getting ahead of myself in the tutorial here and already have my workspace set up for the next step. XD)

Choose the Gradient Tool from the Tools Pallet, and be sure the Tool properties at the top show the gradient as your foreground-to-background swatches, in a left-to-right direction. The other properties (Mode, etc) should be defaults, but if not, set those to the same as shown.

Unfortunately, I was not able to get a screen cap that showed how to use this tool, because the cursor disappears in my screen captures. You can play around with it to see all the neat ways it can work. I used a very basic gradient; I click at the top of the layer and drag in a straight line to the bottom of the layer, then release the mouse button to set the gradient. This will fill over top of your base color with the gradient you've created. (In this particular case, the base color isn't super-important; in other cases, it is, because of transparencies that can happen with gradients, which is why I walked you through the extra step.)

Here's the banner with the gradient in place. This shot is just of the banner so that you can focus on the top-to-bottom arrangement of the gradient.

Notice that the backgrounds now match better, but they are still not a perfect match. This is due in part to the angled nature of the screen cap's background, as well as the dithering, or amount of color noise (little splotches of differing hues), found in the screen cap background.

Select the Smudge Tool from the Tools Pallet. I set the brush size for this tool to a medium-small size (19 is a brush size I use frequently for mid-sized brush work).

There are a few selections/key commands going on in this step. Select the screen cap layer (Layer 1) in the Layers Pallet. Zoom in on your image so that you can see the target area better (Ctrl + +) and scroll the workspace so that where you're working is near the center of your screen. Then, gently use the Smudge Tool on the edge of the screen cap to blend it into the gradient below it; because the background hue of the screen cap is angled generally from upper right to lower left, I used angled right-to-left strokes to match it. At this point, the backgrounds seem to blend seamlessly to most people. I am anal-retentive, so I can still see the edges too prominently for my liking. XD Also, the noise in the screen cap's background is starting to drive me apeshit. ^_^;

I will remedy this problem with the Blur Tool. This tool is only your friend if it is used carefully and sparingly. Otherwise, it will just make your image look like it is out of focus. I set the brush size for the Blur Tool to the same size as the Smudge Tool (19).

Brush the Blur Tool carefully over the edges you created with the Smudge Tool, as well as over the color noise in the background. (For the small areas around Vegeta's arm and face, I had to reduce the size of the brush.) I also did additional texturing and blending on the edges to create a more sponge-like effect to match the screen cap background. At this point, most people can't see the edge anymore; I can, partly because I know where it is, and partly because I'm anal enough with my art to have that kind of attention to detail. ^_^; If this were to be a single, standard web graphic for my website or for other use, I would continue to work this area a bit. However, because it's going to end up in an animated GIF, I am not going to fuss with it further; what I have will dither pretty well into GIF noise once it's put in to the animated banner.

For more detailed discussion with images of how the Gradient feature works, see the Additional Notes below.

Here's the banner zoomed back out (Ctrl + -) to actual size, with the blending finished.

Time to add text! Create another layer above "Layer 1" so that it's the topmost layer in the banner. Then, click on the Text Tool in the Tools Pallet, and click and drag to set your text area. (This is adjustable using the grab points on the edges of the text area, so don't worry if it's too small or too big initially.) I center aligned this text, because I want the text centered in the "empty" area of the banner, but I do not want it to run over top of the image. Again, this is to your taste.

This is also where being a font monger comes in handy. ^_^; I like to choose a font that is readable yet fits with the theme of the banner I am creating. The font I'm using here, AR JULIAN, is a serif font with rounded edges; stern, yet still soft enough for a child. For the font color, I used the dropper tool and selected from the highlight on Vegeta's arm. My color pallet is always drawn from the original image so as to preserve consistency across the entire banner.

Time to overwhelm you! XD This isn't as scary or as complicated as it looks. What I'm doing here is setting the Layer Style for the text; the text by itself was too bland for my taste, so I am stroking the edges of the letters with another color to emphasize them. I want contrast, so I found an area of contrast in the screen cap - the blue of Vegeta's top against his skin. (This will also be less startling to the eye than the black of his hair against his skin.) Click on the "Color" box in the Layer Style dialog to pull up the Select Stroke Color dialog box, then use the dropper tool to select from the image.

I added the additional text "From Day 1" and "DBZ Fanfic Salon" in a similar manner; I just created a new layer for each of the lines of text and used different font sizes (and styles, in the case of the Salon line). I felt like the text was lacking some of the bang that the image of Vegeta had, so I went back to the "Perfection" text layer and set another Layer Style - Outer Glow. In the same way that I chose the Stroke color, I chose the Glow color from the screen cap - this time from the bold red area behind Vegeta. This reintroduces the color in other areas of the banner to balance it out and gives a consistent feel across the overall image. (I also ended up nudging the text layers down a little bit, because the Glow ran into the top edge of the banner. Like I said, anal-retentive. XD)

I was a bad girl and didn't save my progress as I went along. ^_^; Normally, I would save as a PSD file as I went, in case of things like power outages, computer crashes, etc. This was a quickie banner and I know how to do the steps quickly, so I wasn't that worried. Do what I say, not what I do - save your work as you go along. XD

Once your banner is complete, however, you'll want to save it a bit differently. Instead of choosing "Save As," choose "Save for Web and Devices." (If your program doesn't have this function, save it as a JPG at highest resolution.) You can see in the image properties that I have the image set to JPG, Maximum Resolution, 100% quality. This isn't the best image resolution in the world, but it's great for sending via the web and for retaining most of its features when Pix puts it into the animated banner.

Why could the mid-tone layer be important? The mid-tone layer assists with blending when transparency occurs, either because of the type of gradient you're using or because of your blending. In this particular banner, transparency only occurred when I was blending, but I will discuss some other instances when it may happen, and show what could happen in cases where there isn't a mid-tone layer underneath the gradient.

In this image, I've used red arrows to show where I drew the mid-tone, foreground color and background color from, as well as how the layers are arranged. I intentionally only colored in half of the mid-tone layer, so as to make the subsequent images more obvious as to where the color was showing through.

This is the Gradient Tool I'm working with.

The tool details should default to "Foreground to Background" for the gradient, but if it does not, you can select it from the Gradient pull-down menu as shown. This will also show you other possible gradients you could work with, and will even allow you to customize your gradient. I often use custom gradients for more detailed or complex banners, but for this one I stuck with the foreground to background gradient.

The Gradient Tool shows up as a small + shaped cursor. You set the gradient by first clicking where you want the foreground color to start (in this case, at the top of the banner) and then dragging the line to where you want it to end (at the bottom of the banner). Release the mouse button, and the gradient will fill the Gradient Layer.

By looking at the Layers Pallet, you can see how the Gradient Layer is now completely filled and is hiding the Mid-Tone Layer.

If you were using a gradient with transparency, however, such as the "Foreground to Transparent" gradient, this would not be the case. NOtice how the Mid-Tone Layer is now readily visible through the transparency on the Gradient Layer.

In this example, the gradient is still "Foreground to Transparent," but I've set the Gradient style to "Radial Gradient," which creates a gradient starting at a central point and extending in a radius to the end point. To highlight how it looks over top of the Mid-Tone Layer, I've also selected an entirely different color - the blue from Vegeta's shirt - to set as the Foreground Color. Not only does the Mid-Tone show through this Gradient Layer, the areas where it's only partially transparent create a blended color made up of the Mid-Tone and the Foreground.

Why is this important for matching the screen cap's background? This same effect also happens with the screen cap. Here, I have used the Smudge Tool, as demonstrated in the main tutorial, to blend the screen cap with the Gradient Layer. However, when I turn the Gradient and Mid-Tone Layers off, you can clearly see the Smudge Tool brush strokes over the blank background.

Here is the smudged screen cap over just the Mid-Tone Layer. This is what you would get if you tried to blend without the Gradient Layer.

Some of the problem can be addressed by additional texturizing with the Blur and Smudge Tools. Here is the screen cap with the additional texturizing I did. (This is sloppier than the first time through; there was an even greater level of additional texturizing in the original tutorial banner.)

It looks better over the Mid-Tone Layer now, but the darkest tones still show up pretty noticeably against the Mid-Tone Layer.

However, with the Gradient Layer on, the blending is barely noticeable! This is much better for a smooth transition, and much quicker than fussing all day with pixel-by-pixel traditional blending.

Zoom back out, and you can hardly tell for sure where the transition is. It becomes even less apparent once there is text or other design elements in place to distract the viewer's eye, and will become virtually non-existent once the transition to animated GIF takes place.