Web Design Graphics Training for Beginners
One way to enhance your web pages is to include graphics. These are images (whether photographs or drawn sketches) designed to be displayed on the web. Unlike those used in non-web presentations, graphics on a web page must be formatted and sized a certain way so they’ll display properly on the page.
In this tutorial we’ll take a crash course in web design graphics training for beginners to let you see how it
all works together in your final site design. Don’t ignore using them. Understand how graphic images can enhance the look and feel of your website.
Web Image Format Types
There are three main types of graphic formatting – GIF, JPEG and PNG. GIF images use no more than 256 unique colors; therefore, these are smaller in file size than JPEG images. They are compressed for fast loading time.
The only drawback is GIF formatting does not work with photographs or graphics with gradient colors.
Since colors are limited with GIF files, photographs will become distorted or have a “fuzzy” appearance on a web page if saved in GIF format.
JPEG images are typically used for photographs and complex images. The advantage is JPEG presents a clearer image that doesn’t lose quality in the transfer to the Web. The only time quality may be lost is if the image is resized to be larger or smaller than its original size.
PNG images were meant to replace GIF formatting due to possible “royalty rights” issues. This format is similar to GIF except the compression rate is better with PNG. This means an image can be smaller in PNG and have equal quality as if it were a GIF image. Both PNG and GIF formats can be used to create animated graphics.
Size It Up
While graphics can enhance a page, having too many of them or creating them to be too large can hinder your page’s main purpose – to keep visitors reading.
Size your graphics so they don’t appear overbearing on the page. Graphics are sized using “pixels” so use as few pixels as possible while keeping the image’s quality intact. Only use larger graphics when it’s to create your website logo or to design a background image for your page.
Don’t Over Do Website Pictures
Use web page graphics sparingly as these can not only slow page loading time, but also distract your visitors from actually reading your presentation. Place them strategically so the images will direct the reader to the right places on your web page.
For example, use a graphical arrow to point to your order section, or place a photo in your reading materials that goes along with the subject.
Avoid animations altogether unless there’s a definite purpose for including them. Some sites use animated video production banners as advertisements for their affiliates or sponsors.
Some use animations to illustrate a point or give instructions (although many site owners are leaning toward videos these days).
Your Website Design needs to be Functional – Not Just Pretty with Graphics
As a beginner, focus on your site’s content and functionality. Does it flow? Is it easy to navigate? Will users know my site’s purpose right away, or do they have to guess at it?
Keep this web design graphic training in mind when choosing and/or learning to create web pages with website design graphics.
