How to create Banner of the website

Posted on at



A web banner is something we're all familiar with. It's generally the graphic at the top of a website, displaying the company name and logo, or it might be an advertisement—or a little of both, when it appears on a commercial website. A banner should be informative, attractive, and inviting—you want the casual visitor to stick around. We'll show you a few ways to do this. 




Method 1 of 6: Photoshop




  1. Make a Banner Step 1 Version 3_fa_rszd.jpg

    1

    Create a new document. Define your banner size: there are a number of standard banner sizes.[1] For our purposes, we'll focus on a standard "full banner" size: 468 pixels by 60 pixels:

    • Note: this is a standard size, but it's not a requirement. If your needs and requirements call for other dimensions, let that be your guide.


     

     

     



  2. Make a Banner Step 2 Version 3_fa_rszd.jpg

    2

    Set the background color. Fill the background layer with a color that compliments your website design.

    • Click on the Foreground Color to bring up the Color Picker, and select your fill color.
      Make a Banner Step 2Bullet1 Version 3_fa_rszd.jpg


    • With the Paint Bucket tool, fill background layer of the banner with your chosen color.
      Make a Banner Step 2Bullet2_fa_rszd.jpg



     



  3. Make a Banner Step 3 Version 3_fa_rszd.jpg

    3

    Create a new layer. We are going to fill this with a richer color to help set off the text and logo. We want it to be proportional to the size of the banner, and centered.

    • In the new layer, create a selection that is somewhat smaller than the original banner, and fill it with the desired color.
      Make a Banner Step 3Bullet1 Version 3_fa_rszd.jpg


    • Center the filled area. Select the entire layer by pressing CTRL-A (PC) or Command-A (Macintosh).
      Make a Banner Step 3Bullet2 Version 2_fa_rszd.jpg


    • From the Layer menu, select Align Layers to Selection > Vertical Centers. Repeat this step but select Horizontal Centers. This will center the contrast layer horizontally and vertically.
      Make a Banner Step 3Bullet3 Version 2_fa_rszd.jpg



     



  4. Make a Banner Step 4 Version 3_fa_rszd.jpg

    4

    Add your logo. Open your logo file, copy it, and paste it into your banner document where it will appear as a new layer. Resize it as necessary to fit. Press CTRL-T on a PC, or Command-T on a Macintosh, and use the handles to resize the document as necessary, using the shift key on the handles to resize proportionally.
     



  5. Make a Banner Step 5 Version 3_fa_rszd.jpg

    5

    Add your company or website name. Select the text tool, pick your desired font, and type it in. If it's not the right size, adjust as necessary, as described in the previous step.
     



  6. Make a Banner Step 6 Version 3_fa_rszd.jpg

    6

    Add extra elements. Sometimes, a logo and name is enough. Other times, adding some lines and ornaments will add the needed interest to your banner. Create a new layer to do this so that you can make any adjustments necessary without disturbing other layers.
     



  7. Make a Banner Step 7 Version 3_fa_rszd.jpg

    7

    Clean it up. Fine tune the placement of logo and title, and any extra elements, and then save your banner.




About the author

160