Janicek.com

Random image banner for Kubrick

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.

Select the Blue Header

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.

Position the Blue Header

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.

Select your background layer

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.

Paste selection onto kubrickheader.jpg

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.

47 comments

47 Comments so far

  1. […] header image. Right now I have 7 images in rotation, but I hope to get a few more soon. Thissite gave me the idea. I am using a program called Rotator fro […]

  2. Brian 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!

  3. X March 20th, 2005 10:38 am

    typo:
    /images/rotate/rotate.php should be /images/rotator/rotator.php

    nice job on the photoshop how-to !

  4. Jose Luis Hurtado 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

  5. Anonymous March 25th, 2005 7:01 pm

    No need to switch to use Kubrick, a skin is available for blogger.

  6. macewan March 28th, 2005 4:41 pm

    thanks for the howto

  7. adam April 18th, 2005 11:32 am

    much appreciated

  8. al April 23rd, 2005 4:01 pm

    good job on the psd – adding in guides would’ve help a bit
    GREAT how to

  9. James Adams 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.

  10. Mads 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?

  11. Litux Blog May 23rd, 2005 11:01 am
    Litux Updated III – Site Header
    The Site Header is a good place to roll our pictures.
    I’ve always been against doing it with Flash, and I’ve tried several times to do it with SVG, but there were no big advantage compared to the Flash version, specially because there&#821…

  12. The Captain 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…

  13. Serena 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.

  14. stchatterbox 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!

  15. cms.STNetwork.de June 29th, 2005 5:07 am
    Kubrick Theme: Header editieren mit Photoshop
    Nach einigem Suchen fand ich eine kurze Anleitung, wie man mit Photoshop das blaue kubrickheader.jpg mit einem beliebigen Hintergrund tauschen kann, ohne das die Abgerundeten Kanten verloren gehen oder man diese in puzzlearbeit nachzeichnen muss:
    Hier ste

  16. Magnus July 31st, 2005 4:59 am

    Nice tutorial. It worked great i Gimp too.

  17. boris 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 ;)

  18. Grindblog August 5th, 2005 2:22 pm
    Designänderung
    Für den Herbst steht mal eine Änderung an – ich verwende wieder das klassische Kubrick-Theme (deutsche Ausgabe), aber mit einem netteren Kopf. Die Anleitung, wie man den Kubrick-Header mit einem eigenen Bild versieht, findet man hier.

  19. cHRIS 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)

  20. Ted 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

  21. Shahram September 4th, 2005 4:13 pm

    thanks for sharing it.
    Excellent!

  22. Zeth 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.

  23. troppmann December 21st, 2005 3:16 pm

    THANK You, great GREAT plugin…

  24. X’s klog » Blog Archive » This klog January 27th, 2006 7:38 pm

    […] The Rotator script is used to vary the header picts seen at the top of each page with each refresh/reload or change of page (try it !). […]

  25. Mark 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!

  26. […] Eine Möglichkeit ist, den Kubrickr zu benutzen. Das ist eine Webseite, die automatisch Kubrick-Header erstellt. Die Fotos wählt man sich bei Flickr aus, wobei der Kubrickr eine Suche nach Tags erlaubt und dann die passenden Bilder anzeigt, sofern sie unter einer CreativeCommons-Lizenz stehen. Eine weitere Möglichkeit ist das aufwendigere Selbermachen, hier findet man eine Anleitung für Photoshop und hier findet man ein Template für den Gimp, funktioniert ausgezeichnet und ist auch ziemlich leicht. So nachdem wir jetzt ja eigene Bilder für den Header wie am Fließband erzeugen können, brauchen wir ein Möglichkeit den Header rotieren zu lassen, bzw. ein Zufallsbild anzeigen zu lassen. Wie verrat uns die Contentschmiede. Man kann aber auch einfach das “Random Header Image” Plugin aktivieren. […]

  27. […] Janicek.com » Blog Archive » Random image banner for Kubrick (tags: Kubrick WebDesign) […]

  28. […] Kubrick is one of the most popular theme in WordPress. Here is a great explanation how to change the header picture. […]

  29. WordPress˺Ͽ euc-jp » إåβưŪѹ April 24th, 2006 3:21 am
  30. John 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!

  31. […] A Samuel, sOy lO peOr!,, por no ser tan malo como pregona de si mismo. A Janicek por pensar por mi y además hacerlo relativamente grátis. Y a todos los demás, por esperar expectantes los resultados de mi búsqueda. Hala, dale al F5 y prueba. […]

  32. […] Random image banner for Kubrick […]

  33. […] Janicek.com » Blog Archive » Random image banner for Kubrick […]

  34. […] Esiste infatti un Plug-In per WordPress che consente di integrare Gallery al suo interno. Quindi come prima cosa ho installato Gallery2 e ho upgradato tutti i miei album, operazione relativamente semplice dato che il nuovo gallery ha una funzionalita’ di “upgrade facile” dalle precedenti versioni. Poi ho scaricato e configurato nel mio WordPress questo plug-in: Gallery2 Integration. Dopodiche’ ho dovuto adattare Gallery alle dimensioni del tema di Default. Gia’ che c’ero ho modificato l’ottimo tema di Default di WordPress (basato su “Kubrik”) adattandolo alle mie esigenze, eliminando alcune cose e aggiungendone altre, come la randomizzazione dell’immagine nell’header con uno script in PHP che si chiama “Rotator“. […]

  35. […] Next step will be to create some headers of our own. And to help us we’ll probably use the article on Janicek.com. One of the clearer/easier descriptions of the process that we have found. […]

  36. […] 2. E um tutorial no JaniceK.com (em inglês) que ensina como mudar a imagem do topo do kubrick “na unha”, usando o photoshop. […]

  37. […] 2. E um tutorial no JaniceK.com (em inglês) que ensina como mudar a imagem do topo do kubrick “na unha”, usando o photoshop. […]

  38. […] a custom WordPress header using the image from the website.  A quick search on Google turned up how to go about it, but I discovered that the 1and1 WordPress version did not allow adjustment of the elements of the […]

  39. […] to figure out how to make my own Kubricks out of the images I have. I found some instructions for how to do it in Photoshop, and some sorta instructions for how to do it in Gimp with python, but neither of those work for me […]

  40. Jane 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 .

  41. Dan Myers 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 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!!

  42. Josh 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

  43. David November 25th, 2008 7:14 am

    Hi, great tutorial. This helped me out big time with learning how to get rotating headers on my site. I wanted to point out a little online tool I found over at bighugelabs.com that allows you to make a kubrick header simply by uploading an image…. it does pretty much all of the work for you (except adding text to the header if you wanted that). It is very simple to use and it can be found here –> http://www.bighugelabs.com/flickr/blogheader.php

    I use this all the time to make my kubrick header images and I love it.

  44. tsunchoo February 3rd, 2009 6:31 am

    does this work on blog’s hosted by wordpress?

  45. storm September 9th, 2009 2:30 pm

    Hi, can someone leave the code? The Link is dead … Thx.

Leave a reply