Gimp (short for Gnu Image Manipulation Program), a powerful free image editing software
Source: wikimedia commons
If you desire to make your own website banner, chances are that you are on a budget and would like to save some money doing it.
Fortunately there are some free options available for anyone that are quick and easy to use.
Available Options
Doing a quick search on the web will give you numerous opportunities to find some great options for creating your new website banner. A couple of search terms you may want to start with are:
- Free banner maker
- Free image editor
For the purposes of our project today, we are going to use a free image manipulation program called Gimp. Gimp is a free high powered program that has similar features as the very costly program Photoshop.
Download and Installing the Software
The first thing that you will need to do is to download the free software. Gimp is available for both Windows, Mac OS X, and Linux. If you are using Linux, it's very likely that your Linux Distribution came with Gimp. If you're using windows you will want to use the installer for Windows from the website or by using the link below.
Download GIMP 2.8.2 – Installer for Windows XP SP3 or later
Using the installer is easy to use and pretty much like installing any other Windows software.
If you are installing the Mac OSX version, GIMP runs on OSX natively so no X11 environment is required.
A complete list of all downloads is available here: http://www.gimp.org/downloads/
Getting Started
One of the first things you will want to decide when creating your banner is what size it will be. Here are some common banner sizes that you may wish to use as a reference:
- 88x31 Micro Bar
- 120x60 Button
- 125x125 Square Button
- 120x90 Button
- 234x60 Half Banner
- 468x60 Full Banner
- 200x200 Square Button
- 250x250 Square Button
- 300x300 Square Button
- 120x240 Vertical Banner
- 720x300 Banner
- 728x90 Horizontal Banner
These are just a few of the possibilities. Try one of these or make up your own sizes to fit your needs. Note: 125x125 works great when using Ad Squares Plugin inWordPress.
Adding Images
For our example (don't worry, it's coming as soon as we gather what we need), we are going to create a 468px X 60px banner using Gimp. Our example is just one way to create the banner. Please click on this link for the full documentation on how to use Gimp.
The banner will be created for a fictitious website (at the time of publication) called cheapcars.com.
The hardest part of the project is trying to decide what you will want your new banner to look like. After you have an idea of what you want you will need to get some images for use in your new banner. The best solution is to use your own images.
Selecting an image from www.sxc.hu. Special thanks to Michal Zacharzewski for the image.
Source: mzacha at www.sxc.hu
Finding a Royalty Free Image
If you are unable to produce your own professional quality images, you may wish to look for a place where you can get free royalty free images for use in your banner. One of my favorite places to get great quality free royalty free images ishttp://www.sxc.hu/. Here you will find some great images, many of them are royalty free, however some to request that you get permission before using them.
I chose the image of the car because it was somewhat generic with no brand names and it didn't have any background that needed to be edited out.
All the person that offered up the image requested is that I send him an email so he can see how his image was used.
Adding Text
Next you will want to decide what text you will use for your banner. Your number one goal should be to create a banner that your visitor will want to click on.
For our example we are going to add the following lines to our banner:
- CheapCars.com
- Great Cars
- Low Prices
Putting it all Together
Okay, now that we have all of our parts we need to create the banner, let's get to work. Here are the steps with a few images along the way. We have also added a video tutorial at the end of this article.
Remember that this is only one way you can do it. Using Gimp or other type of image manipulation software you have several techniques you can use to create your banner.
- Open Gimp
- Select "File" and then "New". A box will now pop up asking you what size you would like to make your new image.
- Set the width and height to the desired size and then hit "OK". In our example we are going to use 468px X 60px. You should see a white box on the screen exactly the shape and size you are desiring to use.
- At this point, you may wish to save your file. By hitting save, it will automatically save your file in the xcf format which is the native format used in Gimp.
- Next it's time to edit the chosen image or images for the banner. The first thing we are going to want to do is reduce the size of the image because it's way too big for us to use on our banner at this point. For now we're not going to reduce it down to its final size we're just going to reduce it to a more manageable size. Using the scale image command on the Image menu, we are going to scale the image down to 200 pixels tall.
- Now that the image is much more manageable, we can use the Fuzzy Select Tool to select the car.
- We can now go to feather and feather out the border rather than making sharp edges. This will give our line that we do later an effect of fading into the car rather than a sharp stop.
- Next, select color to alpha on the menu. This will change everything we selected to transparent and leave everything that is not.
- Because this image has a white background, we are able to just select "autocrop image" to take out the extra background. After cropping we need to scale the image down so that it will fit inside the new banner. In this case we scaled the image down to 55 pixels tall.
- In this case, because the image has a transparent background, we are going to save the car as a png file.
- Now that the image is small enough to put inside the banner, we can select open as layers to insert the car. Once it is inserted, move it to where you would like it to be placed in the banner.
- You will now want to create a new layer to put your decorative line on.
- We can now focus on the decorative line that we are putting on the banner. Take the rectangle select tool and put the box exactly where you would like the black line. If it's not quite right, you can adjust the selection box to get it exactly the size you want.
- Next select the color you desire. In our example we are going to use black. Use the bucket fill button to fill the box with your selected color. You will notice that the black line we created extends into and covers up the car. To fix this, just reorganize the layers so the black line is behind the car.
- We are now ready to add whatever text you desire.
- Save the file in the format you prefer and you are done
Note: Later, a 1px border was added to the banner to help better define it. The border was created by going to the filters menu, then selecting the decor menu and then selecting add border.
Here's the Completed Banner
Choosing an Image Format
There are three main formats that you will probably want to consider when publishing your banner:
- The PNG png format gives you the option of using transparent backgrounds. This isn't used much for banners but it is an option available to you. The downside is that the PNG file is larger than other formats available.
- GIF gif format was once one of the most commonly used formats available. The advantage is that the file size is quite small however the downside is that the image quality usually suffers.
- JPG jpg is a great format for use in your banner. The file size is relatively small and the image quality is usually fairly good.
Using Gimp you will be able to save your images in any of these image formats.
ConversionConversion EmoticonEmoticon