Ok, so we had a lot of groundwork to set before we got to this point – but at last we’re able to start designing our graphics! WooT! :D
If you’re new to this series, it’s a 10 part event that happens each Friday – so if you haven’t seen the previous posts, I’d recommend you go back and check them out to be able to get the most out of this post.
Part 1: Discover your branding with “The Drawing Board” Printable
Part 2: WordPress vs. Blogger
Part 3: Design Tips + Design Worksheet
Part 4: Themes, Coding and Stylesheets
And now, today, part 5 – we actually get to start making graphics! Several people expressed an interest in learning how I turned my hand drawn illustrations into graphics for my site – so I’ll be explaining that, plus talking about using photography for graphics (which is the medium I am using for the graphics I’m making for Lori’s site) as well as tips that I hope you’ll find helpful for whatever medium you are using. Let’s jump in! :)
Alright – first step, pull out your branding printable from part 1 and review your target readership and branding statement; keep it in mind in every step of designing your graphics. And look back at your design worksheet from part 3 – remind yourself of your design choice limits (like your medium, colors, etc.) as well as the design tips I included on that sheet. Make sure you stay true to your design choices as you start making your graphics.
So, as I’ve mentioned before, my friend Lori from In My Kitchen, In My Life has kindly let me use her blog as the demonstration for doing this redesign and move to WordPress. The branding statement we came up with from her branding printable was “Classic and cultured, done simply and down to earth”. On her design sheet I chose colors, fonts and the medium of photography. I consider these choices to be the “paints” I have filled my design palette with – whenever I need to design something for her site, these will be the “paints” I will use.
Today we’re going to work on designing a header. After the importance of not having a background that overwhelms your content, I would say what you put in the header is probably the single most important graphic on your site. First impressions really do make a big difference – and the header is right at the top. The header is actually the whole area right there at the top of your page … and often people have a banner there, which is what I’m going to be putting on Lori’s site. As I mentioned above, I’m using photography as the medium for her design.
A few pointers to bear in mind while making your banner:
– make sure your blog name is large enough and easy to read
– consider including your tagline on your banner to help people know what your site it about right away, but if it doesn’t work on your banner, it is not a requirement
– don’t forget the previous pointers on the effectual use of white space – sometimes less is more
– make sure the main colors in your banner are colors from your design choices
– ask yourself “does this banner fit my branding statement?”
– look back at your branding printable and look at what you wrote that you wanted to be people’s first reaction to your site — and realize that the banner is probably the first thing they will see and react to on your site
So, the next step is to just start playing around. Admission: I am a graphic designer … but that doesn’t mean the very first draft of a design comes out fabulous. Don’t expect the first try to be perfect. Don’t worry about messing up. Just have fun and play around with your ideas! If your medium is painting, try some different techniques, maybe some that are messier, and some that are neater. If your medium is pen and ink, cover your papers with assorted drawings – you can always just crop out the ones you don’t want! If your medium is photography, like I am doing for Lori’s blog, try a variety of shots – different angles, different distances, different photography subjects. And just to show you kind of how it goes, here are an assortment of photos I took just to try out some different ideas for Lori’s banner.
Some rough draft photos:
I wanted to take a photo of some basil and try that out, but I didn’t have any basil. Here is a tip if photography is your medium – try checking out some public domain photo sites. PLEASE bear in mind that just because a photo is on the internet, that does NOT mean it is public domain – even photos on the internet are protected by copyright and you can be sued for taking copyrighted photos. However, there are some sites where photographers choose to make their photos available in the public domain, which means they are no longer under copyright, and you can use them for both commercial and personal use. Just *make sure* the site states they are in the public domain – assume they are copyrighted unless the site specifically says otherwise. A good example is publicdomainpictures.net where they state that you can use their photos for person and commercial use for free – and I found a photo of some herbs there:
And, as I mentioned, I’ll also be showing how turn your hand-drawn illustrations into graphics … here is a sheet where I was sketching some images for graphics for my site:
So now we have a whole bunch of rough drafts – the sampling above is just a few of the many photos I took for Lori’s site and illustrations I drew for my site.The next step is to take those and enhance them into actual graphics in your image editing software. If you have Photoshop – great! If not … well, neither do I. It’s simply not affordable on my budget. However, there is a program called GIMP that is a completely free download from GIMP.org which I highly recommend. I’ll say up-front, it’s not the easiest program to learn. BUT, really, you don’t need to know how to do everything. I’ll give you a few pointers on some of the features … and even if you never learned anything beyond this, I think you would still find the program tremendously helpful. But chances are once you started using it, you’d learn more as you go.
First off, here is the explanation of how I take my hand-drawn illustrations and turn them into graphics. This assumes you’ve already drawn your art (like my feather you saw I drew, above) and have it in the scanner and the instructions are meant for that – but many of the steps and tools are useful for any type of image editing:
For photography, which is the medium I’m using for Lori’s blog, many of these tools are what I’m using as well. Be sure that in editing brightness/contrast that you click the “edit these settings as levels” button before adjusting anything, especially in photography. You probably won’t want to alter the levels quite as harshly in a photo as you would in a black and white line drawing, either. A couple other helpful tools for editing photography are on the “Color” menu: Color Balance and Hue/Saturation. As long as I’ve taken the photos in shaded natural lighting (for instance, taking a photo inside right by a window), these three (brightness/contrast, color balance, and hue/saturation) are usually all I need. See the difference these few can make? This is a lovely photo Lori had on her blog that I may be incorporating into her design that I touched up with these tools:
Plus, of course in a banner, you’ll use text overlay. Like I mentioned before – play around and have fun with it! Here are a couple banners I made to try out on Lori’s blog:
But in the end, I decided they weren’t quite working. So I started using the herb photo from the public domain site. This is a good example of where cropping can be effective. I really only used a small portion of that photo – and even then, I blurred out a significant portion of it to white so that the words would really pop. In the end, I felt this one best spoke to her blog and branding, and also represented her colors best. Here’s the final result:
Though, of course, that is just a smaller version there – you can see how it looks full size on Lori’s site by clicking here: In My Kitchen, In My Life.
Also, if you’re using WordPress and the theme which I recommended last week, you can click here for simple instructions on the code you need to put in to give your site a banner.
I hope you’ve found these tips and pointers helpful – and that you’ll have fun working on your new graphics!
What medium are you using for your blog graphics? Share your thoughts below, I love to hear from you!
To check out the next posts in this series, you can see them here:
Part 6: 7 Blog Layout Tips to Engage your Reader
Part 7: Blog Page: The Must-haves and the Panache
Part 8: 25 Tips for using WordPress
Beautiful choice for the banner! And I’m not at all “kindly letting you use my blog.” I’m oh-so-gratefully handing it over to you in complete confidence.
I’m so glad you like it, Lori! :)
Awesome post! This was extremely helpful. Thank you!
Wonderful – thanks, Tara!
You have me thinking now. :)
You’ll have to let me know how it goes! :)
Lovely post – and I adore how the banner turned out!!
Thanks, Lauren!! :D
thank you so much for this great blog post. I like how you put your own thought and creative ideas into these tips. And they are really helpful to me. I’m so looking forward to your upcoming posts in this series
Cheers
Aw, thanks for the kind words, Anh!
Thanks so much for your help on this!
I always wondered how to do this.
And now I could go draw and design myself a banner that fits my blog.
I should play around a bit more with GIMP…
Great! Yeah, GIMP can do a ton of stuff – it’s the program I use to design everything on my blog, as ell as all my art prints in my shop :)
I’m so excited to put all this new knowledge into action! Between my ex-IBM dad and my 14 year-old-computer-guru daughter I just might be able to pull it off! I’m hoping to have my new blog up and running by the end of next week. Woo hoo! Truly, thanks for all of this information. It’s hugely helpful and awfully inspirational!
Oh, very exciting! Be sure to stop back by to let me know when your new blog is up and running! :)
Hi, how do I know that GIMP is a safe program for my computer to download?
Are you wondering about its compatibility with a certain system – or are you just wondering if its safe in terms of wondering if it a legitimate program? It is certainly a legitimate program … I use it all the time, as well as many others I know. As far as whether it is compatible with a certain computer system … I guess that depends on what you have. You could look for info on that on GIMP’s page, I’m not familiar with what all systems it is compatible with… but it is certainly a legitimate and good program. I’ve seen it recommended all over Etsy, for instance, by fellow GIMP users, and I’ve been using it for years myself. I hope that answers your question?
Thanks for the info. Whenever I try to adjust a photograph that I’ve taken (using GIMP), I cannot seem to match the colours of the original article. Which is important in what I blog about. I’ve tried these – (brightness/contrast, color balance, and hue/saturation) and I just cannot seem to make it work. I’m pretty new at photography, so don’t know if the problem is my picture-taking skills or my GIMPing skills!
The original photograph is definitely hugely important in getting the colors right. Make sure you have *plenty* of natural light, but shaded – and adjust the white balance to help get the coloring right. The photo itself that you take should be pretty close to what you’re going for … image editing should just tweak. Like many things, it does take some practice. Good luck! :)
Thanks. I’ve been trying to do what you’ve sugggested, but my apartment doesn’t get a lot of natural light. I think I might have messed up the white balance. I’ll check it out. Thanks again.
Hi April…. Loving your series.
I’m in the process of moving to WordPress but I’m having difficulty adding my header to the Thematic theme. I tried following the info at the link you provided but it’s not working. I feel like a complete dummy. The thread he wrote is long… maybe I’m doing the wrong thing with it. Can you outline how to do it, click by click?
Ah, sorry, Jessica – we are in the middle of moving right now and keeping up with my regular blog posts is as much as I can handle at the moment! And I don’t know if I could really explain it better than it is there – I know the instructions on that site work, I just used it on Lori’s blog recently. I’d suggest starting over and trying again, maybe you missed a step or something? I know the thread is long, but sometimes these things just take time, I know it did for me starting out, it took me plenty of time. :) Good luck! :)
Hello! I am a soon to be blogger, and just read all 5 parts of this series in one sitting! I am feeling less overwhelmed about starting/designing my blog (that is until I start filling out out my printables!). Thank you so much!!!! The printables are awesome and, I know, will help me tremendously! You are a blessing and I love your blog, which I was just introduced to by the way. Looking forward to Part 6! :o)
My blog saying: Wrapped in a blankie, lost in a blog, covered in blessings!
Aw, thanks Suzi, so glad you’re finding it helpful! There are actually more than 5 now in the series – it will be 10 in all, and tomorrow will be week 8. Here are all the posts: https://www.theflourishingabode.com/category/challenge/diy-blog-redesign
Good luck! :)
Hi! Read lots of your stuff and it’s great! Now I’m not a blogger, but your section on turning drawings into graphics was great! I tried it and it was super easy to follow! (Except finding the page up. That took me like 10 minutes to find… But other than that, extremely clear and simple!) Thank you!
So glad it helped! Thanks for your comment :)
Thanks for the tutorial on making graphics! I haven’t doodled much since high school, but I decided to give it a whirl for my blog banner. Your GIMP step by step was a huge help! One thing that took me a while to figure out, though, was that the file had to be put in the RGB mode before the program would let me do the “color to alpha.” Once that got worked out things have gone a lot faster.
Quick question – what’s the typical size for a blog banner? I would rather not go to a whole ton of work on a banner to have it not fit right…
Interesting, I guess I’ve always work in that mode, so I didn’t realize people might need to change to it! Blog banner sizes vary greatly. It all depends on the width of your blog (which you can choose and set yourself). And you can make it whatever height you want. :)
Awesome, thanks :)
Thank you for the great info! It is very helpful and so easy to follow. Can’t wait to apply your good advise.
This post is truly a fastidious one it helps new internet people, who are wishing in
favor of blogging.
I’m not easily impressed and a lot of what I come across isn’t incredibly helpful. This is a great series. I’m ecstatic to have come across your site. My blog started as a fitness accountability site and turned into a sort of lifestyle thing and now I’m trying implement more direction and focus on where I ultimately want to be with it. Trying to kick it up to the next level with every lesson learned! Thank you.You cover a TON of questions I have and really help me clarify TO MYSELF what my jumbled thoughts and ideas are trying to say. Nice work.
Seriously…thank you so much….what a blessing…. I have not published my website / blog and I wondered why I was dragging my feet.
I knew I was searching for something….and after a lot of prayer…here I am – finding your blog and the information I need.
Thank you