Remove Background - Header Tutorial Using Paint.net

My favorite graphics program for creating headers is "Fireworks" by Adobe. However, that isn't cheap, and not everyone wants to spend that sort of money. So here is a short tutorial using the free software, Paint.net. You can get paint.net here. Sorry, this is for Windows only, there is no version for Macs.

I'm going to be creating a header that is for a fixed width template, so the dimensions will be around 750px by 150px. You can change that to suit yourself, if you're using a wider template. I will try and use some of the effects and techniques that you would commonly use for creating a header, just to give you some ideas of what you can do with the program.

Below, is a reduced size version of the header we are going to make. Follow the instructions, and you will be able to create a duplicate of it. Then let your imagination go, and create one for your own site. Let's get started.

Starting Your Header

Okay, let's make the header 760px wide, by 135 high. Depending on you particular template, you might need something wider than this.

Use the select tool, and draw a rectangle of the correct size. You can see the dimensions at the bottom left of the screen. Use the paintbucket (in the tools menu) to color this black. Now, open up the Ferrari image that you created earlier.

Create a new layer, and in the layers window, look for the properties icon. Rename this "car". Then copy and paste you Ferrari onto this layer, NOT the background layer. You will end up with something like the image below.

header demo image

Now create a layer that you will call "text". Draw a selection area, and then use the text tool to put in some text. I've chosen white copperplate gothic bold, in a larger size.

image of text

To get the header to where it is in the image below, I selected the text again. Then I copy and pasted it back into the layer called Text, and flipped the text.Effects/Flip vertical, then drag it to just below the original text. Next I used gaussian blur, and transparency to get a shadow effect. They are easy enough to find in your top menu.

Then I drew a new selection (again, on the text layer) and put in my byline in a smaller font.

Optional extra - transparency

I made the car fade out, so the right side blended in with the black background. What I did was draw a selection around the car, then used Gradient, in the tools menu. I then dragged the center nub around until the transparency looked right to my eye. The results can be seen in the image to the left.

I have also drawn a gradient over the text, then faded the bottom edge of the shadow. That gives a more realistic look to it.

text image

Final touches

I added a bit of a glow to the text. Just select it, then on the top toolbar, go effects/photo/glow. Also, I played around with the tinting of the image, and sharpened it. To finish, I went to layers/merge layer down. (you might want to save the header in the native format first, in case you decide to make changes to it later on. Once it's flattened, you are limited to what you can alter).

Then I saved it as a jpg. (I cropped the canvas off, to get the correct size for my header) The file size is about 20kb, so plenty small enough for quick loading. Below is the finished header. Click on the image to view full size.

header created with Paint.net

To get the header looking even nicer, I could remove the yellow reflection from the front windshield. Probably the easiest way to do that, would be increase the size of the image to 300%, so I can see the details. Then use the eraser to remove the reflection, and replace it with a black background.

Want to rate or comment on this page?

One star: Hopeless.
Two stars: Needs to improve, but acceptable overall.
Three stars: Good enough to help me.
Four stars: Better than I expected.
Five stars: Brilliant! Highly recommended.


 
All fields are mandatory!

Select your rating:           

 

 

characters left

Powered by Citricle

Paint.Net main page

More on Paint.net

Remove background | Replace background | Create a header

See what's been added recently. Why not subscribe to our RSS feed so you get notified?

Portfolio

See some website site designs done this year. From travel sites, to music. A great design starts with a professional look.

FB Fan Fages

Learn how to create your own great looking FB fan page. From designing a profile image, to using "fan gates".

Find Out More

Contact AJ to discuss a website design. Find out what's involved, how much it will cost you, and what you can expect to get with your new design.

website template examples The easiest way to get a classy looking website

If you prefer to create your own website design, then you really should check these out. Not all website templates are created equal, so to be the best, you need to use the best!

Not only will these templates give you a professional look and feel, they are easy to use, with instructional videos included.

Read More

loading