Game-changing tutorial: Learn to create “mood boards” and use them on your blog or site


On the heels of last week’s post about giving your posts and pages an instant design upgrade with a sexy “Feature Box”, today I’m bringing you another tutorial that will forever change the way you blog.

In fact, by the time you’re done with this post, you may find yourself overcome with the desire to shower your computer screen in kisses and dance a jig in your living room. At least that’s what I’m shooting for. :)

So, let’s get to it!

Today I’m going to show you how to create those cool collections of images that you see on all the top design, fashion, and decor blogs.

Think Coco + Kelley, Mrs. Lilien, and Design*Sponge. (Speaking of which, have you checked out my articles on CSS, WordPress, and copywriting on Design*Sponge yet? You’d probably like them!).

You might call them “collages”, “mood boards”, or “inspiration boards”, but however you refer to them, the bottom line is that they are the ultimate blog post enhancer.

Why are they so awesome? Well, because when you know how to make a mood board, you’re no longer stuck inserting images one at a time (stacked one on top of the other) in your blog posts. (Cringeworthy, right?).

Instead, you can create artfully-arranged collages that perfectly illustrate the topic you’re talking about in your post – whether that’s “magical places”, “modern little black dresses”, or “the best digital cameras money can buy”.

Today’s tutorial is also extra-special because I’ve taken it straight out of the course material for The Girl’s Guide to Web Design.

It’s basically a sneak peek at the laid-back, non-intimidating teaching style I use throughout the entire online course – so if you’ve been wondering what the “tone” of the course is like, this will give you a good indication. :)

The tutorial is a little on the long side, but I guarantee that once you press “play”, time will officially begin to fly. You’ll instantly begin to see all the possibilities for YOUR little corner of the web, which is one of the most wonderful feelings you can have, if you ask me.

You can watch the video in full screen mode if you click the little icon with the expanding arrows that you see at the bottom right of the video. That will make it easier for you to see everything that’s happening. I suggest you open up Pixlr in another browser window so that you can follow along as you watch (choose the “Advanced” editor for best results).

So, without further ado…here’s the tutorial! When you’re done with it, don’t forget to keep reading the rest of the post to find out how to place your newly-created mood board on your site or blog.

So you’ve got your mood board ready to go. Now, how do you put it on your blog or site?
- First, save the image by going to File –> Save at the top left of the Pixlr screen.
- I recommend saving your mood board as a .JPEG, because in general, JPEGs load faster than PNGs on websites. The other file formats are weird, so you don’t have to worry about them.
- When you click “OK”, you’ll be able to choose the location you want to save your file to on your computer. Make a mental note of where you put it.
- Not it’s time to add the image to your post or page. If you have a WordPress blog or site, you can use the Upload/Insert tool that’s located immediately above the big white window that you type your post content in. In the “caption” box, you may want to put the description of all the items in your mood board, like this: “Clockwise from top: x, y, z”.

You’re done!

Now you can repeat this process for every post that you think would benefit from a mood board – and you can use the skills you learned in this tutorial (manipulating layers, drawing your own geometric shapes, etc.) to create endless combinations of items and elements in your mood board projects.

What’s next?
For more on Pixlr, check out my posts on designing your own logo:
Design your own logo: video tutorial #1 (the “sophisticated” logo formula)
Design your own logo: video tutorial #2 (the “playful” logo formula)
Design your own logo: video tutorial #3 (the “clean” logo formula)

And if you’re liking the way you’re feeling right about now (empowered, excited, and full of creative “can-do”), I’d love to teach you to create the web presence of your dreams – so that every last element of your blog or site looks exactly how you want it. To learn more about The Girl’s Guide to Web Design, click here.

* The lovely mood boards at the top of this post come from Mrs. Lilien and Coco + Kelley.

{ 9 comments… add one }

  • Sweet Mama M August 23, 2012, 5:09 am

    Thank you so much for this – it was very useful!

  • Nancy Leigh-Smith August 23, 2012, 1:12 pm

    Great tutorial. Very useful. Thanks.

  • Leah Kiefer August 24, 2012, 10:36 am

    It was great to see Pixlr in action, and this was an awesome tutorial. You’ve got my wheels turning. My problem is that Pixlr won’t allow me to copy an image. I’m trying to work through it!

    • Anice Jones October 23, 2013, 11:18 pm

      Pixler is not pasting onto the first layer for me. I wonder if I need to pay for “advanced” pixler….not sure what the problem is.

  • Web Designing Company in Delhi August 27, 2012, 7:46 am

    A useful gift for all gals who love web designing! Thanks for all the information shared.

  • Savia Jane May 10, 2013, 7:31 am

    That was such a cool and easy video.
    Thank you very much.
    It’s going to make my work so much more fun and interactive when I use them on the blog.

    Thanks again!
    Savia (India)

    • Amanda May 10, 2013, 9:01 am

      You’re welcome, Savia!

  • Anice Jones October 23, 2013, 11:41 pm

    Update – I figured it out. Thank you so much. I love your tutorial.

    • Amanda October 30, 2013, 11:24 am

      Woohoo! Glad you figured it out, Anice. I think a few other people had run into that problem, and pasting via the menu (Edit –> Paste) rather than using the keyboard shortut of CTRL + V seemed to do the trick. :)

Leave a Comment