How to Make a Custom WordPress Header
Example of what can be done with graphic design using the free software gimp.I wanted to be able to customize a wordpress blog. Here is how I used Gimp to produce a professional header for my blog.
First I took two photos. Here are the shrunk down versions of each straight from my camera.
Green bud
Purple Flower
Not too impressive by themselves. I’d have gotten closer if I’d had the right lens, but as you’ll see, with cropping it is good enough.
I opened both photos into Gimp. Then I created a new blank image 764 pixels by 184 pixels. I want a green not sharp back ground. So I hit shift c which opens the croping tool. I pick out an area of green from the small bud picture and crop it out. Looks like this shrunk down version at 752 x 587 pixels:
It is not the size and shape I need, but it is a little bigger. I click on edit and copy of the green image. Then I go to the blank header and click on edit and paste. The extra gets trimmed off. Here is the full size version:
Now I want to add the purple flower. Remember how unimpressive it looked in the first image. Well I’m going to use my cropping tool and cut out a portion of the flower to get a larger version of:
The height of my banner is 184 pixels. I need to shrink down my flower to a height of 184 pixels. I click on image/scale image I change the height to 184 and have the width shrink proportionally by not breaking the little chain image (different programs do this in some similar way) Cut and past into the green header and get:
Type m for move and move the flower to the side:
But as you can see the green next to the flower doesn’t blend together, has a line and differs in focus. Not as professional as I’d like. Several ways to do this, what I did was click shift e for the eraser tool and erased the green to the left of the flower, going around the petals, etc. so the original green shows through. I clicked on layer/anchor layer. Here an example mostly erased, I took a smaller eraser and moved closer/layers window in my final copy.
Much better, now to add a drop shadow for a 3-d effect. You may not have this option in your software, photoshop should but probably gives it a different name.
Then I clicked on script-fu/shadows/dropshadow with a blur radius of 8 and got my finished product.
Because of the shadow I have a transparent area. Jpg’s don’t handle transparency to I save as a png file.
Firefox handles transparency well, internet explorer is picky. There is a code I can type in so it will display properly. I choose to save with a background as white instead of transparent since I was posting on a white background.
Text can be added. I choose not to, WordPress lets you type in text and a tag line. As text, the search engines pick it up better than a background image.
Heidi Caswell
Jun 19th, 2007 at 7:21 pm
Heidi. You are a woman of many talents. Not only are you able to edit photos and create beautiful banners, but you can also explain it in simple terms, step by step. That’s the sign of a woman with both sides of her brain working!
Thanks for the tutorial. I hope others stumble upon this as well – this is handy stuff to know.
Dina
Jun 19th, 2007 at 11:08 pm
Glad you liked it. I have one almost put together about favicons. Busy week, lots going on and laptop needs to go in for repair if I want my wireless internet back. It is coming though. Helps me remember what I did, and I learn more like what happens when you make your image too long in a blog.
Heidi
Jul 2nd, 2007 at 9:12 pm
Hi,
I want to know how to put a photo in blog header of wordpress
Thanks
Jul 3rd, 2007 at 7:35 am
Kendy,
Not sure what you are asking, if asking how to put your banner once made on wordpress, that would depend on the theme are are using.
I’m using k2 on this blog, love it! I’d use gimp or other photo editing software, and make the photo the correct size 780 x 200 pixels. In the admin panel I click on presentation, then custom image header, then upload the new header.
Other themes you may need to change the header url in the code to the url of your new photo header.
Heidi
Jul 6th, 2007 at 5:32 pm
Wow, Heidi – you are my hero! I am going to save this so I can try this out myself. Thank you, thank you, thank you! I LOVE the look of your blog.
Arlene
Aug 6th, 2007 at 1:31 am
Hi!! Heidi,
I want to change header and footer in my wordpress blog I successfully change the header and footer. but it only works with default blog page not for other links within blog ( please visit the site http://www.indiangnu.org and navigate thorough blog.
I would appreciates for you for helping in out!
Thank you in adv.
Aug 6th, 2007 at 7:21 am
Welcome Arun,
It may be where you are changing your header and footer. Different wordpress themes have things set up differently.
One theme I was working with and many of the css edits I did had no effect. Finally I found that there was a second style sheet in the files that overwrote everything else.
I under presentation/edit theme, I make my changes in the footer file for this k2 blog. I swithched out the header under the custom image header option.
Sorry I can’t help more, but here are two resources which help me:
The firebug extension for firefox, which allows me to inspect/edit the code for individual parts of a website so I can so what is going on.
Marketing Ice tutorials.
Good luck!
Aug 7th, 2007 at 7:04 am
Thanks for the great tips! Now I am inspired.
Aug 20th, 2007 at 8:04 am
Heidi,
Thank you so much for the clear, concise, and precise tutorial. I’m currently helping my friend with their blog and this will come in handy. Not everyone takes the time to share what they have learned, and it is surely appreciated.
After a minute of comparison, the drop shadow does make a difference. At first I thought it wouldn’t.
Thanks again.
Aug 28th, 2007 at 6:06 pm
Thanks for the info, I am trying to do the same, and am new to wordpress, thanks so much. The software that you used was GIMP?
Jul 9th, 2008 at 4:51 am
The picture links are dead but the tutorial is awesome. I tried (did my best without seeing some examples) and the result was above my average. Thank you.
Jul 9th, 2008 at 10:44 am
Thanks for the heads up! Much appreciated. I’ve fixed the images.
Feb 28th, 2009 at 11:20 pm
Thanks for the tutorial. It really has me going in the right direction!!
May 22nd, 2009 at 2:22 am
How to Make a Custom WordPress Header | Connect Simply great article thank you.
Jun 10th, 2009 at 3:12 pm
This is exactly what I was looking for to make by blog header better – thanks for the explanation!
May 29th, 2011 at 7:40 pm
This was very helpful! I am in the process of learning how to use gimp right now, to build out my own website design for my blog.
There is a lot to learn though…
Jan 13th, 2012 at 9:53 pm
Thank you so much. You were extremely helpful, and by following your instructions I was able to create a header more along the theme of my blog while keeping the format of the generic wordpress template.
this was great!
Jan 16th, 2012 at 12:38 pm