How to create a website banner using free image editing software Paint.Net in 15 minutes

I love the free image editing software Paint.Net.  It’s a serious competitor for Photoshop CS4 ($799!) in the do-it-yourself market.  Another (reputedly) more powerful, but harder to use free software is Gimp.  But Paint.Net does the job for me.  Here is a typical application: making a banner for a website.  Below is a step-by-step guide.

But first, here is the result:

And here is what you do:

1. Start Paint.Net.  Make sure the Tools window, the Layers window, and the Colors window are visible.  If not, enable them from the View menu.
   
2. Go to your favorite free stock photography site (Google “free stock photography” or check Stock.xchng), find the image you want for your logo, view it at the largest possible resolution, then Right-Click > Copy
3. Edit > Paste in to New Image
   
4. Click on Rectangle Select on the Tools Window (top left)  and use it to select the part of the image that you want.  Leave some space at the right to do the image fade-out (see below).
   
5. Do Image > Crop to Selection
   
6. Decide on the banner height: 150 pixels is a good height. Do Image > Resize and enter a Height of 150 and Ok.
   
7. Choose your width depending on the width of your website (normally either 800 or 1000 pixels).  Then Image > Canvas Size and put a a Width of 800.  Do not check Maintain Aspect Ratio
   
   Notice the right of the image has filled with empty or transparent pixels (the grey boxes indicate transparent pixels).
   If you are using a variable-width theme or template and using the image for the background image of the header area, you need to make it at least 1800 pixels (but be aware most browsers will only see the first 1000 or 1200 pixels of width)
8. Now let’s insert a background color / layer.  Do Layers > Add New Layer.  The Image will remain unchanged but note the Layers window now shows a new layer, “Layer 2”
   
9. Now we need to “digress” a bit and talk about layers.  First, for clarity sake, double click on “Layer 1” in the Layers Window and call it “Swan”.  Now double-click on “Layer 2” and call it “Background”
   
10. Now Uncheck the box next to “Swan” on the Layers Window.  This makes that layer not visible.  Now you only see the empty (transparent pixels) “Background” layer
    
    You need to understand layers: images show up in the layer order which is top-to-bottom unless there are transparent pixels on the upper layer(s).  The only reason the swan was showing at all (in the previous frame #7), given that “Background” is actually an upper layer, is becausee the “Background” layer is all empty (transparent) pixels.
11. Now let’s fill this background with a blue color to merge as closely as possible with the Swan background color.
    First, make the Swan layer visible again and the Background layer invisible. Then select the Color Picker on the Tools Window and click on a darker area of the swan picture.  Notice the Primary color on the Colors Window has changed to a dark blue / black
    
    You need to understand the Color window: The upper left box is the Primary color (the drawing color of all tools).  Just below is the Secondary color (the fill color of most tools).  To select a color for drawing, first select either the Primary or the Secondary color box.  Then, either click on a color from one of the palettes, or use the Color Picker tool and click anywhere on the image.
12. So now you have set the primary color to a dark blue.  Go back to your background layer (select it in the Layers Window), select the Paint Bucket Tool and click anywhere on the image.
    Oops!  The entire image goes dark blue!
    
    The reason (of course – if you have read above about layers) is that the “Background” layer is on top of the “Swan” layer.
13. So you just need to move the Background layer down below the Swan layer. Click on “Background” in the layers window and then the down arrow:
    
14. Now you see the swan and the background (remember that the right of the swan image is transparent pixels)
    
15. Next: fade-out the swan image right border using the Gradiant tool (transparency gradient) OR gaussian blur it.  (Instructions for this will be provided in a video later).  Here is what you get
    
16. Now use the Text tool to write your banner text. (Also will be demonstrated in a video)
    
17. You can insert any other image by following the same procedure: add a new layer, crop and resize.  Remember new layers won’t be visible unless they are on top.
    Hint #1: You can work with multiple images simultaneously inside Paint.Net.  Just Edit > Paste to New Image the new image, crop and resize, then Edit > Select All, Copy, select the image you are actually working on (ie. the banner in the example above) – see the open images on the top right — and Edit > Paste in to New Layer
    Hint #2: You can increase the screen resolution (visible size of your image) in the View menu, or else by putting your mouse over the image and Ctrl + move the mouse scroll bar.
18. First save the .pdn (Paint.Net file with all the layers) in case you want to work on it more later.  Then File > Save and save it as jpg and upload it to your website.

That’s it!

If you like this article, please comment.

Related (External) Posts

• Free Paint.Net graphics to make banner image (Youtube video) – illustrates another technique that may be more useful in certain situations, which is to use the Lasso tool to remove the background of the logo (swan) image
• Paint.Net tutorials Forum
• How to make a transparency gradient in Paint.net (used for fading out one image into another)
• How to make a banner in Paint.Net (also uses Lassoo tool)