Creating graphics for your web page
The general rules:
Before beginning your web page graphics, please read over this list of terms used when discussing graphics for the Internet. Remember, when creating your graphics:
- In Photoshop, just File > Save for Web & Devices will greatly reduce the overall file size and make your graphic easier to view. If nothing else, do this.
- You can also reduce file size by reducing the image size itself. In general, most graphics should not exceed 500 pixels width, and most are considerable smaller. Just select Image > Image Size, enter the new width (make sure Constrain Proportions is selected) then save with another name.
- There are 3 types of graphics used on the Web: .jpg (or .jpeg), .gif, and .png.
- Use the .jpg compression method when you have a graphic with millions of color, subtle tonal variations, drop shadows, etc. It is the preferred method for photographs.
- .gif are for graphics with 2-3 colors, solid blocks of colors, and line art or type. Animations and graphics with transparencies must be .gif (or .png). Logos are generally .gif's.
- .png is a superior compression method recommended by the World Wide Web Consortium (W3C) but is still not universally supported by all browsers. Because of this, use with caution.
- General sizes for graphics (in pixels):
- Logos and thumbnails can range in size from 25 pixels wide to 200 pixels wide. The height is determined by you, but these sizes are presuming a square. A good average is 100 pixels x 100 pixels, 72 pixels/inch resolution. Something that measures 200 pixels x 200 pixels is fairly prominent on the page.
- Most graphics on a web page should not be wider than 350 pixels. (Presuming the page is viewed at 800 x 600 resolution, this takes almost half the screen. It better be a very important graphic!) If you create a graphic that is more than 480 pixels height, it will probably need scrolling to see the complete graphic. Not a good thing.
- If you are linking to a larger graphic, that graphic should be no larger than 640 x 480. I've seen larger, but this fits nicely no matter what most people set as a screen resolution size.
- A banner size can be defined in multiple ways, but in general, it's 728 x 90 pixels. It's placement at the top of the page can add continuity between your pages.
- The largest use of graphics on the Internet is the design of your navigation bar. This consists of buttons showing the main sections of your web site, but can also include the banner and your logo. This is called the Graphical User Interface, or gui. When designing your navbar, remember that no matter how pretty or interesting, it is only navigation and should not take up more than 1/5 of your page. Navbars are traditionally placed either on the top or to the left of the page. Your logo should be in the top left corner - prime real estate, we say.
- When saving images for the web, remember smaller is better in terms of file size. If you are designing for everyone, try to keep your overall page size to about 50kb or less. That means you must allow for the text, as well as all graphics, as well as anything else you add.
Creating a Banner for your Web Page
 |
 |
|
|
Save the image in a folder named "images" (without the quotes). The images folder should be inside another folder that contains all the elements of your web site: web pages, graphics, movies, sounds, word documents, pdf's, etc. - everything that goes into a site should all be stored in one folder, but that one folder can contain other folders, to help you keep your items organized. The one master folder is known as the root folder.
|
|
~ peace, polka and piwo