Blogging with Cents-How to Create a Simple Banner

Republished post but one I thought might be helpful to some….

I get asked this question a million times so I thought it was high time I answer it.  It’s super easy to create a banner.  Just have an idea of what you want in your head….image, colors, etc.

First, I recommend Paint.net.  It’s free and super easy to use & it’s what I’ll be using for this tutorial.  You can also use Gimp but it’s such a memory hog and I don’t like things that slow down my computer.

Step 1

Open your paint program and select new.  Enter the dimensions of the banner you want to create.  For this tutorial, I selected 125px X 125px.  It’s the most common size.  I also increased the resolution for a more crisp, clean banner.  I put 300 because that is a very nice quality but you could use what ever.  The default is 96.

createbanner

Now that we have our shape, it’s time to design.  This is pretty much where you can do what you want.  You can use the line, circles, text, etc to create the image you have in your mind.  I wanted to incorporate my logo into my banner but I didn’t want it to over power what my site was about so I decided to create a translucent type look with text overlay.

I wanted the entire banner background to be black to match my site.  This is where you click on your color, the little bucket, and then fill your square with that color.  Got it?!

createbanner2

So now I want to import my logo.  You click on layers, import from file, choose your picture that you want to import (if any) and viola…..it’s in your square.  Position it where you want and move on to the next step.

createbanner3

Since I’m going for a translucent look, I need to make my logo lighter and less visible.  I do this by clicking on Adjustments, then Hue/Saturation, then lowering the lightness to my desired look.  Hit Ctrl-d when done.

createbanner4

Finally, I add the text of my choice with the color of my choice.  I chose white for this banner and basically put it on top of the logo.  You can align it how ever with your font choice.  Hit Ctrl-d again when you’re finished.  That’s it!  You’ve just created a banner.

createbanner41

It’s really simple to use and you can create just about anything.  Remember to use the standard sizes for creating your banner.

  • 125 x 125
  • 468 x 60
  • 250 x 250
  • 88 x 31

So what does the finished product look like???  Here ya go! Clearly nothing fancy but it’s great for those of us who might be low on funds to hire someone else to do it.

125banneragain

Once you get really good at this, you’ll be able to create them for other people charging a flat fee!  Before you know it, you’ll be able to buy Adobe Photoshop and with all the money you’re making from designing banners and headers, go pro!……woohoo:)

Join The Discussion

*

 SUBSCRIBE TO GET UPDATES AND SPECIAL GIVEAWAYS JUST FOR BEING AN EMAIL SUBSCRIBER! 

Comments

  1. 2


    Stefani says

    Thanks for the tutorial. I have been making buttons for my sites but never thought of using the logo like you did. I blogged about this post on one of my blogs too!

  2. 3


    Alyssa @ Keeping the Kingdom First says

    Now why didn’t you republish this sooner, woman! I needed this! Thanks for the very helpful tip. :)

  3. 4


    Jerry Tong says

    wow! this very good for me to make it! Thank for your tip!

  4. 5

    Thanks–super helpful! I have been doing mine in an old software program on my old computer–one of the few reasons I’m keeping that thing around. (The design software is not compatible with Vista on my new machine.) I’ll give this a try–may-be I can finally dump that old computer!
    .-= Teresa at MomsWhoSave.com´s last blog ..MomsWhoSave: RT @mparent77772 Infant denied health care — weight problem a ‘pre-existing condition’ http://bit.ly/1TOLGW #hcr #hc09 =-.

  5. 6