Lets say you want to create a banner. Do you have a style in mind? Maybe, a nice sleek web 2.0 banner? Well, this will give you a bit of an idea on how to create it. I will use my Thinkblogger banner at the top as an example.

Style: Stripey Web 2.0 Banner.

Tutorial: How to create a sleek web 2.0 banner in photoshop CS2!

What is required for this experiment/web 2.0 banner:

• Photoshop CS2/CS3 (or another program with similiar design abilities)
• Have the program loaded up prior to downloading the link.
• A nice sleek diagonal background. (this one is a pain, which is why I provided you with the link: here).
• Some creativity on your part.

What is involved in this tutorial:

• 1st Step: To download the pattern and successfully place it into your Adobe CS2/CS3 Pattern folder.
• 2nd Step: To actually draw the banner, following the steps below!

Part 1: Placing the Pattern into your Adobe Patterns List:

Instead of giving you an image to work with, to import to Adobe, I have given you the actual pattern (.pat) file for your web 2.0 banner. Depending on your browser, instead of saving it onto the disk, you should be able to just click “Open” in either Internet Explorer or Firefox and it should automatically load the pattern into Adobe (while loading up Adobe Photoshop in the process, aswell - might be easier to have Adobe opened up and minimized before you do this). If I am correct, the new pattern is now loaded into your Adobe Photoshop CS2.

If the above method does not work, then I suggest finding your Pattern Directory (default on C would be: C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Patterns), and save it into there)

Part 2: Designing/Creating the actual Banner (The Fun Part)

Step 1: Create the image framework.

• Create an image that is 470 x 84 (that is what I am currently using for this example). Fill the image with whatever color you wish.
• (For the demonstration, I used #00529e - You will need to remember your fill color for later if you wish to use your stripe with a gradient effect).

Step 2: Adding the Striped Background (this of course is completely optional).

• When selecting the ‘paint bucket’ tool, there should be a new menu along the top that appears (a line below the file/edit/image menu).
• The new menu should have a dropdown box which, by default, should have ‘Foreground’ in it. The menu/dropdown is shown below:

• When you click it, you have a choice of two options, foreground or pattern. Select pattern and you will find the new diagonally striped pattern for you to use.
• Do not apply yet. First, create a new layer. On the side bar, it should show that you now have 2 layers. Select the second layer, then click anywhere on the picture to create your stripes.

Step 3: Adding Style to the stripe itself (Also Optional)

• If you do not wish to add a gradient, the generally, the opacity of the stripe layer should be under 20% to give it a nice slick feel. I usually set mine anywhere between 8-20% (depending on what color I use on the background). Then skip the rest of Step 3.
• However, If you wish to add a gradiant, then select the stripe layer from the sidebar, then select the “Layer” menu on the top of the page. A drop menu will appear, select “Layer Style”, and a side-expansion menu will appear: select “Blending Options”.
• Checkmark the box beside “Gradient Overlay”. If you see that your stripes have changed from a solid color to black -> white (or whatever your default is set to), then good job. Now, select the words, ‘Gradient Overlay” to change some of the options.
• Click on the gradient viewer bar itself. You will have to change the colors to both of those. If you used the #00529e color for your background, then you already have your first color on the one side. The second color is up to you. But for the demonstration, I have used #5ebdff. The outcome is shown below:

• No Need to adjust your eyes. I know, its painful. Thats why you should automatically set layer 2’s (stripe layer) opacity below 50%. To give it a softer “I dont want to hurt your eyes” type of feel. For the demonstration, I set the stripe layer to 18% opacity. The “new” image is below:

Step 4: The Text

• Here you can put whatever you like. Its YOUR banner. For this demonstration, I will put up … hmm .. thats a tough one … how about … “ThinkBlogger”.
• Set your font color to a medium-dark grey (I usually like to use #545454). Set your font size to 72px (or whatever you feel comfortable with).
• Use whatever font you wish, but you should try to find some free fonts that are bulky and bubbly/rounded. This of course depends on the style of what your trying to do. I used the same one that I did for ThinkBlogger banner, it is titled “Billo” font. Center the text in the middle of the screen and you are pretty much done this easy step.

Step 5a: Outline:

• Select your text layer on the sidebar then go to your blending options (refer to the bolded section in step 3). Click the checkmark beside the “Stroke” field. It should automatically outline your text in bright red.
• Select the “Stroke” word, and a new menu should appear. All you really have to do here is click on the red square (or whatever your default is), and change the color to white. This is shown below:

Step 5b: Gradient:

• Select your text layer on the sidebar then go to your blending options (refer to the bolded section in step 3). Click the checkmark beside the “Gradient Overlay” field. It should appear black to white.
• Your half way done already. You should keep the black on the one end (or something pretty close to it), then on the other side select a light-ish grey that will work well with your image. I used: #a7a7a7. Play around with it, as it will impact how people perceive your banner :). The end result is shown here:

Step 5c: Outer Glow

• I like to do this with a lot of my banners. Select the sidebar text layer and then go to your blending options (refer to the bolded section in step 3). Click the checkmark beside the “Outer Glow” field. Personally, you shouldn’t see much of a difference at this point upon enabling it.
• Select the text field “Outer Glow”. A new screen should appear which deals with Outer Glow features. You should see a bright-ish yellow box, click it (this should open up a color picker). Here you can be as creative as you want really, though for this example I will use a blue (as the background is blue), but will bring it as close to white as I think is necessary. (I chose #8ddbff for mine).
• Change the “Size” field to 15. (Play around all you like)
• Change the “Range” field to 40. (Play around all you like)
• Your new banner should look like this (in style, of course):
  

Step 6: White Oval Layer

• Create a new layer (In total, you should have 3 layers + your text layer at this point if you have not done anything too creative). Select your new layer.
• Right-Click the Rectangle Marquee tool on the side and select “Elliptical Marquee Tool”
  
• Select a good portion of the image, making sure you cover no more than 50-60% of your text. At this point, if you have not done so, then make sure that you select your paint bucket tool back to “foreground”, and not “pattern”. Take the paint bucket tool and fill whats in the elliptical marquee with white! (important, even though it may look ugly at this point).
• So you know what you are doing in the next step, set opacity to about 70%. It is important that you do NOT unselect the area you have selected with the Elliptical Marquee tool at this point.
• The following steps are important. (seeing as I will not be able to use screenshots to show you what I have selected). On the sidebar (in the layers ‘widget’), select the text layer. Using the “Magic Wand Tool”, press/hold alt.
• You will see a little minus (-) beside the tool. Go over to your image and select the striped background above the text. What this ’should’ do, if the steps have been followed, is select only the insides of the text on “ThinkBlogger”, or whatever you have chosen.
• Immediately following this (while you still have your selected area sacred), click on the new “white” layer that was created a few steps back.
• go to “Select” at the top menu (File, Edit, Image…… etc) and click it. A dropdown menu will appear, then find ‘Inverse’ and select it.
• What this should do, is inverse your selected area so everything within the white is selected, but not the text. Press delete. What you should see is the inside of the text still whitened while all the other mess, now gone.
• Select the opacity of the white layer, to about 25%. This can be done on the sidebar. The end product should look something similiar to this (..if you managed to make sense of all my teeth-grinding steps):
  

There you have it! A nice clean tutorial to help you get started There you have it! A nice clean tutorial to help you get started