How to create good looking masked images?
BlitzMax Forums/BlitzMax Beginners Area/How to create good looking masked images?
| ||
| Maybe some of you has a good hint. When I create an image, with a mask color, lets say a graphic text or logo, then I disable Antialiasing in Photoshop, so I have a clear sharp edge around the graphic. But the loss of AA results often in ugly looking graphics, once I included them into the graphical context in my program. Is there a better way to have nice, smooth edges? Maybe with an alpha channel or something? |
| ||
| Just one idea, I don't know if this will work.. You could draw your image with antialiasing and convert it to greyscale and use that as your alpha channel (probably the main content of the image will want to be a solid white or black), and then use the non-aliased image as your main image content, and when used together it should produce an antialiased outline around the non-aliased image? ie use the antialiased version for the alpha channel. I am guessing it would graduate the edge pixels that overlap. You might have to add some pixel border around the edge of the non-aliased image though? Not sure. Otherwise, I'm sure there is ultimately some kind of OpenGL thing you can do to add antialiasing of the edges. |
| ||
| Not a bad idea, even if it is not the most comfortable way, I guess. I tried a PNG with transparent background. This is much better than masked color, but not as good as I have saw it. For example the icons in the mac osx dock looks great. It's OpenGL, too... so, there should be a way to do it in Max, too. |
| ||
| The icons on osX are vector objects as far as I know, so they would naturally scale smoothly and probably have some kind of antialiasing option turned on in opengl? |
| ||
As long as you are in in alpha blending mode:SetBlend ALPHABLEND 32 bit png and tga files will display with alpha channels correctly. An example of an image with alpha channel can be found here: blitzmax/samples/breakout/media/B-Max.png |
| ||
| That's good to know. I guess he would only have to create his graphic as normal in photoshop with antialiasing on and then save it as a png with transparency preserved, it would then show up in alphablend with smooth edges. Can alphablend be combined with other blend modes? |
| ||
| Draw your image on its own layer in Photoshop. Give it any soft edges, transparent areas, etc., that you want, just never flatten the image onto a single layer. When you've finished, ctrl-click on the layer in the Layers palette. This will select the layer's transparency. You can also right-click and select from a menu in Windows. Switch to the Channels palette. At the bottom is a button to "Save selection as channel", which you click to create a perfect alpha channel that conforms exactly to the transparency on your image layer. Save As the image as a TGA file. Make sure Alpha Channels is selected in the save dialog. As always when working in Photoshop, be sure to also save a layered PSD work file so that any later changes are easy to make. The Digesteroids sample project has some good alpha-masked files to look at. They are PNG, which I don't think will show the alpha channel in Photoshop, but you can still see the effect by comparing the PNG file in Photoshop to how it is displayed with alpha-masking in the game. Check the purple halo around the letters on the "lower.png" file. It is painted as a solid purple in the PNG file, but the alpha channel has a graduation to it that shows up on the game screen. You have to paint around your images in this way for the alpha mask to have something to affect. |
| ||
| Is there a better way to have nice, smooth edges? Maybe with an alpha channel or something? Yup. In Photoshop 7 (or better), any transparent image that is 'Saved for web' in PNG format, will automatically include a suitable Alpha Channel based on the collapsed image's transparency. |
| ||
| Or simpler still (Photoshop 6 and above), hide the background layer and 'Save as...' PNG. |
| ||
| 1. Icons in OSX are bitmaps, not vector images. (They have been rendered from vector/3d source files, since Apple frequently has them printed at enormous sizes for promotional purposes.) 2. The two key things to bear in mind when creating alpha-channelled images are: a. Make sure you have a high quality mask b. Make sure that the image has not been premultiplied against a background color -- often black (Max 4.2 certainly does this to its renders, later versions may also do this). To correct a premultiplied image, the best option is to figure out how to stop producing images that are premultiplied; alternatively, you can open the image in Photoshop and then (once you have separated the image from its background) you can "remove white matte" or "remove black matte" from the Layer menu. If you have an image rendered against a white or black background, you can matte it properly in Photoshop by using the Magic Wand tool (tolerance 0, antialiasing ON) to select the backdrop, invert your selection, new layer by CUT, and destroy the old layers. Then remove white/black matte, and save as PNG. Photoshop 8 a.k.a. CS seems to have some smarts when it comes to removing premultiplied mattes, so if you're using the latest version of Photoshop all these instructions may be redundant. |
   |