What Is The Size Of A Banner In Photoshop
This tutorial will show you how to use your product images to create a banner ad in Photoshop. Once you’ve designed a banner in Photoshop, you can swap out images and text for future banners as needed. This blog explains how to add an image, text, and a button to a banner.
This tutorial is intended for newcomers. If you’ve never used Photoshop before, you should become acquainted with the concept of layers. You can join us at Blue Sky Graphics online graphic design course to learn graphic design software like Adobe Photoshop, InDesign and Illustrator in a one-to-one online classroom setting.
1. What size banner do you require?
The first step is to create a blank file in the banner size you require. The most common banner sizes are listed below. Using the instructions below, you can type in the dimensions in Photoshop.
In Photoshop or a similar programme, choose one of these banner sizes.
Go to File > New in Photoshop.
Select ‘Web’ in the window that appears and enter dimensions of 300 x 250 pixels. This is one of the most common banner sizes. When you click ‘Create,’ a new blank image appears.
2. How to Create a Banner in Photoshop Include a product image in the banner.
Go to File > Open and select one of your product images to include in the banner. Optional: Use a product image with a transparent background if you want to be able to change the background colours in the banner (png file, not jpg). A jpg file can be used, but the background will be visible in the banner. The checkered background in the screenshot below is Photoshop’s way of indicating that the background is transparent.
Then select Window > Arrange > Tile All Vertically from the menu. This displays the image as well as the banner template side by side.
Then, using the Move tool (green arrow below), drag your product image into the banner. The product is now visible on your banner, as shown here. You can close the product image tab once the product is on the banner template.
3. Scale the image to fit the banner.
Go to Edit > Free Transform to resize your product image to fit the banner. This will place markers around your product image, which you can use to resize it. This also allows you to move your product around on the banner. So resize and move it to the desired position.
4. Alter the background colour if desired.
Because we’re using a product image with a transparent background, we can change the background colour to whatever we want. In the layers panel on the bottom right of the screen, select the background layer.
Then, as shown on the left side of the screen, click on the colour picker tool. This activates the colour tool. Choose from black or any other colour you want.
5. Make the background colourful.
Click anywhere on the image with the Paint Bucket tool (make sure Layer 1 is still selected). This turns the background black.
6. Fill in the blanks on the banner with text.
I’m sticking with the white background for the rest of the tutorial.
Select Layer 2
This is due to the fact that we want the text to appear on top of the banner, so select the topmost layer. Then select the Text tool and place your cursor on the banner where you want the text to appear. You’ll notice a text box appear where you can type your text.
In Photoshop, add text to a banner.
You can change the font size, colour, and other settings in the menu on the right side of the screen.
7. Modify the font settings
Click and drag the image with the rectangle tool. Some tools are located in submenus. Click and hold on the tool icon to reveal the submenu. Some tools have submenus, while others do not.
Click and drag the corners of the rectangle to resize it.
In Photoshop, create a button.
Now, on the top bar, choose a colour from the ‘Fill’ menu.
Change the Color of a Button in Photoshop
Click on the Text tool once more, and then on the rectangle, so that the text appears on the rectangle to make it look like a button. Enter some text, such as ‘Shop Now,’ or something similar.
In Photoshop, add text to a button.
To move and position the text, use the Move tool again, just as we did earlier in the tutorial to move the image. Here’s the finished banner after you’ve positioned it.
If you want to add your logo, open your logo file, then use the Move tool to click and drag the logo into the banner, resizing and positioning it as desired.
8. Save the JPG file as well as the Banner Design Template.
Finally, go to File > Save As and choose JPG from the dropdown to save the file as a jpg for use in Adwords and other advertising. Then repeat the process, but this time save as a PSD file. This will save the file with all of the layers intact, allowing you to return to it later to change the image, text, or button and create new banners. Your banner design template is the PSD file.
Other Banner Dimensions
After you’ve created a banner in 300250, create banners in other standard sizes such as 72890, 160600, 120600, and mobile sizes. It takes time to create the templates, but once you have the basics down, creating different versions of the banners as you launch new collections becomes quick and easy.
While there are several banner template tools available, working in Photoshop provides the most flexibility in terms of sizing, positioning, and tweaking all aspects of the banner.
