Create Impressions banner tutorial

The banner tutorial part of Create Impressions is one this page so it can use up the entire page instead of being confined to one scrollbox.

*This tutorial goes from the very beginning of making a general banner, including some optional stages. Go ahead and skip a section if you feel it doesn't apply to your banner (ex: If you already have your banner image cropped and ready and don't need to blend, just skip that section.) Happy banner making!

1. blending

Step 1: Put a lot of white space next to the first image so you have room to put in the second (you can always crop it later).

Step 2: Paste in your second image and overlap the two images a bit so they're together when you blend. Then make the "Floating Layer" a new layer by clicking the indicated new layer button.

Step 3: Make sure your second layer is selected and click on the Lasso tool. On the left sidebar's options, select "Feather edges" and set the radius to around 50px (though it's really up to you). Then select an area around the overlapped edges of the two images and hit "Del" (the delete key) on your keyboard.

Step 4: Now right click on the second layer and select "Merge down" to make that layer part of the Background. Then select the indicated Crop tool, stretch the tool over the section you want to crop (in this case, we're just eliminating extra white space), and when you have a shaded area like shown, click again on the selected part and it will crop it for you.

Note: You have to complete a circle/oval of the lasso for it to become selected (moving dotted lines). Also, you can only select an area involving the edge of the second layer and part of the first but not the edge of first layer, or this will happen:

Finished product!

2. blurring focus

*This cool effect is courtesy of Brian at Effects. I cropped the image from Background Bonanza.

Original image:

This is what we have so far: (See the difference?)

3. applying textures

Paste in the texture (I used one from Foomanshu) and use this tool (on the left sidebar) to shift it around to the right position. Once you're satisfied, click this button (on the right sidebar) to make it a new layer. Then go up to Mode and set this texture layer to Screen (recommended) or Overlay. You can pick any mode you want, of course, but I use Screen and Overlay the most. Fiddle around with the different modes, using CTRl + Z to undo your last action, and find something that works for you!

You can add as many textures, brushes, PNGs, etc. as you want, though I'll be sticking to just this one. Sometimes less is more!

So far:

4. gradients

To add a gradient, click the indicated gradient tool and pick your gradient by clicking on the big gradient rectangle. Set your mode to Overlay (recommended) or Screen if you want a lighter effect. To actually apply your gradient, make sure you have your Background layer selected, and stretch the cursor over your banner, then let go of your right clicker. You can add as many gradients as you like, of course, but usually one or two get the job done. (In this case, I decided not to use a gradient.)

Want to create your own gradient? Once you click the gradient tool, change the foreground color (shown) to one of the colors you want your gradient to have. Then click the background color (the back part of the color rectangle) and pick another color (or leave it white if you only want one color for your gradient). Then click the gradient selection recangle and pick one of the first four "FG" options depending on how you want your gradient.

5. text and shadow

Step 1: Select the text tool, stretch it over wherever you want the text (you can always move it later) and type in your title. You can change your font, size, and color on the left sidebar, as shown.

Step 2: To add an image (or, as I usually do, a texture) to your text, first set your text color to white. Then paste in whatever image you want to use, make it a new layer, and make sure it's above the text layer. (My texture is from Nienke's Resources.) Select the text layer and right click + Alpha to Selection, like so:

Then select the image layer (the one above your text layer) and hit CTRL + I to invert the image. Hit the Del (delete) key on your keyboard to delete the rest of your image. Lastly, right click on the "Pasted Layer" that has the image and click "Merge Down" so the image and text are the same layer. Voila! You now have image in your text.

What we have now:

In this particular case, I think the texture is too light, so I selected the layer with the image on it, selected the gradient tool , set the mode to Overlay, and then used the default black/white gradient to darken up the image.

Step 3: Now on the text border! Select your text layer right click + Alpha to Selection again. Then go up to Select Grow, and pick how many px in width you'd like your border to be (2-3px is good):

Open a new layer and place it directly under the text layer with the layer arrows (). Then, making sure you still have your "new layer" selected, go up to Edit Fill with FG Color.

Step 4: All that's left is (my favorite), the drop shadow! Select your "New layer", right click it, and select Alpha to Selection if it's not already selected. Then go up to Filters Light and Shadow Drop Shadow. Set the offsets and blur radius to what's shown (though, of course, you can set it whatever you like. You can also edit the drop shadow color and opacity).

Then move your Drop Shadow layer down to under your "new layer." Reduce the opacity using the opacity bar (right sidebar) to a comfortable, subtle shadow.

saving

Go up to File Save and save a copy of your banner as .xcf (type in .xcf after your file name in the bar). This type of file will preserve your banner with all of its layers so you can come back and edit it all you want!

To save your banner for use on the internet, go up to File Save a Copy and save it as .png. It'll ask you to Export File (click Export) and then a Save as PNG box will pop up - click Save and then go ahead and upload your banner at your favorite updloading site (photobucket, tinypic, etc.). Congratulations, you just made your first Create Impressions-style banner!

Finished product!