Background color in dds files

[Caboose]

Pretty sure its a basic question, but when ur selecting an image from the dds file, ur not just selecting the image, but ur also getting the background color because ur selecting using a rectanlge shape. In most of the dds files i see the background as either black with RGB values being 0 or grey with RGB values being 71,72,71. Does the game know not to pick up on the background and just the pic, or are there certain colors the UI knows not to display and show as being transparent?

[ger]

It's a display bug. If you use a DDS converter to change those images to PNG or PSD/PDD you'll notice that the grey/black "background" actually turns into the transparancy it's supposed to. For some reason working with DDSes in their native format, or converting them to TGAs, doesn't display that transparancy correctly.

[Quib]

It's not a display bug. Actually I prefer the native DDS style/TGA version of transparency. In Photoshop, transparency for DDS and TGA is a channel (alongside R G and B layers) and can be edited per pixel really easily.

So transparency isn't showing incorrectly, you're just used to it being displayed differently.

So, it's this alpha channel that EQ2 uses for transparency, the color of areas that are 100% transparent doesn't matter, since you won't see them. Personally, I always go with a 0,0,0 black since the texture compression can cause areas to bleed into eachother a little. When people use a converter or make the 100% transparent areas white, things seem to have slightly highlighted edges because the white bleeds over, black makes it a little darker at the edges, but this isn't usually a bad thing.

Quib

Edit: Attached a screenshot of the alpha channel for the default window_elements.generic.dds file. Ctrl+4 is Photoshop's shortcut to get to the alpha channel. Ctrl+~ to get back to normal RGB.

[Caboose]

So it doesnt matter what color i make the background, i coulduse whatever helps me see better even, what matters is if make an alpha layer? As long as theres an alpha layer the background will be transparent?

[Quib]

If you're using Photoshop, the easiest way to make sure it's set up properly, is to copy over a DDS file that already has an alpha channel (any of the default EQ2 UI DDS files), then paste your image over it and edit the alpha channel accordingly. I don't know how to "make" an alpha channel if the file doesn't already have one.

Notice I said colors can bleed over, use whatever color you want for the background while working on it, but I suggest making it 0,0,0 black before you save your final version. If you use hot pink for the background, it could bleed over onto the edges of your image due to DDS's compression.

Quib

[Caboose]

K, i get how it works now. And to edit the alpha layer using one from another dds file. I can use black to paint over the white areas used for the rgb layers and erase the shape of the image i made? Or a white paintbrush?

[Quib]

On the alpha channel, 0% is white (fully visible), 100% is black (fully transparent). Photoshop will save seperate brush colors for when you have that channel selected. So you'd copy a DDS file (not the alpha layer, the whole file, and rename it to what you'll want), paste your graphics over the graphics then black out the alpha channel and use white (and shades of gray for medium amounts of transparency, 50% is medium gray and is 50% transparent) to "color in" the parts of the image you want to show.

Quib

[taco-man]

Originally Posted by Quib

I don't know how to "make" an alpha channel if the file doesn't already have one.

just select something with the selection tool and then do Select -> Save Selection and then name it Alpha 1. now when you go in to the channels tab, TADA you have an alpha channel you can edit all you want.

[Corren Silverfir]

Ok my 2 cents worth.

When I make a DDS in Photoshop I create whatever image I want and make my background transparent.

Then I save as , select DDS, in the popup window I choose 3 which saves the alpha of the transperant layer for me.

Now when I reopen the dds it will be a white background but the dds knows it's transparent and when i use it in my mods it stays transparent.

Also remember in order to save it you have to make your High and width of the canvas the same, example : 512 pixels x 512 pixels

[taco-man]

Originally Posted by Corren Silverfir

Also remember in order to save it you have to make your High and width of the canvas the same, example : 512 pixels x 512 pixels

not only does the width and height have to be the same, they have to be a power of 2, i.e. 2,4,8,16,32,64,128,256,512,1024,2048,.....

[ger]

Originally Posted by taco-man

not only does the width and height have to be the same, they have to be a power of 2, i.e. 2,4,8,16,32,64,128,256,512,1024,2048,.....

Ah ha! Now this time I know I'm not smoking crack (like I was with the display thing—that still bugs the crap out of me ) The width and height don't have to be the same, but they do have to be powers of two. The new frames in my target/implied target window are in a 512x16 DDS and they work just fine.

[Corren Silverfir]

Originally Posted by ger

Ah ha! Now this time I know I'm not smoking crack (like I was with the display thing—that still bugs the crap out of me ) The width and height don't have to be the same, but they do have to be powers of two. The new frames in my target/implied target window are in a 512x16 DDS and they work just fine.

Yes my bad powers of two

[Humudce]

The biggest problem I had with my background graphic for my Blue Dragon Knowledge Book mod was getting the semi-transparency to work on the wings. I saved it in I don't know how many different variations of dds, and finally got one to work. The format I ended up using was DXT3. Any other formats did not apply the transparency color correctly to the wings and they appeared completely solid and not semi-transparent as I wanted them and as they showed up in my graphics program.

[Quib]

DXT1 RGB has no alpha channel and so everything is 100% visible.

DXT1 ARGB is 1 bit alpha, meaning stuff can either be 100% transparent or not transparent.

DXT3 has explicit alpha and DXT5 has interpolated alpha. I don't know the difference between these, but both save the alpha channel (basically) on a per pixel basis.

I cannot figure out how everyone deals with alpha being part of the image, and how you can control how transparent things are without an alpha channel.

Quib

[ger]

Hehe, I was wondering exactly the opposite, Quib. I've been playing with native DDS format again, and I find the alpha channel to be so incredibly annoying. I can see where it would be useful for really intricate semi-transparent images, but most of the time I'm working with either 100% or 0% transparency, so having to duplicate all my work in the alpha channel to get things to show up right is just…well, bleah.

If you've got any sugestions (or links to resources) feel free to lay 'em on me. 'Cause right now I'm going insane trying to get the RGB and Alpha channels to sync the way they're supposed to. (And I still say DDS displaying a color instead of the transparency hash when there isn't actually any color there—regardless of what the alpha channel has to say about it—is a bug … but the channel thing sure does explain a lot)

[Quib]

Originally Posted by ger

If you've got any sugestions (or links to resources) feel free to lay 'em on me.

Well, I guess for a suggestion, I'd recommend coloring everything that's gonna be 100% transparent some horrible color like hot pink and not bother with the alpha channel 'til you're done with the image.

When you're done, make the alpha channel all white (0%). Then use the magic wand, non-continuus, not anti-aliased, low tolerance (0-5) to select the hot pink, switch to the alpha layer and hit delete (assuming your delete brush is set to black, 100%).

Any time you change the image, it's probably fastest to just redo this alpha channel process rather than making sure you make all the changes to the alpha layer to match up.

Originally Posted by ger

And I still say DDS displaying a color instead of the transparency hash when there isn't actually any color there—regardless of what the alpha channel has to say about it—is a bug

I see the wink, but you're just being stubborn. =P In DDS and TGA, there is no such thing as transparency in the RGB channel(s). There's a color at every pixel.

I know it's our personal taste butting heads, but I wish every format used an alpha channel rather than the imprecise mixed-mode style Photoshop's format uses, as well as what? PNG and some other oddball formats? Being able to specify alpha at an accurate value on a per-pixel basis is wonderful.

Quib

[Humudce]

Here are examples of what I was working with...

The first image shows's the Alpha Channel as Pink, as you can see part of the wings have the pink alpha channel showing through,


The second image is just showing the Alpha Channel, the areas in the first image where the pink was showing through the wings actually appears in shades of gray in the Alpha Channel.


As stated before the 100% Black part of the Alpha Channel is totally transparent, and the 100% White part of the Alpha Channel is totally opaque, and the Shades of Gray are Semi Transparent, when saved as the DXT3 format of DDS.

[tonyis3l33t]

i agree completely quib

i hate having to set a color that you cant use in a picture just to get some transparency The alpha channel is like the next big thing for transparency in photos if you ask me.

awesome example humudce!
________
JuicyCOCK4U

[Humudce]

I have to admit the biggest PITA was the Semi Transparency of those wings, in that mod. Just a little history on that image of the Dragon Book. In my EQ1 UI I converted the images to DDS when SoE first started supporting it on EQ1. Where things started getting Sticky, was on my Old EQ1 UI, that image was made up of 4 quadrant images. I had to put all 4 images together as one image. That's where things started getting all messed up. When I stitched the images together so to speak, I lost the Alpha Channel. As Quib stated in a previous post I had to re-do the Alpha Channel for the New Image. What you see in my post above is the final results after allot of trial and error on that image.

One question for everyone how important is it to save the 8 Level Mip Maps, the actual image I use in the UI is showing all 8 Mipmaps in it. Do I really need to save it with all of those or just the Main 1 which is 512x512 Pixels?

[Quib]

You do not need to use mip maps for UI graphics. In fact, not using them keeps the file size smaller.

Quib

[Humudce]

Quib the reason I asked that was I looked at almost all of the SoE UI images and many of them are using the 8 Levels of Mipmaps. But I agree Smaller is better. I only had that image save with all 8 Levels to be consistent with the other SoE pieces.

[Quib]

Well, I know SOE's default UI DDS files use mip maps, but they shouldn't have. EQ2 just uses the top level image, the mip maps aren't used whatsoever. They probably just did a batch convert from TGA to DDS and left mip maps on.

Quib

[ger]

Originally Posted by Quib

Well, I guess for a suggestion, I'd recommend coloring everything that's gonna be 100% transparent some horrible color like hot pink and not bother with the alpha channel 'til you're done with the image.

I considered doing that, the problem is that if you use any of Photoshop's integral anti-aliasing/soft-edge tools you end up with the magenta bleeding into whatever it is you're working with.

Originally Posted by Quib

I see the wink, but you're just being stubborn. =P In DDS and TGA, there is no such thing as transparency in the RGB channel(s). There's a color at every pixel.

I know it's our personal taste butting heads, but I wish every format used an alpha channel rather than the imprecise mixed-mode style Photoshop's format uses, as well as what? PNG and some other oddball formats? Being able to specify alpha at an accurate value on a per-pixel basis is wonderful.

Yeah, I am being stubborn. I don't so much mind the alpha channel itself, as I do the fact that you can cnvert a DDS to PNG/PSD/PDD and get the transparency displaying correctly. Modify it using native Photoshop transparency and convert it back and you occasionally end up with weird alpha-channel remnants when the intermediary format doesn't even support alpha channel (well, okay, PSD and PDD do, PNG doesn't) for the glitches to pass across in.

P.S. Tony, you're thinking of GIFs. PNGs and PSDs/PDDs don't require a color definition for transparency that I know of.

[Humudce]

Originally Posted by Quib

Well, I know SOE's default UI DDS files use mip maps, but they shouldn't have. EQ2 just uses the top level image, the mip maps aren't used whatsoever. They probably just did a batch convert from TGA to DDS and left mip maps on.

Quib

You are probably right about them just doing a batch convert.. LoL they didn't have to worry about space that much heck the had 2 DVD's to fill up

If and when I do a revision to my Knowledge Book I'll replace the image with a Single Image version and not the 8 Mip Map one.

[Zonx]

Some Photoshop + Alpha channel tips from someone that's been using the app for 10+ years.

1) Magic Wand tool is your best friend when isolating irregular shaped images. The tollerance setting controlls how many color shades neighboring pixels can differ from the pixel you click and still be grabbed in the sellection. The Anti-alias setting will allow the tool to smooth out the jaggies by partially sellecting edge pixels that don't fall inside the tolerance but do form a corner bettween 2 pixels that are in tollerance.

2) You can copy/paste to and from Alpha channels. Pasting a color image to an alpha will convert it to Grayscale.

3) While still in RGB mode, you can click the Eye icon for the Alpha Channel in the layers pallet to show the Alpha as a semi-transparent visible color. Use Layer Option from the pallet menu to pick whatever color is easiest for you to edit with, it has no effect on your DDS output.

4) A really fast way to make complex alphas is to duplicate one of the color channels, use the Levels command (Ctrl + L) to adjust the light and dark threasholds, then fill in with Airbrush and Pencil as needed.

5) You can load any alpha channel as a selection with gray values loading as opacity values.

6) The right button at the bottom of the tool pallet (gray square/white circle) switches you to "Quick Mask" mode where you can edit your current selection as a paint layer.

7) Really complex alpha building is often best done in stages. Use 1 method to select some stuff then save the selection. Use another method to select something else, switch to the alpha you saved, then delete to white or black.

Using the dragon book as an example. If I were to build that alpha from scratch using just the color image, I'd first MagicWand the background (tolerance 20) and save that as alpha.

To issolate the wing membrain I'd dupe the Red channel (it has good contrast), then Levels it to make everything nearly black except the wing membrains. Load the alpha as a selection and choose inveres selection. From the Select menu choose Modify/Expand 1 pixel to grab the stray edge pixels. Delete the background to black. Now use the rectangle selection to fill in whatever gray isn't part of the membrain.

To merge the 2, switch to your alpha channel. Load Red Copy as a selection and Delete to, or fill with white. If the membrain isn't opaque enough, detlete/fill again. Use Fill with opacitcy controls if you want finer control of the fill amount.

Tip: Alt + Del fills with the forground color.