Choosing a graphics editor:
This page is 100% _not_ valid XHTML, is overdue for a makeover.
The sort of ecru background is so that the transparency demo near the end will
Photoshop is perhaps the premier application used by 'web designers'
to make graphics suitable for publication on The Internet. It lets a skilled user do anything to an
image. An artist can start entirely from scratch and lay on
basic shapes, refining them and texturing them, similar to the pens and
airbrushes used in yesteryear to prepare graphics for print. Those
of us without the art talent can capture digital images with a camera or
a scanner and process them using Photoshop as a 'digital darkroom' to
crop, burn, dodge, add text, and otherwise manipulate the images. It's fair to
say that the Pro versions of PhotoShop probably (weasel word) more features than
any other graphics tool
to 'clean up' and edit images for either print media or the web.
If you have access to Adobe Photoshop, by all means use it
since that's a good skill to list if you're interested in working with
web graphics. It's been used in every shop I've ever supported
that produced graphics, whether on a Mac or a Windoze PC.
It's available at deeply discounted, educational pricing at online@vcu
in the commons, otherwise is reasonable at $180 or so. It's a good
thing to have on your resume and in your portfolio if you're looking for
The GIMP (Gnu Image Manipulation Program),
runs on Linux or Windoze, is free and does much more
than I need, and except for not being Photoshop it's fine.
If you want to do more with graphics and not pay anything, download GIMP from
or a mirror site if that's busy. GIMP does have a right steep learning curve since
important controls and features for some basic tasks are not always visible.
The user interface was not originally developed for Windows, so can
appear obtuse to the noob.
Paint.net (_not_ the Paint.exe Windows provides!) is a very
fully-featured graphics editor, and is also Free! Google on 'download Paint.net'
Paint.net's user interface is somewhat more intuitive for a dyed-in-the-wool Windows
Some web designers work up their models for logos &
other graphical elements with a 3D modeling tool, then take virtual 'snapshots' of the
scene and edit these images with a graphics program like Photoshop to
make the images suitable for publication on a web page.
3D software can be found for $29 on some CD, then
jumps to a few hundred to a few thousand dollars depending on the
functionality. Low-end packages for a couple hundred dollars are Amapi 3D
and Bryce. Each has its good
points, but they are limited in functionality compared to a 'real' 3D tool like
AutoCAD, 3d Studio Max, Maya, or other 'industrial strength' 3D modeling environment that
costs $3,500 or more.
The Open Source community has gifted us with a
full-featured 3D Modeling & Animation tool: Blender
3D (www.blender.org) is available for download for free.
Blender runs best on Linux, requires a video accelerator on the graphics
card, and runs it OK on Windows, too, thrives on RAM in either environment, 2Gig is minimum 8 or more is better.
Blender's user interface is not familiar for Windows
users since it was developed for unix-based machines, SGI (Silicon
Graphics), so there is a
steep learning curve. But there are excellent books &
tutorials about Blender, and there is a very active user community that
will help those who get thru the tutorials.
So, there are lots of choices available for developing
some expertise with web graphics, ranging from costly to
free. Find something you can use to meet the graphics
requirements for your class projects, learn to do the basics with it,
and put it on your resume...
- Issues in Web Graphics
'Raw Images' from a scanner or digital camera are
seldom suitable for use on a web page. Web browsers display graphics at
something like 96 to 160 'dot per inch', so anything finer only wastes bandwidth
on an enterprise's web interface.
Preparing them so they're optimum for rendering by a browser like
Mozilla, Netscape, Opera, or Internet Explorer is a basic skill for
'web work'. They're not suitable for inclusion in Office or
other documents sent via email, either. I used to cringe when a
student attached a Word doc of 10 or 20 MegaBytes to email without
even realizing it! It's not bad on the school's fast networks,
but they can snarl up a dialup connection for hours.
The 'file size', in number of bytes, of
graphics displayed on a web page is the major factor that determines how
fast the page will display on a browser. Web developers must
keep in mind that the majority of the users of their sites are
accessing The Internet over a slow, dialup connection that provides a
bandwidth of something like 48,000 bytes per second and an effective
throughput of maybe half that. The Web is _not_ a broadcast medium,
so 10,000 browsers looking at huge images requires transmitting the
huge image 10,000 times!
A high-resolution image from a digital camera or a
scanner may be a couple or several lots of megabytes (millions of bytes).
A high-resolution scanner can scan at 9,600 or more 'dots per inch' and
make images that are 96 times more detailed than a web-browser can show!
would take a very long time to get to the dialup user. An image
from a camera set at 'high quality' will be rendered larger than most
users' monitors can display, and is too large to transmit to that dialup web
user, or to one using the site with a smart-phone.
A 'megapixel' image might be 1280X1024 pixels in physical
dimensions and depending on the complexity of the image might be a
megabyte or two.
The 'physical dimensions' of
a web graphic are determined by the resolution the web-browsing user
has set for their monitor in the control panel for their Windows (or
other OS) desktop. Web designers need to consider that some
users keep their monitor resolution set at 800X600, or even 640X480, and
others keep it at 1280X1024 or higher if their hardware will allow
it. PDAs and CellPhones have teensy little screens but are used
more and more for browsing the web, and the best (Droids and iPhones!) can render
a web page that's 1000+ pixels wide very nicely. .
Careful design and preparation of web-graphics, tables, and
other elements of web pages is required so that the pages look good on
a wide range of monitors and devices, but don't consume excess bandwidth on the owner's
networks or their customers'. Customers are ticked off if pages take too long
to render, and the response in this new millenium has been to reduce graphics,
depend on nice markup, and otherwise send a skinnier stream of bits to our browsers,
wherever they may be.
Web graphics are generally sized in pixels, and the
space available on web
pages is best thought of in pixels, or in percentages of space
available, since that's what the user is going to experience. 'Inches'
don't mean much for websites, where web browsing users are free to
resize text, or their whole browser, so pixels generally web dimensions.
File format is another issue
for web graphics. The text compares and contrasts gif, jpeg, and png, which
are the predominate types of images that work with web browsers.
There is a plethora of other formats that are used when images are
kept, created, and manipulated on a computer but they are comparatively
huge for use for images on The Internet.
Jpegs are a 'lossy' format that allows the designer
to 'compress' images, balancing how much 'quality' to preserve with
smaller file sizes. Images
used for a high-resolution printer, perhaps printing at 1200 dpi
(dots/pixel per inch), or higher, need lots of quality. Images used for a
website, on a monitor with perhaps 96 dpi, don't need all this
quality, and large, relatively complex images may be output at 50% or
25% 'quality' and still look fine while dramatically reducing the size
of the file in bytes. Their dimensions can be rescaled when
they're rendered in an html document. They're a very popular
format, and the standard is openly available, is not proprietary.
Gifs are 'lossless' and can't be 'compressed' to
make the file size smaller. Compared to a jpeg, they result in a
relatively large image for the number of pixels involved.
Gifs are fixed in size and can't be 'rescaled' by html. They are
required for line drawings, text, or geometric shapes that have straight
lines that would be fuzzy or zig-zagged with a jpeg.
Very importantly, Gifs can
have 'Transparency,' which is the image quality that allows the
web page's background to 'show through' parts of an image. The
copyright for Gifs makes it a proprietary standard, still, in some
countries so there's a bit of a cloud over the usage.
Png is a newer format that also handles
transparency, and handles the same depth of color as jpegs.
The png compression algorithm is 'lossless', meaning that images will not
be compressed more than will render the same quality of image as the original.
While this can make a dramatic reduction in the size of images prepared for the
web with a graphics editor, photographics do not compress very much. Pngs make
a larger file, in bytes, than a jpeg but are usually not of higher quality at the
web browser. If transparency isn't needed, a photograph is usually rendered as well
in a jpeg.
Here is a page
that demonstrates these issues.
- Microsoft's Paint and Photo Editor
Paint will let you 'add stuff' to images, and it will
let you change any pixel that needs to be changed. But it can't be
used to do 'photographic' or more complex operations, like change an
images contrast, use multi-layers, or add transparency.
Photo Editor makes it easy to select a 'transparent
color', and do 'digital darkroom' manipulations like enlarging &
reducing, burning & dodging, enhancing contrast, and bringing out
details in shadows. But, it won't let you edit a pixel or
otherwise 'draw' or add type to a graphic.
Together they can be used to do some web
Here are two demos using Paint and Photo Editor:
One takes a large image from a camera, resizes it to fit in the cell of
a table on a web page, and compresses the image to fewer bytes. The
second demo shows how to use Paint to create a Logo using a distinctive
TruType font, then use PhotoEditor to make the jpeg into a gif with it's background transparent so
that it will 'float' over a web pages' background.
The demos are only intended to show a few operations with each tool. Use the Help -> Help Topics to get
a complete trip thru the functionality of each tool. Or, get your
hands on a real graphics application like PhotoShop or The GIMP if you've got real
- Resizing & Cropping with Photo Editor, Digital
This is the original image of a small dog with a big
bone, 1280X1024 Pixels, has been saved as a jpeg with 75% quality and
arrived at my desk via an attachment to email. The 'thumbnail' below was automatically generated
by FrontPage. Click on it if you want to get 274KBytes of image in
The space allowed for the image on the webpage where
it will appear is 400 pixels wide. 274K is too many bytes to
put on The Web and still be polite to your web browsing user. So,
it needs some work.
There's a lot of wasted space in the picture, so the
first reduction in file size can be made by cropping the image. Photo
Editor makes it easy to crop an image, so I've used Photo Editor to open
the file containing the image.
Cropping involves selecting a rectangular shape, so the 'select'
tool's button is clicked:
Clicking & dragging the select tool from the upper right corner at
the dog's butt thru the lower left edge just at the edge of the sneaker,
there to show the scale of the beastie, selects the rectangle that
will be 'cropped out' of the image, designated by 'marching ants' and
ready to copy to the clipboard to make a new image, or to crop:
If you crop an area and decide another
crop would be better while the ants are still marching, hit the Esc key and select again until you've got
The, choose Image -> Crop from the menu, and the big image
is replaced with what was cropped:
Looking at the Photo Editor's menu, File
-> Properties shows the dimensions are too large for the 400 pixels
in the web page where it's destined. Also the file type, TrueColor,
used as the default by the Photo Editor makes a huge file, more
than 2 MegaBytes. This is suitable for a picture that will be
printed on a high-resolution printer, but all this quality will be lost
on a webpage.
Two tweaks will make the image more
suitable for a webpage: Resizing and compressing.
Image -> Resize brings up a dialog
where you can enter the exact dimensions of the image. Since it's
a webpage, the Units have been set to Pixels. When 400 is entered
for the new width, the height is scaled as the same ratio so the new
image will not be distorted.
Here is the result of applying the new
width, shown in the Photo Editor:
This is the final image, which at 400
pixels, fits within this column fine:
At 44 KBytes it may take several seconds
to arrive at a browser via dialup, and that might be acceptable, but
we'll investigate how much compression it can take. In general,
highly textured images and fine detail don't compress very
well. This has a lot of detail in the carpet and dog, so it
will be good to show the results of too little quality/too much
In the Photo Editor, clicking the
'More' button on the File -> Save As dialog puts a slider at the bottom of the
dialog box where the Quality selected controls the amount of compression
used by the algorithm when the file is written. Here's the dialog:
Here's the result of applying 50% Quality
to get a 34 KByte image. A little bit of swirling & dithering
appears in the highlights of the beastie's coat, and the claws aren't
quite as distinct -- only one shows the glint of the flash where all of
them do above. But the image is about 1/3 fewer bytes and the
quality might be acceptable for some uses.
When the original image from the camera
was printed on photo paper with a new HP DeskJet the little dog's
whiskers were clearly visible. But the filesize is about 2 MegaBytes.
In the big image at the top
of the page, 75% Quality, the reflection from the camera's flash is visible on each of the
claws, but we've sacrificed the tiny whiskers to get the 280KByte file
shown above, a little more than 10% of the original.
quality can you sacrifice in an image to get a smaller file? At 15% Quality the dithering is very
obvious, with some of the dog showing up as kind of purple and much of
the detailed texture gets represented with striped boxes about 20 pixels
across. (This is how the compression algorithm works) The filesize is 13 KBytes but the loss of quality is too
much to show any texture in Yoda's fur.
Choosing 75% for quality seldom causes a
noticeable different in images and often results in a filesize less than
original. In some images, 25% quality might still be acceptable
and the image perhaps 10% or less of the original filesize.
Experiment with images with more and less
texture to see how compression affects their quality.
Preserving a distinctive Font with
Now, the web designer has an order to
make a logotype for Prototype
Logo, Limited. The customer wants to use the TruType font
BeesKnees, and paint it blue.
It needs to fit in a 600X100 pixel space at the top of a webpage, and
should be transparent so that the web page's background isn't blocked
by the 'white space' around the logo's text.
Fonts are an issue in web page
design. Newbie web designers are sometimes
surprised to see fonts different than they specified in the html font
property when they show a new website to a friend,
colleague, or customer on some computer other than the one where the
page was composed.
If they chose some favorite, special or
distinctive font for some of the text on the page, perhaps a Heading used as a logo, there's
a good chance that it won't be the same font when seen on another
computer. When web browsers render text on a web
page, they do it using the Fonts that are installed on the desktop
with the browser. A special font like BeesKnees might not be found on every
computer that visits a website.
Fonts specified in html pages that aren't
found on a web browser's computer will get replaced with
whatever is available for the browser. The user sees the _content_ but the
graphic effect of the special font is lost.
Only 'safe' fonts like Courier can be
expected to be on every desktop. Arial is available to
practically every Windows browser when a shift to a sans serif font
like Arial would be effective. But to make sure that everybody
loses the serifs, something like this is required: face="Arial,
Helvetica, Univers, Zurich BT"
To ensure that a particular font's
typeface will make it to a web
browser, it needs to be saved as a graphic, and the graphic put onto
the webpage instead of text.
In lieu of a 'real' tool to create the
graphic, we can use Paint, in Windows' Accessory folder. It
handles freestyle drawing, drawings using available shapes, and lets a
user 'type' into a graphic where needed. It can also be used to
do some 'bit editing', but compared to a tool like PhotoShop or the
GIMP it's very tedious and might not be able to do the job in time.
Here again, we get what we pay for and Paint has been a free accessory
with Windows since at least Windows 3.1 a decade ago.
Launching Paint gets a clear canvas on
which we can paint. Since the width and height in pixels is
usually important for a web graphic, the size of the canvas will
usually need to be set. There are at
least two ways to do this: dragging the corner of the canvas will
adjust it approximately; choosing Image -> Attributes from the menu
This gets us a 600 X 100 canvas.
Clicking the capitol A button,
for the Text tool, from the toolbar at the left gets a pointer
that is clicked and dragged to define a rectangle where the text will
be placed on the canvas. The Fonts toolbar should pop up
and the appropriate font, size, weight, and style can be chosen.
This one should be BeesKnees at 36 Point.
First, I'm going to try the light blue
color, so that's clicked in the little palette at the bottom of
Paint. If some color on a webpage needs to be matched, the
little eyedropper tool can be used to pick up whatever color is
Clicking in the Text box just drawn activates the
insertion pointer and what is typed is placed in the box.
The text can be edited using the
keyboard arrows as long as the Text tool is active. When you
'put down' the text tool, the text is placed on the canvas as pixels
and can't be edited anymore.
If changes are needed after the text
tool has been closed, the Select
tool can be used to select areas of the canvas that can be cleared by
pressing the Delete key. Then the text tool can be used again to
insert corrected text.
This time, when the Text tool was put
down, the type is off-center. It's an easy thing to use the
Select tool to select a rectangle including the text and move it
around so it appears centered.
After the text was centered on the
canvas, the file was Saved As a gif. This is the resulting
Unfortunately, this shade of blue gets 'dithered' when saved in
a gif, so the text appears spotted. Such a gaffe would get hoots and hollers from a web
designer. I left this here as an indication of the sometimes
almost endless tweaking that's needed to get graphics 'just right'.
gifs only use 256 colors and dither when they get a color they can't
handle. jpegs and other graphics formats handle more colors, so
the user gets a warning when an image is converted to a gif that colors
may be dropped.
Choosing a darker shade of blue works to get rid of the dithering. Choosing png for the format
would, too, since it maps more colors without dithering. Choosing
jpeg would make the color correct, too, and would result in a smaller
image, but it wouldn't let us fix the next problem, which requires
'transparency' to be set...
Notice that the white background from
Paint's canvas blocks the quadrille background at the left of this
webpage. This can be remedied by making the background color of
the gif 'transparent'.
Paint won't do this, (or at least I
haven't figured out how it does) but the Photo Editor makes it easy...
Adding transparency with Photo Editor
Here is the last gif above opened in
the Photo Editor. The little 'Set Transparent Color' button
makes the mouse pointer into a little wand that is clicked over the
color that needs to be set as transparent.
Clicking it gets a dialog box where the
algorithm for matching the color can be accept a range of 'similar'
colors to make transparent. For our purposes, White is White and
no changes are needed.
The transparent areas are shown by the
'checkerboard pattern' showing thru the graphic in Paint.
Here's that image on the webpage, where
it appears with the page's light blue quadrille pattern showing
through it as is appropriate.