You may think you need to outsource the design of your ads, but in reality, anyone can learn how to make an ad banner in Photoshop. In this guide, I’ll break down exactly how you can do it with a few easy steps.
Using Photoshop, you can create your own high-quality ad of any size and include images, text, buttons, and any other elements you’d like. Using Artboards, you can even see and work with multiple canvases at the same time, which is helpful if you’re trying to make the same design for different size ad banners.
So let’s dive into how it’s done.
What Size Of Banner Should You Create In Photoshop?
You’ll likely need or want to use several standard banner sizes when creating your ad. The sizes range from small to large and cover different shapes, from rectangles to squares.
- 468×60 (a standard web banner)
- 240×400 (a good size for a vertical banner)
- 728×90 (a standard “leaderboard” banner)
- 120×600 (a “skyscraper” banner)
- 300×600 (another good vertical banner for a larger ad)
- 750×750 (a large square-shaped banner)
- 250×250 (a smaller square-shaped banner)
- 320×50 (the best-performing banner size for mobile)
As you can see, you can use many different sizes to create your ad banner, and there are even more options than the ones listed above. Find the size that works best for your purposes as it’ll be important for step 1 in the following process,
How To Create A Banner In Photoshop
In this example, I’ll create an example ad banner with a basic image and some text. However, your ad will obviously need something totally different to suit your brand. That’s why these steps should be used only as a guide, and you can customize the style as we go to suit your needs.
Step 1: Create A New Artboard
As mentioned, it is best to use artboards to create the ad banner, as this will allow you to work with multiple boards at once and move the elements around to fit all the different sizes.
To open a new artboard, head to File > New.
The New Document window will open. First, you can click the Web tab and select Web Most Common, as this ensures you’re working with the right PPI (Pixels Per Inch), 72 PPI.
Next, set the size of the canvas using the recommended sizes above. For my example, I’ll use a square banner of 750×750 pixels. Check the Artboards box to ensure you’re working with artboards rather than a single regular document.
Step 2: Add Any Images
Whether you’re advertising a product or a service, you’ll likely have an image or two you’d like to add to your banner. This could be an image of the product you’re selling or even a business logo. No matter what, you should try to have an image on your ad because ads with images usually fare better than ads with nothing but text.
To add an image to your project, you can drag and drop the photo from your files to the project, and it will appear there directly. You can also head to File > Open and select the image from your files so that it opens in a new tab next to the ad banner project.
This is useful if you want to edit the image before adding it to your project. Once you’re ready to add the image to your project, click the Image Layer in the Layers Panel and drag it to the other tab. Hover there for a moment, and the tab will open. You can then drag the image to the canvas and drop it there.
Remember that you can’t release the cursor until you’ve dropped the image directly on the artboard!
It is good to use images with a transparent background, such as a .png file, so that the ad’s background shows through. Otherwise, you can always edit the background of the ad to match the background of the image, which is what I’ll do for my ad, as the background color of the image is the same as the one I’d like to use for my ad (more on how to do this later!)
Step 3: Resize Images To Fit The Banner
Once you’ve placed an image on your artboard, you can resize it anytime by heading to Edit > Free Transform.
Toggles will appear around the image, and you can click and drag to change the size and move the image around the canvas until you’re happy. Click outside the toggles and drag left and right to rotate the image.
Step 4: Change The Background Color (Optional)
For the most professional appearance, you want the background of your ad to match the background color of your image. If you have a transparent picture, you can set a background color other than white by heading to the color swatches in the bottom left corner below the toolbar.
Click the one in the front of the two squares and select the color you’d like to use in the Color Picker window.
Once you’ve selected a color, click Layer 1 in the Layers Panel, so the Layer is selected rather than the Artboard.
Then, click the Paint Bucket Tool, which may be hidden in the Gradient Tool, so click and hold the Gradient tool to find the Paint Bucket.
Click the canvas, and the background will change to the color you selected.
Otherwise, if you want to match your ad’s background to the background color of an image you’ve added, you can click the Eyedropper Tool and then the image background to pick up the color.
Then, click the Paint Bucket Tool and click the background of the canvas to match the colors.
Your image now blends with the background of the ad. This is only possible if the background of your image is mainly one color; otherwise, it may be best to turn the image into a transparent PNG before adding it to your project.
Step 5: Add Text To The Banner
To add text to your ad, click the Type Tool from the Toolbar.
Your cursor will change to a text icon, and you can click anywhere on your canvas to add a text box.
In the Options Bar, you can edit the text’s font, style, color, and size.
To add a new text box, click another area in the canvas. Add as many as you’d like!
Step 6: Add A Button
The last thing you’ll want to add is a button for potential customers to click when they see the ad. This can be as simple or as complex as you’d like. To make a button, you’ll want to use the Shape Tool. Choose whichever shape you’d like. For my ad, I’ll create a rectangle button.
Click and drag to make the rectangle shape.
Now you can edit the button’s appearance. Select a fill color by clicking the Fill swatch in the Options Bar to open the Fill window.
You can select the fill style from the icons at the top. The first icon from the left will make the inside of the shape transparent, the second will fill the shape with a solid color, the third will fill the shape with a gradient, and the fourth will fill it with a pattern.
Click through the folders to see the different types of colored fills, patterns, and gradients available.
You can also change the stroke’s appearance or the button’s outline. To change the thickness, enter your desired width in pixels in the box. Change the style by clicking the drop-down menu and selecting from the options: solid, dotted, or dashed.
Finally, click the icon next to Stroke to edit the fill of the border in the same way you edited the shape’s fill. Choose the type of fill from the four icons at the top, and then click through the folders to see more colors, gradients, and patterns.
For the purposes of my ad, I’ll keep the fill of the button transparent with a solid white border.
Step 7: Add Text To Your Button
Finally, you’ll probably want to add some text to your button. Click the Type Tool from the Toolbar.
Click inside the button to add a text box.
Type what you’d like, and then you can edit the text’s appearance in the Options bar.
With the text added, you’ll have a button on your ad ready for customers to use.
Your banner is now complete.
How To Resize An Ad Banner In Photoshop
Once you have a banner you’re happy with, you may want to resize the project if you’d like to use the same design for a different size banner. Photoshop’s Image Size feature allows you to resize easily, but you may lose quality if you resize the project too much.
In general, it is better to size down than up – increasing the size of a project more than a little bit can reduce the quality and create pixelation. For instance, if I’ve created an ad that is 750×750, I can downsize it to 250×250 without lowering the quality and keep the ratio the same.
To resize a banner, head to Image > Image Size.
Enter the new Width and Height in the boxes and make sure the Resolution is set to 72 PPI. Click OK.
The canvas will change to reflect the new size you’ve set. As long as you’ve sized down, you won’t notice much of a change in resolution.
You can also resize your image upon export, which I’ll explain in the following section.
How To Export Your Ad Banner
Once you’re finished, you can export your banner as a specific file type by heading to File > Export > Export As.
The Export As window will appear. First, you’ll want to ensure the file format is set to either PNG or JPG. Generally, it is best to export as PNG as this is the standard for web graphics and ensures the quality stays sharp and any transparency is preserved if needed. At this point, you can also resize the image if you need to by entering a different Width and Height value in the boxes under Image Size.
Once you’ve set your export settings, click Export to save the project to your files.
You can then rinse and repeat this process with other ad banner designs or with the same design but in another size. With a basic idea of what you’re looking for, creating an ad banner in Photoshop is surprisingly easy!
