Photoshopping daddy Joe’s wordpress logos

So I wanted to create a banner image for my wordpress-related posts on this web site. I envisioned something that would be

  • recognizable and unique, so all my wp posts could be immediately recognized
  • contain the WordPress logo
  • fit into the overall Mad Max theme of the web site
Original WordPress logo

So how to incorporate something as clean and as vector-ish and as BLUE as the original word press logo in the dirty, realistic, RED-YELLOW world of Mad Max?

Also I didn’t really want to just place the logo in the background or something as obvious and out of place, I wanted to do something that would subtly introduce the logo in an organic way into the world.

Of course the first technicality that needed to be addressed was the format of the picture. My banner pictures, or, in wordpress terminology, “featured pictures”, are ideally 800×450 (this is dictated by the theme I’m using, but also the look I want for the site). This restriction in place, all we need is some inspiration.

So what to do? Well, the first step was to look around the net for good Mad Max themed pictures and find some inspiration there. Since I normally gravitate to the Immortan Joe, I googled his pictures and scrolled around until I found something… sad, but that peaked my interest.

Immortan Joe, moments before meeting the inevitable fate of every movie villain

What caught my eye in this picture is how clearly the little “coins” on Joe’s shoulder armor are displayed. Sure there are  other pictures with similar clarity and focus, but not many and definitely not in this size and resolution. As unhappy as I am to use it – as this picture is actually the last seconds of life of the wonderfully iconic Immortan Joe – the idea that I got was way too tempting to not give it a go. It looked something like this:

First idea for logo incorporation

so obviously I figured using Joe’s little coins as placeholders for the WP logo was just what the doctor ordered when it comes to the “subtle, organic incorporation of the logo into the world of Mad Max” which I wanted to achieve. The problem was… it looked all but the “subtle, organic incorporation” that I wanted!

So what to do? Obviously the logo exists in the completely wrong plane in comparison to the coins; being parallel to the viewer’s eye, unlike the coins. Also, the coins are all but ideally flat and circular – they’re distorted, warped and unruly; like everything in the Mad Max world is.

Luckily, I seemed to remember a lesson from my Lynda photoshop courses that allowed me to distort and warp layers (images) and which seemed to be just what I needed. I didn’t remember anything but that it existed, but a google search landed me on a fabulous bit of adobe documentation, “Warp images, shapes, and paths” where I learned exactly what I needed: Puppet warp tool!!! Studying the documentation and finding an awesome video that quickly brought me up to speed of what the tool does, I applied the puppet warp to my wp logo and ended up with something like this:

Puppet warp mesh on the wp logo

Some pushing and playing ensued, during which I figured some layer transparency will be helpful in order to allow me to see what I’m doing, and I ended up with my first warped WP logo looking pretty neat! And as you can see, much more down those “subtle, organic incorporation” lines I kept yapping about in the text above.

My first Warped wp logo

What followed was populating the rest of daddy’s coins with uniquely warped logos, which I did simply by copying the layers and setting them in right places, then warping them to fit each unique coin. I found it easier and faster to work if I copied layers of already warped coins, than warp the original logo each time; considering that the coins are set in different, but overall pretty similar planes. I tried to fit the logos to the warped and uneven surface of each coin, but still leave it recognizable for what it is.

Warped wp logos

Not long from then, I had the full shoulder of warped Wp logos, each in it’s own layer, each with a different, unique shape and different level of transparency (55-45%), depending of how integrated or obvious I figured I wanted them to be.

Photoshopped logos

Now what about those blues contrasting the reds and yellows of Mad Max? I… actually tried applying various filters and color modifications, but to be honest, I ended up believing the blues actually helped the logo stick out a tiny bit. Yes, I did want the “subtle, organic incorporation”, but at the same time I didn’t want to make the logo so subtly and organically incorporated that it would be overlooked.  Here’s the final product:

Further work

One idea I got while taking a screenshot picture for this post was to also give Daddy Joe a cool WP logo ear ring! However I ran out of time for this project, but when I get to that, I’ll definitely upgrade!

Cool linx:

Leave a Reply

Your email address will not be published. Required fields are marked *