How to Create a Banner for Blogger or ETSY

Making a banner for blogger or Etsy is quite a cinch. This tutorial will go through the basic steps you can take to create your banner from scratch. The first thing you need to do is download GIMP, a free software program available to PC's and MAC's that will allow you to form a working space and let you save your creation as a JPEG.
Once you have downloaded GIMP, you are going to go to FILE > CREATE NEW IMAGE. Here you can specify the size you would like your banner to be. For blogs, I would recommend not making the banner wider than 800 pixels. If made wider, it will alter the dimensions of your blog layout and you are prone to having your page go off the side of the computer screen. For height, you can choose. I like a thicker banner, so you will see below that my dimensions are 800 x 400. NOTE: ETSY BANNERS ARE REQUIRED TO BE 760X100 PIXELS.

Now you have your working space. Now you can customize your backdrop. If you prefer a white backdrop, you can skip this step and keep it white. However, if you would prefer a pattern of some sort, here's what I find to be the easiest. Go to google and image search for whatever you would like to be your background. Here, I typed in "Pattern" in the search and the below patterns came up. I found 3 that I liked and downloaded them to my desktop.

Now you are going to import your downloaded image[s] to GIMP. To do so, FILE > OPEN > select where ever you have saved your download. I always save mine to the desktop so they are easy to find.

I imported 3 patterns that I downloaded from Google below. I ended up going with the gray stripe pattern. So now that I have chosen my background image, I need to import it to my blank workspace. To do so, on your pattern window you will need to copy the image by using the toolbox. You will see that the first tool on the top left is a rectangle. Select it. Now you can select the area you would like to copy and paste. Here, I dragged the rectangle from corner to corner, selecting the whole image. To copy, press CTRL + C or EDIT>COPY. Now you have copied this image to your clipboard and are free to paste in to your workspace.

Open your blank window. To Paste your background, CTRL + V, or EDIT > PASTE.

Your background may not fill the dimension of the space, so you can adjust that by selecting the pattern [SHIFT + T] and elongating/widening or whatever necessary to fit the dimensions you'd like. Below, I have fit the pattern to the whole of the prospective banner.

Let's get you familiar with some of the other tools that are available to you in the toolbox. Let's say I want to add some color the gray stripes so it's not so boring. I'm going to add in some pink tones by selecting the paint bucket in the tool box. The paint bucket will fill in color for you in a selected space. I'm going to alternate the stripes pink/gray. To find a color, simply double click on the 2 rectangles in the middle of the toolback. This is your color pallette. Here you can click anywhere on the "rainbow" and find a color you'd like. I found my shade of pink and clicked ok.

Now, with your paintbucket selected and full of the color of your choice, simply click the mouse over the area you would like to dump the paint. It will fill in a given space to the whole parameter. I want to alternate the stripes, so I started in the corner and went every other one. I decided I even wanted to go a bit further and change the level of the pink to make it gradually fade to light. To do so, in your color pallette simply drag the bar to a lighter shade or another color all together to "re-fill" your bucket.

Now that I have my background just the way I want it, I would also like to add some graphics. Here's where the LASSO tool comes in handy. This blog is going to be about home decor, so I decided I want a couch to portray that feel. Again, I went to GOOGLE, searched "COUCH GRAPHIC" and found a couch that I liked. Download.

Now I'm going to import the couch to GIMP, just as we did previously with the pattern background. The image will open in its own window. I now need to get that couch imported to my backdrop, but not so fast! It's not as easy as importing the backdrop as we did earlier. If you were to use the rectangle lasso on this image, copy and paste to the background, you're going to get the whole image - white back ground included. And that would look awful! Instead, you want to cut out JUST the couch! Here's how [it's tedious!]. Go back to your toolbar. You will find the lasso tool looking something like, well, a lasso or word bubble. Select that tool. What this tool will allow you to do is cut out any specific area by using the mouse to outline the graphic. Since I want to cut out just the couch, I select the LASSO tool and find an edge of the couch to start. You will notice that once you click the mouse down, a square will form. This means that you have pinned that point. From that point, a line is connected until you pin down your next point. These lines will connect you around your image until you come full circle to where you started and will cut out the image selected within the lasso. TIP: SELECT POINTS OFTEN AND CLOSE TOGETHER. You want to lasso as close as possible to the graphic you are wanting to cut out to avoid the white [or whatever background you may have with the image you are using] coming with you when you paste.

Once you have lassoed the image together, you want to copy and paste it to your banner CTRL + C [You will know if you have lassoed your image completely if you have connected all the dots and flashing dashes are surrounding your image.]. Now open your banner, and paste the graphic CTRL + V.

You can move the image anywhere you'd like by pressing SHIFT + T. This will select your image and allow you to place it where you choose. I chose to move the couch to the bottom right corner.

You want your banner to look as professional as possible, so let's do some clean up. You will notice if you zoom in on the couch, there are still traces of white outlining the couch. I did my best with the lasso to get close enough to the image, but remnants still remain. Let's get rid of that. Here's where the ERASER tool comes in that you see in the toolbar. Select the ERASER, which will enable you to do away with the white. Make sure whenever you do any editing that you are on the correct LAYER that you are wanting to edit. Look to the right of the picture below and you will notice the HISTORY of this creative piece. There are 2 layers - the background [the stripe layer] and the couch [the selected layer]. Notice that the couch layer is selected because that is the one I want to erase on. If you make a mistake and accidently edit the wrong layer, don't fret, just push CTRL + Z and that will undo your last move. Or you can go EDIT>UNDO. Oh, also you can adjust your eraser size in the left bar as well. Now carefully trace the edge.

So I love the background, the image is looking dandy, now how about a name for this blog/shop? I'm just going to title this "The Striped Couch." Again, in the toolbox you will see a big fat A. That's your text. Here you can adjust the font/size/color. I already have a text layout in my mind where I want "striped couch" to be at a diagonal, so I'm going to create 2 separate text boxes. One with just "The" straight. The second will be "striped couch" so that I can edit and rotate that selection.

Now I'm going to rotate "striped couch" by using the ROTATE tool bar. The icon is a square with arrows turning it. Make sure that you have the correct layer selected before rotating.

Fantastic! I'm satisfied! Now, you need to save this as a JPEG to make it upload compatible to your website. To Save, FILE > SAVE AS you will see a drop down menu SELECT FILE TYPE. Make sure you select JPEG and voila!!! You now have your own custom banner! Congratulations!

This tutorial showed you the basic skills you need to create a decent banner for yourself. Obviously, there are more tools in the toolbox, which you should explore! Tools like cropping, effects, paint brush, dodging are all there so play around with it! Good luck!