Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Introduction to using web graphics

Thursday, October 17th, 2013 by Servage

Unless you plan to publish text-only sites, chances are you’ll need to know how to create web graphics. For many of you, that might mean getting your hands on an image-editing program for the first time and acquiring some basic graphics production skills. If you are a seasoned designer accustomed to print, you may need to adapt your style and process to make graphics that are appropriate for web delivery.

This section covers the fundamentals of web graphics production, beginning with some options for finding and creating images. From there, it introduces the file formats available for web graphics and helps you decide which to use.

You’ll also learn the basics of image resolution, resizing, and transparency. As always, there are step-by-step exercises along the way. I want to point out, however, that I write with the assumption that you have some familiarity with an image-editing program like Photoshop.

Tools of the Trade

What follows is a brief introduction to the most popular graphics tools among professional graphic designers. There are many other tools out there that will crank out a graphic file; if you’ve found one that works for you, that’s fine.

Adobe Photoshop

Without a doubt, the industry standard for creating graphics is Photoshop. It includes many features specifically for creating web graphics. Download a trial copy of this and all Adobe software.


Running a close second, Fireworks was one of the first graphics programs designed from the ground up to address the special requirements of web graphics. It is unique in that it has tools for creating both vector (line-based) and raster (pixel-based) images.

Adobe Illustrator

Illustrator is the standard vector drawing program in both the print and web design industries. It integrates nicely with Photoshop.

Corel Paint Shop Pro

If you use Windows and are on a budget, Paint Shop Pro Photo offers similar functionality to Photoshop at a lower price.


GIMP is a free, open source image-editing tool with features very similar to Photoshop. It works on Linux, Windows XP and Vista, and Mac OS X.

Image Sources

You have to have an image to save an image, so before we jump into the nitty-gritty of file formats, let’s look at some ways to get images in the first place. There are many options: from scanning, shooting, or illustrating them yourself, to using available stock photos and clip art, to just hiring someone to create images for you.

Creating your own images

In most cases, the most cost-effective way to generate images for your site is to make your own from scratch. The added bonus is that you know you have full rights to use the images. Designers may generate imagery with scanners, digital cameras, or a drawing program.

Digital cameras

You can capture the world around you and pipe it right into an image editing program with a digital camera. Depending on the type of imagery you’re after, you may get sufficient quality with a standard consumer digital camera or even the camera in your phone.

Electronic illustration

If you have illustration skills, you can make your own image in a drawing or photo-editing application. Every designer has her own favourite tools and techniques. For logos and line drawings, I recommend starting with a vector drawing program like Adobe Illustrator or Fireworks, then saving to a web-appropriate copy as needed. You will find it is useful to have a high-quality, resolution independent version around for print and other high-resolution applications.

For photos, textures, and other bitmapped (raster) image types, Adobe Photoshop is the professional’s tool of choice. Again, it’s always a good idea to create a high-resolution version of your images and save smaller copies as needed.


Scanning is a great way to collect source material. You can scan almost anything, from flat art to 3-D objects. Beware, however, the temptation to scan and use found images. Keep in mind that most images you find are probably copyright-protected and may not be used without permission, even if you modify them considerably.

Introduction to using web graphics, 4.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.