Doing You Own Web Artwork -
A Guide To Cool Effects

by David Pankhurst

 

For the beginner, the effects on the Web can look both good and bad, striking yet seemingly impossible to reproduce. In fact, many graphics effects are surprisingly easy, and this article shows you how you can create some exotic effects for your masterpieces.

Get The Right Tool(s)

Graphics artists work with many paint programs - no single program does everything. In preparing this article, I decided to pick a specific program, PaintShop Pro, to discuss effects. Specifying a program makes examples easier to follow and practice. As well, PaintShop Pro is a shareware program, meaning that you can use it before buying it, allowing you to try these examples out at (initially) no cost. Finally, I've used it for several years, and have found it a good combination of power versus price, and especially well designed for Web graphics work. If it interests you, see www.jasc.com for downloading instructions. In any case, the effects I am showing are commonly available on most paint programs, and will work with few variations.

The Effects

Listed below are the effects - the comments in parenthesis are the PaintShop Pro version 3 menu options to use them:

Emboss (Image; Special Filter; Emboss)

Embossing works by highlighting the edges of an image, making it look three dimensional. One useful effect is to lightly emboss a background, such as a logo, making the web page look like it's been watermarked.

Reduce Colors (Colors; Decrease Color Depth)

The number of individual colors on a page determines its file size. However, more color makes a picture look more natural. Some computers can only display 256 colors at a time, reducing your options. The solution? Play with this effect a lot. Reducing the colors beforehand reduces the possible changes made on the user's computer. Turning a picture to black and white can be particularly striking on the full-color Web. Increasing colors while designing, and then possibly decreasing them before placing the image on the Web, results in the best over-all look for a picture.

Blur or Soften (Image; Normal Filters; Blur)

Shrinking or blowing up a picture can leave it jagged or grainy. These smoothing effects help by very slightly smudging the picture. It's especially effective with photos you are shrinking; soften both before and after shrinking for the best result.

Trace or Enhance (Filter; Edge Enhance)

Sometimes called Trace, sometimes Edge Enhance, the end result of each is similar to a line drawing of the image. By tracing a picture, and changing it to black and white, you get a picture that looks like it's been hand drawn.

Resize the Picture (Image; Resize)

Resizing is useful to fit pictures into position on a Web page. It can also be useful for distorting a picture. One example; rather than a large picture of trees for a full background, squish it horizontally and put it on the left side. Rather than dominating the Web page (and making the text hard to read) it will still be there to evoke the mood, but with the space savings.

Adjust Color, Lighting (Adjust; Brightness, Contrast)

Although a lot of effects come under this label, the most popular ones are brightness and contrast. This is the workhorse function of any program. Brighten a picture enough, and decrease contrast, and you have a nice background that doesn't intrude; if a picture is too light or dark, this can make it 'just right'; selectively applied, it can bring out effects that were hard to see. Other variations of this effect let you 'stretch' the colors to more evenly space them across the spectrum, or color saturation, where you can intensify colors or wash them out.

Cutting an Irregular Section (the 'lasso' toolbar icon)

You probably know you can cut and paste rectangles areas in a paint program. But rectangles rarely work for editing, so these effects let you draw any shape to copy or cut. Draw around the object, copy to the clipboard, and paste elsewhere. It can be used to adjust the layout of a picture (for instance, tightening up spaces between objects by moving them together). Myself, I enjoy using it to switch heads on family pictures.

Cloning (the toolbar icon with two little people on it)

This tool is actually two; one is the source, where the 'paint' is picked up, and the other is the destination. The two can be widely separated. Using these, parts of the image can be duplicated easily. Where it comes into its own is after a significant change it made to artwork. After smoothing the edges of the change (such as a 'switched' head), there may be sections that still don't look right. To fill in properly, I clone another section of background that fits, and add pieces until I'm happy with the results. By cloning, rather than painting, I get a more natural look and result.

Just the Tip of the Tips

I consider these the 'workhorse' effects, and used in about 80% of my graphics work. Possibly you will too. Get comfortable with them, and you'll have that much more time to explore the other 20% out there!

 

Tools For Your
Online Business

Tips for Your
Business Start-up

Tips for Using Your
Business Computer

Tips for Using the Internet
& Internet Access

Tips for Promoting
Your Website

 

 

 

 

David Pankhurst, ActiveBits Technology, a software firm based in Victoria, British Columbia, Canada. With over fifteen years experience, we are committed to producing software that enhances the computing experience for computer owners and users, and to making computers easier and more accessible for all. http://www.activebits.com.com/

 

back to Agora Business Center Feature

Copyright © 2004  Alliance Internet Marketing