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 work...

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 web-related work. 

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 www.gimp.org 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 user

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 graphics. 

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 needs.  

 

  • Resizing & Cropping with Photo Editor, Digital Darkroom operations

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 your browser.

YodaWithBigBone.jpg (279803 bytes)

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:

Slide1.JPG (64990 bytes)

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:

Slide2.JPG (73282 bytes)

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 it right.  

The, choose Image -> Crop from the menu, and the big image is replaced with what was cropped:

Slide3.JPG (38226 bytes)

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.

Slide4.JPG (29108 bytes)

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.  

Slide5.JPG (22880 bytes)

Here is the result of applying the new width, shown in the Photo Editor:

Slide6.JPG (29450 bytes)

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 compression.  

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:

Slide7.JPG (34361 bytes)

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.  

How much 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 half the 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 Paint

    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 will set it exactly. 

    Slide1.JPG (23718 bytes)

    This gets us a 600 X 100 canvas.

    Slide2.JPG (31936 bytes)

    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 needed. 

    Clicking in the Text box just drawn activates the insertion pointer and what is typed is placed in the box.

    Slide3.JPG (51872 bytes)

    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. 

    Slide4.JPG (31191 bytes)

    Slide5.JPG (34555 bytes)

    After the text was centered on the canvas, the file was Saved As a gif.  This is the resulting logo: 

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.

    Slide6.JPG (31553 bytes)

    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.

    Slide7.JPG (22562 bytes)

    The transparent areas are shown by the 'checkerboard pattern' showing thru the graphic in Paint. 

    Slide8.JPG (34903 bytes)

    Here's that image on the webpage, where it appears with the page's light blue quadrille pattern showing through it as is appropriate.

 

Hit Counter