Take a look at this image:

It’s something I just designed for my web site, to replace the old version of the site which I just thought looked nice, but outdated.

The thing is, it’s not a single image.  It’s 11 images, created on the fly from the web server based on random factors involving about 50 different images.  In fact, if you go to the website, you’ll see a different version of it every time you upload.

How did I do this?  I’ll explain, after the fold.

PHP is a great language for web building.  It works at the server side, which means it’s browser independent and you can even use it to create websites on the fly, having it write code based on a variety of factors.  Building images in PHP is not exactly EASY but it’s kind of fun.

So let’s start with the idea.  The base of the image is located here.  It’s just that circle in the background.

Then the script gets fun– I add each of the individual images for each category.  But those aren’t a single image.  They’re each one image pulled from a random list.  The music, menu, for example, is located here.  Every time you reload that image, it picks one at random from the list.  It does the same with several other directories– five of them specifically.  The advantage of this is that if I want to add or remove some of the random image choices, it’s easy to just go in and do that without changing the code further.

Then the title files: same concept: find the right place to put the files involved; those are simple xy coordinates.  Sometimes it takes tweaking.  You can even add random elements if you like.  I.e, choosing a range of 5 pixels in each direction that a piece of text or an image can be positioned if that’s the effect you’re going for.  I didn’t do that in this case, but toy with it sometimes.  

Then overlay the text images, such as this one.

Here’s the original source code that I use to build this.  You have my full permission to copy it and play with it, just be sure to use your own images and not mine.

There’s a real benefit to this approach: I could have created a single text map image in photoshop and make it look nice, but now if I want to change just one small element of the image, I don’t need to worry about going into photoshop and working backwards.  I can just make the tweak to the one image.  I can also use this to play with many variations of the same image while investigating how they work in combination with one another.  It stretches my mind a bit and gives me the chance to look at everything differently.

So– a couple tips: first, make sure you use all transparent png files as your base files if you want images to overlap one another.  Otherwise, there will be a square image overlaying your other images.

Second: go with the highest quality images to start with that you can find.  You can always output reduced quality images if you choose, but it’s better to start with the high quality and go down because you can’t go in the other direction.

Third: output to png can be a little tricky– if you make a small tweak to something you can create errors very easily without realizing what you’ve done.  

Oh, btw– I’ve been making some major changes to sites I’ve designed lately; feel free to give feedback on the sites and if you’re looking to have someone build you one, feel free to contact me.