DIY 101: Step by Step on Customizing your Blog Header with Pixlr Express

Google-Android-4.1-Jelly-Bean-–-10-Things-You-Need-To-Know-A

Hello Sweet Jelly Bean readers!

This is my first ever How To… post, so please bear with me. I will do my utmost best to make this less painful for you to read and follow through. I took some screenshots (and there’s a lot…hmmm) and I’m hoping that they would make my step-by-step ramblings digestible. It might seem like a batter looking at this post already, but believe me, once you get passed your first ever DIY header, you’ll be using Pixlr Express like a ‘pro’.

The girls from WFBC seemed to like the FB banner I made for our group recently, and some have said that perhaps I should do a DIY post about it. So after thinking through whether I should or not, well, here I am. 🙂

The site I’ve been using for my blog headers is none other than Pixlr Express.  Pixlr offers photo editing services but I’ve only really used Pixlr Express at this point, because if I start exploring the rest of the features they offer, my brain might start to bleed!  There’s just so much editing, html and layers, etc. that my brain can cope with right now. So this site, is as easy as it’s going to get for me. (and I’m hoping for you, too.)

I’ve always wanted to customize my blog header but I could never get it right before. It’s either the image gets so stretched that it would look odd or too small and felt like it didnt  belong there. Yes, there are other sites probably out there that could do the trick and give you that blog-worthy headers compare to mine now, but like I said, my brain can only cope with …. yep, you get my point.

So here’s what you need before you start fiddling with Pixlr Express.

  • Exact header image size: example for  my theme – Fresh & Clean Theme, it’s 920 x 116 pixels
  • Any images, clip-arts, or anything you want to put into this header – I like to be prepared all the time. 🙂
  • Patience!

Note: Please click the screenshots for better viewing. 

Let’s start!

(Since our purpose is for you to be able to customize your header, I won’t cover much about the other buttons showing here)

So click Collage – that’s where you want to go.

A white square should appear and ensure that Spacing, Roundness, Proportions are set to 0 then click Finished.

Next, you need to click Adjustment since you want to Resize this ‘blank canvas to your appropriate header size.

Note: You have the option above to click the page into a Fullscreen (above right) if you prefer to work this way. I normally just set the screen as 100%, which can be found below the Fullscreen button.

You will be able to customize the Width and Height by clicking Keep Proportions bar, then you can enter the exact header measurements.

You would notice that the background color seems off white right? To fix this and make this brighter go to Adjustment then Autofix –  this would do the trick.

Importantonce you’ve done your work and you accidentally click Close, you’ll lose all your hardwork! So Beware! Save if you must.

Note: Click Undo to either delete an already saved action, and if you’ve changed your mind, just Redo! Easy-peasy.

With my blog header, I started by picking the right font for Sweetjellybean. There’s 7 fonts themes to choose from! I normally go for  Retro, Handwritten and sometimes Novelty, but you’re more than welcome to explore the rest.

The font style I picked is Flavors! Fits with sweetjellybean, don’t you think?

As for the font color, well, you can pick whichever you like or love, and you can also adjust its transparency, just slide the bar next to the Color picker.

If you want to add your own images, icons or cliparts, you can do so – go Adjustment – Add Image, otherwise, checkout Pixlr pre-downloaded clip-arts via Sticker.

Jelly beans! From Google images! You can position your image/s however you want it to look in your header. Just click the dot on the left or bottom to adjust the size, while the top one, will let you rotate the image. To reposition the image, point your cursor in the middle of the image and drag.

I thought I’d include here the option of being able to erase and ‘brush’ back what you’ve erased! Didn’t know this until few days ago, by accident!  And what so cool with this is that it does not affect the header text that you’ve already created. It’s only the image that you want to edit. Simply, click Erase (the brush size can be adjusted to suit your needs) and if you’ve deleted too much, simply Brush it back. Just like that. Click Apply – to save that work.

If you want to use the many features available, here are the screenshots and samples I’ve taken.

The following screenshots are just to show you the many options you could do on how create your blog header or banner. My header is quite simple and does not have any background or anything. But if you want to create a header with different background, here are the features you might want to check.

Overlay – which has lots of different type of backgrounds – some requires you to have a ‘darker background’ for it to work or be visible.

Some of the works that I’ve done although not great, but I thought I’d show you the features I’ve used for each of them.

Used: Overlay – Bokeh – Dreamscapes

And if you want Borders, to give your header that artistic feel or just make it look pretty, there’s a lot to choose from!

Here’s one example  for WFBC group banner.

Used: Borders – Pattern – Starflower 

or check out this post for the latest WFBC banner and button I’ve made.

And for achieving different layout styles, you can use Effect – which I’ve experimented using some of  Dee’s at Haute Fraugalista’s images. (I got her permission to do this.)

Used: Effect – Creative – Artfunkle

And last but not the least….

Please do not forget to SAVE your work. Set the Quality to 100% to give you a better outcome.

IMPORTANT: You are able to undo your last action by clicking Undo. However, if you want to delete any actions before the last one – any of the ‘before’ actions will be lost. For example, you want to change your Font style – but this is what you did – Font – Clip-art- Pattern (Pattern being the last action). Pattern and Clip-art will be discarded at this point. 

Best thing to do is Save this banner and label
 ex. sweetjellybeanbanner1, so at least you have that layout or design saved. Do NOT click or close the application once you’ve saved ex. sweetjellybeanbanner1,  since you won’t be able to UNDO any actions then. 

Like I said, this free site is so far the easiest for me to use, however if you know of a different site worth checking, please feel free to share.  The Collage feature for Pixlr Express was recently added on 22nd June when the new version of Express was uploaded. Obviously the main purpose for this is for you to make a lovely collage but somehow I seemed to have found another way to use it! Well, it works for me. 

And if you do try to make one, I would love to know. Any questions, I’m more than happy to answer or help.

Keep Smiling ^_^

AJ’s Mom

Leave a Comment

CommentLuv badge

  • Janet Williams
    July 24, 2012

    What a shame! Your method didn’t seem to work on Apple. I tried, but my screen is completely different from yours — perhaps it didn’t work on Apple? I could do step one, but couldn’t find ‘Adjustment’ on my screen.

    Reply
    • AJ's Mom
      July 24, 2012 Janet Williams

      Hi Janet. Sorry to hear that, but that’s strange since Im also using Apple. What features are you able to see if you don’t mind me asking?

      Reply
      • Janet Williams
        July 24, 2012 AJ’s Mom

        I could only get to step 1. Couldn’t see the word ‘Adjustment’.

        Reply
        • AJ's Mom
          July 24, 2012 Janet Williams

          I just checked Pixlr Express as I thought that it could be their site playing up but everything seems fine. After you’ve click Collage, set the White Square screen’s Roundness, Spacing etc to 0 and clicked finished – you still couldn’t see the rest of the features?

          Reply
    • AJ's Mom
      July 24, 2012 Janet Williams

      Hi Janet! Sorry to hear that but that’s strange since I’m also using Apple. Do you mind telling me what features are coming up on your screen?

      Reply
      • Janet Williams
        July 24, 2012 AJ’s Mom

        My fault — I didn’t click FINISH. In your other post, you didn’t mention FINISH. Will continue now. Thanks.

        Reply
        • AJ's Mom
          July 24, 2012 Janet Williams

          Oh, my apologies. And thank you for pointing this out. Will revised this now. Hope all goes well from here on for you with pixlr. 🙂

          Reply
  • iampressing2
    July 24, 2012

    Thank you, Thank you, Thank you for posting this! I am brand new and for the life of me couldn’t figure this out. My blog image is grainy and not the best so I am looking forward to taking this step by step. Great timing, and best blogging to ya!

    Reply
    • AJ's Mom
      July 24, 2012 iampressing2

      That’s great! I’m glad this post will be able to help you out on your header. And it seems you’ve chosen the longer version. 😉 I’m fairly new here too- blogging and Pixlr- but the moment I figured I could actually make my own blog header, I just camped out at this site! Do share your creations.:-)

      Reply
  • Tending Weeds
    July 26, 2012

    Thank you for keeping the long version for us novices! It was a big help since I’m new, new, new to trying my own graphics outside of Paint. I’m having so much fun, I can’t pick which one I like the best.

    Reply
    • AJ's Mom
      July 26, 2012 Tending Weeds

      This is so great to hear! I was getting worried my long version was a bit too much and too assuming! Thank you for letting me know. Can’t pick which one you like best? Why not set your Header into Random Images so however many Banners or Headers you upload, they will take in turn to show up on your site. 🙂 Let me know. 🙂

      Reply
      • Tending Weeds
        July 26, 2012 AJ’s Mom

        I appreciate the tips. I learn more from reading other blogs than I do reading Help. Thanks for adding to it!

        Reply
        • AJ's Mom
          July 26, 2012 Tending Weeds

          You’re welcome. Glad I could help a little. 🙂

          Reply
  • Life and all things love
    July 26, 2012

    I have always wanted to know how to do this. Thank you so much for sharing! I can’t wait to try it out! I’ll let u know how it goes!

    Reply
    • AJ's Mom
      July 26, 2012 Life and all things love

      That’s great! Will look forward to it. 🙂

      Reply
  • Caryn
    July 26, 2012

    Thanks again for this great post! And this might be a really obvious question, but is there a way to go back to something you have already “applied” in the banner that you now want to change. For example, I want to change the font of the blog name, can I select it again? Thank you!

    Reply
    • AJ's Mom
      July 26, 2012 Caryn

      Hi! No it’s not obvious at all. You can click Undo to basically discard the last action. Now if you want to change the title font and this isn’t the last action you did, then whatever your last action will be lost, so it would be best that you remember or in fact save this banner as label with 1 – and the carry on working, do not click out of Pixlr to restart since the Undo option will only work if you’ve not close the application. I hope this makes sense. Please let me know how you get on. 🙂

      Reply
      • Caryn
        July 26, 2012 AJ’s Mom

        Yes, that makes sense, I will give it a try. Thanks so much!!

        Reply
        • AJ's Mom
          July 26, 2012 Caryn

          No prob! And thanks for that Caryn, I just added that to the tutorial as well since I don’t think that this was something I managed to include before. 🙂

          Reply
  • Jessamine in PDX
    July 29, 2012

    Thank you SO much for this great tutorial. I had no idea how to do this before, not even a clue as to what website to use, and now I have been playing around with it for hours. You should check out the results! http://attemptsindomesticity.com/

    =) Thanks again!

    Reply
    • AJ's Mom
      July 29, 2012 Jessamine in PDX

      What a yummy banner!!! Are those macaroons? Cause I love them – and if they’re not, well they look so delicious. I love how you’ve put them together and definitely suits your site very well. and I am happy you were able to find this post very helpful. Create more!

      You’re very welcome. Thanks for sharing your site with me. 😉

      Reply
  • Get your DIY blog banners and wave…to this awesome bloggers! « Sweetjellybean/Blogging, with Love.
    August 1, 2012

    […] My DIY 101: Step-by-step to customize your blog header with Pixlr Express. Go on, share the love:TumblrTwitterPinterestFacebookEmailPrintLike this:LikeBe the first to like this. […]

    Reply
  • DIY Friday: From a button’s point of view… and how to… « Sweetjellybean/Blogging, with Love.
    August 3, 2012

    […] My DIY 101: Step-by-step to customize your blog header with Pixlr Express. (sweetjellybean.com) […]

    Reply
  • Karen Law
    August 4, 2012

    This is an amazing tutorial! Thank you so much for taking the time to write this tutorial out for us 🙂 I’ve been looking around everywhere on how to make a nice blog header and yours is by far the best!

    Reply
    • AJ's Mom
      August 4, 2012 Karen Law

      Karen, I am very flattered with your comment. Thank you very much. I am so pleased you find this very helpful. I wanted to share something that was user-friendly, especially for bloggers like me who just started. So I am thankful I seem to have met that aim. 😉

      Reply
  • John Ford
    August 4, 2012

    I cannot get the text to change to any color other than white no matter what adjustments I make in the color slider. Is anyone else having this problem?

    Reply
    • AJ's Mom
      August 4, 2012 John Ford

      Hey John, sorry to hear that. I’m checking Pixlr now cause sometimes they do have issues. Will let you know in a bit.

      Reply
    • AJ's Mom
      August 4, 2012 John Ford

      I just tried John and it seems to be working from my end. Try to open up a different screen and don’t close the one you have now so you don’t lose your work, and try opening Pixlr Express from that new screen again, see if that works.

      Reply
  • Your Haute Couture on A Budget
    August 19, 2012

    […] My DIY 101: Step-by-step to customize your blog header with Pixlr Express. (sweetjellybean.com) […]

    Reply
  • Amazing Style Virtual Make Over Application | Your Haute Couture on A Budget
    August 19, 2012

    […] My DIY 101: Step-by-step to customize your blog header with Pixlr Express. (sweetjellybean.com) […]

    Reply
  • The Tripping Pencil
    August 24, 2012

    Thanks a lot for this. I am an absolute newb at all things design, and this was really easy and really fun.

    Reply
    • AJ's Mom
      August 25, 2012 The Tripping Pencil

      Hey! Glad you found this post. 🙂 You’re welcome!

      Reply
  • reneeboomer
    August 31, 2012

    Thank you so much!! It took me half an hour and I say that is not bad at all. ha ha. I so appreciate you taking the time to do up this tutorial. Thanks tons!! Check it out. Let me know what you think kay.
    http://www.positiveboomer.net . I loved playing around with the different features. Great post! LOVE your blog. Happy Friday. I am “happy in the face”. 🙂 🙂 Renee

    Reply
    • AJ's Mom
      August 31, 2012 reneeboomer

      Renee, I’m so glad you found this post.. I’m very pleased that you’re able to use this tutorial. I just checked your blog and your header… and it’s looking good! It fits perfectly with your blog. And so many inspirational posts! Thanks so much for dropping by. 🙂

      Reply
      • reneeboomer
        September 1, 2012 AJ’s Mom

        Thank-you again. I loved your tutorial. I was just so thrilled….you explained so well. hugs. Renee 🙂

        Reply
  • fashionablysaving
    October 13, 2012

    I made my header. It’s only a beginning version, but it’s a start. 🙂

    Reply
  • DIY Monday: How To... 5 Easy Steps To Make Your Own Blog Header! Give It A Go! - SweetJellyBean™ I Fun & Sweetly Inspired Beauty
    March 9, 2013

    […] My DIY 101: Longer version to utilize Pixlr Express to customize your blog banner/header […]

    Reply
  • Melina Robison-Buxton
    March 25, 2013

    This was a great AWESOME help, thanks so much!

    Reply
  • Melina Robison-Buxton
    March 25, 2013

    This was a great AWESOME help, thanks so much!

    Reply
  • Daffodil.
    August 24, 2013

    I would like to ask you something. Can you tell me how to make the header background clear? I mean transparent. Pleaseeee. :3

    Reply
    • Donah @ SweetJellyBean
      August 28, 2013 Daffodil.

      Hi there, I’m so sorry for not being able to get back to you – I have been away with no internet access. You can use Pixlr/Editor to have a transparent background. Pixlr Express does not have this option since this is just a straightforward editing tool, but Pixl Editor has more features similar to Photoshop. Let me know how you get on.

      Reply