cropped graphics

[glruc]

I have a question and I'm not real sure how to word it, but here goes. What are the images called on a web page that appear to be cropped (or with transparent 'backgrounds'). What I mean is the items, for example a flower that is sitting on a web page background that appears to be literally on it, no borders but the outside edge of the flower itself.

Also, how do I create these images myself? I have a trial version of Jasc Paint Shop Pro which I'm sure could do this if I just knew what to tell it. Does it have something to do with the 'magic wand'? I have a digital photo and want just the 'item' to be in the graphic.

Wishing I had a magic wand,
Gail:confused:

[Khalid Ali]

did you try looking for some tutorial on PSP

[glruc]

Yes. I am wading through the help and tutorial. I'm still figuring out what raster and vector are for??? This software does a lot and it can be confusing. I am a former mainframe programmer techie, so I know I can get this, but it's another world. Sorry if this sounds like a dumb question. I'm just hoping some experts will be willing to help out a rookie.

Thanks,
Gail

:)

[metallibanger]

Gif's can have transparent backgrounds, or if you want to use a jpg just cut out the picture and put a picture of the web page's background behind it. This isn't an html question at all though, you do it in a graphic program, not through a programming language.

Andy Oliphant
The Thirteenth Hour

[Khalid Ali]

I think this post will be better of in graphics sec,so I am moving it to there.

[Vahan Avagyan]

Here you can find useful info about how to create trasnapernt images in Adobe Photoshop.

http://www.adobe.com/support/techdocs/342e.htm

Regards,

[tigrrboxer]

*Magic Wand*: Does it help? Sure, if your photo's background is fairly homogenous, like a blue sky or white wall. Click and delete to create a transparent area, then save as a GIF (remember to tick the transparency option while saving). If the magic wand enthusiastically selects too much, a wide range of color/ tone values, lower the tolerance. If it selects too little, or only exactly the same color, increase the tolerance (a REALLY laid-back wand is totally indiscriminate, cheerfully grabbing the most remotely similar pixels). Also, try right-clicking in the selected area and experimenting with options like "select similar".

"Transparency": Deleting can reveal a patch of background color, instead of the grey grid of transparency -whassup? First of all, is your layer a "background" layer? Is there a padlock on it? If so, double-click the lock and name your layer to promote from being a mere background layer. If all seems to fail, Edit > Preferences. Fiddle around.

*What if my background is a tartan tablecloth splattered with spaghetti?* Ah. Well then there are a variety of tools to "select" the bit of the photo you want to chop out. For a large, detailed image you'll need to outline your object with a path using the pen tool (handy Art Director hint: get your lowliest graphic designer/ junior/ intern to do it - WE ALL HAD TO ONCE - oh and they're also very handy for coffee). However, for a teeny web graphic, you could try neatly clipping around with the lasso tool.

*Raster/ Vector*: Digital graphics can be loosely divided into Vector graphics and pixel graphics. Pixel images (zoom in to inspect the zillions of teeny squares which are pixels) consist of (on the web), 72 pixels per inch (300 in print), each dot carrying its own color value. So a teeny square inch photo, for example, consists of 72 dots each carrying its own color info. The bigger the image, the more pixels, and the more info - and longer loading time. However, vector images consist of mathematical formulae and info. They give your computer coordinates, directions, colors, shapes, sizes, angles, etc., and your computer sort of draws it itself. This allows for much smaller file-size. Type consists of vector info; rasterizing it (or any shape, of course) converts it to pixel info.

I would love to continue burbling but my boss has just arrived...

[Lotus]

If you're using Photoshop, you could try to use the "Polygonal Lasso" tool. Then just select the edges around your item. Right click in your selection box and choose "select inverse". Now you have everything around your item selected! Now you could use the flood fill, gradient etc. to fill the background.