I have some pictures that show show translucent backgrounds in Adobe Photoshop at the moment. Is there a way to save them this way and allow the background on a webpage to show through? I've yet to figure this out and I can't find a help doc on it.

I have Adobe Educational version 7.0.

These images are oddly shaped so not right angles. I don't mind if they take that space, in fact it would make my life easier, but I want the background to show through the "translucent" parts. Right now they save as white.

Is there a format that I can save them as that would do this? Thanks!

3/18/2006 9:06:18 AM

save as a gif. file>save for web in Photoshop 6

3/18/2006 9:13:00 AM

save for web > png w/ transparency


if they are truly translucent and not just transparent

3/18/2006 9:19:46 AM

^yep a 24bit png is the only option for alpha channels

^^nope.

But even with png's, people with older computers wont work

3/18/2006 10:31:02 AM

older computers or older browser/os

3/18/2006 10:34:08 AM

sweet thanks.

3/18/2006 11:06:23 AM

And by older browsers, he means the latest version of Internet Explorer.

3/18/2006 11:43:52 AM

Worked great except that there is a white border around the edges. I double checked my images to make sure there wasn't anything like this on any of the layers and there isn't.

I started playing with the gif tool and I noticed that on the conversion it's adding the white border in random places. Is there anyway to prevent this?

3/18/2006 12:09:26 PM

turn off the transparency dither

3/18/2006 12:28:12 PM

It actually comes out worse with that. I'll play around with the files. Thanks for the help though!

3/18/2006 1:15:07 PM

Here's my PSD file

http://www.raige.net/test/contact2.psd

Here's what consistently happens and the best I'm able to get the image to convert to gif. Note that if I put a colored background it converts fine but I don't want any background at all.

http://www.raige.net/test/test.cfm

Notice the white outline? That's what I want to get rid of. If you figure out a way to remove the white line I would be greatly appreciative.

3/18/2006 5:46:32 PM

Maybe i'm missing something... but i don't see any transparancy in your file -- it's cut and dry.

3/18/2006 6:05:59 PM

The white line is there because the graphic was anti-aliased against a white background at some point, either turn up the threashold on what it consideres transparent until the white goes away or manually change the color of the pixels to match the transparent color or the color of your logo

3/18/2006 6:12:06 PM

Hmm it's transparent to me. The layers are seperated. If you merge down it automatically inserts that background. You also have converted it to a PNG file. I encountered the same issues which is why I posted the PSD file in hopes someone could figure out what I was doing wrong.

The conversion works fine except for the white outer line and I don't want to spend hours removing the white outline that is showing up during the conversion. Adjusting the Dither DID have an impact. I'm just confused why the white shows up when there is no background but otherwise does not.

3/18/2006 6:16:29 PM

what you do is to put the graphic against the same color background as your page, in photoshop, then set the transparency. Then it will look correct, until you change your background color of course.

Just save the damn file as a png with transparency.

But on a larger scale, dear lord that site looks awful. Black backgrounds with red text are the absolute worst possible combination, even more so for a "professional" showcase. The whole site looks straight out of 1996.

[Edited on March 18, 2006 at 6:20 PM. Reason : .]

3/18/2006 6:16:44 PM

transparency has pissed me off so many times i can't even count.

3/18/2006 6:20:04 PM

lol I know this. That was written a long time ago lol. I haven't worked on the pictures or code in a long time which is part of the purpose of this. I'm exploring new techniques to me. Sure it's not what you might like but it's part of my private site.

http://www.raige.net/indexnew.cfm

That's more of what it is going to look like. This is my first attempt at doing my own custom graphics. Of course it's going to look rough and the whole design might change.

As for the background as you notice it doesn't move and I like it like that, so setting a background and the converting it isn't a viable solution as the colors would still show. I guess I'm stuck manurally removing the white that's added.

Thanks though.

[Edited on March 18, 2006 at 6:41 PM. Reason : !]

3/18/2006 6:40:56 PM

im just telling you, I made this same kind of stuff at one point too. In 1996.

Look at good websites, professional sites, portfolio sites. Use them as a reference to create your own. Because it's honestly painful to look at now. Black and Red are the WORST combination possible (except maybe forest green and black) for reading and composition.

The font for your menus is barely readable, and gold?

As for the background, just go with a solid color of some sort. Everyone looks at that and immediately says in their mind "oh great, another guy who learned how to use the cloud filter".

[Edited on March 18, 2006 at 6:46 PM. Reason : .]

3/18/2006 6:44:28 PM

You're right it is remenescent of the 1990's and such. But that's my personal blog, it's what I like. Sure it's not finished or refined and lots of changes will probably happen before I'm satisfied. The background being one of them.

Lots of people have their own sites. Personal blogs that range from simple white backgrounds and text to full flash etc. To me, my personal blog is where I can come and it shows who I am.

As far as my professional site goes, that is where I will show what I am capable of. The software I've written, code samples, advanced designs, and a very sleek layout. But this isn't that.

This is my personal blog. It's the embodiment of me. What you see now as the main site was written waaaaay back in 2000. There were minor changes here and there but nothing significant. It was started as a learning tool. Trying new things here and there and seeing what I could figure out. It got put to the side because of the amount of work I was doing. Now that I'm not slammed with work I'm going to fix it up a bit. Part of that is learning new graphics techniques that I can put to use on my professional site as well.

3/18/2006 7:06:20 PM

Your site design gave me AIDS.

3/18/2006 7:33:36 PM

^^A website is to show information to OTHER PEOPLE. If it was just for you, you wouldnt need it on the web. A blog is a journal to allow OTHER PEOPLE to keep up with you.

There's a difference between showing your personal style, and being conscious of your audience.

And what kind of message does it send when someone goes to look at your "professional" site and sees this? It's going to tell them you are 10 years behind the times. This is not a private site, it's public. People are going to look at it, and they are going to judge your capabilities based on the choices you make on it, like it or not.

Right now you are giving the impression that you are way behind the times, which is fine if you just did this for fun, but since you are trying to promote your abilities on the web, this is the absolute wrong direction.

3/18/2006 7:41:33 PM

It's like it was designed by Satan's asshole.

3/18/2006 7:45:22 PM

lol. This isn't my professional website. Not even close. When it's up I'll post that and let you blast it lol. This is pure fun. The site isn't really for others, it's for me to just get shit out and for personal usage. Host files, etc.

Sure people look at it but I don't go around pimping it or anything. Thus me not posting "hey look at my site!". I don't mind the criticism though.

3/18/2006 9:18:00 PM

i like it... i like how the cloudy background is fixed when you scroll, and how you can see the background in the "holes" between your blog posts

and the best part is, you made it yourself. so gg on that

3/18/2006 9:22:40 PM

all I'm saying is, from experience, people ARE going to look at your personal site. And judging by the design of that, and by the portal page for your "professional" site, you really need to do some research and learn some fundamentals before spending a lot (or any) time trying to make a website to showcase abilities you really don't have.

3/18/2006 9:23:45 PM

Heh that portal page was made in like 2 minutes off a graphic someone sent me. It's definitely not done. The fonts aren't good, they aren't the right size, the way the picture works is all wrong.

I don't want to use area mapping. As I said my professional site is in the works.

Regardless, I'm glad someone enjoyed the basic concept of what I'm trying to do. Thanks joe17669! When I'm done with it then blast it. But don't knock it when it's still in creation.

The way I work is I create a design and modify it slowly making changes until it looks like I want. It's the same when I carve a piece of wood. Other people work differently by making a firm design first and then applying it. Doesn't work for me.

My menu is the only thing I'm truly happy with. Minus the horid white outline.

3/18/2006 9:36:27 PM

meh, you have completely missed my point. Have fun with it, but don't be suprised when nothing comes of it.

3/18/2006 10:15:03 PM

Raige, the PNG file I pose does not have the horrid white outline that yours does.

Try doing your design on top of a transparent background in Photoshop. You must have had that sitting on white or something when you applied the emboss. Also, when "saving for web", trying using "bicubic smoother" under quality on the image tab.

3/18/2006 11:26:54 PM

here's a question that i've always wondered about and that is sorta pertinent to this thread

is there a way to change the transparency background from the white and grey checkerboard?

3/18/2006 11:51:59 PM

Preferences -> Transparency & Gamut

Right there where it is supposed to be.

3/18/2006 11:54:45 PM

well i'll be

3/19/2006 12:25:04 AM

It's worth mentioning that IE's implementation of PNG-24 is broken. There's a JavaScript hack that uses IE's conditional comments and proprietary DirectX extensions to properly render the PNG alpha channel on IE without breaking it for proper implementations, but it's still kind of annoying.

[Edited on March 19, 2006 at 7:42 AM. Reason : *]

3/19/2006 7:39:55 AM

ah okay that would explain why a grey background shows up with the png file in IE.

The concept behind my site is that it's resting on an abyss-like background. Floating somewhat. I like that a lot.

3/19/2006 10:35:29 AM

People also like to drink themselves to the point of unconsciousness, like to shoot heroin, and plenty of other things that have no correlation to what is actually good.

3/19/2006 11:46:08 AM

Maybe the abyss-like background is a worthwhile reflection of his blog's profound lack of worthwhile content.

3/19/2006 11:48:12 AM

^ and ^^ hehe whatever.

FOUND OUT HOW TO DO THIS!

Okay so I found a graphic designer friend who has run into the same problem. Here's how you fix it.

Step 1, create your PSD file get it exactly as you want it.

Step 2, create a gif with the FINAL dimensions you want. So if you make a picture larger than you plan to use it, make the gif the final dimensions you want it to be.

Step 3, Now change the PSD dimensions into the final size you want and make sure it looks like you want it to. Then using the Marquee tool (rectangular is what i used), select the entire picture, cut/copy and past it into the gif.

It works great! (I'm currently doing the conversions so don't expect it to be done immediately).

3/19/2006 3:02:48 PM

uh, thats about three extra steps from what you actually need to do.

Instead of all that shit, you can just change the image mode, with transparency, auto-flatten with no background, or auto-flatten with the background area you are using, then set it to the transparent colors.

In other words, there are several easier and automated ways to do this, but you shouldnt be doing any of them.

3/19/2006 4:24:18 PM

That's interesting... wonder why you didn't say that in the first place?

Well it works now and I learned a good bit doing it

Edit: Still doesn't work your way. You have to convert it to a .gif for it to display correctly on the web without any white outline. Perhaps I misunderstood your way. Mine works fine though.

[Edited on March 19, 2006 at 7:50 PM. Reason : !]

3/19/2006 7:47:37 PM

Because you said you wanted TRANSLUCENT backgrounds.

You can ONLY do translucency (alpha channels) with PNG.

Hence why using a gif is retarded. Not to mention your original image, with the bevels and grtardo font use way more than the 256 color limit of a gif as well, making it again a less than ideal candidate.


http://www.snotmonkey.com/files/retard/index.html

There are your images.

http://www.snotmonkey.com/files/retard/howeasy.wmv

There's the literal 33 second tutorial for you.

Jesus Christ man.

3/19/2006 8:54:38 PM

you really should be using PNG-24 with the JavaScript hack for IE... it's a little bit more effort initially, but any time you want to change the BG color or maybe you'll want to add dynamic elements to the page that would interfere with pre-rendered translucuency, you'll thank yourself... not to mention, dynamic pages with alpha translucency just look cool... they still have that ability to send one to Huxley's antipodes of the mind that more played-out effects have lost, you know?

3/19/2006 11:09:15 PM

hmmm looks like it's doing it just fine to me. OH LOOK! They are .gifs too! Noen you really need to get a fucking life. Seriously man.

I've tried to show you respect through the whole thing, and though you're usually a collossal prick you do have helpful advice.

I ask for some simple help, which turns out to be very simple, you rag on my personal blog, you repeately call myself and others stupid (other threads) when we openly admit we don't know graphic design, and god help those who don't agree with your aesthetic taste.

1) Your way does NOT do what I want to
2) Your way is NOT compatible on multiple browsers
3) You are a counterclockwise rotating ASSRACHET.

Incognegro is exactly right about the support of IE. I honestly don't know enough about alpha channel of a PNG etc, but I do know that IE doesn't display it right. GIF's do display right. I found my solution through comments of others. Not you.

So get off your fucking high horse.

http://www.raige.net

I can change the background, the background shows through, I can use cascading stylesheets easily and even let users select the background they want to see while still allowing for my graphics to display without any set background.


[Edited on March 19, 2006 at 11:10 PM. Reason : !]

3/19/2006 11:09:45 PM

http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

3/19/2006 11:15:03 PM

Quote :

"hmmm looks like it's doing it just fine to me. OH LOOK! They are .gifs too! Noen you really need to get a fucking life. Seriously man. "

You asked to do something, how am I being a prick because YOU DIDNT ASK ABOUT WHAT YOU ACTUALLY WANTED TO DO?

So then you post some absolutely rediculously arcane way to accomplish what you ACTUALLY wanted, and I showed you a much faster, more accurate, proper, and less error prone way to do it.

Quote :

"I've tried to show you respect through the whole thing, and though you're usually a collossal prick you do have helpful advice. I ask for some simple help, which turns out to be very simple, you rag on my personal blog, you repeately call myself and others stupid (other threads) when we openly admit we don't know graphic design, and god help those who don't agree with your aesthetic taste. "

Because you constantly give people advice on MANY subjects you have no fucking background in, or knowledge about. You say you openly admit you have no graphic design knowledge, yet in a damn thread on this page you are giving out advice on WEB DESIGN?!?

I realize you are eager to do this, which I think is fantastic. If I'm being a prick, it's because you are being a damn blockhead.

I didn't "rag on your blog". YOU are the one talking about being professional. And that blog is not professional. If you want to get into ANY kind of design, you need to reflect your abilities in everything you do.

My aesthetic taste? Are you kidding me? All the advice I have given you, and 99 times out of a 100, any design advice or commentary I give on this site is based SOLELY on FUNDAMENTAL DESIGN PRINCIPLES. There are PLENTY of examples of sites and design I don't particularly care for, that I still appreciate.

Quote :

"1) Your way does NOT do what I want to 2) Your way is NOT compatible on multiple browsers 3) You are a counterclockwise rotating ASSRACHET."

Which way? You mean the VIDEO AND WEBPAGE I posted for you that does EXACTLY what you asked? Or the correct answer I gave to your original question?

Again, what "way" are you talking about? If you use the hack Incognegro mentioned, it is absolutely compatible with every major browser out there.

Dude, don't get pissed because you don't know what you are talking about.

Quote :

"Incognegro is exactly right about the support of IE. I honestly don't know enough about alpha channel of a PNG etc, but I do know that IE doesn't display it right. GIF's do display right. I found my solution through comments of others. Not you. "

So you don't know about the formats you are working with, you don't know the programs you are working with, you don't know the workarounds, you just happened to stumble across something that happened to come close to what you wanted. And.

I never said I gave you the solution. But I damn sure just showed you how to save a good few hours of monkeying around in photoshop. You're welcome.

You aren't doing anything new or unconventional with your site or it's design. You are repeating the same thing a million other people have done years ago. Learn to crawl before you walk man. Hell, I've been doing this off and on for a while and I learn new things in design and layout on a daily basis.

3/19/2006 11:34:36 PM

Reread my post, check your links and you'll notice that the picture you posted does not do what I want. Technically it does, but it doesn't work with all browsers (the comment about IE not supporting png correctly).

Everytime I make a post you start a fight. If I annoy you so much, why bother posting in my threads?

3/20/2006 12:58:37 AM

^^^ now that's pretty cool. A bit more than I need but cool.

3/20/2006 1:01:09 AM

http://www.snotmonkey.com/files/retard/index.html

Is this what you are referring too? Because those are GIF's. And they do EXACTLY what you said you wanted. And I don't know what the hell you are talking about, because that page looks exactly the same in IE 5.01, 5.5, 6, 7, NS 6+, Opera 7+, Firefox and if I had a mac, im sure it would on Safari too.

What the hell are you talking about?

3/20/2006 1:08:47 AM