Creating Your First Banner Ad in Photoshop


As an ecommerce entrepreneur there is no particular reason that you would know what a GIF or a JPEG file is. In fact, it may be that the only tech smarts you have is that you hired someone to build and manage your website for you. However, many entrepreneurs are very hands on, do-it-yourself people that like to maintain control and save some money in the process. In this tutorial we will outline how to create your own banner ads using Adobe Photoshop

Any business owner will tell you that cash flow is the life-blood of a growing company, and saving money is tantamount to making money. Creating and managing your own images, such as banner ads and product photos, can help you to start saving money. While purchasing Adobe Photoshop is not a small investment, it is the industry standard for working with images and should be considered the only option. On the bright side, you can get it used and save a couple hundred dollars, or get it as part of a larger package from Adobe and get more bang for your buck.

There will be future tutorials about using Adobe Photoshop in Practical eCommerce that will present tips and techniques aimed at accomplishing specific business goals. For now, let’s create a banner ad.


Creating a banner ad that looks nice and attracts visitors to your website is something that requires marketing knowledge, graphic design experience, and a plan for your campaign. This tutorial won’t focus on what goes into a successful banner advertising campaign, but rather will be a how-to on the basics of creating a banner ad.

For the purpose of this tutorial, we want to create a banner ad that has our company logo on it, a message such as “Only the Best Rugs in Town”, and a call-to-action. Our company logo will help to establish visual recognition with out customers, as well as identify our business. Apparently we sell only the best rugs in town, which is outlined in our message. The call-to-action is critical to any advertisement, and is often overlooked. A call-to-action is an instruction that you give to the people that see the ad, such as “Call Now” or “Visit our website for more information”.

Let’s get started. First open up Adobe Photoshop. Version 7.0 or above is recommended.

Once the application is running select FILE > NEW from the menus at the top. You will be presented with a dialogue box where we define some characteristics of our new image, such as the width, height, resolution and some other options. You will want to make sure that the width and height are measured in pixels. Simply select “pixels” from the drop-down menus to the right of the text boxes. Our banner is going to be 468 wide and 60 pixels tall, which is a standard banner ad size called “Full Banner” by the Interactive Advertising Bureau.

Next we want to choose the resolution of our banner ad. Since the banner ad will be displayed on computer screens, we want to choose 72 pixels per inch, which is the resolution of a computer screen. As a frame of reference, most print materials are prepared at 300 pixels per inch, and high-resolution images can be 1200 pixels per inch. The lower the resolution, the smaller the file size, so 72 works just great for our application.
You can also choose if you want the background of the image we are about to create to be black, white, or transparent. This can always be changed later, so select what makes you happy. I chose white. Click OK to create our image.

Our first challenge is to place our logo on our banner. For this tutorial we will assume that you have a logo file somewhere, so we will want to open that up in Photoshop. This is accomplished by going to FILE > OPEN, and selecting the file that holds our logo.

We need to think a bit here about our banner. Our logo file should be large enough that you are wondering how this thing will fit in our little banner. The solution that we will use is to copy and paste our logo into our banner, and then resize it to fit. In our logo file, we go to SELECT > ALL at the top to select the entire logo file. If you only want to select a portion of your logo file, you can use the marquee tools to select an area. These are the two tools at the top left of the Photoshop toolbar (if you can’t see the tool bar, go to WINDOW > TOOLS to show it) and are used for selecting image areas.

To copy the selected image to the clipboard, go to EDIT > COPY. Next, click into our banner file and paste the logo in by going to EDIT > PASTE. The logo will probably appear to be cropped since it is larger in size than the banner. Not to worry, go to EDIT > FREE TRANSFORM and you will see a box around the logo, even the parts that are outside the image areas. We can now scale the logo by moving the handles at the corners and sides of the box. Hold down the SHIFT key while scaling to maintain the aspect ration of our logo, and scale it until it fits. You can also rotate and move the logo file around until you get into a size and position that you like. Click the checkbox in the top bar to commit your transformation, and our logo is now part of our banner ad.

If you logo is now a bit blurry, you can sharpen it a bit by going to FILTER > SHARPEN > UNSHARP MASK. Play with the settings a bit until you are satisfied with it, and click OK. We have just placed our logo into our banner add, but now we want to add some text so that we can get our message across and present our call-to-action.

To create text we will choose the Type Tool in our toolbar. The symbol that looks like a “T” on the right side, about halfway down the toolbar is what we want. Once we have selected the Type Tool we will click on our banner and type out our message: “Only the Best Rugs in Town”. At this point you can select the text and apply formatting to it. There are basic formatting controls at the top, and more advanced in the Character Palette (WINDOW > CHARACTER) and the Paragraph Palette (WINDOW > PARAGRAPH). One useful hint, which can really make the difference between do-it-yourself type and professional type, is to adjust the tracking of the letters, or the distance between the letters. This option is available in the Character palette and can really make your text look professional.

For our call-to-action we will use the type tool again, and type out our call-to-action: “Come and see our selection!” You can use the Move Tool, located at the top right of the toolbar, to move our items around. Photoshop operates based on layers, which you can see in the Layers Palette (WINDOW > LAYERS). You can see that there is a white background layer, a layer containing the logo that we pasted in, a layer containing our message, and a layer for our call-to-action. The Move Tool moves everything on a layer, so select the layer that you want to move and we can position our elements in our banner ad as we would like.

We are almost done, all that is left is to save our Photoshop file and export a GIF or JPEG for the web. Click FILE > SAVE to save the Photoshop file, and then click FILE > SAVE FOR WEB to export for the web. A dialogue window will appear showing our image and some options. If you have a photograph in your banner, you will want to choose JPEG high from the Preset drop-down menu. In our case, our logo and text are pretty simple, so we will choose GIF 128 Dithered from the Preset drop-down menu. Change the Colors option from 128 to 256, and click OK to export our banner ad as a GIF file.

That’s all there is to it. Now we can upload that banner ad to our website, deliver it to another site we are advertising on, anything we want. While this was simple example, there is much more to creating a banner ad campaign from a design, content, and marketing perspective. However, being the do-it-yourself type means that you are probably already looking into those, so learning to use Photoshop will allow you to realize your plans. Once you are able to create a banner ad, experiment with colors, fonts, images, and other Photoshop functionalities.

Our next Photoshop tutorial will focus on how to get your product images to look great. We will present some tricks and techniques to cleaning up your photos, balancing colors, contrast, and more.

PEC Staff
PEC Staff
Bio   •   RSS Feed