by Lisa Schwaberow 
Images are an important part of a web site. And there are so many formats to save your images in that it can be quite confusing as to which format to use.
GIF (Graphic Interchange Format) has been the web's default image for many years. This is traditionally used for images that are flat colors in nature and rather simple. GIF is best used on logos, buttons, bars, backgrounds, and other simple graphics.
JPEG (Joint Photographic Experts Group) is the standard format for photos that are used on the internet. Use this format for all of your photos, small or large. There are 16.7 million colors available with JPEG and a good compression rate as well.
PNG (Portable Network Graphics) is a relatively new format to the industry. PNG's (pronounced PING) have a lot of advantages, one of them being transparency, if you need your image to show up on a colored or pattern background use the PNG format. PNG's are also great to insert in to flash projects. For instance if you want a persons head to show up in your flash file but not the background around it, use PNG, of course you need to make sure your image is on a transparent background in your image editing software when you save it as a PNG. The only drawback to PNG's is they tend to be pretty large files. So if space is an issue on your web site, use PNG's sparingly.
BMP (often referred to as Bitmaps) don't use these for web design, it is as simple as that. The compression capabilities of these files are poor. The only internet browser that supports the BMP's is Internet Explorer.
SWF files are files created by Macromedia Flash. It is becoming standard to import vector art (art created in a drawing program) into Flash and then saving it as a SWF file to be used in web sites.
Web Safe Colors
It used to be that many monitors could only display 256 colors and no more than that. If you are designing web sites for the general public, you don't need to worry about using web safe colors anymore. The majority of monitors can now display millions of colors. Unless you are specifically designing for a corporation or PDA's you don't need to worry about this issue anymore.
Image sizing
When saving your image for the internet make sure that you size it according to the size you need it on the web page. If you need a 200x200 pixel image, size it in your photo editing software as that. If you insert a 600x600 pixel picture in your web editing software and size it with in the web editing software, your viewers will possibly see the actual 600x600 image not the 200x200 image that you intended them to see.
Glassy Beveled Button
If you can make the investment in the Photoshop WOW! Book and install all of their styles into your Photoshop style palette. It is well worth the investment to be able to use those styles that are included with their book. Not to mention the book is full of fun, useful techniques. For those of you who like to do it yourself, here is a little tutorial on making glossy buttons. You can do this in both Fireworks and Photoshop. The menu choices may be different so for the purpose of this tutorial I am keeping it generic. Draw Button Draw your button the size that you need it to be. For this example I used the rounded rectangle in Photoshop. I then filled it with a blue to teal green linear gradient.
Add Shadows
Add a drop shadow to you button and then add a inner shadow to you button. Adjust to what looks good to you for the purpose of your button.
Creating the Glossy Effect Next we will make this button look glossy. Draw a rectangle on another layer over the button. In this rectangle create a fill that is white to transparent. You may need to play around with this a bit. Try choosing a screen or light blend if you don't think a straight gradient looks like what you want. You button should look something like this:
It really is that simple! You would want to save this image as a .jpg because of all the gradients and blending that are a part of it's make up. A GIF on this would tend to flatten it and it would not be as sharp looking on your web page.
Contributed by Lisa Schwaberow (click the profile icon to view her bio)
|
Written by joem on 2005-10-08 20:13:32
 I don't need PS to do it  I did it in PSP 
Anyway, good job! |
Only registered users can write comments.
Please login or register. |
