Graphics Tools, Techniques, Examples and Resources
|
Resources, demos and tutorials on the basics of graphics design
and construction, including integrating images into your web
pages.
Graphics add spice and style to web pages, and can help your
visitors visualise what your site is about and how it's
structured.
This page introduces you to the basics of graphics design and
construction, and shows you how to integrate images
into your web pages.
There are many links to other resources
for further detailed study.
|
was introduced to the
web by the
IMG tag,
in NCSA's Mosaic for X, written by Marc Andreessen and Eric Bina.
Graphics add visual interest to a page but can substantially increase
total download time for a page, and can't be understood by search
engines and other spiders, or user agents for the blind.
Flash Design
Lee Creek
March 12, 2002
If you've felt overwhelmed trying to use Flash files or if you
just want a way to make the whole process easier this is it.
Flash Designer takes a lot of the guesswork out of using Flash
and at a price that won't break you.
Processing and Using Photos for the Internet
Lee Creek
February 19, 2002
Lee Creek has made the transition from print media to the web and is reveling in his freedom to use
color. Join him to learn how to optimize your photos for the web.
Using Color on the Internet
Lee Creek
January 14, 2002
When used properly, color can be a thing of beauty. When used
improperly, it can be reasonably repulsive. Learn the importance
of good color combinations.
Getting the Most From Your Effects
Linda Cole
February 12, 2001
Third party filter fever getting you down? Learn how to use the
built-in effects of Paint Shop Pro to find a cure!
From Flat to 3D
Linda Cole
January 19, 2001
Three D geometric shapes are not all that difficult to create
with a 2D program, they just take a little practice. Join us and
learn how to create 3D geometric shapes in PSP7 through the use
of shadows and proper shading, with a little help from the
deformation tool.
3D Text with PSP 7
Linda Cole
January 5, 2001
Let's face it. At some time or another we all have a need for a
3D effect, but not all of us have a 3D program handy. Join us and
explore the possibilities and methods for creating 3D text with
Paint Shop Pro 7.
Victory with Vectors; or How to Create Curved Text with PSP7
Linda Cole
November 3, 2000
Creating vector text can be as simple
or as complicated as you want to make
it. For most of us, creating text on a
path and fitting existing text to a path is
all we'll ever need. Enter the world of curl...
Slicing and Dicing with PSP 7
Linda Cole
October 6, 2000
Slicing images up into sections for placement in a table has
been the webdevelopers bane since it was first discovered that cool
designs could be created with tables, and images would load faster
if they were cut up into smaller pieces. Definitely not a fun time,
but Jasc has
come to the rescue with it's latest release of Paint Shop Pro!
PSP7 includes several new web features, one of which is a
slicer that handles the job very well.
Pictures on my Web Site - How?
Web Developers Journal
September 29, 2000
In this excerpt from
The ABCs of Building Web Sites, Charlie
Morris takes the "clueless newby" through the basics of adding
images to a webpage.
An Introduction to Adobe Photoshop
by
Selena Sol and Kenji Tachibana
A three half day course for the novice to intermediate Photoshop user.
Day one and two cover tools and definitions with the focus changing
from definitions to the actual process by day three.
Instructions are given for creating a 3D logo, shape with shadows,
cast and drop shadow, buttons, relief arrows and beveled frame using
such tools as Layers, Channels, Masks, Filters, Gradients and more.
An Introduction to Paint Shop Pro 5
by
Linda Cole
Designed to initiate the newcomer to the program as well as orient
the seasoned Paint Shop Pro user with the new interface and features.
This tutorial follows a similar plan to the Photoshop tutorial.
Imagemaps
Quadzilla Archive
D.J. Quad's
Ultimate Imagemap Tutorial. Here you'll
find out how to make Imagemaps for your
Web page.
Purloining and Pilfering
by
Linda Cole
Downloading an image or file is easy, but if it is done without
permission it is theft. Find out why it's wrong, why people do it, how
to know if it's happening to you, and what you can do about it.
Banner Beginnings
by
Linda Cole
Creating an eye-catching banner can be one of the most
frustrating aspects of web development. We can study
HTML, we can copy/paste JavaScript but what do we do
about that danged banner? Banner Beginnings covers some
basic banner creation tips.
Production Graphics from
WebReference.com
Tips, tricks & tutorials for using graphics in your
professional web design business. Optimize digital camera photography,
learn secrets of filters, time saving tips, Gif animation and more.
Text as Design
Let There Be Lines
Dingbats: Design Elements to Go
Rough it Up
Pro Photo Edges
Graphic Lifts: Little Enhancements for Pro Results
...More
Graphics Formats for the World Wide Web
The main formats have been
GIF and
JPEG,
while
PNG waits in the wings.
Colo(u)r
The Web Developer's Virtual Library
tells you about colo(u)r, and the non-dithering
6x6x6 color cube.
Using Background Images on Web Pages, and Resources
Spicing up a page with background images.
Graphics Techniques for Web Page Images
Follow the above link for an introduction to some basic graphics
techniques such as transparency and anti-aliasing.
Graphics Tools and Collections
Here are some of the best tools and graphics collections on the web.
Images for Web Pages
Examples of the various kinds of uses for images on the web.
Icons'n'Stuff
Selected examples from some of the web's best icon collections.
Graphics Resources
Here are some further graphics resources.
[][][][][][][][][][][][][][][][][][][][][][][][][][]
More Links..
When
authoring
HTML with
style, you might use
cascading style sheets, or
graphics
tools to create
background
images,
icons,
3d graphics.
Multimedia can help to
animate them, e.g. using
GIF animation or
Java
applets.
For interactivity use
forms processed by
JavaScript or
CGI
software.
Use
META tags to help
search
engines find you on the
Internet.
Our
reference
index or the
WWW-VL can help you
locate more.
|