I have tried to find out what the "indexed PNG" is and how can I get one with photoshop cs3 or cs4, without luck. Know how to save a "normal" png, but don´t get how to get other options. Any help?
To save your image as .png , You need to "File- Save for Web...." as menu(Alt+Shift+Ctrl+S) from photoshop cs3 or cs4, then change the option as .png -8 or png-24, also on the check box "Transparency" - then Ok. you can also save the image file as different extension(.jpeg, .gif etc..)
Thanx for the answer. I tried it but still I get a white background in IE6. Here is a link to the webpage (http://bluechalo.com/800.jpg)
IE 6 doesn't support alpha transparency - hence the white background. In general you shouldn't be trying to use alpha transparency in a web design because they are fat, bloated, slow with ridiculous file-sizes, usually for effects you can pull off using 'close enough' anti-aliasing with palettized transparency, pre-compositing or a host of other methods. Much less that for optimizing for web Photoshop is pretty much useless, ESPECIALLY when it comes to .png - there's a reason I keep my decade old copy of JASC Paint Shop Pro 7 around; It's more useful when it comes to image optimization. Photoshop is the best tool for drawing pretty pictures - unfortunately it is useless when it comes to saving them for the web, and can 'trick' you into using things like Alpha transparency which you SHOULDN'T be using in the first place if designing for the web.
I also tried to go with a gif-image (as background), still without any luck. I even saved it for the web. Where does it go wrong...
You are using alpha transparancy - which is to say varying levels of opacity - you cannot do that as .gif or .jpg or as a 8 bit .png - it can only be done as a 24 bit .png which IE6 does not support - though it can be made to support it using javascript and/or some proprietary CSS properties (filter). That said you should probably be rendering that transparent element over the final background and flattening to a single layer if you are going to use that on a website and NOT trying to do transparency on it. (or go 8 bit and use palette transparency with 'close enough' anti-aliasing. See all that part with the checkerboard pattern? Only 32 bit png with an alpha channel supports that - which IE6 does not... If you REALLY want IE to support it, google "pngfix".
a) If .png file is set as <img src=â€ab.png’†directly in the html file, First keep the file –“blank.gif†and “iepngfix.htc†in the html folder. Write this code in html file in the head section :- <style type="text/css"> img{ behavior: url("iepngfix.htc") } </style> b) If .png file is set within a class in css not as direct in html file, First keep the file –“blank.gif†and “iepngfix.htc†in the html folder. HTML file :- <div class="logo"><h1><a href="#">Blaze</a></h1></div> CSS file :- #header h1 a { background:url(../images/blaze_logo.png) no-repeat 0 0; display:block; width:188px; overflow:hidden; padding:126px 0 0; width:154px; behavior: url("iepngfix.htc"); height:1px; position:absolute; top:0; left:0; }
To be honest, I wouldn't worry about IE6. If they are still using IE6, chances are they not going to buy whatever you are trying to promote anyway.
Oh yes, 20%+ of the browsing public, many of whom are forced to still use IE6 by their workplace being tied to in-house crapplets that don't work in anything newer are SO worth giving the finger to. NOT.
20%? I don't know where you're getting your traffic from but mine no where close to being 2 digit numbers.
Interesting, I'm running a forums that sees over fifteen billion hits a month, and 65% of my traffic is still IE, and a full third of that is IE6... Apart from the overall total my numbers mimic those compiled in the wikipedia article on the subject. Admittedly, it's wikipedia, but the sources that are compiled on the page are reliable. If I saw numbers like what you just said, I'd have to ask the question "Is it because less people are using IE6" (which is complete bullshit) or "is it because the site doesn't work properly in that browsers". I see people make that second mistake all the damned time "I only get 30% visits in IE" - yeah, that's because your site is completely broken in IE meaning you alienated more than half of the browsing public. Though it could also just be your target audience. It's like trusting the numbers from W3Schools usage - which even they say on their page is completely skewed because of the audience.
I don't believe photomoon wants alpha transparency, but plain old transparency, and PhotoChop is doing the alpha channel thing. Unfortunately I could not be specific in how to do a plain 'ol flat png in PS because I use Gimp where it's really easy. I don't know how PS does it. If there WAS alpha transparency while working in Gimp, once I set the mode to indexed, it gets flattened right away and automatically makes transparency normal, no alpha channel. IE6 does fine with them.
Ehh.. I want to use png or gif as a transparent image. Have to say I don´t even know the differences between indexed transparency (what I think I´m trying to figure out how to do) and not alpha transparency. Thanx Stomme Poe! I think you´re on right track. Still doesn´t know how to do this in PS, thanx for your explanation for Gimp.
For example I use a png-image at the testing webpage (http://www.bluechalo.com/dante-body3.html). Remember this is just a testing/training webpage. What do to so it shows in IE6 (for example in PS)?
Ok, that image is an example of where people think about using alpha transparency in order to have smooth edges instead of jaggitty edges (what you have now are jagged edges). However, as deathshadow points out, alpha transparency not only dies horrible deaths in IE6 (your current image is a gif but if it were indexed-png, doesn't matter: neither have trouble in IE6 the way it looks now), but alpha transparency is ginormous. Your current image should not have any problems in IE6, but it looks a bit crappy in all browsers because it's got jaggitty edges. In your situation, you want smooth-looking black edges on that box, but your background image does not change or move around. So instead, do what I mentioned in the mail to you: it's called "matting" or "matte". OR just have the whole image include the background part of the image (the blue area with the flowers). When you are making the edges of the black box in your editor, you want that same little part of the background from your site in there too. Whatever's going to be showing around your black box, set that as the initial image background. Your edges can blend into the blue background. This simply gives you different colours between the black and the blue, and no alpha transparency is going on, just flat colours. Or, you can draw your black edges over the blue background, and then select-by-colour the blue and remove it. So, everything that was blue is now transparent, but the black edges of your box go into various blues and half-blacks-half-blues, so the edges look smooth (when on the page). This is hard to explain without you seeing what I mean. I'll refer to Khaled's page: Here's his logo, it is matted with a white background: http://www.webscienceman.com/wp-content/themes/webscienceman/images/logo.png If you save that image, and look at it in your image editor, you'll see it's got transparency, and is indexed. You'll also see bits of white on the edges of the words, but you can only see that when there's no other white behind the image. This keeps his letter-edges looking smooth, and it's a png but not the kind with alpha-transparency that makes IE6 puke, and not the 40kb it would probably be if it had been made with alpha transparency (though 5.3kb still seems way higher than necessary for an indexed png like that one). When you see the bits of white around the letters, that's what I'm talking about, and in your case it would be bits of blue. Khaled likely made that text on a white background, then removed the white background by selecting with the by-colour selector (sometimes called "magic wand"). He probably has the transparency at all because his background moves if you resize the browser. When his text sits over the green area, it fails. But he prolly didn't care at that size.
Now, after reading your answer, I get what you mean by “smoothâ€. But I don’t understand what you mean above. How to get the image okey, I don´t get. I don´t know how to get the logo-image not jagged, because as I´ve now made the image I´ve rotated the “backgroundcolor-layerâ€. I saved the image just as gif, nothing else. I don´t get how to not get the jagged sides. Suggestions? Do you mean the logo or what image (backgrounds)? I don’t use any images to do the black edges for the boxes. That is css-coding. (Honestly I´m just trying how it looks, when I saw you´ve got it on your page, but I´m not satisfied with the result as it is now. =o/) Cannot find anywhere that you´re talking about this “matting†in the “mailâ€. I know I got my background-image (bg-pic2.gif) coded like “repeat-x top centerâ€. I don´t get what you mean with “but your background image does not change or move aroundâ€? How can I get it “to liveâ€? Hmm. Perhaps are you talking about a webpage-layout built with three different images instead of so much css? (What I was in the beginning asking about). Otherwise your explanation goes “over the head†for me. When you are making the edges of the black box in your editor, you want that same little part of the background from your site in there too. *Sorry* I don´t get how blend something into something, like you´re talking about; “your edges can blend into the blue background. This simply gives you different colours between the black and the blue, and no alpha transparency is going on, just flat colours.†I have never been working with photoshop or any other program so much. I don´t have knowledge of doing this. So this is now totally news for me, or I know I have to it, but when it comes to HOW, I have no idea. Hmm.. I don´t know how to see the white on the edges of the words. I had my image as big as I could I PS and still no white edges. =o/ I want so much to learn this technique, but how…? You´ve also got mail about this and some more...! //PhotoM
Ok, maybe a coded example will help explain it? What SP called 'matting' is what I call 'pre-compositing' - composites; things built out of layers; like laminates. pre-compositing means you put it together how it's going to look on the page, flatten to one layer, and use that one layer image. I just redid your page how I'd approach it. I basically took your three images - first I optimized the tiled background, then I rendered your 'floral' image over the tiled background, flattened it to one layer, then used floodfill to remove the background to a 2% tolerance as a hideous magenta. I then use PALETTE transparency (aka single color becomes transparent) to set that magenta as 100% transparent. A little adjustment to the colors (removing the hint of gradient on the two larger leafs) lets us easily make that a 256 color image, so now it only takes 29k instead of 59k. That's what I meant about alpha transparency bloat. See, if you 'pre-composite' / 'matte' your transparent layer to your background, you don't need the transparency for achieving the effect anymore - from there you can floodfill a solid color into it to get what's caled 'close enough' aliasing... since you don't remove ALL the pixels and leave the 'in-between' ones in place. Which is to say an image that is anti-aliased JUST for it's intended background (for example these would look really bad on a white background). In many cases you can skip erasing the background with palette transparency - I only did so as to keep the filesizes in check. For your logo, I then went back to the floral over the tiled background and put the logo atop it, then lather, rinse, repeat removing the extra background. In the code, I use text with a h1 for the logo so images off there's something to look at, then hide the text behind the logo image. I also used motion blur in the appropriate direction around your edges to remove the 'jaggies'. Motion blur with a point-to-point area select is a great way to quickly do anti-aliasing... and used Tweakpng to remove the GAMA line so color matching in IE is a non-issue. Which also meant cleaning up your markup since there's a bunch of flubs/unneccessary stuff in there. The invalid heading orders (Is 'sidebar' a subsection of 'welcome'? I think not), poor use of paragraphs (using   instead of padding/margin), list not marked up as a list in the footer, unneccessary div in the footer, couple unneccessary div around things like the menu and logo, etc, etc. In any case, here's how I'd approach that same layout: http://www.cutcodedown.com/for_others/photomoon/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/photomoon Is unlocked so you can grab the bits and pieces. Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working 100% in IE 5,5, 6, 7, & 8, Opera 9.6 and 10.10, Firefox 2 and 3.6, and the latest flavors of Saffy and Chrome. Does that clarify it for you any? So many cases I see alpha transparency used when no transparency is needed or you could fake it with 'close enough' aliasing with palettized transparency.
Oh, thanx a lot, deathshadow! I will take a look at what you did. This is totally a new technique for me, and have to confess that I´m a beginner when it comes to PS. And first I didn´t know what Stomme Poe was talking about, but now I know. I have asked a similar question for a different layout for a couple of months ago (here at the forum) and didn´t either then totally get it how to do this... But, sometimes I do have to get it... Here you can find my test webpage (with html and css codes).
Even though I've posted these in the mail, I might as well post them here too (for however long they'll remain on my server): http://stommepoes.nl/photomoonexample.png shows the difference in pixel colour that makes things look "smooth". http://stommepoes.nl/photomoonexample2.png shows what a matte looks like when you see it... the bits of white. Image is zoomed in 300% plus it's actually already a screenshot of a zoom : ) so, extra zoomed.