Create World of Warcraft Inspired Fan Art


Most of you are probably aware of the World of Warcraft. In fact, many of you are probably active players. In this tutorial we will demonstrate how to create a dynamic World of Warcraft fan art illustration. Let's get started!

Tutorial Details

  • Program: Adobe Photoshop CS2 +
  • Difficulty:Advanced
  • Estimated Completion Time: 4 Hours

Before You Begin

This tutorial will take you through both the technical side of how this image was made (layer modes, clipping masks etc), plus it will look at the design theory side of things (unifying colours, arranging a montage etc) and of course it also contains a lot of random trivia and silly asides that you've come to expect from one of David's tutorials.

The aim of this tutorial isn't for you to simply recreate this image (you can if you want to) but to share both method and ideas with you so that you can apply the knowledge to your own illustrations. You may prefer to use this guide to make an image based on Assassin's Creed, The Legend of Zelda or Glider Rider. Okay, maybe not Glider Rider.

Not so Fun Fact:

If you can remember Glider Rider on the Spectrum you are officially old. *Sigh*

Fan Art is a labour of love that we all routinely practice. No matter how big or established a creator gets, every so often they will have an irresistible urge to make an image based on something they love whether it's a film, TV series or a video game. The nice thing about Fan Art is that you're not restricted by too many rules, you can re-design a character, re-interpret an event in a characters history, make them meet-up with characters from other franchises or in cases like this illustrated love letter to the Blizzard Entertainment's "World of Warcraft", cherry-pick characters that you liked personally. The main goal of Fan Art is to have fun".

Step 1 - Know your audience: gather your resources

Online fan bases can be fiercely loyal and protective but they will overlook small discrepancies you may have inflicted on their favourite characters as long as you've shown enough respect by getting the majority of details right. Don't try to bluff your way through, do your research.

For example The Headless Horsemen's Head is featured without his body here as a nod to fighting him during the Hallow's End festival. Frequently during the fight his head separates from his body forcing him to yell "Get over here you idiot!" to his body. It's a nice nod to Warcraft fans and touches like this will earn you some bonus points for paying attention and proving you care about the subject too.

Fun Fact: Hallow's End

Hallow's End is my favourite of World of Warcraft's seasonal festivals; for 2 weeks around Halloween the Headless Horsemen would turn up at various villages igniting the roofs of the local buildings leaving the players with the task of putting out the fires. After saving a town, higher level characters had the option of chasing down the Horsemen to defeat him for a chance to win a Squashling pet (a little pumpkin that follows you around wherever you go!), a witches flying broom to ride around on or even the Horseman's Flying horse! Sadly, I never won the Broom or Flying Horse, but the Squashling followed my character around everywhere.

Quick Tip: keep your reference in one layered file

Instead of having numerous different jpgs open cluttering up your workspace, create a new file and drag and drop the references from your internet browser directly into Photoshop. It's much more efficient to have all of your reference in one place and you can hide any reference you don't want to look at.

Step 2 - The rough stage

Open a new A4 .PSD file with a resolution of 300dpi (300dpi is the minimum resolution needed for printing your images) and Create a New Layer called "Roughs" Select a blue brush/pencil and start sketching your rough layout. Because there is so much content in the World of Warcraft I'm not going to focus on one specific scene or event, I'm going to draw a montage (did anyone else start singing the "Montage" song from Team America in their head just then?).

Draw each character on their own rough layer to make experimenting with the composition easier. Keeping elements separate means we can manipulate things individually without affecting everything else. For example, notice at this stage the Murloc (the strange amphibian creature) is facing left which gets flipped for the final image.

When you're happy with your composition Select all of the Rough layers by holding in Shift-clicking on the Layers palette and Press Command/Ctrl + G to group them together. You can now lower the Opacity of all of the rough Layers at once by dragging the Opacity Slider of the Group Folder in the Layers Palette.

Artistic Insight: Why so blue?

The reason I sketch in light blue is because it stands out clearly when I start sketching and it's very easy to differentiate from my final black lines that I draw in an image. Blue Pencils were often used by animators like Disney when they drew the rough sketches for their films. The colour you choose is actually down to personal preference. Some artists use purple whilst some use red. Feel free to use whatever colour you feel works for you.

Fun Fact:

Scientific studies have shown that people who sketch with the colour blue are more likely to witty, intelligent, charismatic and attractive. They have also been known to fabricate facts that make themselves seem more impressive.

Step 3 - Drawing the Lines

Lower the Opacity of the "Roughs" Layer Group to somewhere around 55% so that they don't distract you when drawing in your lines; Create a New Layer for each character's set of Lines and start drawing in your line work. Use Photoshop's aliased Pencil to draw your line work NOT the standard anti-aliased paintbrush. Don't worry that when zoomed in up close it looks blocky, this won't affect the image when printing and digitally it gives a nice HD feel to the lines when zoomed out. I'll get into why it's important to use Aliased lines in a minute.

Note: I've haven't made a new layer for each character's lines as that would make the file very big, I've drawn multiple characters on the same layer as long as they're not to close to each other. To save on file size (therefore increasing performance) I've drawn the characters as follows: Group 1: Murloc and Sporebat, Group 2: Sylvanus and the Horseman's Head, Group 3: Arthas, the Goblin, the Tuskarr and the Sporeling


When you're drawing your line work, make sure you've got everything where you want it because if you Free Transform your line work to either increase or decrease them the lines will become Anti-Aliased which will make the flat colouring stage a lot harder and more time consuming as the Paint Bucket Tool Won't Fill to the edges and you'll have to use the Lasso Tool and select the areas manually. Of course, I'd be way too clever to make a time consuming mistake like that. *shifts in seat suspiciously*

Step 4 - Turn the Lines grey

When you've finished drawing your lines, lock the Transparent Pixels of each Lines Layer by clicking on the padlock icon in the Layers palette then select a grey colour of Red: 181, Green: 180, Blue :180. Press Shift + Backspace to bring up the Fill dialog box and Select Use: Foreground Colour to turn the lines grey. Set the Blending Mode of each Lines Layer to Linear Burn. This sets the lines up to change when colours are painted underneath them saving you the hassle of altering the colour of the lines manually later.

Fun Fact:

For this image I've collected images of some of the more notable characters from World of Warcraft like Arthas Menethil (star of Warcraft 3 and Wrath of the Lich King) and Sylvanus Windrunner (leader of the Undead faction "The Forsaken") but I've also included some of the more obscure characters that I enjoyed encountering during my time in the game such as a Sporeling (mushroom man) the Tuskarr (the walrus-like man) and my favourite in-game mount, the Turbo Charged Flying Machine (with dashboard dancing hula girl!)

Step 5 - Set a base colour to paint on

Painting on a white background will throw off your perceptions of colours, so replace that annoying white with a neutral base colour. Choose a colour that you know will be present in your final image. I've gone for purple here as a lot of the characters I've picked have purple present in their designs already and my image will probably have a night time feel.

Handy hint: Assign frequent tasks to hotkeys

Anything that speeds up your workflow is worth doing so you should definitely use hotkeys to select tools (e.g., press B for Brush and G for Gradients) it's so much quicker to do and you'll look like some sort of mystical Photoshop wizard to people that don't use Photoshop without having to wear a robe or grow an oversized beard. Note: You can still wear a robe and an over-sized beard if you really want to, I won't judge you. Actually, that's a lie. I would judge you. Just so you know.

You'll find there are certain functions you use very frequently in Photoshop (such as Create New Layer) which have more long-winded shortcuts like Shift + Command/Ctrl + N which definitely takes you out of the moment when you're making sure you hit the right keys, instead you can set this so a single key (I use F10) by selecting Edit > Keyboard Shortcuts and follow the instructions in the bottom half of the menu's dialogue box. Easy.

Step 6 - Flat coloring: my quickest method yet (or THIS is why you need aliased pixels!)

As part of my ongoing struggle to make flat colouring as painless as possible I've come up with a method that isn't nearly as laborious as it used to be (metaphorically speaking we've downgraded the flatting experience from serious surgery to a simple tooth filling; it's still not fun but much more preferable to the alternative!)

To make this more straightforward, I'm dividing this step into the following mini-steps.
1. Create a New Layer below each Lines Layer for flat colours
2. Command/Ctrl-Click the thumbnail of one of the Lines Layers to make a selection of the lines.
3. Fill the selection using the Shift + Backspace method on the Flats layer below.
4. Deselect
5. Use the Paint Bucket Fill Tool to quickly fill areas of colour on the Flats Layer without the colour leaking to any other areas (make sure the "Anti-Alias" is unchecked)

Tip: Mind the gap

If you've unintentionally left gaps between areas and the colour is spreading further than you want it to, work out where the gap is and switch to the Pencil tool (Press B) and scribble a little bit of the colour you need to fill the gap. Press G to switch back to the Paint Bucket The Fill will now be "trapped" where you want it

Step 7 - Make the lines match their surrounding area

Although the colours are now filled, the lines won't match them as they will still look like whatever colour you first used when filling in the Lines selection on the flats layer. e.g. I used green to fill the Selection made from the Murloc's Lines Layer, so the Lines look dark green. Command/Ctrl-Click the Lines thumbnails again to reselect them, then press Command/Ctrl + H to hide the "marching ants". Select the Pencil Tool and (on the Flats layer) paint in the selection so that the lines are the colour that they are supposed to be e.g. in the screenshot the Selection of the line work has been hidden and I'm painting in the Selection with the same colour as the teeth on the Flats Layer so the teeth will now have a cream outline,

Step 8 - Background Gradients

Press Shift + G to switch to the Gradient Tool and select the following settings in the Toolbar: Foreground to Transparent, Linear, 25% Opacity. Start to suggest a background with a mixture of darker purples, lighter blues and pinks. Switch the settings of the Gradient Tool to Radial Gradient to get greater control over the colour distribution i.e. The gradients will cover a smaller area. The background doesn't need to be exact; it's just providing a basis to work from at this point.

Handy hint: Breathing space

When creating a film montage style poster that has many elements there is already a lot of information for the viewer to take in so it's best to keep your backgrounds relatively simple so there is some "Breathing space" and the viewers will know where they should look. If there is a lot going on in both the foreground and the background the image becomes too busy and cluttered.

Step 9: Adding atmosphere to the background

Most of these characters have a slightly creepy feel so I added an ominous green glow to the sky which then reminded me that the Tuskarr (the walrus people) live in Northrend which was largely based on Earth's arctic and extreme Northern regions (read: it's cold and snowy!) so I Pasted in an image of the aurora borealis and set it to Overlay before Merging it down with the background layer. I then created a new layer and used a custom star brush to add some stars to the night sky before adding a Small Gaussian blur to the stars to make them recede into the background. The background is detailed enough to return to the foreground for now.

Step 10 - Create Clipping Mask Shading Layers to shade the Characters

Create a New Layer above each flat colour layer and tick the box marked "Use Previous Layer to Create Clipping Mask", set the Mode to Linear Burn and Opacity to 65%. The Clipping mask only lets you paint on top of existing pixels which means you can be much less careful when applying your shading. (people often get confused by this concept so if you're struggling just try it out and it will instantly make sense) Select a colour of Red: 137, Green: 118, Blue: 118 for all of your shading

Artists tip

Made a New Tool Preset (in the Tool Presets tab) of the Pencil Brush with "Include Color" ticked so that I could quickly change back to this exact shading colour at any time without having to key in the numbers manually

Step 11 - Group the Layers

This may seem like an unnecessary Step, but trust me, this will make your life a whole lot easier; Group your Layers! To do this simply click on the Lines Layer in the Layers Palette, then Click on the Flats Layer while holding in Shift to Select the Lines, Shading and Flats Layers and Press Command/Ctrl + G to Group them together. Name each folder appropriately and you can now make changes to all 3 layers simultaneously. Moving, hiding and Masking anything is now simple.

Step 12 - Start shading the characters

This step covers what you need to do for all of the characters you draw. Select the Lasso Tool (Press L) and make sure Anti-Alias is un-ticked. Once again we want Aliased selections to make the shading look nice and sharp. Make sure Feather is set to 0 and click on the icon "Add to Selection" in the Toolbar (it looks like two squares together) This will make it so you don't have to hold in Shift to add to the Selection every time you draw something. You can just keep drawing with the Freehand Lasso until you're happy with your Selections. Should you need to subtract anything from your Selections, hold in Alt whilst drawing.

Once you've drawn your Selections for where you want to apply your shading fill them with the Shift + Backspace method and voila! Instant shading without having to colour pick!

Interlude: Don't be afraid of change

Although the shading stage is just one step, in reality it takes a lot of time to complete. I normally enjoy the shading stage as it really helps the image come to life, but I also use it as a chance to see what's working and what isn't. At some point during the shading I noticed I'd drawn Arthas's eyes slightly in the wrong place and after correcting them I realised I just wasn't happy with him. He was just there; a giant, slightly unimpressive floating head, looking slightly grumpy. He looked less like a fearsome king of the Undead and a bit more like he was stuck in a queue at the post office.

One of the benefits of working digitally is that you can make changed much easier than you can with traditional media. It took me a while to grasp the concept, but now if something isn't quite working in an image I'll change it. Arthas was a sinister and devious schemer, and sometimes he came across like he was genuinely enjoying himself so I changed his expression to a sinister smirk, and as a result he looks much more interesting than the bored man waiting to buy stamps. To summarise: If something's not working, don't ignore it; fix it!

Step 13 - Fire Glow effects

When you've finally got all of the shading completed it's time to get to the more fancy parts of the illustration; it's time to bring those fire glows to life!

Create a New Layer and set the Blending Mode to screen. Select a garishly bright green for the Headless Horsemen's Head (I know Headless Horseman's Head doesn't exactly make sense, but go with me here, I'm not writing an English tutorial!) and switch to the DC Fire Brush (found in my Brush Preset zip file which you can download here ) set to 60% Opacity and the Mode to Screen and start to brush in some streaks of fire (Note: This brush is Anti-Aliased which is fine as we won't be selecting anything on the fire effects). Remember that fire of any kind is always white in the centre and shows more colour towards the edges (this is also true for all light effects and even light sabres!) Add a subtle glow by switching to the Radial Gradient and set it to 25% Opacity and the Mode to Overlay the click and drag from the centre of the flame outwards.

Repeat this step for the Flame coming from the malfunction of the Goblin's Flying Machine's turbine, just use a light yellow colour instead.

Step 14 - Another big step: Adding Highlights

Adding the highlights of the image is another fun but lengthy step that will take you a lot longer to apply than it will to read. Create a New Layer for each Layer Group and position it ABOVE the Lines Layer, set each highlight Layer to Linear Dodge. Use the Lasso Tool to select the areas to highlight in the same way you did with the shading. Instead of using a specific colour as you did with the shading, colour pick a light green from the Horseman to Fill the highlights on the left hand side of the image and colour pick from the Flying machine's flame as the highlight colours on the right side of the image. You have to be a bit more sparing with the highlights than you were with the shading as a little goes a long way. Too many highlights and the image will suffer as the viewers eye is drawn to areas of high contrast; if there are a lot of areas with high contrast the viewers won't know where to look.

Step 15 - Unifying the Color

This is a great trick to bring an image together, and it's especially useful when you've got an image with so many different colours such as this one. Create a New Layer above all other Layers and set the Blending Mode to Color. Use the Paint Bucket Tool to Fill it with Green and lower the Layers Opacity to 12%. Everything will now be subtly tinted green, making it look like all of the characters are part of the same image.

Handy hint:

Using a Color Layer is a very quick way to make sure all of your colours are either cool or soft. It's very good for indicating a certain time of day; try a filling a Color Layer with Red (making sure the Opacity of the Layer is around 10%-15%) to make it look like the scene is occurring during sunset.

Step 16 - Change the focus with color gradients

Create another New Layer with the Mode set to Color and place it at the top of the Layer stack. This time switch to the Linear Gradient Tool set to 25% Opacity and hold Alt to use the Eyedropper Tool to Color Pick a dark Blue from the Sky and drag a gradient down a small way from the top of the image. Because cool colors recede it will make Arthas appear more distant.

Similarly, color pick a dark red from the floor to drag over the lower half of the Murloc, the warm color will make it appear closer to the viewer.

Step 17 - Adding the exclamation mark

For those of you that have never played World of Warcraft, the game is based on performing quests for characters you meet in game. Any character who has a quest for your character has an exclamation mark above their head. To make the mark look authentic I Google searched for an actual Warcraft quest symbol then dragged and dropped it into my Photoshop file. Because it's a little too bright and bold I lowered the Opacity to 34% and applied a Gaussian Blur of 2.2 pixels.

Useless Trivia:

My favourite race in World of Warcraft are the Undead whose quests normally seem to have a sense of humour missing from some of the other races (Night Elves are particularly dull, they seem to spend the first 20 levels worth of quests crying about nature suffering in one way or another!). They also have some top quality flirting material such as this little ditty:
"Roses are Grey, Violets are Grey. I'm Dead and color blind."

Step 18 - Luminosity

One of my favourite tricks that you should hold out on for as long as possible. (If you make any changes this effect will show them up) If you're using Photoshop CS4 or CS5 Press Command/Ctrl + Alt + 2 (or "Opt + Cmd + 2 on the Mac), for CS3 and earlier, use "Shift + Alt + Command/Ctrl + ~" (or the key equivalents if you're using a Mac). To select the luminosity (all of the bright parts of the image) Press Shift + Command/Ctrl + C to Copy from every visible layer, and go to Edit > Paste in Place (or Edit > Paste Into for older Photoshop versions) and you'll have a copy of all the brighter parts of the image. Simulate light glare by applying a Gaussian Blur of 6.8 pixels and change the Blending Mode to Overlay. Place the Layer in between the Fire Glows Layer and the Color Tint Layer.

Useless Trivia:

If you're a member of the Horde you can travel to the Undead capital Undercity to hear the ghostly echoes of the moment Arthas murdered his father that occurred in a cinematic clip in Warcraft 3. If you turn up the ambient noise in the throne room you'll hear it.

Step 19 - A more stylised background

Select All of the image (Command/Ctrl + A) and Press Shift + Command/Ctrl + C to Copy the entire image and Paste the contents. Go to Filter > Pixelate > Mosaic. and enter a cel size of 73. To make the image look pixelated. Now move the Layer below all of the Grouped Layers and apply a Motion Blur with an angle of 3 degrees and Distance: 570 pixels.

Press Command/Ctrl + V again to paste in the same copied pixelated version of the image and apply another Motion Blur, this time with Angle set to -90 degrees and Distance 570.

Next up comes a slightly vague part of the step where you Add a Layer Mask to each of the two new layers and then use the Radial Gradient Tool to mask out sections of both Motion Blur Layer. You'll have to edit the Masks "by eye" but effectively you're trying to end up with a mixture of both horizontal and vertical blur lines and bring back the interesting parts of the background such as the stars and the aurora borealis.

Step 20 - Black Border

Early on in the image I considered having a black rectangular border around the image the character's overlapped (much like Drew Struzan's Star Wars posters) but it feels like everyone has been doing that for montages recently so I hid the layer just in case I changed my mind and wanted it later. As you've already seen I chose just to have the horizontal bars but I'll take you through how to make a border as well just in case it's helpful to you.

Start off by clicking View > New Guide... and making both Horizontal and Vertical guides entering the Position as 50% for both Guides. (Entering a percentage symbol makes Photoshop do the maths for you as opposed to you working out what the exact canvas dimensions are). Create a New Layer between the characters and the background and Fill it with black. Select the Square Marquee Tool (Press M) and click and drag out your box approximately, it will Snap to the guidelines for you. Hit Backspace to Clear the Selection and viola, you have a neat black border. To change it into a two black widescreen bars as we have in this illustration you simply have to right click anywhere in the Box and click Transform Selection and drag the handles of the selection horizontally to the far edges of the screen and hit Backspace to Clear the black.

Fun Fact:

There are numerous references to Star Wars throughout the World of Warcraft including a Dwarf pilot called Xiggs Fuselighter wearing an orange and white costume, a nod to cult favourite fringe character from Star Wars X-Wing pilot Biggs Darklighter.

Step 21 - Adding Smoke

Create a New Layer underneath the Black Border Layer called Smoke. Select an Airbrush (again using Anti-Aliased Brush this time) and paint in a smoke trail from the Flying Machine's engines. As with all smoke or clouds Start with a dark colour to draw the trail and then build on to of it with lighter colours. You should use thick black smoke here to suggest something is burning in the turbine. When finished add a Motion Blur of -13 degrees and 31 pixels Distance.

Fun Fact:

The Turbo Charged Flying Machine vehicle, like a lot of the engineered items in-game, often coughs and splutters and the engine occasionally drops out for a moment causing you to drop slightly. If you leave it to close to the ground it will cause you to land which is bad when you're hovering over enemy territory! It's a mistake you only make once.

Step 22 - Blurring the rotor blades

To blur the rotor blades and propellers on the Turbo Charged Flying Machine first hide everything except for the Layer Group that you have the Flying Machine in by holding down Alt whilst clicking on the Layer Groups eyeball in the Layers Palette. Press Command/Ctrl + A followed by Command/Ctrl + Alt + C and Shift Command/Ctrl + C to Copy All of the Visible Layers and then Paste it above the existing Layer Group. Use the Lasso to make a Selection of the rotor blades then Go to Filter > Blur > Radial Blur and set the amount to 17 and Blur Method to Spin. Move the centre of the blur in the dialogue box so that it is approximately where the centre of the blades is and press OK. Repeat this for both propellers individually and then erase all of the other areas on the Layer so that only the blurs remain.

Fun Fact:

The Wrath of the Lich King expansion pack added a lot of nicely orchestrated music to the game; my hands down favourite track was Totems of the Grizzlemaw which you can listen to on GrooveShark here.

Step 23 - Making the Murloc move

As a final touch lets give the Murloc in the front a little extra impact we're going to give him a motion blur. Expand the Murloc's Layer Group by clicking on the arrow next to the Folder icon in the Layers Palette. Now hold Shift + Command/Ctrl and click the Murloc Flats and Lines Layers to make a selection of them. Got to the Top of the Layers Palette and Paste in a Copy Merged version of the Murloc and then go to Filter > Blur > Radial Blur and set Amount to 17 and Blur Method to Zoom.


Right, that wraps up this tutorial, we hope you enjoyed it and found it helpful. to see more of David and Sarah's artwork please visit their website and their blog and you should Follow David on Twitter.

Related Posts