Do you want to create a new unit or structure with a new model, but don't know how to create a wireframe image for it? Never fear, for here is a tutorial on how to do just that!
Those of you who don't want to spend money on Photoshop, you're in luck! This tutorial uses Paint.net instead.
Video Tutorial
Note: This video has no commentary (my voice sucks). It's meant to be watched after reading the written tutorial, so you can understand each step better.
1. Prepare The Model In The Cutscene Editor
First-up, open the editor and go to the model you wish to create a wireframe image for it. Click on “View In Cutscene Editor” to load the model inside the cutscene editor.
Angle
The wireframe should make it clear at first glance what type of unit the player is using. Therefore, you should use either the idle stand animation or attack animation.
For today’s tutorial, we’ll create a new wireframe for the marine unit while he’s standing still (Blizzard uses his attack animation as a wireframe).
Once you’ve got the pose you wish to use for the wireframe, you have to adjust the camera angle as well as the background color.
Using “Front” camera view, then rotate the model by 45° to the right, is a good starting point. Then hold CTRL and the Left Mouse Button to rotate the model.
Lighting
Change the lighting used by the texture set of the map to “Default Lighting”. This way the lighting in the cutscene editor will change as well, as it uses the map texture’s lighting as well.
Once that’s done, select the Default Light entry and change the angle from which the light comes from (Key category).
For a wireframe, a clear contrast and clearly-recognizable shapes are more important than the level of detail. Therefore, make sure that the light will make most of the unit bright, will still having a touch of shadow to make it look more realistic.
Last but not least, change the team color to white for the best possible contrast.
2. Take A Screenshot Of Your Model
Create a screenshot of your unit model inside the cinematic editor and paste it in your image program of choice. You might have to try out different zoom levels until you find something that is the right size.
Btw, you can also create a unit icon image at this point.
Image Sizes
Wireframes are 140 by 140 in size. Unit icons are 76 by 76 in size.
For unit icons, there must be a border of at least 5 pixels, so your screenshotted model shouldn’t be larger than 71 pixels.
Remove and/or recolor a few pixels if necessary to make the image look smooth from up close, and make the background image transparent.
Next, turn the image from color to black and white (also known as grayscale). If the image looks dark in some parts and has some deep black spots, change the gamma levels to make it brighter.
Remember, the wireframe will be colored to green, yellow, red etc., so the brighter the image is, the more clearly-recognizable the colors will be in-game.
Save this image as “Marine – Base”. In case something goes wrong, you can use this image as a backup.
3. Creating Outlines
The last thing to do is to create an outline for the unit. Other programs like Photoshop have their own way of doing this, but I’ve found a good alternative with Paint.net and the “Outline Object” plug-in made by pyrochild.
In Paint.net, go to “Effects → Object → Outline Object”.
For the default outline every wireframe has, set the width to 1 and softness to 254. Also, change the color to white (255, 255, 255).
Now you have a finished wireframe image. Save this one as “wireframe-marine-new”.
4. (Optional) Create Shield Wireframe Images
If your unit or structure uses shields, then you can create outlines for shields as well. Be warned, however, that it requires a bit more effort.
Step 1
First-off, open the “Base” image we created earlier.
For the shields, we’re gonna need a silhouette of your unit. Create a new layer that will become the background. Fill it with a color and put it under the layer of your unit wireframe image.
Merge the layers, use the magic wand tool and invert selection. Now fill the wireframe image with another color, preferably something other than black.
Make the background color transparent and save this image as “Marine – Silhouette”.
Now use the outline tool again. Set the width to 3 and the softness to 240. Color is white as always.
Use the magic wand to select the silhouette and delete it. Now save that image as “wireframe-marine-new-shield01”. (I'll refer to these images as "shield01" and the like from now on out).
Repeat this process, but change the width to 6 and 9 respectively.
Step 2
What you have to do next is to edit the "shield02" and "shield03" images so that they overlap well with shield01 as well as each other.
Open “shield01”, add a new layer and fill it with a color. Put the layer below the white outline. Merge the layers, then use the magic wand and select the background.
Be sure to set the threshold to 0%, as we want to select everything from "shield01", including the pixels with very low opacity.
Invert the selection and fill out the outline with another color. Make the background transparent and save this image as “Marine - Shield01 Silhouette”. Close this image now.
Step 3
Next, open “shield02” and import (or copy&paste) the “Marine - Shield01 Silhouette” image from before. Use the magic wand to select the silhouette, then change the layer to shield02, and press delete.
The “shield02” outline should now have its inner part removed, so it doesn’t overlap with the base wireframe image or “shield01”. However, there still are some spots which don’t overlap properly with “shield01”.
Remove the silhouette and add the original “shield01”. You will see the spots which aren't 100% white between "shield01" and "shield02". Those are the spots that need to be filled with white on the “shield02” layer.
Use the pencil tool to add the white pixels. Once that’s done, remove the “shield01” layer as well as the background, and save “shield02” once more.
Repeat step 2 and 3 the for “shield03”.
Step 4
One last thing is to change the opacity of “shield02” and “shield03”. Open these two images, double-click on their layer and change the opacity to 155(60%) for “shield02” and 77(30%) for “shield03".
5. Import Images
All that is left to do is to convert the images (I use Aorta for this), import them into the map or mod, and add the wireframes to your unit.
This is it, now you’ve got a new set of wireframes for your own unit!
Rollback Post to RevisionRollBack
To post a comment, please login or register a new account.
Introduction
Do you want to create a new unit or structure with a new model, but don't know how to create a wireframe image for it? Never fear, for here is a tutorial on how to do just that!
Those of you who don't want to spend money on Photoshop, you're in luck! This tutorial uses Paint.net instead.
Video Tutorial
Note: This video has no commentary (my voice sucks). It's meant to be watched after reading the written tutorial, so you can understand each step better.
1. Prepare The Model In The Cutscene Editor
First-up, open the editor and go to the model you wish to create a wireframe image for it. Click on “View In Cutscene Editor” to load the model inside the cutscene editor.
Angle
The wireframe should make it clear at first glance what type of unit the player is using. Therefore, you should use either the idle stand animation or attack animation.
For today’s tutorial, we’ll create a new wireframe for the marine unit while he’s standing still (Blizzard uses his attack animation as a wireframe).
Once you’ve got the pose you wish to use for the wireframe, you have to adjust the camera angle as well as the background color.
Using “Front” camera view, then rotate the model by 45° to the right, is a good starting point. Then hold CTRL and the Left Mouse Button to rotate the model.
Lighting
Change the lighting used by the texture set of the map to “Default Lighting”. This way the lighting in the cutscene editor will change as well, as it uses the map texture’s lighting as well.
Once that’s done, select the Default Light entry and change the angle from which the light comes from (Key category).
For a wireframe, a clear contrast and clearly-recognizable shapes are more important than the level of detail. Therefore, make sure that the light will make most of the unit bright, will still having a touch of shadow to make it look more realistic.
Last but not least, change the team color to white for the best possible contrast.
2. Take A Screenshot Of Your Model
Create a screenshot of your unit model inside the cinematic editor and paste it in your image program of choice. You might have to try out different zoom levels until you find something that is the right size.
Btw, you can also create a unit icon image at this point.
Image Sizes
Wireframes are 140 by 140 in size. Unit icons are 76 by 76 in size.
For unit icons, there must be a border of at least 5 pixels, so your screenshotted model shouldn’t be larger than 71 pixels.
Remove and/or recolor a few pixels if necessary to make the image look smooth from up close, and make the background image transparent.
Next, turn the image from color to black and white (also known as grayscale). If the image looks dark in some parts and has some deep black spots, change the gamma levels to make it brighter.
Remember, the wireframe will be colored to green, yellow, red etc., so the brighter the image is, the more clearly-recognizable the colors will be in-game.
Save this image as “Marine – Base”. In case something goes wrong, you can use this image as a backup.
3. Creating Outlines
The last thing to do is to create an outline for the unit. Other programs like Photoshop have their own way of doing this, but I’ve found a good alternative with Paint.net and the “Outline Object” plug-in made by pyrochild.
In Paint.net, go to “Effects → Object → Outline Object”.
For the default outline every wireframe has, set the width to 1 and softness to 254. Also, change the color to white (255, 255, 255).
Now you have a finished wireframe image. Save this one as “wireframe-marine-new”.
4. (Optional) Create Shield Wireframe Images
If your unit or structure uses shields, then you can create outlines for shields as well. Be warned, however, that it requires a bit more effort.
Step 1
First-off, open the “Base” image we created earlier.
For the shields, we’re gonna need a silhouette of your unit. Create a new layer that will become the background. Fill it with a color and put it under the layer of your unit wireframe image.
Merge the layers, use the magic wand tool and invert selection. Now fill the wireframe image with another color, preferably something other than black.
Make the background color transparent and save this image as “Marine – Silhouette”.
Now use the outline tool again. Set the width to 3 and the softness to 240. Color is white as always.
Use the magic wand to select the silhouette and delete it. Now save that image as “wireframe-marine-new-shield01”. (I'll refer to these images as "shield01" and the like from now on out).
Repeat this process, but change the width to 6 and 9 respectively.
Step 2
What you have to do next is to edit the "shield02" and "shield03" images so that they overlap well with shield01 as well as each other.
Open “shield01”, add a new layer and fill it with a color. Put the layer below the white outline. Merge the layers, then use the magic wand and select the background.
Be sure to set the threshold to 0%, as we want to select everything from "shield01", including the pixels with very low opacity.
Invert the selection and fill out the outline with another color. Make the background transparent and save this image as “Marine - Shield01 Silhouette”. Close this image now.
Step 3
Next, open “shield02” and import (or copy&paste) the “Marine - Shield01 Silhouette” image from before. Use the magic wand to select the silhouette, then change the layer to shield02, and press delete.
The “shield02” outline should now have its inner part removed, so it doesn’t overlap with the base wireframe image or “shield01”. However, there still are some spots which don’t overlap properly with “shield01”.
Remove the silhouette and add the original “shield01”. You will see the spots which aren't 100% white between "shield01" and "shield02". Those are the spots that need to be filled with white on the “shield02” layer.
Use the pencil tool to add the white pixels. Once that’s done, remove the “shield01” layer as well as the background, and save “shield02” once more.
Repeat step 2 and 3 the for “shield03”.
Step 4
One last thing is to change the opacity of “shield02” and “shield03”. Open these two images, double-click on their layer and change the opacity to 155(60%) for “shield02” and 77(30%) for “shield03".
5. Import Images
All that is left to do is to convert the images (I use Aorta for this), import them into the map or mod, and add the wireframes to your unit.
This is it, now you’ve got a new set of wireframes for your own unit!