Indexed png

Content
1

Hey!

Do indeed move this thread if it´s in wrong place. :slight_smile:

I have realized that there is several “things” that are called “transparent png” or “indexed png”. I know that there are ways to do the image so it also is okey in IE6 (not by a special code) but are for the moment so confused about everything, and that´s why I trying here to find out more.

I am looking for a way to do in Photoshop (or in Gimp) to get a so called “transparent png”-image. Meaning I can use only one image, example a logo (I can just change the background) ?

Is here anybody that can explain how to do this in PS?

Thanx in advance!:cool:

2

IE6 will show the image’s actual background colour IF your transparency is “alpha”. You cannot make that kind of transparency work in IE6 (unless you use Javascript). If you either use as Jolie (or the other person) mentioned to “remove alpha” OR if you set the png to “indexed” (limited number of colours) then it will not be “alpha” transparency, but plain old flat transparency. IE6 can do plain old flat transparency just fine.

If you see your background colour in IE6, then you have alpha transparency. Jolie was explaining how to turn that transparency on, but that’s also how you know if you have it on (gimp has it on by default actually).

3

Gaah, I am indeed so stupid when it comes to this subject.
I did as Jolie explained but don´t know how to save etc…
At least it didn´t work in IE6 when I saved the image as png…
Did I something wrong, again, or is it that I have to do something else to the image to get it to work in IE6 (as you Poe have explained so many times…)?

4

From what I understand it does determine language based upon the OS during setup and obviously you can change it. Though how I first read it was; a completely “different” file was forced upon the OP by a HTTP redirect or something weird.

5

But the OS seems set to Swedish. My point was, that’s why I figured it’s OS-lang-based and not geographically based (a good thing, looking at things like Miami Fla (English? Cuban Spanish?), Quebec (English? Archaic French?), Belguim (French? Dutch?) or western Finland (Finnish? Swedish?)).

Linus Torvalds is a Swedish-speaking Finn. In the west there are areas where Swedish is spoken more than Finnish, and while kids learn both in schools, Torvalds even had his wife translate his book into Finnish for him. I guess he didn’t feel comfortable enough with Finnish.

6

Like Adobe’s site. Always trying to force you over to US-Engrish Sigh

7

I have my system language set to Engrish so I get the Engrish versions of anything I apt-get intall. Most of these programs have multiple languages and they go by the language reported by your system.

Photomoon’s a Finn.

8

I dunno what Photoshop does, but in Gimp, under Image > Mode, the RGB means “all colours” (as opposed to indexed, a set number of colours under 256). If you save a png while the image is still in this mode (this is default), then any parts that are transparent will be the alpha transparency type.

If you change the image to “Indexed” and “web safe pallette” then any transparency will be flat (like a gif’s) in Gimp (in Fireworks you can keep transparency 256-bit transparency but I haven’t figured out how to do this with Gimp) and IE6 has no trouble with that at all. But the edges where it goes from colour to transparent look jaggeddy.

IE6 is the ONLY browser to have trouble with this, so no matter what you make, IE7 and everyone else will be ok with it.

You also want to keep in mind that transparency in RGB mode makes a bigger file. When you start looking at the size of your images, especially on a site with a lot of images, you will also start wanting to get the filesize as low as possible. Lower filesize in general is faster page loading.

9

I dunno what Photoshop does, but in Gimp, under Image > Mode, the RGB means “all colours” (as opposed to indexed, a set number of colours under 256). If you save a png while the image is still in this mode (this is default), then any parts that are transparent will be the alpha transparency type.

If you change the image to “Indexed” and “web safe pallette” then any transparency will be flat (like a gif’s) in Gimp (in Fireworks you can keep transparency 256-bit transparency but I haven’t figured out how to do this with Gimp) and IE6 has no trouble with that at all. But the edges where it goes from colour to transparent look jaggeddy.

IE6 is the ONLY browser to have trouble with this, so no matter what you make, IE7 and everyone else will be ok with it.

You also want to keep in mind that transparency in RGB mode makes a bigger file. When you start looking at the size of your images, especially on a site with a lot of images, you will also start wanting to get the filesize as low as possible. Lower filesize in general is faster page loading.

Does anyone have any clues why Gimp (when downloading the programme) changes to Swedish automaticly and not gives the English version?

I have now in Gimp tried to do these changes that Poe suggested (doing this now in Gimp, because I don´t know how to do these changes in PS, eventhough I´m more familiar to work with PS).

There comes this up when I take Image-Mode-Indexed-Convert.

Why is the text and whatever I try to do in white (eventhough I try to change the color and also tried to change background-foreground) and I can´t see it?
I can see the text I´ve written, after I have made the background (put the alpha-channel) and erased it with the eraser-tool.

Okey, this png is better in IE6 (jaggy) than the old one that had white background…

Does anyone know how to fit the logo with a gradiant background?

10

Yes, I know that what it looked like from the website… but computers are stupid. :smiley:

11

That was the problem, I get two different colors when I put the same color code that I have come up with from PS and then tried the same color code in Gimp. It shouldn´t be any different if I put the color #70605c in for- or background and the use fill-bucket. But I get a slightly difference in PS and Gimp. Don´t know why…

I do have problems with my logo in IE6, there´s the background color still there… SInce I just do the logo and no background in Gimp or PS.

Hmm… I do want to have that opportunity, to change background without thinking of the logo. But don´t know how you mean with the layers, xhtmlcoder. =o(

12

If you have Photoshop go into its help menu and lookup “Using Layers” or on the web do a search for layers tutorials, etc.

Basically the image gets layered when you add new stuff such as text so that you can select individual layers and edit them “individually”. So for instance you could have an image with layer of a red coloured background or one with a green or whatever you want coloured or patterned background and hide show or remove them.

Now if you keep a secondary spare image with just the text you could then just change the background layer as and when without affecting the text layer or alternatively just copy and paste the text layer to a new file, etc.

It could be the colour profiles you have that are slightly different I assume you are using RGB mode.

13

GIMP probably thinks you geographically live in Sweden by your OS or something? Surely you can just go to the sourceforge page directories and do a direct download in English ‘gimp-2.6.8-i686-setup.exe’ or an alternative FTP mirror service.

14

I don’t know how I missed the URL but it seems #9f4923; is the value you have in the CSS file for the area touching the image like Poes said, you don’t need transparency unless of course you intend to keep frequently changing the background colours. In which case it would be nearly as easy just creating Layers within the image.

15

hmm… Okey, it´s likely a PS vs GIMP color issue. Since I from the beginning have taken the #70605c - color from PS and then I haven´t noticed that I can´t just with the pipette get same color in Gimp, with the pipette it gave me this color #71615b(Gimp). I use the menubg.gif from my webpage I´m working on… I have noticed this problem before, when trying to “pipette” some colors…

But what’s the colour on your SITE? If the colour you’re using on your SITE is #70605c, then that’s what you type into Gimp after clicking on your foreground colour (top square of the two squares on the tool box). Then you use the bucket to fill. Then the colour is exactly the same.

IE6 should not have any problems with your logo because your logo shouldn’t have any transparency in it anyway. Why do you need it?

16

yeah I’ve been sometimes putting the “new” files into other folders just to get around the naming thing.

17

You mean you use: -d dir (so that it can output the same *.png name into another output directory). I believe several people have made batch files for it so maybe you could easily find one that handles multiple files.

18

Aaah, I do know about the layers and that I could use them as you now explained, now I understand what you ment. :slight_smile:

Yes, it´s RGB mode I tend to use. Is there differences there between PS and Gimp? Or what did you mean?

So, if I say I use this technique in PS, it will show the background in IE6 and should not worry about it? It is okey then in IE7-?

19

Firefox handles “Tagged PNG” http://en.wikipedia.org/wiki/Portable_Network_Graphics differently and in some Linux Distributions it can affect colours but if you use certain tools like PNGOUT you can “completely remove” the appropriate Ancillary chunks - in the GIMP you cannot.

Refer: http://www.sitepoint.com/forums/showthread.php?p=4563164#post4563164 (Post #12 onwards) for the problem Poes had and how I help her solve it. :slight_smile:

20

The problem to take the div´s background color to the background color for the logo is for me that the colors don´t match.
Whatever colour you’ve set on the div in the background, you put that colour into Gimp. So if the bg colour of your div was #ecd54g (I just made that up), then you set that as the bg colour of your logo. If the background is actually an image (a gradient for example), then you copy the image and put THAT as the background.

If they don’t match when you view in the browser, it’s because you’re using either Fire Fux or Safari on a non-Apple monitor. Yesh, Mozilla has decided to make our lives more difficult because they’re evil. I hateses the Mozillas.

you see, I had to run everything through PNGcrush to fix it, and I know web devs who haven’t bothered and just put a warning on their sites “warning you’re using a crappy browser”.

hmm… Okey, it´s likely a PS vs GIMP color issue. Since I from the beginning have taken the #70605c - color from PS and then I haven´t noticed that I can´t just with the pipette get same color in Gimp, with the pipette it gave me this color #71615b(Gimp). I use the menubg.gif from my webpage I´m working on… I have noticed this problem before, when trying to “pipette” some colors…

hmm… didn´t get what´s the problem with colors in Mozilla etc. browsers (the PNGcrush?)? I start and go by Mozilla, if the other browsers isn´t the same, that´s their problem… so to say. :stuck_out_tongue:

Took a look at this page and have got it what I should do to, but not how to do it (in Gimp or in PS).
I don’t either, Fireworks is some wholly different tool. When he talks about fill and border, sounds like he means a vector, even though it’s making a png (which is raster).

Which is why I try very very hard to avoid transparency at all on the web, and when I do have it, I leave IE6 looking bad because people are using an old browser and I’m not willing to load a bunch of junky scripts for them.

Your situation has zero need for transparency.

Well, I have decided that I don´t support IE6 at least when it comes to the logo-image.