Ah love takin’ pictures and posin’ fer some too but y’see it takes a wee bit o’ pokin’ aboot tae get the results ye want.

What we have here is a rare creature on this blog:  a post about blogging itself.  Not going too far, of course, it’s about something in particular I like to use on my blog (as do many others), namely images.

Images, pictures, portraits, doodles, sketches or representations - whichever type or flavour you pick it will generally enhance your posts.  I have always been a very image-centric person - I like art, animation and video as well as creating websites and ‘graphics’.  It was only natural for me, then, to add a lot of art and imagery to my blog when I began it, though it took a little while to get the kind of pictures I wanted.

Why use images?

Although bolding some of your sentences, adding headings, italics and using various ·lists as well as plenty of  s p a c e s can give structure to your posts I find that it is images which can make me stop and really look at a post.  I could insert a cheesy line about a picture saying a thousand words but, to be honest, I believe that the way I (and perhaps blogs in general) use them is more in line with adding pepper to soup - it enhances the ‘flavour’ of the surrounding text and makes it tastier to eat.  Read.  Devour?

Images can also be used as visual clues - when I write a post about my shaman I usually include a picture of him - same for my druid, rogue and hunter.  A lot of people use this method if they have multiple authors so it’s no big leap to utilise it if you’re a frequent, chronic sufferer of the dreaded altitis.  Using Aurik as a model I hope I can illustrate reasonably simply how I make shiny images for my blog assuming basic knowledge of image editing.

Before I begin I will note that this isnae a ‘how to make shiny images of awesome dhoom’, a guide on how to upload / capture pictures and it also definitely isnae the only way to do things.  It’s  simple few tips / short guide about how to make some half-decent, quick images for your blog - in my opinion, unless your blog is centred around the images you use then making them should not take longer than writing the post. *grin*

There are two types of images I will cover: Screenshots and WoWModelViewer based images.  I don’t really like non-game images in my WoW blog so I’m afraid that’s all yer getting from me.

Tools

• Image Editor: Adobe Photoshop, Paintshop Pro, Gimp
• Wowmodelviewer

Personally, I usually use Photoshop as I’m most comfortable with it, however I know not everyone can get their hands on it so I poked around with Gimp for a bit (there is now a version for windows) and, although a little clunky, it does have most, if not all, of the editing facilities that I use in Photoshop for my blog images.  If you’re willing to play about with it, it’s a vast improvement on many simple image editors.

ModelViewer Images

I use modelviewer extensively.  Despite some hiccups with items (some do not exist in the basic version of the modelviewer, though they are able to be added by anyone who can use notepad!) it’s a very nice tool for getting the exact pose that you want.

You can download modelviewer here.  Once you’ve downloaded it, open it up, and you can create almost any character with most gear in the game and pose them how you like.  I grabbed a quick screenshot of Aurik to show how I make most of the random images for my posts.  Try to make sure the model is as big as it can be - if you only want a head and shoulders then zoom right in - the bigger your original image the better.

First, crop the image down so that it is surrounded by whichever background colour you chose in modelviewer (using the crop tool or selecting an area and going to Image -> Crop), then use the selection wand (I use it at around tolerance 12, rather than the preset 32 and uncheck the ‘contiguous’ box) to select all of the blue areas (or whichever colour you choose to use - pick one not found on your character).

You could simply stop here and skip forward to the second last step but the next few steps are the ones which I use to give the basic models a little bit of a softer, brighter look.

The next stage is simply to copy the layer (right click on the layer in photoshop) and blur the picture by about 2-4 pixels.

Once this is done, copy the blurred layer and stick this new copy underneath the original base layer.  Looks a bit messy at the moment but the wonder of layer styles will save us!

Set the original blurred layer layer style to Hard Light (sometimes Soft Light will look better, it depends on the colours involved and how bright a picture you’re aiming for).  Of course, now Aurik looks like he decided to sit in a gnomish nuclear reactor a bit too long…

This is quickly rectified by toning down the layer we have styled by putting the opacity to anywhere between 50-70%.  I tend to find lower than this is barely different from the base and higher is a bit too day-glo in style - again though, this depends on the look you want to create.  If you were going for a mystical, glowing night elf, for example, you might want to have increased the blur (on the first blurred layer only) a bit more, use soft light and leave the opacity high.

The reason we took the image as large as we could, earlier, is so that we could resize it.  As you can see above, resizing an image drastically reduces the quality however we’re actually going to use it as a tool.  When you resize something in photoshop it will end up smoothing out all of the sharp pixels. Although the second image here looks terribly blurry I should point out that it’s doubly blurry since I scaled it back up to show the basic effect of resizing.  As you will see in the end image, the actual picture doesn’t look quite that blurry.

Last thing to do is to un-check the background visibility.  This will mean no backgrounds so that if your site changes colour (new style, for example) or when viewers read your site in a feed reader, for example, the images will not look out of place.  When I started doing the images for /hug I simply put the character, resized, on a background the colour of my site in jpg format.  When I looked at this in a feed reader I realised how utterly terrible it looked and started using transparent-background pngs.

Ta-Da! *ahem* If you click this image you’ll see a comparison between Aurik half with and without the blur / glow effects.  It’s a minimal difference but I think it makes hair and some other details look better without spending a lot of time on them (around 1-3 minutes per image depending on complexity).

Shiny Stuff

The thing about wow is, though, that the developers like shiny stuff as much as we all do.  Shiny stuff is not so easy to auto-select, though and sometimes comes with see-through bits (which show that horribly bright background colour you chose rather too well.  A simple way to deal with this is to turn them off in wowmodelviewer (View -> Model Control -> Select parts from the dropdown box and uncheck ‘particles’) and then add your own glow but you can also use the select tool to remove the ‘excess’ glow and blur the rest.

For example:

Soft light, opacity 85%, self-added glows using a very soft brush (and very quickly… usually I just remove all of the glows and leave it at that…)  Again, clicking this will show a comparison with an image with and without the glow / blur effects.

Some of the best image editing based on modelviewer I’ve come across is created and shown off at the wonderful Flinthammer Hall and Musings from an Angry Bansidhe.  Puts my stuff to shame!

Screenshots

I love screenshots (you may have noticed if you’ve been kind enough to hang about and read my blog for a while) and usually I do very little post-processing on them as, for me, it takes a little of the ’spirit’ away from a screenshot to go away and play with it too much - like taking a holiday snapshot and then coming home and editing in some sunshine.  The essence of some screenshots is simply that you noticed a moment of beauty and tried to capture it.  Some are carefully set up, others are random pics that turn out nicer than you could have hoped.

In fact, post-processing can leave you with damned ugly screenshots like this one.  I hate it, but I was on my laptop, with settings turned down and I only grabbed one or two shots before hurriedly running here to squee about the dragons.  It has been sharpened to help show detail but lost a lot of quality in doing so.   Even blurring / relighting can’t save screenshots like this!

Tips for Cleaner Screenshots:

• Make sure you have your graphics settings as high as your computer can handle
• Turn off player  / guild / pet / the kitchen sink’s name tags
• Unless the picture is of you, be zoomed into first person view
• Check the light and make sure you or the object you’re taking the screen of doesn’t have it’s back to it - unless, of course, this is the effect you want or it’s an immovable object
• Try mounting up or getting somewhere high if a ground viewpoint doesn’t show all of what you’d like to capture

I know these are mostly obvious but I am not a fan of screenshots with player names (with the exception of, say, bosskills or those where the names illustrate something) and scenes blocked by the inclusion of the person taking the shot (though I’m horribly lazy and do this myself sometimes)! *ahem* Of course, this is all an issue of taste and if you think those do look better then you should just do what you like the look of best.

So where do my images go?

An especially pertinent issue on my mind at the moment as, some of you many have noticed, the newer versions of wordpress mess horribly with image positioning in feed readers - with side aligned pictures being booted underneath text and suchlike due to ‘compliance with web standards’ apparently.  Damn standards! *ahem* There are several places your images can go and it all depends on the type, shape, size, context, etc. of the image and your post.  Multiple pictures of the same size can be aligned in the centre together to make a neat ‘banner’ with the advantage that each is separately linkable.

Banners, large images and screenshots are usually best if centred above  the text they represent.  Smaller images - especially full / half body character pictures which are much taller than they are wide work well aligned left or right.

I prefer to mix and match the images but sometimes you have a post full of banners or smaller images it’s hard to vary them.

‘Less is more’ sometimes.  Images are usually best if spread out and limited in number.  They are best placed to break up big blocks of text - though not if they are incongruous to said text.  Of course a tutorial type post, like above, breaks this convention horribly.  Bugger.

It can be a little hard to post something like this without knowing exactly what people might want to knw so poke me in the comments if there’s something that needs greater clarity or if you think I’ve missed a vital step - I just felt that a big part of my blog was these images and I wanted to get something out there about how I use images and why.