Banner help: Creating, adding, animation and more!

[root]

[original post by HausMommy]
First off, let me note that banners cannot exceed 550 pixels by 150 pixels. Please DO NOT put full size pictures in your signature. This messes up the layout of the forum.

There are many ways to create a banner in Photoshop, and each designer has their own way of doing things. This is just how I do it, and is by no means the right way, or the only way.

Also, I'm using version CS2, so your screen and menus may vary from mine.

Step one:
Open Photoshop.
Go to File->New.
Set the document width to 550 pixels, and the height to 150 pixels.
Type in the name of your project in the name box.
Click ok.





Step 2:
Select your paint bucket tool.
Fill Layer 1.
You may use either the foreground color, or a pattern. For this tutorial, I used a pattern.




Step 3:
Now, open the photo you wish to use.
Duplicate the background layer by right-clicking on the background layer and selecting "Duplicate Layer."
Now, select the magnetic lasso tool as shown below.
Right-click on the tool to make sure you have the magnetic lasso tool selected.
Click on your photo and start tracing around whatever you wish to cut out. The magnetic lasso will place points along the object. If the tool places a point and you wish to remove it, simply hit your backspace button. To close the magnetic lasso, click on the beginning point. Anything inside the lasso will be selected.
Hit ctrl+c to copy the selection. Minimize the photo.




Step 4:
Now, ctrl+v to paste your selection into your banner. Photoshop will automatically put it on a new layer for you.
Now go to Edit->Transform->Scale to resize your photo selection. Holding the Shift key, drag the selection down to size. By holding shift, you are keeping the
aspect ratios the same, so the selection doesn't distort. If you need to move the photo to a different spot on your banner, just click and hold somewhere in the middle of the scale box and drag it to where you want it.
When you have the photo where you want it and the size you want it, click the check mark to close the scale tool.




Step 5:
Now, we'll add the text. From your toolbox, select the Type tool, as shown below. Your text will automatically go on it's own layer as well. This will be helpful later!
Now, click and drag a text box on your banner. Type in your desired text. If you wish to change the font or size, highlight the text and use the drop down menus as shown below.
When you are finished editting, click the checkmark.




Step 6:
Now we're going to add a small border to the banner. You may skip this step if you do not want a border.
On the bottom of the layers palette is a series of buttons. From the right, the first one is to delete a layer, the second is to create a new layer. Click the second one(as shown.)
Now select your rectangle marquee tool, as shown.
Click in the top left corner of your banner. While holding down the mouse button, drag your pointer to the bottom right corner. This will make a selection around your entire banner.
Now go to Edit->Stroke. A box will pop up. You may make the width any width you'd like, I've chosen 3 pixels for this tutorial. You may also change the color by clicking on the color box and selecting it that way. Since this is a border, I've chosen "Inside" for the location. Click OK when you're finished.



Hit Ctrl+D to deselect the border.

You should now have 4 layers, as shown below. You can either stop here, or add some finishing touches.




To add some finishing touches:
This is my favorite part of making a banner. These steps are optional, but I think they add to the overall appearance of the banner. Smile

Step 1:
Left click on your text layer. Now, right click and select Blending Options. A menu will pop up like the one shown below.
On this new menu, on the left, there is a box that says Styles. Click on it. The middle of the menu will change to a series of thumbnails. Click on the tiny arrow to the right of the thumbnails(as shown below) and select Web Styles from the drop down. A box will pop up asking to replace the current styles, click ok.

For this banner, I chose to use the blue outline(as shown.) Once you have your style, click ok.




Step 2:
Select your photo layer. Go to the Blending options again. Instead of adding a style, we're going to add a drop shadow to make it seem like the photo is in front of the background. So, on the left side of the Blending options, click on the Drop Shadow box. Make sure the box is checked. Then click ok.



If you look at your layers palette now, you will see that both the text layer and the photo layer have a little "f" by them. This means that they now have a layer style.



Now, you will want to save your banner so you can upload it to a hosting site like Photobucket, or Imageshack.

To do so, go to File->Save As. A box will pop up(as shown below) and from the drop down, you will want to select one of the formats that has a red dot next to them.
Use the .gif extension if your banner has animation.
Use the .png extension if your banner has a lot of transparency in the background.
Use the .jpg or .bmp extensions if they are just regular banner. Preferably the .jpg extension.
Also, be sure to save a second copy with the .psd extension so you can come back and edit it if you wish. This will prevent you from starting all over.



Here is my finished product:



I hope this was easy enough to follow. If you have any questions, you can pm me or ask them here!

My other tutorials:

Adding a banner to your signature:
http://www.bulldogbreeds.com/discuss...pic.php?t=1035

Animation tutorial:
http://www.bulldogbreeds.com/discuss...ic.php?t=11002

Color Morphing tutorial:
http://www.bulldogbreeds.com/discuss...ic.php?t=11004[u]

[HausMommy]

Another suggestion:
When making a banner request, it helps to include your pet's name, sex, and any color scheme/themes you'd like included in the banner.

[HausMommy]

Want to make your own but don't have a photo editting program? Try one of these sites!

www.picnik.com

www.scrapblog.com