Ship icons creation tutorial in Homeworld 2 style

[Pouk]

I was asked to make a tutorial about creating ship icons, so here it is. But remember, there is no right or wrong way of making the icons, the only important thing is the result. I present you the way how I do it, maybe you'll find your own. This is not an exact procedure, every go may be a little different, so improvise!

I will use my Supercarrier from rearm as an example. This is how your icon would look like at the end of this tutorial:



If you want to use my supercarrier for your work, you may download the tiff image here, or you can start from beginning with your own ship.
So let's begin:

-- 1. Preparation: --

Most of you can probably just skip this part.

Tools needed:

-Adobe Photoshop with .DDS plugin (or any other bitmap editor what can open .dds files) (dds for Photoshop CS4 , dds for Gimp)
-any 3D software (it's not necessary but it's easier)
-Spooky's ROTTool for icon extraction
-extracted and decompiled icons folder

Files:

Ship icons (as well as subsystem icons) are located in "Data\ship\icons" in your extracted data folder, but your .lua and .mres files needs to be decompiled.
You don't have to bother with this, I've prepared the icons folder for you to download, with all needed files in it.
Put the downloaded files into this folder:

C:\Program Files\Sierra\Homeworld 2\Data\ship\icons

or wherever your Homeworld is installed.

Extraction

Now is time to use the ROT Tool. So run it, go to "File/Open"



and find the "Icons" folder in your "...\Sierra\Homeworld 2\Data\ship\icons"



And open icon_ships_1600.rot. You'll see a picture contains all the ships icons. But what you may also notice is that in your icons folder is now a new file called "icon_ships_1600.DDS". Which means, that all you need to do for extracting the .rot into .dds pictures, is just open them, ROT Tool will extract them automatically. You can extract more files just to see how they looks, but we won't actually need to extract anything else, because all our lower resolution icons will be based on "icon_ships_1600.dds" file.
Now open this file in Photoshop or your bitmap editor.
We will do only one thing with it for now. Because it's upside down, we need to fix it. Go to "Image -> Image Rotation -> Flip Canvas Vertical".

And now we have everything we need to start working.

-- 2. Rendering the ship: --

There are two ways to get our ship picture:

A) -Make a screenshot in CF HODEd or right in game

Pros:
-You don't need to bother with 3D editors, no need for importing anything
-It is probably faster
Cons:
-It's definitely not as clean method as the second one, it's easier to make it ugly
Conclusion: It may or may not be faster or better, it's questionable...

Not many things to talk about, just make a screenshot of your ship from a top view if it's a Hiigaran ship or a Vaygr fighter, or from a side view if it's a turret, or any other Vaygr ship. The only exception is the Hiigaran collector, which is seen from front. Don't try to make the ship blue, try to make it grey, because we will define the colors later. Plus we will invert the picture, so from your blue would become yellow. It's not a problem in CF HODEd, everything is grey there, but in game it could be a big problem (and I wouldn't recommend the in-game method at all), because when you think it's grey or white, it's most likely orange, because of environment.

Then go to Photoshop and open the "icon_ship_1600.dds" picture and your screenshot. Delete the background of the screenshot manually. (there is a number of methods you can use: Lasso tool or Magic Wand for selection and delete, or Brush tool with Clear mode or Eraser tool for example)

Now adjust the size and rotation, so it fits into place you want it. -Press "CTRL+T" (transformations) and resize or rotate the ship while holding "Shift" key, so it keep the constant proportions.
So now you have this:



...or...

B) -render it in 3D software

Pros:
-you'll automatically get an alpha channel for cutting the ship out of its background
-you don't have to bother with perspective, because it's not a problem to get an orthographic top or side view.
-you can play with a lights or effects right in the 3D editor, if it's some more advanced one
Cons:
-you have to import everything and assign textures manually etc
Conclusion: More work but better results

Open the ship in your 3D editor, make sure it's with goblins and with all necessary parts and it's textured. Set up the render and some flat lighting, if you want (global illumination) and render the ship from a top view if it's a Hiigaran ship or a Vaygr fighter, or from a side view if it's a turret, or any other Vaygr ship. The only exception is the Hiigaran collector, which is seen from front. Make the ship grey and the background white. (We will soon invert the picture, so the background will become black, just like we need.) It should look something like this:



Now save the file as Tiff with alpha channel, your renderer should be able to do it. Here is how it looks in 3DsMax:


Don't forget to assign an alpha channel.

Now we can close the 3D editor and we will finally do something in Photoshop. You should already have your "icon_ship_1600.dds" picture with all the ships open in Photoshop, but if not, open it. Now open your rendered image too. Go to "Select -> Load Selection" and load your Alpha channel as selection.



Press OK and you can see that only your ship is selected. Drag the selected ship out of the picture into "icon_ship_1600.dds" picture like this:



Now adjust the size and rotation so it fits into place you want it. -Press "CTRL+T" (transformations) and resize or rotate the ship while holding "Shift" key, so it keep the constant proportions.
So now you have this:

-- 3. Making the icon in Photoshop: --

We are finally getting somewhere. We've get our grey ship into Adobe Photoshop and in both methods we've managed to produce something weird -a grey ship on a picture of Hiigaran Carrier.

And no, don't worry, you won't lose icon of your carrier in game even if you'll save the .dds picture, you can still use the original .rot file. But we can decide here what we want to do:

-If you have only one new ship and nothing else, no big plans for the future, just find a blank spot on a picture and place it there. But remember, this is a grid. Well, you can actually put the ship on some random place, but it will be better to keep the grid reference.
-If you want to switch one ship for another, than obviously place it over the particular original ship.
-If you want to create the whole bunch of a new ships or the whole race, we will save it as another file (like "icon_ship2_1600.dds" or "my_new_freaking_race.dds" and for those new ships we will refer to this new file.

So decide what you want and than you know if you want to save it with the same name or a different name.

Let's finally do something:

Create a new layer ("Layer -> New -> Layer" for those who doesn't know), place it underneath your ship, take a Brush tool with a black color and paint it to this new layer, so you cover the original ship. (if there is one)



Now select the grey ship layer again and go to "Image -> Adjustments -> Invert".
We've inverted the ship picture, because we wanted the details to be brighter, not darker.
You will have to also desaturate it, because we don't need that much colors here.
So go to "Image -> Adjustments -> Desaturate" or to "Image -> Adjustments -> Hue/Saturation" and decrease saturation level.



Create another layer, this time above, and paint a blue color there over your ship. Then switch the blending mode of this layer to "Overlay". Look at the picture:


Blending mode defines the way how the upper layer will mix with the one underneath.

Now select another color, yellow or orange (yellow for strikecrafts and orange for frigates and capital ships) and paint the parts you want to into the very same layer. In this case it's all the production subsystem slots:



We're getting somewhere but it's still not what we are looking for. You'll need to play with it a little more now. What I did was that I've copied the color layer (but gave it about 80% opacity), to get more saturation and changed the colors little bit.
What I also recommend is to copy the grey ship layer and change brightness and contrast or even better, do it by Levels (Image -> Adjustments -> Levels). Little histogram will appear and you will change the values to get some more contrast (what you need is to rise the white, but only in details) and than change the blending mode of the layer to "Screen" or something similar (which will increase the intensity of the bright parts).
After a little work you'll get something like this:



Time to make the outlines. Select the "Eyedropper Tool" (color picker) and pick the bright blue somewhere from the original picture, or you can just start with a color somewhere around 0, 243, 247 RGB values. Now create another new layer between the "black" and "grey ship", but it must be under the ship. Take a brush (with appropriate Diameter and Hardness) and paint the blue outline.
If you're not very good in precision painting, I have an easier option for you: Select the ship layer and go to "Load selection" but this time don't select any alpha, but "Layer # Transparency", then to "Select -> Modify -> Expand" and type something like 5 pixels or so, so your selection will enlarge. Then "Select -> Modify -> Feather" (type 1 or 2 pixels) which will smooth the border opacity. Create the layer I was talking about under the ship and fill this selection with bright blue color.

This is the result of both (well, I've actually painted it, but both ways give the exact same results):



At the end I've used the "Clone Stamp Tool" to take some details from original Carrier picture and a "Pencil Tool" to paint some details myself. Final Icon:


Clone Stamp Tool will allow you to duplicate part of an image, in this case details from Hiigaran carrier are scattered over our ship.

-- 4. Final steps - getting the icon into a game: --

That's not all. Your icon is finished, but not in game.
There are few last things you need to do. First, an alpha channel of the picture. Switch to the "Channels Tab" and click at the little eye next to "Alpha 1" to unhide your alpha channel. Use black and white brush to fix the silhouette in the alpha channel so it fits with your ship. Otherwise you would see just a texture of your ship in a silhouette of the hgn Carrier which used to be there. This is how it should look like:


Transparent areas of an alpha channel are represented by red mask, but the channel itself is black and white.

You already know if you want to replace the original .dds file or make a new one. Now go to "Layer -> Flatten image", this way you'll get rid of all the layers, so you can finally save it as a .dds file. Make sure you'll set "No MIP maps" in .dds format saving dialog, you don't need them. Actually, you don't want them. (you may also use the .tga with alpha channel)
You've just saved one picture, but that's just a quarter. In the beginning you saw that there are another 3 pictures for lower resolution. You need to resize it and save it again three more times:
First make sure that your background color is black, because the remains after resizing will have the background color you have there and you need black.



Select all (CTRL+A) and then hit CTRL+T (transformations). Set it to 80% for both, Width and Height.



Then move it to the left corner, it will snap to the borders.


The remaining area around the scaled square is black, because we've set the black background color.

Resize the same way the alpha channel so it fits again exactly ship to ship. (Go to channels, select Alpha 1, hit CTRL+T...)
Now save it as "icon_ships_1280.dds" or "whatever_name_you_want.dds". Look at the size of other two files, resize them to required proportions and save them with 1024.dds and 800.dds at the end of it's names. (1024.dds = another 80% from 1280.dds. 800.dds = use the 1600.dds image and resize it to 50%, from the 2048px to 1024px)
(Note: I need for testing just first two, because my game doesn't use the two lowest resolution files, so I keep original .rot files instead of the new ones. But it most likely wouldn't work with a lower resolution game settings)

We are getting to the end.
Go to your "icons" folder (ship\icons). Now if you used the same name just with .dds suffix, you don't have to do anything, the game will use the new .dds files, just delete the old .rots.
(Note: You don't have to pack the .dds back to .rot, the game will use the .dds)
If you have different names, then copy icon_ships.mres file, rename it (In this case for example to icon_ships2.mres) and open it.
Now rename all

res800 = "DATA:/Ship/Icons/icon_ships_800.dds"
res1024 = "DATA:/Ship/Icons/icon_ships_1024.dds"
res1280 = "DATA:/Ship/Icons/icon_ships_1280.dds"
res1600 = "DATA:/Ship/Icons/icon_ships_1600.dds"

to your

res800 = "DATA:/Ship/Icons/some_new_name_800.dds"
res1024 = "DATA:/Ship/Icons/some_new_name_1024.dds"
res1280 = "DATA:/Ship/Icons/some_new_name_1280.dds"
res1600 = "DATA:/Ship/Icons/some_new_name_1600.dds"

And the very last thing, you need to actually assign the particular ship to the particular icon on the image.
Open the shipicons.lua. And the easiest way is just to copy an existing lines and rewrite them. So find the Hgn_Carrier in there:

Hgn_Carrier = 
{ 
    LargeIcon = 
    { 
        texture = "DATA:\\Ship\\Icons\\icon_ships.mres", 
        textureUV_TL = 
            { 0, 128, }, 
        textureUV_WH = 
            { 186, 64, }, 
        stretchOnDraw = 1, }, }

The numbers are referring to coordination on the image. So just copy it and change some things, for example like this:

Hgn_Carrier = 
{ 
    LargeIcon = 
    { 
        texture = "DATA:\\Ship\\Icons\\icon_ships.mres", 
        textureUV_TL = 
            { 0, 128, }, 
        textureUV_WH = 
            { 186, 64, }, 
        stretchOnDraw = 1, }, }
Hgn_SuperCarrier = 
{ 
    LargeIcon = 
    { 
        texture = "DATA:\\Ship\\Icons\\icon_ships2.mres", 
        textureUV_TL = 
            { 0, 128, }, 
        textureUV_WH = 
            { 186, 64, }, 
        stretchOnDraw = 1, }, }

You need to rewrite the old name to the actual name of your new ship, and you need to tell it where is the new .mres file and what's it's name.

That's all, I hope it was helpful.






Some final words:

-I wrote it the way that even beginners can try it, so please don't feel upset that something is too detailed.

-The rules here should be the same for any other program you use, only procedures/names will be a little different.

-There is probably a big number of grammatical errors, so if you feel like correct something, send me a PM. I apologize for my English.

[Battlecry]

I found this tutorial to be very helpful, but a bit confusing because I was using GIMP instead of Photoshop so the commands / functions were a little bit different. Aside from that, I was able to make the following based off my original greyscale icon I used before:


New Icon


The original Icon

Still lacks detail and the saturation seems to be off, but it's a start at least.

[Pouk]

Great. And yeah, I know it's not ideal for people who are using Gimp, but I've never worked in Gimp in my life. But perhaps you or someone else can compare Photoshop and Gimp functions and share some hints, what to use, what's different from this tutorial an so on.
EDIT: I've added some explanatory notes to some oddly called Photoshop functions for better understanding.

[Phatboygeo]

Brill !!!!

[Pouk]

Many grammatical errors were corrected and thanks to Phatboygeo for correcting the beginning of an article.

[Phatboygeo]

Some more coming i hope my grammar right, i could make a right fool of myself

Hint, this is so sticky you could put your feet in it and walk up walls

[scarbrow]

TGA formatted images work in both windows and osx. It also saves you having to use dds plug-ins all the time.

It is very easy to create ship icons in Gimp provided you have a good base image. For the BSG mod I was creating them so fast it was about 1 icon per minute. I had learnt the keyboard commands fully then, it would have been down to 30 seconds per icon

[Pouk]

You need the dds plugin to open it in a first place and I don't see the reason not to have it, I am working with dds files all the time.
And icons in Fleet Commander are nice, but I don't buy those 30 seconds. Making the icons are just few very easy steps, but even I could make an icon in 30 seconds, I wouldn't.

[Omega_uk]

vote sticky! nice one Pouk, i've been wondering how to do this for a while

[Dim@]

Very helpful, I second (or is that third?) that sticky.

[Pouk]

Thank you guys.

[scarbrow]

The steps I took to make the ship icons in Gimp were as follows:

In HW2

1. Modify a level to have a pure white background.
2. In HW2, zoom in on the ship the way you want the ship icon to look like and take a screenshot.

In Gimp

3. Select by colour to delete the white around the ship.
4. Create 2 duplicate layers of the ship.
5. On layer #2, select by colour then invert selection so that only the ship is selected, then grow selection by the appropriate number of pixels.
6. Fill the selection with blue "outline".
7. Make all of layer #1 a solid colour - then make the layer invisible.
8. Colourize layer #3 to be all shades of the desired blue.
9. Save the image as TGA, disable RLE compression and merge visible layers down.



Gimp keeps the selection 'active' the whole time, there is no selecting needed to be done after step 3 - it can be done in 30 seconds with the combination of keyboard commands and selections as Gimp can also remember your preferred colour selections and settings.

[Pouk]

interresting

[Battlecry]

This thread should definitely be moved to the "Tutorials, Guides and How-Tos" subforum.

[Bowkers]

Ok!

In future guys, if you see a thread that you think should be moved to tutorials, if you could report it, then staff can see it quickly and deal with it. Cheers!

[lmsmi1]

All I can say is...WOW! I made a quick HTML tutorial version if anyone wants it...

Oh and, the GIMP DDS Plugin link in the current tutorial is dead. Here is one I found:

http://code.google.com/p/gimp-dds/

[LeviathansWrath]

i am in need of a simpler and more detailed one, pouks confused the hell outta me, and i ended up messing it up lol. Well first time trying so ya.
hey pouk if you can include more pics of step by step layer by layer that will help.
Hey Pouk can you go more in depth explaining how to handle the layers?I think the layers were what was giving me trouble.

[Chimas]

(the following issue is around the last CODE lines, in the end of the tutorial)


Brief note of the coordinates system inside shipicons.lua related to the image:

textureUV_TL

• first column of ships is zero, second is 200, third is 400 ...
• first row of ships is zero, second is 64, third is 128, fourth is 192 ...

textureUV_WH =

• W (width) is variable and H (height) is 64

[LeviathansWrath]

if anyone is interested in my icons thus far here is what i got.
http://www.moddb.com/mods/a-homeworl...icons#imagebox

[I got BC'ed]

Nice but up the contrast.

[LeviathansWrath]

COntrast is at 100.

[I got BC'ed]

Hmm, no offense I don't know if I could do any better, but the orange bits look off somehow, they're too "flat"

[LeviathansWrath]

i didnt use any details from other ships, besides dont think it really matters, hell i dont know how to detail lol.