How to Make a Blog Graphic Tutorial

         
This tutorial will show you how to make a graphic for your blog. This technique can also be used for your website or wherever you'd like. It's pretty simple to do and all you need is a basic photo editor (I use Adobe Photoshop, but almost any photo editor will work for this tutorial).

Sizing

The first thing to do is figure out the size you want your graphic to be. This might depend on what blog service you use or how your website is set up. To find what size would work best for my layout, I took a screen capture of my blog. I selected the area I estimated my image would look nice in with the Rectangular Marquee tool in my image editor. I then selected copy and paste.

The size of my blog image for this blog is 900 (width) x 222 (height). Play around and see what works best for you.

Icons

Next, you want to choose some images to put in your blog graphic. Choose about 10-20 images. Later, we'll narrow them down. You want to choose images that fit well with your blog or website and represent what you do. For example, look at stats for your blog or website and see what your most viewed entries are or entries with the most comments. You might look at images in those entries and choose your favorites of those images to put in your blog graphic. If you own an Etsy blog, you could look on your Etsy stats and see which of your Etsy items are viewed the most. Use images from those items in your graphic. You don't just have to rely on what's popular. Use images you think look best and work well with each other.

I made a folder called "Icons" on my computer where I put all the images I considered using. For my images, I chose images from my favorite and most popular blog posts. These are some examples of images I considered:



Next, you want to resize your images in to icons so they are small enough to fit in your graphics. I made my icons 150 x 150 pixels. 6 icons make a 900 pixel width altogether which is the size I wanted my graphic. Choose a size for your icons that fits in to your overall graphic.  For example, you could do 5 icons that are 150 x 150 pixels if your image is 750 pixels wide. The important thing is to experiment and see what works best for you. You might decide you want to change the size of your graphic once you play with icons.

Once you decide a size for your icons, copy and paste the icons in to a new image the size of your blog graphic. Play around with different icons and see what works best. The good thing about icons they're easy to replace so you can change the icons in your graphic later if you want. For my blog graphic, I decided on these 6 icons. I chose a mix of my Etsy items and photos I had on my blog:



Text and Title
You need to add some text now. Pick a couple of fonts you really like and think would look nice with your graphic. You might want to download some new fonts.

I ended up choosing a font called Ahnberg for my graphic. I just wanted to put the title of my blog above the icons. You might want to add some other info such as a logo or caption. Once you have your text, flatten the layers in your image editing program and save it as a JPG, PNG or GIF file. You've just made a blog header graphic!



Putting it Together

Now you just have to add your new graphic to your blog or website. You might want to take a screen capture of your blog first and paste your blog image in to see how it looks. How you upload your blog graphic will depend on the service you are using. To add your graphic to Blogger, click on "Layout". On the header box, click edit and upload an image. I put the placement "Instead of Title and Description".

Let me know if you find this tutorial helpful. I'd love to see your blog header graphic.