What is a transparent image? If it's transparent can you see it?
When "transparent image" is referred to in web design, it means an image with parts that are either completely visible or completely invisible (100% or 0% opacity). Another type of image exists that is "partially transparent" meaning parts are of variable opacity (i.e. 75% opacity) but that's not what we're referring to here.
Transparent images are all over the web, usually in the .gif format, though PNG-8 can be used also. Transparent images are useful when you want the background image it lays upon to show through, creating the illusion that the image is not a rectangular shape.
Tips
This is another variation on the "misc" module and some useful tips when using the Karma Design Wizard.
Two different methods for saving transparent images are available in Photoshop. If you have a limited version of the program you may need to use one or the other.
What is a transparent image?
Creating Your Image
Now we know what a transparent image is, let's create one. Start a new photoshop file by selecting File/New. You should see a checkered background that represents transparency.
Draw a circle or other curved shape. Anything but a rectangle will be fine since that won't illustrate "matte" well later on.
Draw a circle or other curved shape. Anything but a rectangle will be fine since that won't illustrate "matte" well later on.
Method 1: Export Transparent Image
If you have a limited version of Photoshop the export option might be your only option. With this method you have to make sure your image doesn't have any masked layers. Otherwise these masked layers won't save as transparent.
In the "help" menu select "Export Transparent Image...". A "wizard" will pop-up and and ask you the following questions which should be answered as follows:
- Which option best describes your image?
- Answer: "My image is on a transparent background".
- Click [Next]
- What will this image be used for?
- Answer: "Online"
- Click [Next]
- Which image format would you like?
- Answer: "GIF"
- Click [Next]
- Click [Next] again
When saving a transparent image such as GIF or PNG-8 that has indexed color, you have a few choices to make since these images only have 256 available colors.
Palette: Uniform
Transparency: Checked
Matte: Custom (if the other choices won't do)
Dither: None
Matte: For this you should choose the most prevelant color that your image will lay upon for optimal blending into the background. If it is not black, white, the colors you've chosen for foreground or background, choose "custom". This will pop-up a color chooser where you can select the best color or paste in a hex code.
Dither: This refers to the method of "partial" transparency blending. You can experiment here with what looks and works best for you, but I stick with "none" most of the time.
Click [OK] and it will prompt you to save on your computer. Once you select a place to save your file you will be asked to choose the "Row Order". Click "Normal" and then [OK]. Click [Finish]
Palette: Uniform
Transparency: Checked
Matte: Custom (if the other choices won't do)
Dither: None
Matte: For this you should choose the most prevelant color that your image will lay upon for optimal blending into the background. If it is not black, white, the colors you've chosen for foreground or background, choose "custom". This will pop-up a color chooser where you can select the best color or paste in a hex code.
Dither: This refers to the method of "partial" transparency blending. You can experiment here with what looks and works best for you, but I stick with "none" most of the time.
Click [OK] and it will prompt you to save on your computer. Once you select a place to save your file you will be asked to choose the "Row Order". Click "Normal" and then [OK]. Click [Finish]
Method 2: Save For Web
The second method is the easiest IMO but can only be used if you have ImageReady along with Photoshop. It works with masked layers and slices.
To open, select File/"Save For Web..."
You will see in the upper left corner that the "Save For Web" method is actually powered by ImageReady. Here you will be setting the indexed color like method 1 with a few extra options:
Select the following:
- GIF
- Perceptual
- No Dither
- Check Transparency
- No Transparency Dither
- Lossy: 0
- Colors: 64 or whatever looks best to you
- Dither: (should be grayed out)
- Matte: Custom
- Web Snap: 0%
- Uncheck Interlaced
Click [Save]
Finished Result
Both methods will give you virtually the same result. You will see I've selected my "matte" color to be the Karma green so if you haven't launched the Wizard it will appear seamless. If you have launched The Wizard you will see the green matte pixels around the edges. This is why it is important to choose a matte color that matches your background.
