Graphics and Templates

Creating Web Banners with Photoshop

Posted on: July 23, 2011

If you want to create web banners for promoting your company, start with a horizontal banner as it would be the first thing noticed by your web visitors. A web banner is capable of making or breaking your company’s image so create a well-designed horizontal web banner to impress your potential clients.

Before getting started to make a web banner in Photoshop, I will like to add some information. Always remember that a good web banner include all the elements necessary for promoting your company i.e. name of site, company’s products or services and a company logo. All this can be accomplished by creating a banner in Photoshop. So read this post to find out how to form a web banner using Photoshop:

  • Open Photoshop software and click File and choose New. After file creation dialog comes into view, you will have to set file dimensions. Standard banner is 468 pixels in width and 60 pixels in height. Now click OK. You will see a black rectangle which will be your working screen for your web banner.
  • Now you will add background color. For this, click on Layer and New in order to create a new layer for background of your banner. Choose a color of your choice for background. If you want to change the default color, click on small black box that you will see in Tools panel. Search for overlapping boxes which will open the Color Picker panel. Choose your favorite color by moving cursor around the panel and click OK. Use your chosen color to fill it by clicking on Paint Bucket tool.
  • Inside your newly-filled box, a new color panel can be inserted by selecting Rectangular Marquee tool. After selecting this tool, create a box making sure that it is not as wide and tall as compared to your background. This will serve you as border. Now again click Paint Bucket tool to fill rectangle with your favorite color.
  • Your banner will not create the desired impact without inserting a picture in it. Add a picture by clicking File and then Open. Choose a picture and after clicking on selected image, select Image Size. Picture’s height should be the same as that of your banner but its width should be ¼ of its width. To pull the image on your banner, click Select All and then click again on Move tool. You can also give a drop shadow effect to your image by clicking on Layer and then Layer Styles. To do this, you will have to click on Blending Option.
  • Now it’s time to add company’s logo. Click Layer, New and give new layer the name of “Logo” and then follow the same procedure as described in above steps.
  • If you want to add a message on your web banner, you can do this easily. Click T on Tools panel. Now drag mouse to create a text block. Type your appealing (call-to-action) message and change font color and size by selecting Character Palette panel.
  • That’s all. Now you will save your work by clicking File and Save As. Save your banner in PSD format so that all layers remain preserved.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

Hi, My name is Tania Yellob and I love to write. This is my blog and I love to hear from you regarding my writings. Recently, I have started creating contents and templates for a famous website BuraqPrintables. Please visit it and let me know hows my work and any improvements I can do?


%d bloggers like this: