Creating Jake

posted on August 26th, 2006 by Anthony

My word, three weeks since my last post… that’s a new record I think.

Loadsa Jakes

The main reason my spare blogging moments have been taken is the return of the football season, or more specifically the return of UKfpl.

Regular readers (I know there must be some…) will have heard me mention UKfpl over the months, most recently with our successful World Cup version – which melted our servers on a number of occasions!

With the domestic season under way the everyday UKfpl is back in full swing, rocking a new design and everything. As usual with us, things are still under development (it’s a constant thing) and we haven’t even implemented a proper front page yet (it’s 90% done Rich…)

However we’re cruising along nicely. We’ve retained a fair number of the peeps from the World Cup version so we’re operating on over a thousand regular users for the first time. Not bad when this is about as much promotion as we do…

Besides attending to the usual CSS fires that break out on a new design, and writing the weekly mailshot updates to the user base, the main task that has been swallowing my time is Jake.

The very first - very embarrasing - Jake!

I introduced you to Jake a few months back. He’s the UKfpl mascot who has developed from a very rough, very embarrasing, Flash doodle I knocked out over 5 years ago. Up until recently he was mostly used as an avatar in our forums, so I had to produce maybe 25 Jakes, for various league teams, to cover our meagre userbase in there…

This year we are using him on the predicting page… so that’s a minimum of 92 different jakes that I have to produce this season.

Thankfully I’ve streamlined the process somewhat over the years, and this year I think I’ve pretty much perfected it by moving the production into Fireworks rather than Flash.

So far I’ve reproduced over 50 of the teams in the top four English divisions – from Accrington Stanley to Wolverhampton Wonderers.

The 50 or so Jakes so far...

Making Jake

Just as something to do I though I’d walk you through the process I go through for each Jake…

1. Flash Beginnings

It all started with a doodle in Flash…

The 3.5 ake in his Flash maternity ward

as I said Jake has undergone a few revisions. You could say he is Jake 2.0… ahem.

He is actually Jake 3.55 or something like that and is probably about 18 months old now.

I took that flash doodle and exported into a much higher res PNG. which I then opened in Fireworks.

2. Fireworks

Then to add a basic background colour I used the pen tool paint in the main sections of Jake – his shirt, shorts and socks…

The resulting layers were than moved behind his wireframe to create the illusion of a coloured in Jake, and with a bit of layer separation I know have the perfect Jake canvas.

The many layers of Jake

Getting Teamed Up

So that’s the canvas covered… how about creating those 92 individual club Jakes?

Scunthorpes generic PremiunTV website

Scunny Jake

Well first I need a victim, and for the purpose of this exercise it happens to be Scunthorpe United from Coca Cola Football League One (which is really Division 3 for people not familiar with British footballs league structure…)

The first port of call is the teams official website – 90% of which are all provided by PremiumTV, and are truly awful. With table ridden, JavaScript dependant, registration forcing crap holes… but that’s a different story.

Scunny are no different…

The Scunny Shirt

Generally to find the base images of the kit the first port of call is to the online Club Shop. Clubs that don’t have them can be tricky, thankfully Scunny have TheIron-Direct…

So I have my images to base the Sunthorpe Jake on – a nice claret and blue number by an up and coming manufacturer by the name of Carlotti, who are becoming quite popular with teams in the lower leageus…


The collars

First I set the stock Shirt colour of Jakes shirt to an approximate match and then start on the detail. The collar is generally where I start, and scunny’s is quite a complicated example. With three colours in a tight space and an intricate bit of detail.

It doesn’t really matter (as you’ll see at the end), but I get anal about it…

Getting Shirty

The shirt detial going in

After the colour the main detail of the shirt is added. Again Scunny is quite unusual, with the two blue flashes in the shoulder areas. Horizontal stripes are the most difficult to relicate generally.

Once the main colourings are added then it’s the small details that make the shirt…

The Devils is in…

The first one I deal with is generally the main sponsor. For the bigger team this is easy. Hi-Res examples are a quick Google search away… whereas looking for ‘Hatfields Jeep’ could be a bit of a trek…

Jeep Jeep Jeep Jeep

Fortunately I found a huge Jeep logo easily. I bring that into Fireworks, strip out the background and then I ‘Color Fill’ it white to match the shirt. The Hatfields is just in Arial, and easily added.

I add that, group, flatten, resize and add it to Scunny Jake…

The sponsor in place

Next comes the club badge. Again this generally needs a quick Google Image search and nothing more than removing the background before putting in place. Scunny’s badge is quite a funky example, playing on their official nickname of ‘The Iron’.

The funky Scunny Badge

The last bit of the shirt is the manufactures logo, I’ve got a nice library of these now, so that’s no problem.

And the shirt is complete.

The shorts and shocks are a lot easier, with not surprisingly most of the attention going into teams shirts.

And that’s the finished Scunthorpe Jake…

The finished Scunny Jake

well nearly.

The Finish

On the site he will actually only be displayed at 53×110, so all my fine detail gets lost.

After the resize it’s not quite as simple as just exporting the image. A lot of the feature don’t translate to the tiny res too well and a few things need tweaking, but overall that’s your lot!

Scunny Jake in action

I hoped you enjoyed this useless guide!

I do actually use the full detail Jakes for making some nice wallpapaers which I might write about later on.