Lead Visual Designer (Brand) at Mozilla, Transmogrifier of vectors, animator of GIFs, CSS eyebrow waggler, ketchup chip expert, lover of thick cut bacon.
I’ve been playing Lord of the Rings Online now since 2008 and I have to say, I’m fairly addicted. It seems to have formed a perfect storm where excellent game design merged with my childhood fascination of all things Tolkien. The chance to run around Middle Earth and hew some Orc is something this fan just can’t pass up.
When Turbine released their Free-to-Play version of the game back in September, they refreshed the look of their website to try and glam it up for the influx of new fans. Now I have to say, I really can’t stand the new website layout and the forums are downright HULK SMASH, but I was smitten by one element. The background image has a gorgeous rendering of Sauron’s fiery eye.
I got to thinking about how Turbine created the asset and thought I’d like to have a go at trying a version in Photoshop. Now this was my first time playing with digital fire, so I wasn’t quite sure how to go about it. Here’s how I did it so you can giv’er a shot.
1) I decided to grab some Google Image flame assets to play around with and hauled down a bunch that were set on black backgrounds. I then brought them into Photoshop and selected all the darkness around them with the Select > Color Range… option and a hearty feathering on the selection tool. A few twists and turns with some of the select flames, a slathering of layer styled glows, and I had an eye shape.
2) Next was hunting down the background image. I wanted something that showcased the playful nature of little Sauron’s playground setting, so I hunted on flickr for green field images within England. My goal was to find an image that resembled the Shire, and the results did not disappoint. I brought in this great shot and played with the saturation so the flames would be the dominant element. I also used the Smudge tool and made a heat effect on the image around the eye.
3) Of course, since Sauron is a big old eye of fire, he’s going to burn things. Badly. My next step was adding a charred patch of earth beneath him and once again I ran to Google Images and tore a random campfire out of an image result. Some orange glows were drawn above simply using the Paintbrush tool and setting the layer to Screen.
4) For the swings, yes… Google Images. Random swings were random and I traced them out, slapped them in and warped them with the Smudge tool for the heat effect once again. I then applied coloring and shadowing for ambient immersion. For a seat, I built a wee little perspective chunk o wood and threw a charred log texture on top. Added a freshly evil-burned glow to the top and ripped open a bag o’ marshmallows.
5) The final detail I wanted to add was a cloud of sparks. Where there is fire, there are sparks. (I know you are looking for smoke now, but evil fire doesn’t produce smoke. leave it alone.) I simply used the Pencil tool and went nuts slapping down wee white specks to which I then applied an orange Outer Glow. For a few, I applied a Motion Blur to make it look as if they were rising.
And that is how Poor Little Sauron burned down the swing set. For those of you who are wondering what the font is, it is a free font called First Order. I thought it matched Turbine’s choice for the LOTRO logo so I gave ‘er a go. Sorry I didn’t go into further detail, but if I can find a good spot online somewhere, perhaps I’ll host the PSD so you can check out all the layer styles and settings used.