Home arrow Photoshop arrow Page 7 - 20 Things About Photoshop You Have to Know

20 Things About Photoshop You Have to Know

These are some of the tools and features that I find myself using on a regular basis when creating images for the web. These include using the slice tool on images to decrease page load times and using pre-set effects that save time when creating forms or menus for your site.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 88
October 25, 2004
  1. · 20 Things About Photoshop You Have to Know
  2. · Image Maps, Web Photo Gallery and Paste Into
  3. · Perspective Function, Plugins, and Styles
  4. · Vector Graphics, Preferences, and Shading
  5. · The Window Menu, Scripts, and the Actions Manager
  6. · File Browser, the Layers Panel, and Effects
  7. · Animation, Defringe Tool, and Save for Web

print this article

20 Things About Photoshop You Have to Know - Animation, Defringe Tool, and Save for Web
(Page 7 of 7 )


Unfortunately, Photoshop cannot produce animated gifs; luckily, this is another area in which Imageready steps in and takes over.  In Imageready, open a new file and draw a shape.  Now select Window -> Animation to open the animation panel.   By default this should contain 1 frame, which is your image as it stands now.  Click the new frame button and the move the shape to the right slightly.  Keep adding new frames and gradually move your shape to the edge of the page.  There are some control buttons beneath the frames, click the play button and your shape should move across the screen.  That is as simple as animation can be, but not nearly as complex.  To save your animation, go into File -> Save optimised as… and save it as a gif.

Defringe Tool

Ever notice how an image with a transparent back can sometimes have a white edge, or fringe, around it?  This can be removed by selecting Layer -> Matting -> Defringe and ok’ing the default of 1 pixel.  This is not always 100% successful, and any minor discrepancies can usually be overcome by adding an inside stroke to the image, in the same colour as the edge of the image.

Save for Web

The save for web dialogue box, accessed via the File menu can be used to optimize your image for the web as much as possible. Combining the settings at the right of the dialogue box, it is possible to shave precious seconds off of your image download times. Lowering the amount of dither and increasing the amount of web snap both reduce file size, as does reducing the amount of colours and increasing the amount of lossy (when working with GIFs). Be warned however, image size goes hand in hand with image quality, the smaller the image, the lower the quality.


These are some of the tools and features that I find myself using on a regular basis when creating images for the web. Some of them you may embrace and use every time you open the program - others you may not find any use for at all.  Rest assured however, Photoshop remains of the industry standard when it comes to graphic and web design.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Photoshop Text Techniques: Transformers
- 3D Text in Photoshop
- Photoshop Text Tutorial: Creating Indy Text
- Photoshop Productivity Tips and Tricks
- Photoshop Keyboard Shortcuts
- The Critically Important Color and Gamma Cal...
- Using Adobe Photoshop CS, Part 2
- Using Adobe Photoshop CS, Part 1
- 20 Things About Photoshop You Have to Know
- Photoshop Tricks, Part 2
- Photoshop Tricks, Part 1
- Keeping Up Appearances: Techniques for Retou...
- Navigation Menus in Photoshop
- Slicing and Saving Graphics in Photoshop for...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials