Saturday, February 27, 2010

How do I get the background of my image to show up clear/transparent (when viewed on website) using Photo CS2?

The image must be a gif to show transparencyHow do I get the background of my image to show up clear/transparent (when viewed on website) using Photo CS2?
The first step is making sure the image you are saving does not cover up the base/transparent layer. If the image has a non-transparent background, there are ways to select and delete this background. Photoshop has several marquee tools that allow you to select pieces of an image and delete them. You can delete the background pieces of an image using those tools, until the transparent layer is exposed beneath. Make sure you also delete any layers beneath the image which may be covering up the base/transparent layer.





The next step is saving in a file type which supports transpareny. There are many file types which support transparency, but there are only two commonly used on the web: .gif, .png.





The .gif type has been around much longer, but is limited because it sets each pixel to one of 256 colors, one color of which is flagged as transparent. This eliminates the possibility for semi-transparent pixels, which are required in anti-aliasing. This is why in the past most web designers did not use transparency on complicated graphics, but rather blended the image into whatever background would be finally applied and pieced it together.





The .png file type was developed to allow for full 32-bit color (this option can be selected), and greater transparency support (inherent). The .png files use ';transparency-masking'; where a greyscale version of the image is saved along with it, with which web-browsers generate a blended version. In other words, each pixel is given a color value (like all formats) and additionally a transparency value (unlike .gif, .jpg) which is between zero and 255. The lower the number, the more opaque, the higher the number, the more transparent. This transparency-masking technique allows smooth anti-aliasing, and eliminates the need to manually pre-blend images into their background. These images are now supported by almost all web-browsers commonly used. The downside is they have a much larger file size, so users with a slow internet connection may wait a significant period of time for the image to finish downloading.How do I get the background of my image to show up clear/transparent (when viewed on website) using Photo CS2?
There are many different ways to ';mask'; the background ';around'; the image, but you'll need to first mask off the actual image. Then one way (of many ways) to get the image separated from your selection is to right mouseclick on the marque'd image, cut and paste into a new layer.





Then, you'll hide the previous layer (with the background) turn off the eye, and Save for Web as a transparent .gif.





Done.








http://www.splashdesignworks.com


http://www.housefellowship.org


http://www.splashdesignworks.com/sitemap

No comments:

Post a Comment