Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Masking and Saving With Transparency

1. Open your image in Photoshop. This is a jpg, so it can be worked in layers (being in RGB mode).

 

2. Make a layer from your background layer by clicking Layer=>New=>layer from background.

3. Use the Magnetic lasso set to feather= 0 and uncheck anti alias. Click in the outermost corners and innermost corners to get the best shape approximation.

4. Click the "Add Layer Mask" tool at the bottom of the layers palette. Click on the layer mask thumbnail on the layer to Make sure the masking icon is in the grey box so that the mask is in the edit mode. Hit your D key to set the default masking colors, white in foreground and black in background.


5. Paint on the mask with a hard 1, 3, or 5 pixel brush set to reveal areas of the eagle that are no longer showing. Paint on the mask using black to clean up are areas that are showing the background to hide these areas.

6. Right click on the mask thumbnail on this layer and select "Set Selection To Layer Mask". This will select the white area on your mask.

7. Click on the image thumbnail to activate the image as the object to edit. You will see a brush appear in the square between the eye and the image thumbnail.

8. Select a # 3 or 1 brush. Use black to paint in the feathers of the wingtips. Use white to paint the radiating lines out on the tail from the body. 

9. Click Select=> deselect.

10. Click Layer => Matting=> Remove white mask.

11. Click File=> Save for the web. Set the optimize palette to optimize your image size with very little compromizes showing while minimizing your iamge size. Here are the settings:

  • GIF- graphic image format will allow us to save as transparent. You may save as PNG also, however, not all browsers out there can see them. I will wait 6 or more months till I see the older browsers are used less.
  • Lossy = 0. Lossy is used to reduce file size. You can set the lossy up if you wish to achieve lower sizes however, you do not want the loss to be visible so you will want to monitor it.
  • Color palette = Web will give you all web safe colors. Depending on who you are designing for and the color range and depth of your image, this could be changed to selective or adaptive. Web safe colors will display with a dot on them in the color palette below. If you use Adaptive or selective, you can use web snap to set a percentage of them to websafe colors. this will help reduce some of the size of the image and how it is perceived on a computer with limited colors
  • Colors = Auto so photoshop selects the best, most often found colors in the image. You may wish to set it to 256 and start deleting similar colors. You can get the full pallete back by setting the image to jpg and back to gif and upping the color depth.
  • No Dither- dithering is used to get the best transitions in gradient like images. This will help "smooth" the colors so you don't get sharp edges between them, or zones. The pattern choice will set a distinct pattern. The diffusion will be a more random placement so that a pattern wont be discerned. Noise will be dotted in transition.
  • Check Transparency. This will then save the image as a transparent gif.
  • Matte = none. this is used for selecting the color in which you will be putting the image on , if you still have semi transparent or anti aliased pixels in the image. The semi transparent pixels will turn to the color of your matte, white, black, or a selected color. We should not have any.
  • No transparency box is where you decide what happens to the pixels that are not 100% opaque, or have a transparency value but are not transparent. In this project your pixels should be solid with no transparency value. In other projects where this is not so, you may want to select a form of dithering to transparent.
  • Websnap will allow you to use selective or adaptive colors yet set a percentage of them to a close approximation of the color in the websafe color palette.

 

Now you can save any transparent gif and know about the fringes and jaggies!



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2012 All Rights Reserved
Privacy and Legal





iSECURE Network Security