I moved Janicek.com from Blogger to WordPress 1.x earlier this month because 1) I wanted my publishing software to be on my server versus Blogger’s server and 2) because I really liked the clean design of Michael Heilemann’s Kubrick template for WordPress.
Due to its popularity, Kubrick is now the default theme for WordPress 1.5. Owen Winkler created a great tool called Kubrickr that “lets you replace that giant blue blob at the top of your WordPress 1.5 blog with a nice photo from Flickr.”
I personally like having random photos that we’ve taken or are meaningful to us for our website’s mast.
Here’s how to create your own random header images for your Kubrick-themed weblog using Photoshop:
Download Kubrick 1.2.6 and unzip.
Open ‘Kubrick Theme.psd’ in Photoshop (I’ve done these steps using Photoshop 5.5 & 7 in Windows and Photoshop CS on my iBook).
You only want to concern yourself with the ‘Blue Header’ layer (should be the fourth layer from the top).
Highlight the ‘Blue Header’ layer and select it with the Magic Wand Tool.
Copy your selection (Ctrl+C, Command+C, Edit > Copy, what have you)
Open the photo(s) you want to use for your header. Note: your header image is going to be 720 x 182 pixels, your photo should be at least that.
Paste the copied ‘Blue Header’ layer onto your photo and change the opacity of your Blue Header to 50% so you can see your image in the background and position Blue Header to your liking.
Once you have your Blue Header positioned, change the opacity back to 100%.
Use the Magic Wand Tool to select the Blue Header layer. Now highlight the background layer in your layers palette.
Copy (Ctrl+C, Command+C or Edit > Copy) the background selection.
Open ‘kubrickheader.jpg’ (Kubrick v1.2.6/images) in Photoshop.
Paste your selection onto ‘kubrickheader.jpg’ and position accordingly.
Save your new header as whatever you like (I would name this one zebraheader.jpg). If you’re not going to have random images (new image upon page refresh), save it as kubrickheader.jpg and upload to yourwebsite.com/wp-content/themes/default/images
Congratulations. You have a custom header.
If you want rotating images, download Automatic’s image rotator and upload the script (rotator.php) to:
yourwebsite.com/wp-content/themes/default/images/rotator/ (create ‘rotator’ directory).
Upload all of your header images (see steps above) to your rotator folder. Rotator.php and your header images must be in the same folder.
Now to change your WordPress template:
For WordPress 1.5 login to your WordPress installation. Presentation > Theme Editor and click Header Template on the right.
Look about halfway down through the code and you will see: /images/kubrickheader.jpg
Change to: /images/rotate/rotate.php
That’s it!
Let me know if you have any problems or questions.
44 Comments Received
March 9th, 2005 @9:33 pm
You opened my eyes . . . finally. I was looking all over the web for the specifics of modding this theme. Thanks!
I have one suggestion: The easiest way to create custom header images, since you have access to the Kubrick Theme.psd is to drop your preferred image on a newly created layer just abobe the “Blue Header” layer. This eliminates the need to do all the selecting, cutting and pasting. Just be sure that your intended image is wide and tall enough before you copy into Kubrick Theme.psd. The mask on the layer above will “crop” the image for you. Then do a File:Save For Web in Photoshop. You’ll then have a new HTML page, but also an image directory with kubrickheader.jpg with your new image in it. Rename it and you have your new image ready for uploading. This also avoids recompressing the kubrickheader.jpg file — not that there would be much, if any, generational loss — but golly lossiness just eats away at me sometimes.
Thanks again for your pointers and help!
March 20th, 2005 @10:38 am
typo:
/images/rotate/rotate.php should be /images/rotator/rotator.php
nice job on the photoshop how-to !
March 25th, 2005 @11:24 am
Dear Josh & Elise,
Thanks a lot for this article, being new to Wordpress, your very clear and organized tutorial has been a God send!
I am just starting out my own site, is in Spanish since I live in South America, and will eventually post some tutorials in English too.
Have a peaceful and nice Good Friday,
Jose Luis
March 25th, 2005 @7:01 pm
No need to switch to use Kubrick, a skin is available for blogger.
March 28th, 2005 @4:41 pm
thanks for the howto
April 18th, 2005 @11:32 am
much appreciated
April 23rd, 2005 @4:01 pm
good job on the psd - adding in guides would’ve help a bit
GREAT how to
April 24th, 2005 @9:35 pm
Great “How To!” I followed the directions word for word, implemented the typo fix and added four images to my header. That script is awesome - allowing me to add and delete images as needed from the directory without having to modify any code. Thanks again.
May 4th, 2005 @8:36 am
Thanx - very easy word for word help you did there!
Its brilliant, dont wait publishing more features - fx how did you make the four buttoms in the header?
June 13th, 2005 @6:41 pm
I’d like to use Kubrick but make the white area black and the gray area a different color. I’ve been trying to use css to change, but with no luck, or maybe I’m doing something wrong. Seems like this should be simple…
June 25th, 2005 @4:29 am
Great tutorial. My only problem is with my header images. For some reason theres a lighter shade of gray surrounding the header when I upload it. Hopefully I’ll get it soon.
June 26th, 2005 @1:28 am
Janicek,
Your tutorial is really great! I’ve already recommended it to many of my friends who run wordpress and they are really amazed! And also your rotator!
By the way, where in coldforged did you get the nav bar? it really looks cute..haha
[really a great how-to!]
Cheers!
July 31st, 2005 @4:59 am
Nice tutorial. It worked great i Gimp too.
August 1st, 2005 @12:17 am
Thanks for this nice tutorial. Worked with it in The Gimp and Paint Shop Pro - worked great, too. No need to buy extra photoshop licenses
August 27th, 2005 @10:26 am
Brilliant! Easy and quick walktrough, of something I thought was much harder. Thanks for it!
(btw, read the second comment on this post again, hehe)
August 28th, 2005 @5:49 pm
Exactly what I was looking for, using Kubrick theme in Blogger, used PSP (Paint Shop Pro) to do as above to make new header.
Working on it now.
Great stuff
Thanks
Ted
September 4th, 2005 @4:13 pm
thanks for sharing it.
Excellent!
November 6th, 2005 @12:23 pm
Another approach is the header template that I made and posted here:
http://wordpress.org/support/topic/45541
You basically drop it over an image it the GIMP or whatever and you are done.
December 21st, 2005 @3:16 pm
THANK You, great GREAT plugin…
February 1st, 2006 @1:46 pm
Is there any way at all to duplicate this with Graphic Converter on the Macintosh? I really don’t want to buy Photoshop for this one job, after all, and GC is pretty comprehensive.
I’m fiddling, but so far can’t find anything. Thanks!
April 28th, 2006 @8:30 pm
I’ve thoroughly enjoyed your tutorial. Thank you for making and sharing the templates too, these really have made my life easier.
I use GIMP and the key step that finally got it working for me was this: after pasting the “Blue Header” onto an image I want to banner, I had to manually change the pasted “Blue Header” into a layer, otherwise it wasn’t being treated as one.
Regards from sunny Arizona!
December 15th, 2007 @7:07 am
Thank you so much for this very straight-forward tutorial. I was wondering how to get rid of the white and grey borders in the header. It is probably something quite simple, but I can’t seem to figure it out. I would really appreciate your help with that. I have my header at http://rowanista.com .
April 7th, 2008 @8:21 am
I’m a newbie at this sort of thing, however I have followed your directions above and have created a banner with my desired photo. My problem comes in trying to load it into WP. I don’t exactly know to go about that. This what I have done. Fetch is my http://FTP. I opened Fetch and moved to themes. I found my WP default template 1.5 (Michael Hellmann). Opened it and found the header file. I deleted it and replaced it with kubrickheader.jpg. That didn’t work. I tried other header files, e.g. kubrickheader.gif, kubrickheader.psd, kubrickheader.png. None worked for me. After placing the header file in Fetch, I went to my web site and clicked the 1.5. template. When I go to view the site, as you can see, I have a blank white top banner. I also went to the theme editor and clicked “header” under WP Default theme files and then updated that file. Clearly I’m doing something wrong, but can’t seem to figure it out. Your instructions seem so straight forward, but I’m not getting it yet. Your help will be very appreciated.
I notice on my WP Current Theme page, under my default, it says, “all of this theme’s files are located in Wp-content/themes/wordpress-default-15.” Am I missing something here? Do I need to go there and change something, and if so, how do I get there?
When you go to my web page, I may have another theme loaded, but when I have the default 1.5 loaded there is simply a blank top white banner. Thank you!!
April 7th, 2008 @11:04 am
You need to reference the new image file name in the code of your header. You’ll need to find the section in your WP header code that calls the header image. So if you named your file “kubrickheader.jpg”, find the section of code in your theme’s header that references the image and change it to “kubrickheader.jpg”
So, for example, change:
Wp-content/themes/wordpress-default-15/header.jpg
to
Wp-content/themes/wordpress-default-15/kubrickheader.jpg
Pingback & Trackback
Leave A Reply