Create A Website Banner In Photoshop

This is a tutorial on how to use your product images to make a banner ad in Photoshop. Once you design a banner in Photoshop, you can swap images and text as needed for future banners. This blog shows you the basics of adding an image, text and a button to a banner.

This tutorial is written for beginners. If you've never used Photoshop before, you should get familiar with the concept of layers in Photoshop. To learn a bit about how to use layers, here is a basic tutorial on layers from the Adobe site.

Steps to Make a Banner Ad in Photoshop

1. Create a new banner template

Go File > New

In the window that pops up, select 'Web' and enter dimensions as 300 x 250 pixels. This is one of the standard banner sizes. Click 'Create' and a new blank image opens up.

2. Add a product image into the banner

Go to File > Open and open one of your product images that you want to feature in the banner. Optional: If you want to be able to change background colors in the banner then use a product image with a transparent background (png file, not jpg). A jpg can be used but the background will show in the banner. The checkered background in the screenshot below is Photoshop's way of showing that it's a transparent background.

Then go to Window > Arrange > Tile All Vertically. This shows you the image and the banner template side by side.

Next, click on the Move tool (green arrow below), and click and drag your product image into the banner. As shown here, the product now appears on your banner. Once the product is on the banner template, you can close out the product image tab.

3. Resize image to fit the banner

To resize your product image so it fits the banner, go to Edit > Free Transform. This will put markers around your product image that you can use to resize your image. This also lets you move around your product anywhere on the banner. So resize and move it to the position you want.

You can also resize using the top bar as shown below. Notice that the image has been resized to 38% of it's original height and width for it to fit in the position I wanted.

4. Optional: Change background color

Since we are using a product image with a transparent background, we can change the color of the background to anything we want. Click on the background layer (Layer 1 below) in the layers panel on the bottom right of the screen.

Then click on the color picker tool as shown on left of screen. This opens up the color tool. Select Black or any color you like.

5. Color the background

Use the Paint Bucket tool and click anywhere on the image (make sure Layer 1 is still selected). This changes the background to black.

6. Add some text to the banner

For the rest of the tutorial, I'm continuing to use the white background.

Select layer 2. This is because we want the text to appear on top of the banner so click on the top most layer. Then choose the Text tool and click on the banner where you want the text to appear. You'll see a text box created where you can enter your text.

You can change font size, color etc using from the options in the menu on the right of the screen.

7. Add a button to the banner

Click on the rectangle tool and click and drag on the image. Note that some tools are in sub menus. To see the sub menu (like below), click and hold on the tool icon. Some tools have sub menus, some don't.

Size the rectangle by clicking on the corners and dragging.

Now select a color from the 'Fill' menu on the top bar.

Click on the Text tool again and then click on the rectangle so the text appears on the rectangle to make it look like a button. Enter some text like 'Shop Now' or similar.

To move the text and position it, click on the Move tool again, like we did to move the image earlier in the tutorial. Once you've positioned it, here is the final banner.

If you wanted to add your logo, you can open your logo file, use the Move tool again to click and drag the logo into the banner, resize and position it the way you want.

8. Save the JPG File and Banner Design Template

Finally, go to File > Save As and select JPG from the dropdown to save the file as a jpg to use in Adwords and advertising needs. Then repeat the step but now save as a PSD file. This will save the file with all the layers so you can come back to it later to change the image, text, or button and create new banners from it. The PSD file is your banner design template.

Other Banner Sizes

Now that you've created a banner in 300×250, go ahead and create banners in other standard sizes like 728×90, 160×600, 120×600 and mobile sizes. The template creation takes time but once you have the basics done, then making different versions of the banners as you launch new collections becomes quick and easy.

If you've tried it, let us know how it worked out. While there are several banner template tools out there, doing it in Photoshop gives you the most flexibility in terms of sizing, positioning and tweaking all aspects of the banner.

Thanks for reading. If you're looking to outsource your product photography and get images in a transparent background, view our homepage for samples and pricing.