12.29.2010

Making a Custom Header using Picnik. SO EASY and FREE!

Step #1: Making the Header
I found this really cool website called Picnik it is so easy to use, and the best part is that it is FREE and NO registration required!!  I will show you how I made this header, so that you can make one that is 100% Custom for you!


First, head over to Picnik, and click on Get Started!



Second, I am going to click on Make a Collage.

Then select a layout.

I selected this one and used the Proportions slider to change the height a bit.

Down at the bottom, you can upload your images.

I am going to upload from my Computer.  After you upload, drag the photo on to your layout.


I wanted a big spot for my Header title, so I am going to leave the left picture empty.  and I am going to change the color to a maroon color that matches my background that I made earlier.

After you get the right color, I have used the Roundedness slider to make the image have rounded edges.

Now just Click on Done in the top right-hand corner.

Now I want to work on the text, so I am going to the Text link at the top.

My title is going to be "Messes with the Reynolds", but I don't want to type the whole thing in just one box, because I want to lay it out cute, so I am first going to just type "Messes" and click Add.
Then pick a cute font.  The little circles on the 4 corners allow you to size the word, and the circle on the top allows you to rotate it.

So after I added a few more Text Boxes, and played with the fonts, this is what I came up with.

Now I would like to add a little embellishment, so I am going to click on Stickers at the top.


I found a cute little family drawing that worked perfectly and just dragged and dropped it on to my Header.

Then I went back to the top and clicked on Frames.

There, I picked Rounded Edges, and adjusted it to match my image.

Now if your background is any other color than white, you will want to select Transparent Corners!

If your header looks the way you want it, just go back to the top and click on the Tab that says: Save & Share.

These are the settings that I used to save my photo.  I did 1000px wide, so that it would fit just perfect on my wide 2 column template, and I picked png, so that the corners would be transparent, not white.  (JPEG files will not allow you to save transparent).
Now my saved Header looks like this!!  So cute!



Now, you can add your header image as you normally would here:

 When you upload, make sure that you select Instead of title and description, and do NOT select Shrink to Fit.  Then Click Save.

If you are using the Minima Template, follow these next steps to get rid of the border around your header, and center it (if you are using the new 2010 Templates, stop here):

Go to your Edit HTML page, and find your #header-wrapper, and change the border to 0px.  So your #header-wrapper should now look like this.


Now go down to your #header, and change the 5px to 0px.  Also change the 1px to 0px on your border.  So now it should look like this.

Now you're Done!

6 comments:

  1. Wow! This looks awesome! I've used Picasa for my custom header, but maybe I'll try Picknik! Thanks!

    ReplyDelete
  2. Cool! I've tried this! This is totaly awesome ! I think using picnik easier than picasa... :)

    ReplyDelete
  3. Thank you so much for this header tutorial. Normally I just use Photoshop but it takes me forever and quick edit programs online make it seem so simple! I went to try out picnik and it had closed. However it looks like Ribbet.com opened up in its place (and based on the graphics, it appears to be the same company.) Not sure why they closed in the first place!

    Allison
    Aster & Lilly

    ReplyDelete

Related Posts with Thumbnails