Welcome to WebmasterWorld Guest from 54.227.110.209

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.

     

theboyduck

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

10+ Year Member



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

10+ Year Member



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]

theboyduck

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

10+ Year Member



Thanks vnlegend - you're a legend.

idiotgirl

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

10+ Year Member



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 :)

rewboss

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

10+ Year Member



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.

idiotgirl

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

10+ Year Member



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

rewboss

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

10+ Year Member



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.

tedster

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

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



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

gcross

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

10+ Year Member



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!

:)

mivox

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

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



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)

tedster

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

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



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.

theboyduck

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

10+ Year Member



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]

mivox

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

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



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...)

korkus2000

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

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



Are we going back to half toned screens :)

Ashton

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

10+ Year Member



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...?

toadhall

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

10+ Year Member



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]

mivox

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

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



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

Featured Threads

Hot Threads This Week

Hot Threads This Month