Home arrow Graphic Design arrow Page 2 - Graphic Design for the Web

Graphic Design for the Web

Aside from HTML, graphics are what make the web "look good." Many sites will turn a surfer away if they don't have pleasing graphics. We will cover some of the basic design tips and tricks to help your site stand out.

Author Info:
By: Rob Foster
Rating: 3 stars3 stars3 stars3 stars3 stars / 9
March 24, 1999
  1. · Graphic Design for the Web
  2. · Web Colors, GIFs and More
  3. · What about JPEG's?
  4. · RGB and HEX

print this article

Graphic Design for the Web - Web Colors, GIFs and More
(Page 2 of 4 )

Rauls Logo
This is Raul's logo.

Now let's explain how we got it this way. Raul brought this logo in on a disk. It is an illustration that was created in a vector-based graphics program (Adobe Illustrator, Macromedia Freehand, etc.). We opened the file directly into Adobe Photoshop 4.0 and began our color adjustments. Adobe Photoshop is the standard for creating web graphics and because of this it will be the main program that we use and discuss.

Adobe Photoshop as well as other graphic editing programs allow the importation and use of custom color swatches. This is very important when creating web graphics because on the web there is a special swatch consisting of 216 colors (see graphic to the right). These 216 colors are made up from the common colors between the Windows and Macintosh system palettes/swatches. Using these 216 colors is essential to good web design.

To load this web swatch into Photoshop, click here and save the file to your computer desktop. Launch Photoshop and go to the Photoshop palette called "Swatches". In the palette menu there is an option called "Load Swatches". Select that option and then look for the swatch file that you just downloaded off this site.

Photoshop Swatch
You might be asking, "How does this swatch help me?". Well, if a graphic is created using the colors from the web swatch, then you will know how it will look for just about everybody on the web, regardless of browser or platform. One more point: when mentioning browsers, we are talking mainly about Netscape and Internet Explorer. Since these two are used by the majority of people on the web, they are the only ones that we need to worry about.

Photoshop Exporting
We then took Raul's logo and adjusted the colors in Photoshop to match the colors in the swatch we loaded. Then, to save it out, we went to the Image: Mode menu and converted the image to indexed color. In the Indexed Color dialog box, there is a place to select a palette and we chose Web as our palette and Dither: none. This makes our image a graphic consisting of only web friendly colors. We then exported the file out using Photoshop's GIF89 export feature.

Regarding GIFs and the Internet, there are two main graphics formats that are supported: GIF and JPEG. We decided to use GIF format for the logo for a few reasons. First of all, GIFs are usually smaller in size and allow for more features (such as transparency). We try to use them as much as possible to make our pages load faster. Also, Raul's logo is an image with a lot of solid, flat color and no gradients. GIFs work better for solid colors and simple graphics. JPEG's are better for photos and graphics with a lot of gradients, etc.

blog comments powered by Disqus

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

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