Tutorials

work starts on new role-playing game cover

By The Illustrator | 2011/08/30 15:17 Posted in GIMP, Heros in Time, Illustration, Role-Playing Games | Comments (0)

My new role playing game is called Heroes in Time and has everything needed to role play across an entire span of history from brutal primeval barbarian sword and sorcery to space opera and its laser battles, but the cover needs work. It is the element of this project that has been most severely letting it down uptil now.

This is the old cover, and it has lots of space opera sophistication, but no primeval brutality, and that is what I am in the process of changing. The new cover already has a more atmospheric colour scheme, and I have hacked out a more action oriented pose for the two player characters depicted. In terms of composition I quite like the way the text of the game’s title leads to what will be a light saber blade then across to the axe before landing up on the player character’s faces, which will of course be contorted in the depths of fear and determination, as most cover art characters are in these situations. The game content is evolving too, and the game itself is available from RPG Drive Thru. I’ll be adding a lot of internal art to the game too, as I work on the rules and add content. The great thing is that because the game covers all RPG genres, I can add whatever crazy ideas come into my head somewhere or other in the game.

Surrender Illustration Friday cute children’s character digital book painting

By The Illustrator | 2011/01/30 14:42 Posted in GIMP, GIMP, Graphics Tablet, Illustration, Tutorials | Comments (0)

Thank goodness for Illustration Friday, without this art challenge website forcing me to put stylus to graphics pad at least once a week I’d probably never get anything done. This week they have given us the word, “surrender” to get our creative juices flowing.

children's art digital painting wip crash screengrab

crash screenshot

As usual I opened MyPaint to start playing with ideas and come up with an image that i could turn into a picture suitable for a children’s book, or maybe a cartoon. I hadn’t been painting very long when the damn thing crashed on me. It left an image of what I’d been working on which I could get off the screen with my screen shot app, but it was still an uncomfortable experience. It was about this time I started asking myself if I really needed MyPaint, and the answer I came back with is that i probably don’t. I can simulate all the things I like about MyPaint in GIMP. I can resize the canvas (although it doesn’t happen dynamically. like in MyPaint) and I can use a calligraphy brush with the opacity turned down to make a brush that comes close to the one I fell in love with from MyPaint. It feels to me like I learned a lot from MyPaint and the way it was set up to help you paint and be creative, but I’m probably going to be going back to GIMP. It does digital painting almost as well as MyPaint – and it does a whole lot more besides.

first work in progress

After importing my screenshot into GIMP and tidying up, I set the brushes the way i learned from MyPaint and started working directly on the image in GIMP. Here I first add the sky and a few other details.

more colour for children's illustration for picture book

more coloursl for image

A few minutes later I’d gotten rid of almost all of the white ‘paper’, an important psychological step in my digital painterly practice. I haven’t done anything else to the clouds for example, but they look much better now when they are competing with fewer open spaces of white.

shadows and arrows

Next I used GIMP’s duplicate layer function to add lots and lots of arrows. All of a sudden it’s easy to see why this little creature is throwing it’s arms up in the air in surrender. Then it was off to Wikipedia for cowboy hat research images. I’m doing this more and more as I paint now. Another great advantage of doing digital paintings at the computer.

nice hat

Now, after a little bit of research with Wikipedia on cowboy hats and muskrats the image looks a little more detailed. I think I chose a muskrat for this image because I was remembering that kid’s cartoon Deputy Dawg. Here we see some pictures of Muskie the Muskrat

better cactus

The image is getting more and more complex. With each new element I add a new layer, and even though I merge layers together as soon as I can, I still have quite a list of different visual elements on different layers making up the picture at this point.

many layers

looking more like a children's book illustration

Perhaps those boots and the background are a little too realistic looking. That’s the problem with using photographic reference. I’ll try and make them more children’s book illustration or cartoon looking.

Render given concept art style makover

By The Illustrator | 2010/11/23 09:41 Posted in 3D, Blender, GIMP, Graphics Tablet, Illustration, MyPaint, spaceship, Tutorials | Comments (0)

I’ve decided to go back to one of the renders I did of one of my 3D spaceship models, and give it a makeover, to make it look more like a concept art illustration.

First I opened the render in GIMP and removed the background white colour. I added an alpha channel to the layer (to enable transparency), selected the white bits with ‘colour select’ and then clicked ‘clear’ to get rid of the white area and replace it with a transparent background instead.

transparent background for spaceship image

In this screen shot GIMP is telling me the background is transparent by giving it the grey checkers pattern that has become standard across image processing and painting software.

Then I saved this as a png file (png supports transparency) and loaded the file into MyPaint. Then with MyPaint I could add background and foreground detail on different layers to start building up a concept art style image of the spaceship.

Watch out for those rocks!

Refering to my little ‘Doug Chiang’ pdf is inspirational in this process of course, along with a lot of other reference and tutorials from around the web. There is still a long way to go with this illustration of course, but it wouldn’t be a blog without these glimpses behind the scenes and progress reports. At least that’s what I keep telling myself.

Sci-fi Character concept art illustration

By The Illustrator | 2010/10/13 15:04 Posted in GIMP, GIMP, Graphics Tablet, Illustration, Photoshop, Tutorials | Comments (0)

the original visualisation of the character

I was going through pages that I had posted on an old website yesterday looking for stuff that was worth saving – Microsoft wrote to tell me that my previously free Office Live website was going to start requiring payment or it would have it’s domain name taken away. I found a nice digital painting that I had done of a sci-fi character, a spacewoman standing on the surface of a moon. The page also had a nice description of the character and even some stats so that she could be used in the Star Frontiers role-playing game, which is free and still going strong.

The style of the illustration is very flat and comic book however – at the time I didn’t have a graphics tablet to allow me to really paint and I was still learning how to get the most out of graphic image manipulation programs (I was using Photoshop at the time, rather than the free open-source alternative, GIMP).

duplication of the image to layers

So I thought, why not use some of things I have learned in the mean time, and my graphics tablet, to improve the illustration and make it look more like the sort of concept art that might be used at the design stages of producing a new game, animation or movie.

The first step required was to separate the jpeg on to different layers. At the time I produced the original illustration I worked on only one layer, but I couldn’t imagine going back to this method now that I have worked out how the whole layers thing works in digital painting software.

It’s really quite simple in GIMP, I just pushed the button at the bottom of the layers window that looks like two photos on top of each other (highlighted with a red box in the screenshot). I initially created three layers, one for the space woman, one for the moonscape and one for the gas giant hanging there in the background. I then gave them meaningful names (instead of Background, the default name) and added an alpha channel (by right clicking and choosing this option from the pop up menu).

moonscape against green screen

Adding the alpha channel is the trick because when you delete something with the eraser tool the layer underneath can show through if there is an alpha channel on the layer you are deleting. So it’s a simple matter to delete the stuff you don’t want on a particular layer.

This layer for example is the moonscape, so I have deleted the spacewoman planet and backdrop of stars. I added a green layer to the stack because the default background used by GIMP (and Photoshop) is a grey chequerboard pattern and it is easy to miss bits when you are deleting because they are hard to see. To complete the moonscape layer I also painted over the feet with the moon’s brown colours to hide them.

each element has a separate layer now

I decided to give the planet’s rings a separate layer all to themselves too, because I want them to be a little transparent and for the planet to shine through a little bit. This is exactly the sort of effect that is easy to do with layers with the opacity slider.

So with the temporary green layer I made that brings my total number of layers up to five, but of course that’s just the beginning. As I add other elements such as shadows, a backdrop of stars, highlights etc etc the number of layers is just going to grow and grow so I find it really is important to give each one a name that makes some kind of sense.

I then noticed that the woman’s proportions looked a little off. I thought her legs looked a little short. I find that I often draw legs too short when I am sketching because of the foreshortening of the sketchpad. When I stand the sketchpad up to get a good look at what I just sketched I often say to myself, “oops, short legs again.” Luckily with GIMP that can easily be fixed.

I just duplicated the woman and erased the top half of her in the first duplicate, and the bottom half in the second. Then I increased the size of the second duplicate – the legs – and merged the two layers back into one.

better proportions

I then generated a spacescape with the dedicated GIMP spacescape renderer. I love that plugin, just love it – for a sci-fi fan like me it is such an intuitive addition to an image manipulation and digital painting app.

In this image (produced by saving for web – another very useful addon for GIMP) you can see that I have been doing a little work on the planet. I have added a shadow layer on top of it (a black splodge with the opacity of the layer turned down makes a nice shadow) and smoothed out the transitions between the different bands of the gas giant with the smudge tool. I then became worried that she was looking a little lost and lonely out on the gas giant moon like that and decided to put a spaceship in the background of the image to imply that there is a crew of other characters to keep her company as she adventures through the game, or we follow her story in the animation or film. I decided to use the sc-fi concept art of a spaceship I had been working on most recently.

sci-fi concept art with spacewoman and spaceship

I’m going to keep working on the illustration, adding shadows, making the ligting more dramatic, adding detail and definition to the spacesuit and the spacewoman’s face – which might require some research to find some good refferance material to use. It promises to be a long but hopefully rewarding experience. Once it is complete I will be posting the finished concept art illustration here to the content section of the website.

Down with tri’s – long live quads – close in work on my Blender spaceship model

By The Illustrator | 2010/05/01 12:27 Posted in 3D, Blender, Blender, Role-Playing Games, spaceship, Tutorials, Vega Strike | Comments (0)

After a long night watching pretty much all of Mad Men 3 back-to-back on DVD it’s once more to the spaceship model for more mesh tweaking. It’s time to turn all those tri’s peppered over my model like a pox into beautiful even quads – without compromising the complex mesh of this Vega Strike game spaceship.

Eliminating tri clumps on my spaceship mesh

The Vega Strike game engine won't like these triangles

But first some procrastination. What does Google say about the fine art of losing tri’s in Blender.

As usual the first hit I found giving advice about Blender issues was a post on BlenderArtists.org. It contains a couple of useful hints on how to kill tri’s. I also found a general discussion on Blender Newbies. It blames the subsurf modifier for the need to get rid of tri’s, and my spaceship is intended to have subsurf. This other Blender Newbies thread has a cool tip for slightly modifying tri’s that won’t convert into quads. You change their mind with the smooth command. Cool but too destructive my finely tuned spaceship model. OK enough of that. On with the job.

now one quad has replaced the two tri's

Two tri’s right next to each other was an easy win. I simply highlighted them with face select in edit mode and pressed ctrl J. Now as you can see above my spaceship has a quad that looks a bit like a necktie instead of those original tri’s circled in red in the first image in this post.

I hoped they were all going to be this easy – but…

I had two triangles at the mirror seam which refused to play nice and turn into a quad. I tried pressing ctrl j, I tried pressing F – and nothing. They just sat there.

So I deleted them and it turns out there was no edge at the mirror axis. I solved this little problem by selecting the two “hanging” vertexes and pressing f to draw a line. Then I switched to edge select and selected the four sides of my new four sided hole in the mesh. I then simply pressed f, and a quad was born.

No triangle could resist the power of my logical and spatial mind.

I did have to chase some triangles all the way to the mirror edge of the model on the central axis before I could merge two vertexes and finally get them to disappear, but even the most obstinate triangles could finally be squeezed out of existence at the mirror seam – leaving hopefully a spaceship model that will behave well and not throw up too many shading artifacts once it is in game.

OK, on to the next job in getting this model ready for baking.

Recalculating normals, marking seams, evening teselation, turning tris to quads etc on my spaceship model with Blender

By The Illustrator | 2010/04/30 20:17 Posted in 3D, Blender, Blender, Role-Playing Games, spaceship, Tutorials, Vega Strike | Comments (0)

Flipped normals on a Blender spaceship mesh

The ugly black hole made by flipped normals

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/Screenshot.png

Instead of posting about it i should probably be getting on with it, but what I’m doing is painstakingly – and over a period of days – tidying up my spaceship mesh in Blender.

This spaceship is intended to eventually be the Franklin, a unit used in the Vega Strike, open source space trading, combat and exploration game. I’m following a lot of advice I’ve been getting at the Vega Strike forums and step by step bringing this model to the point it needs to be to be added in game as a unit.

Lots of detail to be seamed and sharpened

Lots of detail, this might take some time

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/17_franklin_render_back2.jpeg

All this detail in the image here needs to be sharpened as explained in this Vega Strike forums post written by Chuck Starchaser. I’m beginning to wish I had added these seams before duplicating four guns for the wing hard points and attaching them. Oh well.

Hard to forget which edges are done

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/Screenshot_wing_edge.png

Once the edge is marked as a seam and sharp it glows a bright radioactive orange in the default Blender theme. I was worried that I would forget which seams were marked. it turns out that i was worrying over nothing.

A tricky bit

It’s not all plain sailing though. There are quite a few tricky seams to mark, like this one which is a circle with a bit hollowed out of it. it’s hidden away under the spaceship’s wing and buried underneath a pipe. I’m not sure how often it’ll even be noticed in the game, but I guess if a thing is worth doing then it’s worth doing right.

Once my mesh was looking a bit better I added the subsur fmodifyer as suggested, but it tore a bit of a hole in the nose of my spaceship model.

Now why on earth did it do that?

smooth

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/franklin_render_action_with_subsurf1.jpeg

I moved some edges of the mesh around and managed to get rid of most of the holes. So here are the latest renders.

the spaceship nose is all mended

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/franklin_render_action_with_subsurf2.jpeg

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/franklin_render_back_with_subsurf2.jpeg

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/franklin_render_side_with_subsurf2.jpeg

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/franklin_render_top_with_subsurf2.jpeg

http://starbrightillustrations.com/blog/wp-content/uploads/2010/04/franklin_render_under_with_subsurf2.jpeg

It’s interesting seeing this spaceship model evolve step by step through the various 3D Blender processes toward completion, isn’t it? Hopefully you’ll be able to follow the progress all the way to it’s eventual appearance in the game.

Here’s the blend file. it’s getting quite big with all these quads (and some tris still).

http://www.starbrightillustrations.com/blends/franklin_wip10.blend

Tips for making a professional spaceship mesh for games gratefully received

By The Illustrator | 2010/04/20 20:53 Posted in 3D, Blender, Blender, Role-Playing Games, spaceship, Tutorials | Comments (2)

There’s been progress on the spaceship mesh. It might not look like much, but a lot has been going on underneath. I have alerted the community at the Vega Strike forums about my intentions of doing 3D stuff, and have received a cautiously welcoming reception, and a lot of good advice. You can read the tips for spaceship modeling I was given in the second post of this forum.

I am really into the idea of getting some professional grade 3D stuff done for Vega Strike, even if it doesn’t turn out to be my own spaceship designs, and I have already started incorporating their advice into the model I’m making.

To summarise what I think they are saying;-

Point one would be that I should stop worrying about how many polygons the model is made up of. Apparently the sky is the limit, numbers like 150,000 being bandied about for a space station. This is a great relief. I’m sure I had read that the number of polygons had to be kept down, but apparently this relates to old technology and I’m probably showing my age by even mentioning it.

I think the number of polygons has already doubled in my mesh.

Point two is that as many polygons should be rectangular as possible. If possible, every polygon on the model should be a quad. My model had a lot of triangles, but I immediately started turning them into quads. It’s not that tricky, and once you know that this stricture exists it shouldn’t be too much trouble to keep to it. Here we start with two triangles, ready to cause all sorts of problems in the rendering process.

Now they have been deleted and a nice new rectangle is sitting where they once were.

So Like I said, it might not look like much has changed in this render of the spaceship, but a lot is going on beneath the skin.

Another fine spaceship image made with Blender and GIMP

By The Illustrator | 2010/04/17 01:10 Posted in 3D, Blender, Blender, GIMP, GIMP, Illustration, Role-Playing Games, spaceship, Tutorials | Comments (0)

I’ve been modeling spaceships in 3D again, to add to the huge gallery of spaceship art here at Starbright.

It’s not just about expanding the gallery though, playing around with the capabilities of Blender and GIMP is also a lot of fun. I’m working in a style right now that takes advantage of the 3D capabilities of Blender, but then has a lot of work done in GIMP to produce a 3D image that looks like an illustration.

In the illustration above the planet in the foreground has had a lot of GIMP work done on it and looks very painterly, and the planet in the background is straight out of Blender. It has that shiny chrome appearance of a render. It’s going to be the very next element to get a working over as I take this image towards being a completed illustration.

I’m also working on floor plans to go with the spaceship illustration – I know how everyone loves them. I suddenly realised that if I did a screen grab of the top view window in Blender and chose wire mesh as the view option I would have a nice technical drawing of my spaceship without having to do much extra work. So floor plans coming soon, but in the mean time what has been happening with the illustration, well…

Last time we saw the spaceship illustration it looked like this. Just a mesh with the default skin, and not a very complex mesh either, but it is already beginning to suggest the completed spaceship. It’s a simple cube cut in half and mirrored with a few simple transformations; subdivide, extrude and grab.

After just a few more extrude operations the spaceship mesh starts to look much more real. I’ve also changed the colour of the skin that the mesh receives when it is rendered.

Another bump extruded and scaled has been added here to be the cockpit. I’m now very happy with the camera angle and I haven’t fiddled with it for a while, I am still fiddling with the lighting though. I want it a little more dramatic so I added a second light source to brighten up the foreground edges of the spaceship.

More and more detail and complexity being added to the mesh. Even though there is a lot of complexity, it has almost exclusively been achieved by simply extruding and grabbing surfaces I also added a cylinder right at the front of the spaceship.

It’s a tiny detail, but like a cherry on a cake it makes all the difference. I had to join it to the original spaceship mesh to get it to mirror properly. With that little touch I was finished with Blender and it was time to move on to GIMP.

I rendered a nice big jpeg of the finished mesh and dropped it into GIMP. Because I chose a jpeg as the format I had a lot of white background to get rid of, but cutting out a spaceship with hard straight edges is no problem in GIMP. I just held down shift as I used the eraser and GIMP kept my lines nice and straight.

Once I had my spaceship cut out I started to add some details to it. Abstract spaceship details are called greebles in the business and you need to add an awful lot of them before the spaceship starts to look good.

This spaceship has only a light dusting of greebles – an airlock and some windows – it’s going to need a few more.

I also went back to Blender to make a couple of planets – just spheres set smooth with textures chosen from the presets that come with Blender. The foreground planet uses “random noise” and the background planet has the “marble” texture applied.

I’ve made a good start with this image and I have high hopes that it’s going to be my most professional looking spaceship illustration yet, when I eventually get it done.

GIMP step by step Moby-Dick tutorial more detail

By The Illustrator | 2010/04/04 22:05 Posted in GIMP, GIMP, Graphics Tablet, Illustration, Tutorials | Comments (0)

After a quick pause to post my entry for Illustration Friday it’s back to the Moby-Dick painting. I quickly added some spume to the big wave at the centre of the painting and then was about to turn to the whaling boat, when I realised that I don’t really know what a whaling boat looks like.

Thank goodness that all us artists have Google now. To find a nice boat to use as reference I simply had to do a quick Google search. I did the same to remind myself what a whale looks like and to find out what made Moby white. It makes the whole illustration process a lot easier. Here is the page where I found a nice detailed view of the inside of the craft. It’s actually a website for people who build model boats and has a lot more detail in sharper focus than I was able to find anywhere else.

I’m just going to be using it for reference, and I’m pretty comfortable that finding a picture of a boat to use in painting my illustration isn’t cheating. Here I’ve dropped the picture I got from the internet into the GIMP xcf file to make sure I can do it justice.

With the boat in place, and a few alterations made to turn it around to face the danger coming from the background of the illustration, it was time to add some detail to the figures in the boat. At the moment they still look like the match-stick men of an L.S. Lowry painting.

As I’m not entirely sure what the 18 ^th century adventurers I want to put in the picture might look like It’s back to Google.

I found a great bunch of whalers to use as reference. I found them on a blog post where the blogger was boasting of his friend’s performance in the Alaskan Whaler category of the World Beard and Moustache Competition. Based on this photo, I guess the most important accessory to give my crew is an Aron jumper.

I got distracted after working on Ahab for a while and did some work on the eye of the monster whale. I added detail and got it to pop out of the image a bit more. Then I sketched some white lines on the whale.

I did this to give the impression of sheets of water floating down the monster’s hide as it emerges from the depths. To help sell these white squiggles as sheets of water I used the smudge tool to smear them a bit. It’s quite a nice effect.

The picture is really starting to take shape now. Next I decided that the wave needed a bit of detail too. So, going about adding detail to the image in exactly the same way as the stage before, I just drew some lines on the wave in the same colour as the wave’s brightest point.

Then to sell these little touches as natural I used GIMP’s smudge tool to make them a little more complex and smoky looking. I think it looks quite good and gives a good impression as a boat wake.

So now I’m going to keep on adding more and more detail in exactly the same way, until of course I suddenly decide that this illustration is done. I have a feeling that won’t be for a while yet though, I think this image is good for at least another couple of blog posts.

paint ebook cover image with GIMP, tutorial pt 2

By The Illustrator | 2010/04/01 20:54 Posted in GIMP, Graphics Tablet, Illustration, Tutorials | Comments (0)

Here is stage two of the illustration that will eventually be the book-cover image, you can see stage one, the initial sketch, in the original post. The main subject of the illustration is really starting to take shape, but a lot of work still needs to go into Ahab and his crew.

To start turning my scan of my initial sketch into an illustration I opened gimp and made a new document of the dimensions I wanted. Then I just dragged and dropped the jpeg image of the scan into the new gimp document. I then resized it to cover the whole image and I was ready to go, time to plug the graphics tablet into the USB port. On top of the scan of the initial illustration I added four or five large areas of colour to the image.

The whale is one solid block of colour on a separate layer, and so is the wave, boat, flippers etc. You can see the first few layers of the image in the screen grab below, but of course I’ll be creating an awful lot more layers than these few. The more layers you have the more control over your picture you have.

You can see that I have switched some of the layers off in the image above (the eye icons are gone). I did so that I could work on other elements without the whale for example getting in the way.

Just a few more details have been added here. You can see the clouds have been painted very roughly into the background and I’ve just started to make them more cloudy with the smudge tool. I’ve also given ol’ Moby some teeth.

The distinctive white colour of the mythical beast from this illustration comes from barnacles. I did a bit of research and it turns out that our creature from the depths was not an albino. This image is right at the start of the process of adding this colouration.

After twenty minutes of repeatedly jabbing the graphics tablet with the stylus the look of the main character is starting to take shape. It still looks a little like the measles though so I’m not going to be able to close GIMP for the day just yet.

I added a big shadow on top of the layer of the illustration with the colouration and then finally added a layer of patchy white underneath that layer to produce first a bumpy but imposing effect and then a much smoother and more frightening creature. The star of the this book, although most people probably read Moby-Dick as an ebook these days, and there’s no reason why an illustration like this cant be its digital cover.

Starbright Illustrations (blog)