homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Tiny coloured transparent gifs for backgrounds - HOWTO?
I just cannot find out how to make one of these babies.

 7:33 am on Jul 15, 2002 (gmt 0)

Hi everyone,
There's this tiny transparent gif at a site.

It's coloured grey too. I've opened the gif up in photoshop, but cannot work out how this gif has been made, where you can see the background logo through the greyed table cells - the grey is the gif).

I tried making one from scratch in photoshop, but didn't even come close. All I know how to do is make a completely transparent gif with no colouring.

Does anyone know how to make one of these?

Any help would be greatly appreciated it,
the boy duck

[edited by: Marcia at 9:17 am (utc) on July 15, 2002]
[edit reason] edited to remove urls [/edit]



 8:58 am on Jul 15, 2002 (gmt 0)

that's easy. its basically like this. the dots that you see are black (I think, doesn't matter, any color's fine) and there are transparent holes in between them. so it's like a checkerboard with black being a color and the other being transparent. since only half the image is black, it makes it look grey.

[edited by: Marcia at 9:19 am (utc) on July 15, 2002]
[edit reason] url removed [/edit]


 10:01 am on Jul 15, 2002 (gmt 0)

Thanks vnlegend - you're a legend.


 12:03 pm on Jul 15, 2002 (gmt 0)

Just a note:

Sometimes old versions of Netscape render transparent gif areas black. So - let's say you have a checkered tile with diagonal boxes rendered as transparent - those areas may show up sketchy black over a solid colored background. Lots of times hitting refresh fixes that in old NS, though. (Not that every viewer is going to know that.)

Also, if the uppermost top left corner isn't transparent, sometimes that makes a difference in old NS. (Switch non-transparent area to top left, if possible!)

Lastly, when you are saving your image, be sure your background .gifs are not both transparent and interlaced, or they may cause rendering problems. Sometimes you may forget that you have "interlaced" chosen by default on your graphics program, so you may need to double-check your settings before saving the background image you wish to use.

just some weird stuff maybe your mother never told you about :)


 9:43 pm on Jul 15, 2002 (gmt 0)

When you say "old NS", just how old are you talking about here? If it's older than Netscape 4, it's unlikely to be an issue.


 10:02 pm on Jul 15, 2002 (gmt 0)

I believe it was in issue in all Netscape/4.+ versions.


 1:01 pm on Jul 16, 2002 (gmt 0)

Hmm, I've never had a problem with that. I've seen some bizarre stuff with Netscape 4, but not what you've described.

I know of a problem that can cause something similar, and it's to do with the way many graphics editors implement transparency in GIFs: basically, it's an animation, and the "transparent" bits are in fact set to "revert to previous state" after a split-second interval (a few hundredths of a second). Sometimes the interval seems to be set to a value that causes one or two browser builds to choke, and you have to mess around a bit with the headers. However... it's never caused problems for me as far as I know.


 9:57 pm on Jul 16, 2002 (gmt 0)

Netscape 6 has rendering problems with transparencies in animated gifs - things which NN4 could handle no sweat. So Gecko is not without its flaws.


 11:46 pm on Jul 16, 2002 (gmt 0)

Ok, I think everyone has missed the really important clues here.

Transparent = colorless

Transparent is without color, ergo, the background color shows through.

Easiest trick: grab that gif, save it to file, open it in a graphics editor like paint shop pro, and enlarge or resize the canvas to whatever dimensions you need. Save it as a gif again, go into some compression software, compress it down to one color, whallah!



 11:52 pm on Jul 16, 2002 (gmt 0)

There's this tiny transparent gif at a site.
It's coloured grey too.

I think the effect being described is actually what you would call "translucent," in which case the grey/transparent checkerboard technique described above is probably as close as you could get until full browser support of alpha transparency via .png becomes a reality.

(Now there's a run-on sentence only a graphics geek could love... hehe)


 1:43 am on Jul 17, 2002 (gmt 0)

I really appreciate the tip - both vlegend's method and idiot girl's details. I've been playing with a test case off and on since it was posted, and it holds some unique possibilities. It's especially fun to work with tints, rather than just grey.


 8:00 am on Jul 17, 2002 (gmt 0)

Yeah I'm a newly-made fan of the tints too - I haven't noticed their use much on the web, so they're a bit out of the ordinary which is good, but maybe that's just me not noticing everybodys using them.

One thing about the tints is that if you've got paragraphs of text on a tinted background - it can make the text appear sort of dirty - I don't know why. This is making me think background tints are better suited for single lines of bold/big text.

[Thanks for all the tips btw]


 5:36 pm on Jul 17, 2002 (gmt 0)

This is all very interesting... I'll have to play with it some. :) Always good to have a new trick in the hat.

(Could possibly be used to create a 'fadeout' effect in an animated GIF? Hmm...)


 5:38 pm on Jul 17, 2002 (gmt 0)

Are we going back to half toned screens :)


 5:07 pm on Jul 18, 2002 (gmt 0)

Whenever searching for animated gifs to use on a site, I've noticed that a lot of the pictures on offer are apparently transparent. I assume this means that the content of the picture is solid, but the unused, square/rectangle sections around it aren't, therefore allowing anything underneath the picture to show through.

Is this basically the same as planting a series of pictures onto a transparent base in Photoshop, saving them, and sticking them into a GIF program?

Or is it some option that I haven't unlocked in the GIF animation programme...?


 5:41 pm on Jul 18, 2002 (gmt 0)

Perhaps some animation programs have an image editing feature with Gif89A (transparency), but the animation program I use(d) didn't, so I exported each cel of the animation as Gif89A in Photoshop: File > Export > Gif89a and then placed them in sequence in the animation program.

Just had a look at Gif Construction Set's site and they do offer transparency creation.

[edited by: toadhall at 6:23 pm (utc) on July 18, 2002]


 5:52 pm on Jul 18, 2002 (gmt 0)

GifBuilder will allow you to set a transparency, but I don't know if it's available for Windows...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved