Welcome to WebmasterWorld Guest from 54.225.20.19

Forum Moderators: not2easy

Message Too Old, No Replies

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)

Junior Member

10+ Year Member

joined:Jan 31, 2002
posts:69
votes: 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]

vnlegend

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

Inactive Member
Account Expired

 
 


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 July 15, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 31, 2002
posts:69
votes: 0


Thanks vnlegend - you're a legend.
12:03 pm on July 15, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:July 6, 2001
posts:410
votes: 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 July 15, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 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 July 15, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:July 6, 2001
posts:410
votes: 0


I believe it was in issue in all Netscape/4.+ versions.
1:01 pm on July 16, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 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 July 16, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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 July 16, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 26, 2002
posts:60
votes: 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 July 16, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 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 July 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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 July 17, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 31, 2002
posts:69
votes: 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 July 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 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 July 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


Are we going back to half toned screens :)
5:07 pm on July 18, 2002 (gmt 0)

New User

10+ Year Member

joined:May 23, 2003
posts:9
votes: 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 July 18, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 9, 2001
posts:416
votes: 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 July 18, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


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