 Paint.net tutorial: Making a website header |
 |
 |
 |
|
Paint.net tutorial: Making a website header |
|
|
 |
How to make a website header in Paint.net
I love the free image editing software Paint.Net. It’s a serious competitor for Photoshop CS4 ($799!) in the do-it-yourself market.
This is Part One of a three-part series covering the three major FREE graphics editors (we’ll also cover GIMP and Pixlr.com).
Here is the header we’ll create in each tutorial:
You can watch this video or follow the step-by-step tutorial (the video covers transparency, gradients, and color gradients, which are not covered in the step-by-step tutorial)
Video: Paint.net Essentials Tutorial in 12 min
Step-by-step tutorial
1. Start Paint.Net. Make sure the Tools, Layers, and Colors windows are visible. If not, enable them from the View menu.
2. Go to your favorite free stock photography site. For example, Google “free stock photography” or check Stock.xchng. Find an image you want for your logo, view it at the largest possible resolution, Right-Click > Copy and then…
3. Edit > Paste in to New Image.
4. Click Rectangle Select (the top left icon 
in the Tools Window), and then select the part of the image that you want to use. Leave some space at the right for image fade-out as shown below.
5. Click Image > Crop to Selection.
6. Decide on the banner height: 150 pixels is a good height for a banner. Click Image > Resize, then enter a Height of 150 and click Ok.
7. Choose the width depending on the overall width of your website (normally 800 or 1000 pixels). Click Image > Canvas Size and set Width to 800. Do not check Maintain Aspect Ratio.
Notice the grey checkered area. This indicates transparent pixels.
▪Are you using a variable-width theme or template?
▪Are you planning to use this image as the background for the header area?
If the answer to both questions is YES, then set width to at least 1800 pixels. WARNING: Most browsers will see ONLY the first 1000 or 1200 pixels of width.
8. Now let’s insert a background color / layer. Click Layers > Add New Layer. The Image will remain unchanged, but note that the Layers window now shows a new Layer 2.
9. To help in keeping up with the layers, doubleclick on Layer 1 and rename it Swan. Now doubleclick on Layer 2 and rename it Background.
10. Now uncheck the box next to Swan in the Layers window. This hides the Swan layer, leaving only the Background layer.
|
Layers Layers are ordered top-to-bottom unless there are transparent pixels on the upper layer(s). The only reason that the swan was visible in Step 7, even though Layer 2 (now called Background) is actually an upper layer, is because the Background (currently upper) layer, is transparent. |
11. Fill the background with a blue color to match the background in the swan image.
.Make the Swan layer visible again (by doubleclicking on it in the Layers window, remember?) and then make the Background layer invisible (doubleclick on it too, in other words).
.Select the Color Picker 
from the Tools window, then left-click on a dark part of the blue background in the swan picture. Note that the Primary color in the Colors window changes to a dark blue-black.
|
Colors The upper left box in the Colors window (or Color Picker) shows the Primary color. Most drawing tools will default to this color. Just below is the Secondary color. Fill colors will default to this color. To set either the Primary or Secondary color, click on the appropriate box and then select a color in any of three ways: |
12. In Step 11, you set the primary color to a dark blue by clicking in the image. In the Layers window, select Background. In the Tools window, select the Paint Bucket tool 
, then click anywhere on the image. Oops,
you spilled the paint and so the entire image turns dark blue! Why? Because, remember, you just selected the Background layer, so it is on top.
13. To fix this, click on the Background layer in the Layers window, then click the down arrow to move the layer down. Since there are only two layers in this image, the Swan layer automatically becomes the top layer now.
14. Now you see the swan and the background. Know why you see the background color to the right of the swan? Because the Background layer shows through the transparent pixels in the Swan layer.
15. To “fade out” the right border of the swan image so that it blends into the background, use the Gradient tool (transparency gradient) or use Gaussian blur. (Instructions for this are provided in the video above.) Here is the result:
16. Now click the Text tool 
and write your banner text. (This will be demonstrated in a video also.)
17. You can insert any other image by following the same procedure: Add a new layer, and then crop and resize the image. Remember that new layers won’t be visible unless they are on top, or unless the top image has transparent areas that allow the next lower image to show through as the Swan did with the Background.
|
Hints Multiple Images 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 (such as the banner in the example above) — see the open images on the top right — and then Zoom Zoom in and out on your image using the View menu or using Ctrl + Scroll (that is, press Ctrl and at the same time roll your mouse scroll button forward and back to zoom in or out). Finished? Save the .pdn file (that is the Paint.Net file that contains all of the layers in that image, all in one file) in case you want to work on the layered image more later. Then click File > Save as, save the file as a .jpg, and then upload it to your website. |
That’s it! If you like this article, please comment below.
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
•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).
Comment on Facebook