Before I begin I jut wanted to clarify that I'm not a graphic designer or illustrator by any means (any attempt I'd ever make at drawing up a header from scratch would just be awful), so this tutorial will just be a simple breakdown of the technical side of combining different elements together to create a brandable image; a much more accessible approach for those of us who aren't particularly artistically gifted.
A quick note on that though: it's really important that you respect copyrights on other people's work and make sure you read the licensing information on any image you wish use that you didn't create yourself. Not only could you find yourself in hot water by using images without the owner's permission, but it's also just not very nice. More on that later...
For now, here's how you (a mere mortal with limited artistic/creative ability) can put together a decent blog header...
1. Gather up your resources
Fonts
One good thing about Picmonkey is that you're able to access and use the fonts you've downloaded to your computer. However, sometimes it can take a while for them to transfer across and you may have to restart your browser or just wait for a bit after installing a new font.
There are a few different sites where you can download fonts for use on your design. The vast majority of these are free for personal use only. You may also find a few that free for commercial use too but they're quite often few and far between. Generally, to use a font on your blog (that isn't already free for commercial use) you'll have to purchase a commercial license. The cost of a commercial license for a font can vary drastically but you'll still find many around the US$5-10 bracket (around £3-6).
There are a few different sites where you can download fonts for use on your design. The vast majority of these are free for personal use only. You may also find a few that free for commercial use too but they're quite often few and far between. Generally, to use a font on your blog (that isn't already free for commercial use) you'll have to purchase a commercial license. The cost of a commercial license for a font can vary drastically but you'll still find many around the US$5-10 bracket (around £3-6).
Before I start a design project I normally go through and download any fonts I feel would be suitable for the 'look' I want to go for. I then try them out with my design to try and find the one that works the best. If I know the font is free for commercial use, great! If not, I go and find out how much a commercial license costs for that font. If it's affordable, I'll buy it, if not I'll normally just try something else. I don't know if this is necessarily the most efficient method but I feel like having a few different fonts to play around with initially helps me decide what sort of thing looks best for what I'm working on.
A few places where you can pick up fonts:
A few places where you can pick up fonts:
Font Squirrel: This isn't a hugely extensive database but all of the fonts listed here are free for commercial use. It's such a godsend of a resource!
How to check the licensing details: If you want a bit more information on the specifics of the font license, click on the font you want to use and then click on the 'license' tab on the page that appears.
How to check the licensing details: If you want a bit more information on the specifics of the font license, click on the font you want to use and then click on the 'license' tab on the page that appears.
1001 fonts: My personal favourite because it allows you to sample a snippet of text in each font.
How to check the licensing details: Hover over the price tag symbol to the right of the font and click for further information.
How to check the licensing details: Click on the font you wish to use and their should be a 'note from the author' underneath the font sample on the page that appears.
Pickmonkey fonts: As far as I know, some of the fonts provided on Picmonkey are free for commercial use and others are not so make sure you check before you use any of them.
Graphics
You may want to just have a text header, in which case don't worry about this step! But sometimes it can be nice to incorporate some graphics into your header.
I buy all of the graphics I use for custom headers on Etsy. While there are still other places you can buy images, for example Creative Market, I have yet to find a cheaper resource for high quality graphics and illustrations. On Etsy there is an absolute multitude of artists selling their work as clipart along with a commercial license for just a few pounds.
One pitfall of buying graphic packs from Etsy stores is the fact that the graphic you buy isn't unique in the sense that it's being sold multiple times to multiple people who can then also use it for their own purposes. However, so long as that doesn't bother you, it's a very inexpensive way to brighten up your blog header compared to the alternative of commissioning an artist to create an image from scratch.
Again, make sure you check the Etsy store's policies and read their licensing rules before using their images! Even if you've paid for them, stores can sometimes have extended licenses you'll need to purchase to use the image in a commercial context.
2. Prepping your canvas
Sizing your canvas
First things first, on the homepage of Picmonkey, click on 'Design' which will take you into the design area. I start all my headers on a canvas that's 900px (w) x 400px (h) and that seems to work well for Blogger. The width is the most important thing here, I always end up cropping my height down at the end anyway but having those extra few hundred pixels gives you a bit more room to work with.
To resize your canvas, click on the square 'crop' symbol at the top of the bar on the far left which will take you to 'Basic Edits' and scroll down to 'Resize'. Make sure you un-tick 'Keep proportions' before you type in your dimensions, and then click 'Apply' to make your changes.
Creating a transparent background
I always make header backgrounds transparent. I just think it makes them so much easier to work with since you can then put them against any backdrop without a huge white bar getting in the way. Furthermore, if there ever comes a time when you want your header image to have a white background, you can just simply overlay the transparent image onto a white canvas and save it as another file and that's you sorted!
To make your canvas transparent on Picmonkey go to 'basic edits' - or the crop icon at the top of the menu- click on 'Canvas color' and tick 'Transparent canvas'.
3. Adding Text
I've now chosen the font I want to use, I've downloaded it and installed it onto my computer. The next step is to add it to my design. On the left sidebar on Picmonkey again click on the 'Text' tool- that's the icon with the upper- and lower-case 'T's- and find the font you want. You can switch between Picmonkey's own ready-installed fonts and your own fonts by clicking on the 'Ours' and 'Yours' tabs at the top. When you've selected your font click 'Add Text' and type in your blog's title.
When you select your text a toolbar will appear that allows you to make adjustments. You can change your text's size either by pulling the 'size' bar across on the toolbar or by manually resizing the frame your text is contained in. You can also change your text's colour via the colour spectrum at the top. The arrows in the bottom right-hand corner will flip your text horizontally or vertically, the 'Blend modes' are premade format settings and the 'Fade' option edits your text's opacity. I usually fade my text out a little bit when I'm editing on Picmonkey to make it a little bit softer, especially if it's black. I also like the effect it creates but it's just a stylistic preference really.
4. Adding a Tagline
I've included the first image below to give an example what not to do! If you've used a cursive or decorative font for your blog title it's always best to use a much simpler serif font (like Times New Roman or Georgia) or sans serif font (like Arial or Tahoma) for your tagline, otherwise there's just a bit too much going on and the main focal point of your header is lost. The text in the example below also isn't aligned very well which is making the header look a bit unbalanced and lopsided.As a general rule, it's a good idea to pair different font styles as a means of creating contrast (contrast is good!). So, if you're using a serif font for your header text, it might be nice to pair it with a sans serif font for your tagline or vice versa. I found an excellent pin with some rules for combining fonts here!
I've temporarily changed the canvas colour back to white so I can gauge the spacing a little bit better and get a better idea of what my header will look like against a white background, but I'll change this back at the end.
5. Adding Images
In the screenshot below I've bought some individual watercolour flowers from Etsy to place around my text.
To add images to your header click on the butterfly icon in the sidebar which will take you to the 'Overlays' section. Here, Picmonkey has loads of its own graphics which you can definitely incorporate into your design if you'd like to. To add one of your own images though, click on 'Your Own' and select the image you want. Your overlays can then be edited and altered in the same way as your text.
The idea when adding graphics is to adorn your header without interfering with or obscuring the text in any way, since the most important thing is that your text is easily read! To prevent my flowers from getting in the way I've arranged the layers of my image so that the flowers have been sent to the back (apart from that one flower on the right-hand side which I've brought to the front to create a bit of depth). By adding the flowers at opposite ends of the header, again, it's helped to balance out the image.
To arrange your image's layers, right click on the layer you want to position or arrange and you'll have the option to 'Send to back' which will send the layer to the very back of the image, 'Send backward', which will send it a layer backwards, 'Bring forward' which will bring it a layer forwards and 'Bring to front' which will send the layer to the very front of the image.
It's worth noting another option on this list 'Duplicate layer' which allows you to duplicate a layer onto your canvas without having to re-import it from your computer.
6. Final Tweaks
Design in general involves a lot of trial and error so don't be afraid to play around and try different things. For example, once I had my flowers added in, I didn't feel as though they worked amazingly well with my tagline font. The font was a little bit too formal and a little bit too heavy with all of the elements involved in my header so I decided to change it to something a bit lighter, as you can see in the image below.
At this stage, another good way to create contrast between your header and tagline is to play around with colour. In the example below I've changed my tagline text to a colour that complements the images I've used, and I actually really like the end result!
Also, as I said previously, I only changed my canvas colour back to white temporarily. If you do this make sure you change it back to transparent before you save it!
Before I save my image I also want to crop off the excess height, since this will just appear as unnecessary padding on my blog, though I still want to keep the width the same. To crop your image, go back to 'Basic Edits' and click on 'Crop', then selected the area you wish to crop down to and click 'Apply'.
7. Save your image
Finally, when you're happy with the header you've created, hit 'Save' at the top of your page. When you're saving your image, make sure you save it in a PNG format by selecting this option in the drop-down menu. This will preserve your header's transparency.
And you're done! If you need it, you can find some more information about installing a header onto a Blogger blog here.
I know not everyone will benefit from this tutorial but I hope at least a few people find it helpful. As you can see I actually ended up liking this header so much I've permanently adopted it, which was a bit unexpected! I hope you like the end product, I feel like it's a nice change.
If you have any more questions please feel free to leave them in the comments, or tweet me @alphabethblog!
.JPG)
No comments
Thank you so much for your comment! They mean a lot to me and I read every single one. Sometimes I can be poor at replying so if you need a faster response feel free to email me at beth_farrelly@live.co.uk or tweet me @alphabethblog