Wednesday, June 26, 2013

Angelic Designs: Basic Banner Tutorial

I have always wanted to create my own banner to use on my blog, and on other social networking sites such as Twitter, YouTube, Facebook, and others. However... in the past, I always had a hard time getting it to fit correctly into the template. It would either be to small and I couldn't align it, or it would be to large and parts would get chopped off, or shrinking it would make my details hard to see. I could never get it to be the perfect size to where it fit just how I like it, that is.. until it hit me; why not look up the correct pixel size for what I'm making it for? That way it fits perfectly into the template, and there would be as much distortion or alignment issues, as it will align how it should be. This, I found to be the key to making a great looking banner that won't get chopped up or distorted, as well as anything else I may be designing. 

This video won't show the fancy fun stuff I did for my banner, but it'll give you a basic idea. I'll get into more fun stuff soon! The banner design you make is all up to you, as it should represent you. :)

Step- By- Step Instructions:

1. Finding the right size! This is the most important step. On blogger you can find out how wide your banner is supposed to be by going into your blogs layout, and selecting header. Before you upload your image it will tell you how many pixels wide it should be, and will give the the option to shrink to fit (I would still select this option when uploading to be sure your image still won't get cut off)
  • The width of your banner will vary depending on your template, some may also specify a certain height. If you are unsure of what size you need, you may be able to find it on google, especially with popular sites such as Twitter and Facebook. The website may also specify the resolution when you go to upload it.
2. Open GIMP, or whichever program you prefer and create a new file. Do this be clicking File>New. In the dialog box that comes up, type in the pixel specification (make sure you setting your size in pixels), then click OK. A new window will open with your blank banner. 

3. From this point how you edit your banner is really up to you. Play with colors, gradients, brushes, text... whatever you like. Your banner is all about you!

4. *Optional* If you want your banner to have rounded corners, you will need to first flatten the image. To flatten the image right click on a layer and select flatten image. All of your layers will be merged into one layer.  Then click on filters>decor>round corners then specify what you want in the dialog box and hit okay. A new window will open with your new image.
  • From here you can play around with whether you want to keep the background color and shadow or not. To delete then right click on the layer they are in and select delete layer. 
(Note: rounded corners may change your pixel size a bit if you choose to keep the shadow, this is why I would still select shrink to fit on blogger. They may also not look right on all sites.) 

5. When you are done and ready to save it to upload it to your blog, or view it as a picture, go to File>Export (not save, this will only allow you to save it as a GIMP file. But if you wish to save it and work on it later, then use save), and select the location where you want to save it to and name it as you'd like. You can also change the file type from here. Many websites prefer JPEG or jpg files. Then open it from where you saved it and take a look. 

6. Upload it to your blog or website. Follow the steps on the website, and be sure to check it out to see it you like how it looks!

FTC Disclaimer: I am not affiliated or being endorsed by any of the companies mentioned in this post. I am not being paid to write this post. All opinions are my own. 


  1. Great post and tutorial lovely! I am really starting getting into design and this is quite helpful! :)

    Andrea | RosyChicc

    1. Thank you so much! Glad that this tutorial is helpful to you! :)

  2. I just started my blog today and was wondering how to create my own banner! Thanks for sharing!

    Sarah xx

    1. glad that it helped :) i will check out your blog now. :)