Interface icon getting cropped in-game

[Schreiter]

I'm trying to convert a piece of SKS Inna-Woods line art to use as a pipboy icon, but the sides always get cut off.

 

* I use GIMP.

* I resize the image to 256 width.

* I expand the canvas to 256 height.

* I do Layer to Image Size.

* I add a layer of black to fill in the margins, put it on the bottom of the stack, and merge down on it.

* I do Layers > Transparancy > Color to Alpha and choose black.

* I save as a DDS with DXT5 compression (also tried 3 and 1) without mipmaps (also tried it with mipmaps).

* I save it as \Interface\Icons\stats\skills_survival.dds to replace the Survival icon.

* I also changed the bobby pin icon to this, for science.

 

The layout in the image is more wide than it is tall, and despite being in a 256x256 square, the game seems to ignore the empty areas and expand the image to fill a certain frame along a vertical axis. This is irritating enough, but it also cuts either of the sides off: the right side when i use it as the Survival icon, the left side if i use it as the Bobby Pin icon.

 

I'm out of ideas. Any insights are appreciated.

[Harmlezz]

could you upload the image and post the url? I would try to do it myself and send you back the converted image as pipboy image

[sELFiNDUCEDcOMA]

I was going to write a tutorial about this as I had to learn how to do this for an overhaul mod (F3REDUX) I've been working on as this is one area that people REALLY suck balls at! Most attempts by people make my eyes bleed, especially those for weapons, that is if people even bother creating them.

 

Shame on you people for your lack of attention to detail! ;)

 

GETTING STARTED

 

First off, I'm not even going to bother with Gimp as I now use Paint.NET for all my image editing and creation. I used to use it in the beginning, but, the way it handles DDS files that support for is only provided by a plugin, and those really irritating floating toolbars that don't minimize with the rest of the program to the taskbar... Well, the only thing I was using it for until recently was for making normal maps as I found the plugin for Gimp had a better range of features, allowing for better maps to be created. But since Gimp became corrupt (yet once again) I've just been using the (Effects->Stylize->) NormalMapPlus plugin that comes for Paint.NET via the tool/filter mega packs you can download. It does a decent job for quick stuff, if you want something that does a better job -- however requiring more manual fiddling -- try The Normal Tools for Paint.NET.

 

Actually Paint.NET isn't too bad on it's own, as it comes with native DDS file support that doesn't ask you idiotic questions like the one for Gimp does ;). But if you want to get the most out of it then you should get the tool/filter compilation mega-plugins for it to get the most out of it. But that said, you may won't to stick with the basic install until you are familiar with it as these add A LOT of plugins, many doing similar things which is just going to confuse you.

 

FYI: unfortunately for this "tut" you are going to have to download and install them anyway. There are 2 that I am aware of, however, I'm not sure if you just need one or both as I installed these ages ago. So, here are the links to them:

 

• Megalo Effects Plugin Pack
  
• Attila Pro Effects Plugin Pack
  

 

This link should explain how to install plugins for Paint.NET.

 

FIRST PART

 

http://fallout3.nexusmods.com/images/2330278-1347698415.png

Weapon/Item Pip Icon Layout Template

 

 

Save and use this template as a basis for your icon; it will be the background. You want to make sure that the image doesn't go beyond the black area and into the pink to avoid clashing with other inventory HUD elements or end up with part of the image being cropped or perhaps even stretched.

 

Since I have NO idea as to what Schreiter is talking about in way of line-art image, we're going to use this one instead:

 

http://fallout3.nexusmods.com/images/2330278-1347700433.png

Kel-Tec KSG Pump Shotgun stencil

 

It's actually smaller than the original stencil I created but should work just fine anyway. Generally when working with images, you want to work with versions larger than the end resolution. This is more forgiving of mistakes and limited skill, as when you shrink it down these can be covered up in a sense as they are no longer obvious as the culprit pixels will have disappeared or merged with others. The smaller image way better, even more "detailed" than the original larger image due to this.

 

So with both of these images saved locally to your PC, and with Paint.NET and plugins installed. You want to right-click on both in turn and select Open With->Paint.NET. Your screen should look like this:

 

http://fallout3.nexusmods.com/images/2330278-1347701362.jpg

How your screen should look with Paint.NET open and the KSG Shotgun selected

 

You can select either on of the images to work with by selecting the small icon version of them in the top-right corner. The current working image will be the one highlight in a grey box. The fiery Astrix if present represents the image has changes that haven't been saved yet. Select the KSG Shotgun image as this is the one we want to work with first.

 

If the toolbars shown you can't see via your own Paint.NET screen, then select Windows from the main menu and then click on either of the 4 windows -- Tools, History, Layers, Colors -- at the top of the list to activate and deactivate them. You can also do this via the F5-8 keys if you prefer shortcuts. You don't need them all open if working screen space is an issue, however, you will at least need Tools and Layers for the next part.

 

NEXT PART

 

Image of how it looks will be uploaded once Nexus lets me...

 

The very next part you want to do is go to the floating Layers window and then hit the Duplicate Layer button/tool option at the bottom of the window -- mouse over for tool-tip names for these. This will create a copy of the current background layer above the original. Un-check the original background layer, and make sure the copy layer above it is selected so that you can work with it. This is something that can be quite irritating, in that Paint.NET will assume that because you've deselect a layer that you're currently working in that what you must then want to do is start work on the next one below it; even if you just wanted to momentarily turn it off and then back on to check something -- which is you're intent 90% of the time. So, be careful ;).

 

http://fallout3.nexusmods.com/images/2330278-1347702096.jpg http://fallout3.nexusmods.com/images/2330278-1347702181.jpg

Paint.NET Main Menu & Tools (LEFT) and Floating Tools Window (RIGHT)

 

With the floating Tools Window active, select the Magic Wand tool -- it is shown selected in the image of the right; however, mousing over them will show a tool-tip telling which is which. Leaving the Tolerance at 50% -- see image left -- we want to then hold shift and then left click on any of the black part. Holding shift will tell Paint.NET to select ALL of the black part, based on the tolerance setting, from the image. Then hit your Keyboard DELETE key so all that black gets cut out of the image -- actually, Ctrl+C would cut it out and save it if you wanted to paste it elsewhere, like into a new layer for example.

 

FYI: Tolerance can be tweaked so that less of the "grey" pixels transitioning to the white are selected or more if required. In this case leave it at 50% as it's not going to make much difference with the smaller image.

 

Image of how it looks will be uploaded once Nexus lets me...

 

You could leave the darker grey pixels in if they don't make a large border or spot on your image. Especially if the image you are working with is quite large as when you shrink it down it will disappear anyway. But, a good way of getting rid of these darker pixels, especially when you're not lucky enough to be working with a larger image to begin with, is via a plugin tool.

 

Select: Adjustments->Lighten, then with the tool window open, grab and drag the factor slider all the way to the right so that it reads 16.00. This will turn those pixels into white ones whilst still retaining transparency (alpha) for them so they don't end up with something overly jagged or just a solid white.

 

With those dark pixels bleached, what we now want to do is actually darken them all. It seems weird to do this but leaving it all bright white will make it too bright in-game. Darkening it achieves what the original pip images do via alpha level -- they are semi-transparent. You can do this as well with the alpha plugins, but, I haven't used it often enough to remember and find that working with the alpha images later can be problematic when making changes. So, let's use the darken option.

 

Select: Adjustments->Darken, then drag the factor slider to 1.39. Getting 1.40 via mouse for me is pointless; for that you can always enter it via keyboard into the editable field, however, don't try the up/down buttons next to this as it will add or remove by 1.0 at a time. And yes, 1.39-1.40 or there abouts, works quite well in-game in matching the other pip icons and hud elements in brightness.

 

FYI: if you're not sure how "dark" it currently is, in that you screwed around with the image before, then use the Lighten option above to bleach it back to white and then re-Darken to your liking.

 

Now with that done, you want to re-size this image. First what you may want to do if you are working with another image with a lot of blank space, is select the Rectangle Select tool from the floating Tool Window. Then left click and drag an outlining box of just the part of the image you want to use -- for an icon, you probably want to leave some space / clearance around the image in case later you need to select the whole thing cleanly. Then go to main menu Image->Crop To Selection. This will then get rid of all the unwanted space making it easier to work with.

 

In this case, you don't need to do this but rather what you need to do is select Image->Resize from the main menu.

 

This will bring up the Resize window where you need to make sure that both By absolute size AND Maintain Aspect Ratio are selected. Then change the Width under Pixel Size to 220 pixels. For pip icons, what you want to do is resize the longer of two -- width or height. Since most have been weapons for me, the easiest to remember is the width as it is the more common of the two to be the longest. Since the final image will be 256x256 pixels, and you want it to fit the black area of the template. I find resizing it between 200-220 pixels works best. 220 for rifles and 200 probably for pistols will work best as they are more square than rectangular.

 

Anyway, with this image resized and the right layer selected -- make sure that somehow you aren't working in the backup/original background layer -- you want to either select the Rectangular Selection tool and drag and select the entire image, OR, go to Edit->Select All from the main menu. Then hit Ctrl+C -- OR, Edit->Copy.

 

FINAL PART

 

Select the template image from the top-right corner of Paint.NET to begin working with it.

 

Go to Edit->Paste in to New Layer to paste the resized weapon image into a new layer above the template image's background layout guide image. Making sure not to hi any key or click anywhere, bring your mouse to that it is in the center of the selection bound weapon paste and then hold the left mouse button and drag it into the black area of the background image so that it isn't too close to any of the surrounding pink.

 

FYI: it's not so bad if the image is aligned more to the bottom-left of the black area as it is less likely to get cropped or interfere with HUD elements than it would with the top-right corner.

 

FYI 2: by alternatively holding the right mouse button, you can freeform rotate just this selected object. Other tools will actually rotate the whole image/layer even if you tried to select only part of it to rotate. However, you may wish to tweak the rotation of images with a larger image as the smoothing will result in a more blurred image. Seting the Quality option via the main menu toolbar to Pixelated could actually give you a better result in some cases without having to go back to a larger image.

 

SAVING YOUR FINAL IMAGE

 

First you want to uncheck the background template layer so that you can't see it anymore. Then, you want to select Image->Flatten from the main menu. This will flatten all your layers down into the one layer. You don't have to do this but when you go to save the image as a DDS file it will prompt to ask if you want to do this anyway.

 

Then select File->Save As from the main menu -- DON'T just use Ctrl-S unless you have already saved as a DDS file. With the Save As window open, select from the Save As Type drop-down menu DirectDraw Surface [DDS] option. Rename your file to something helpful like: weapons_KelTec-KSG-Shotgun.

 

This will bring up the handy Save Configuration window. For a pip icon you will want to select the DXT3 option from the FileFormat drop-down menu. DXT3 -- and DXT5 -- are for images with alpha (transparent) parts to the image. If you for example select the DXT1 option you will notice that the preview of our image becomes more pixelated. You don't want that for a pip icon. However, if you are editing or creating images in the future, and, that image doesn't use any alpha then you should be saving it via the DXT1 option, otherwise, you will create larger files for very little if nil quality gains. You may want to check whether an image alpha is actually used at all as many images have small transparent areas that actually aren't applied to the game object. Other times they are, and the pixelated edges will be glaringly obvious.

 

Before selecting OK, you should uncheck the Generate Mip Maps option. Mip maps as far as I understand it, are for level of detail and performance. At a distance it will work with a smaller image in memory as the detail of a larger one won't be used anyway. Since pip icons -- like all HUD icons -- are drawn at the same "distance," mip maps aren't necessary as they will go unused. If you create them by accident (or laziness) then don't fret, as they will still show up in-game. However, if you are creating a texture for another purpose, like a weapon, then make sure that this particular option is selected to improve end-user performance. You will know if a texture doesn't have mip maps if you view an object that uses it in-game as it will show up a solid red as seen via Geck.

 

Anyway, the other options available I usually leave at Cluster Fit and Perceptual. I'm not 100% on what these do to be honest, you can select the other options and see what effect they have on the preview, but in most cases, they're won't be much difference. So, just hit OK to save your new pip icon as a DDS file.

 

You can see the end result as can be found in my overhaul mod (F3REDUX) attached to the post as a PNG file with the DDS version in the attached ZIP.

 

FYI: it is always good to save your work at each major step, but, make sure you don't do something stupid like saving a resized (smaller) image over your original larger image when you will want the larger one to make future changes. Or, unchecking your template background, flattening your image and then saving over your template image so you don't have it in the future to work with ;).

 

MORE ADVANCED STUFF...

 

If you want to know how to turn an image into a line/stencil art to use as a pip-icon.. Well, that's a bit more involving and will require more time to make that tutorial. You will also require those additional plugins I mentioned at the start as doing it without wouldn't be worth the effort ;).

 

As to how to now use your new icon for your mod. Well, that requires Geck and I'm sure there are tutorials on how to do that floating around Nexus and the net.

Edited September 15, 2012 by sELFiNDUCEDcOMA

[sELFiNDUCEDcOMA]

Opps... Actually if you download and install the mega packs you won't get Darken or Lighten as part of the package. Well, I only downloaded the Megalo Effects and File Types plugins but I doubt the other one listed has these either.

 

The mega pack is really worth getting as it has all the effects I've come to rely on so far, along with, installing the file type plugin as it provides support for photoshop files. But for the above post you will need to download and install separately Darken which also has Lighten as part of it.

 

Sorry for any confusion, though if I'm really honest, for the above tut you actually don't need either one to create a decent pip icon. It's more for when you have to create the line/stencil art from an image ;).

 

Anyway, I'll post an updated tutorial for this later in a more appropriate spot.

 

EDIT: Opps again... Paint.NET does not come with NormalMapPlus so here is the link.

Edited September 30, 2012 by sELFiNDUCEDcOMA