Designing a Custom Header

Designing a custom header for my website was actually kind of fun, playing with different ideas and tools to design a custom header that will actually give me some form of brand identity. I’m a finance guy so by no means am I particularly creative or artistic but with the right tools even I can get a little creative. The two primary tools I used were Subtlepatterns.com and Picnic.com.

 

Subtle Patterns is a website with lots of different patterns and textures. It is a free resource and the patterns can be used for creating headers and backgrounds. All you have to do is find one you like and save it to your computer as a picture to be used later.  Once I had this I went to the Picnic website which is also free where I choose the collage option from the library. Once there I choose the pattern with 4 squares that form a bigger square and set the spacing between the squares to zero and then uploaded and inserted the picture of the texture from Subtle Patterns.

 

Once that is done you want to go to the basic edit tools and crop the image to 940×150 which is the size of the header in WordPress. You don’t have to worry about that if you are doing a background. Picnic also has some textures so you might find something here without using the Subtle Patterns website but they have a better selection. Picnic then has a variety of tools you can use to change colors and other effects to get a background you want for the header. I played with a variety of these to see how they worked and what I liked and didn’t like.They also have the option of adding text to the image you create. I used that option for this site to get the special lettering on this page but did not use the text option here for ieatmybackyard.com but rather just added the lettering to the header background after I imported that to WordPress. Note that if you do create custom text in Picnic you will want to leave those header text boxes empty in WordPress.

 

Evidently Picnic has been sold to Google and their website will go away in April 2012. I assume the functionality will move over to Google somewhere since they are buying the company but I don’t know exactly how this functionality will be accessed once it goes to Google.

Comments

  1. Ed Wait says:

    Hi Rich. I just found your site here from one of your comments on Pat Flynn’s latest post. (About the recent post-panda update) Anyway, I liked your comment there and checked out your link and here I am.

    Interesting project you have going here. I’m planning on following it. Keep up the good work.

    One tiny suggetion I’d give is to have a little more color contrast on your navigation bar. The text color doesn’t stand out enough for someone with older eyes – me.

    Take care,
    Ed

    • Rich says:

      Hi Ed- thanks for the feedback. The navigation bar looked a little different to me when I’m signed in so I did not notice but you were right, I went in and changed the color on the words on the navigation bar in he design settings. Thanks.

Speak Your Mind

*