GREEN: secondary notes and terminology

BLUE-GREEN: introductions, emphasis, conclusion
PINK: tutorial steps
YELLOW: notes and hints for tutorial steps

IMAGE DIGITISATION AND MANAGEMENT

• PIXEL: short for Picture Element
  A Digital photo (or scan or artwork) is made up of many thousands of tiny square elements called "pixels"... each of these contains colour and brightness information...which, when seen at actual size (100%) is the finest of fine mosaics...where contrasts give hard edges, lines and textures...where mixings give hues and tones, tints and shades, gradients and superimpositions...all the possible relationships between dots...their placement and their content.
  
  
  
  
• CCD: short for Charged Coupled Device
  A CCD is the light sensor in non-film cameras...it is "Electronic Film". A digital camera reads colour / brightness information and then records it on the camera's memory disc / card / stick / bar,
  
  
• The more pixels a camera has for light to fall on and be recorded, the higher the "resolution" of the digital photo.
  A "Megapixel" is a million pixels...and the word has come to represent the size of a camera's image capture capabilities. (In the same way as the phrase "a 35 mm slide" tells us about a consumer aimed film photo format, the limits of the camera that took that slide... and how large the slide can be enlarged before losing detail).
  A 3 Megapixel camera has a CCD capable of using 1,920,000 pixels to record (Capture and digitize) a picture...just a single frame. Cameras rated 3 to 4 Mpx fill the slot occupied by 35 mm conventional "film" cameras. Smaller has it's limitations... larger is too big for the 35 mm psychology...(not too big, not too small, not too expensive, easily serviced). A 5 Mpx camera enters the slot occupied by the 2.25 inch format used by professional photographers... expensive, memory exhaustive...just plain too large..but that may mean nothing when the next logical step is made...
  The Ideal School Digital Camera is a 1 to 2 Mpx CCD with a 1.44 floppy disc storage...sturdy, easy to use, and the discs are easily available and inexpensive...good enough for Web and for projects...class use, excursions, magazines, slide shows and starting out. ($850-$1000 retail).
  
  Note: it is essential to create an Art / photo Management folder on your hard disk.
  Keep this sub-folder in your main Arts Management folder. Keep the numbering system the camera supports as your file index. Once an image has been compressed and is ready for web-page inclusion, it's "name" will have .jpg at it's end...keep these converted images in a separate sub-folder.

 

THE TUTORIAL STARTS IN THIS COLUMN, AND CONTINUES BELOW.






Making a quick-loading Showcase page depends on understanding that humans have limited attention spans and unlimited annoyance thresholds...as well as entertainment / information needs.

TASK: a considered balance of time and content ~
File size: keep 100 Kb as maximum…less if possible. The "Showcase" page must load reasonably quickly.
This total includes all text and the image. If you can do all this and keep total kilobytes under 100 AND still have an acceptable visual, you have succeeded…but play with compression, it is where gains will be made.
This tutorial sets out to establish a general format that achieves the aim...to understand and practise efficient time and space use and design for it...how to "Optimise" images and presentation.

• Note: photos and artworks are "Scanned" into a computer using an external "Scanner" (transparencies, negatives, and positive prints) OR they are uploaded directly from a digital still camera using a USB connection ...OR from memory stick, floppy disk, hard disc, CD, website...and opened in a photo-manipulating programme...now read on...

GO:

..... the process described in this tutorial starts with a photograph made using a hand-held 3.3 Megapixel digital still camera...on a dullish day...and set at it's highest resolution of 2240 x 1680 pixels. This uses all the pixels this camera's CCD has...3,763,200...and results in the finest detail the camera is capable of, recording a photo having a 100% size of 79.02 x 59.27 cm (31.1 x 23.333 inches)...larger than the screen we are to work on...so some shrinkage is necessary, and anything non-essential is going overboard.
At this stage it has a JPEG file size of about 1,4 megabytes ...that's about 1400 Kb. When it's opened in "Photoshop" for enhancement and cropping, it expands to nearly 10.8 Mb. and becomes a .psd file.

• Note: the original photo includes a lot more background than artwork...and far more detail than can be done justice by the limits of this monitor screen and it's "dots"... those pixels.
  Remember that these dots cannot be smaller than they are on a monitor...low resolution photos lose detail and usefulness with every step of enlargement...but high res. images will be useful as enlargements and in compressed states..it's logical...don't expect miracles from photos made at E-mail resolution.

SPEED AND CONNECTIVITY

• USB: short for Universal Serial Bus.
  A newish system for connecting hardware to and from a personal computer. USB has two advantages over the older transmission methods using the Serial and Parallel Ports on printers, scanners:
  
  1 higher data transmission rate...faster
  
  2 the ability to plug and un-plug self-powered and externally powered hardware to and from a computer while they are all switched on...and without fear of damage.
  (USB ported cameras, projectors, recorders, scanners and printers, readers, CD and DVD disc burners and players, musical instruments and sequencers...)
  But remember not to make or break connections while up-loading or processing data...take care still.
  
  
• The USB cable carries enough power from the computer to run the mouse and keyboard and / or a stylus and tablet...but not much more.
  
  "Firewire" / IEEE is another ultra high speed interface, much faster than USB 1 and 2.2. Instead of a "copper wire" cable, Firewire uses light transmission via optical fibre to transmit data. Digital Video cameras with Firewire can transfer data very quickly to a Firewire ported computer.
  
  "Bluetooth" is the newest development in connectivity...no more cables, no more ports on the outside of hardware. Bluetooth equipment uses a wireless system and can communicate through walls. Digital Videos appear on your Bluetooth-ed computer in an instant...without cables. Mac has "Airport".
  
  
  

• Note: BYTES and BITS and TIME
  
  BINARY SYSTEM: a number system to the base two...1 and 0
  
  BIT: short for Binary Digit
  A Bit is the smallest unit of information storage..."on" or "off".
  The memory of most personal computers bought today is measured in megabytes.
  

Byte	b	8 bits	1 byte
Kilobyte	Kb	"Thousand"	1024 bytes
Megabyte	Mb	"Million"	1,048,576 bytes
Gigabyte	Gb	"Billion"	1,073,741,824 bytes
Terabyte	Tb	"Trillion"	1,099,511,627,776 bytes
Petabyte	Pb	"Quadrillion"	2 to the 50th!

Data Transmission Rates are in bits per second (bps)
(Bandwidth speed terminology)

Kilobits per second	Kbps	1,000 bps
Megabits per second	Mbps	1,000,000 bps
Gigabits per second	Gbps	1,000,000,000 bps
Terabits per second	Tbps	1,000,000,000,000 bps
Petabits per second	Pbps	1,000,000,000,000,000 bps

SIZE, SPACE AND DETAIL

• COMPRESSION: A better word for compression would be condensation...as used in "condensed version" or "condensed milk"...the original meaning or value is still conveyed, but the unessential has been edited or reduced to save on storage space, and to improve the efficiency of transportation. When it gets to where it will be useful...just add water, and the original de-compresses.
  
  If the editing is taken to extremes, then the meaning will be lost at a certain point...over-compressed. For images, that point is obvious...it's when edges become echoed, and textures appear in places where flatness is preferred...seriously degraded.
  (if an image is enlarged beyond it's 100% size, then the edges of details will show obvious coarseness). Find the right balance.
  
  
  
• JPEG: short for Joint Photographic Experts Group.
  Most digital photos are captured in this compressed file format....it reduces a high resolution image to a much smaller file unit...this is reversible. When it is opened in an image editing programme, the high resolution information is restored and becomes useful and editable.
  
  
• GIF: Graphic Interchange Format is one of the earliest forms of compression. It is best used for images that are have only flat areas of colour such as line art, logos and icons. It's no good for photos because GIF can handle just 256 colours. Sometimes a posterised image will work as a GIF.
  An image can also have a transparent background which is good if it is an odd shaped graphic.
  If you have the option, use the newer format: GIF89a
  
  
• TIFF: short for Tag Image File Format
  Another image file format, TIFF files are uncompressed and so contain all of the captured digital information about an image. Being 1:1, TIFF files are very large and are used for exchanging Bitmap (Raster) images between applications...usually desktop publishing.
  When JPEG files are decompressed they can be saved as larger TIFF files on your computer... and used in programmes that require TIFF images (3-D, Faxing, Medical Imaging etc.).
  
  
• MPEG: short for Motion Picture Experts Group...and is a form of compression for Digital Video, much like JPEG for digital still cameras. MPEG compression reduces the large Video files of your movies to a much smaller multi-platform format, ideal for E-mailing or Website inclusion.
  

• IMAGE size: the "image" is artwork, photograph, "screengraph"…but excludes text or captions…text uses far less memory than images, and loads quickly.
  HINT: When sizing an image, make one dimension around 400 px and observe the result. The image used in the Tutorial is 562 x 400 pixels = 224,800 pixels...use this as a loose guide. Make 225,000 pixels your maximum. Realise that several smaller images may be used, as long as their total space use is around this maximum...check cell size...add cells as needed for text and captions.

IMAGE PREPARATION:

• the brightness and contrast needs careful adjustment to make whites white, without losing any detail in white areas...
• ...the image is cropped with some room for a "dropped shadow" (in this example)...and any vestiges of the background are erased from the edges...so that it hovers on a transparent border.
  
  
• the orange is sampled from the artwork with an "eye dropper" tool and a background layer is filled with it. Now the image sits on the orange. This orange is "web safe", and has the colour identity FF3300...remember this.
  
  
• the image layer is selected and a "dropped shadow" effect added...and adjusted to be subtle rather than intrusive.
  
  
• and the orange layer and the image layer with it's shadow are then merged to one layer...save now.
  
  
• next, the image size is reduced to fit on the 800 x 600 px "page"...the first stage of compression. For somewhere useful to start, make either dimension 400 pixels and check the result.
  In this example, the final image was 562 x 400 px with a new size of 658 Kb...still too big.
  If the image is acceptable...adjust, sharpen and crop carefully before finally saving for web use.
  
  
• Next, the 658 Kb image is converted to a .jpg format...this is a compression process, and you have to decide on the right amount. "Save for the Web" selection,,,a percentage range is offered as a set of previews...chose carefully.
  
  
• IMAGE compression: select jpg 60. An image reduced to these specifications does not need to be protected by a disfiguring copyright stamp or watermark. Low resolution images may be pirated, but for what purpose I don't know...it's not like MP3 and the accessible high resolution sound files that worry arts industrialists. If an image is borrowed for wallpaper or screen-saver or whatever, it will be very coarse on screen at any magnification...so consider it advertising for the original. Digital "watermarks" only make sense if your business is a commercial photo library. Stolen ideas is more of a worry...but hey...what's new?
  The full-colour RGB image used in the Tutorial has a final memory size of 75.58 Kb after compression. Greyscale and Black-and-white versions of the same image use less and even less memory and are faster to appear on screen
  
  
  
• ...now the image is ready to be inserted into a web page. The notes below outline a generalised approach (that is, the process itself rather than how one or another piece of software handles that process).
  This is done by copy / pasting or dragging a selected .jpg file from your Image folder or Desktop, and into an open page in a web page editing application...
  

DESIGN AND VISUAL APPEAL

BACKGROUNDS:
Have a reason for everything. Here the background red-orange was sampled from within the artwork.
Reason:
...the painting is more a "Graphic" than anything else: abstracted, dark against light, strong contrasts, outlines, shallow modeling, deep black spaces, smooth gloss succumbing to dry harsh matt whiteness. The red background reinforces the graphic power of the artwork. Experiment with different backgrounds.

Graphic work has greatest power on black or white backgrounds...but selecting a colour predominant in the work, or even entirely absent from it, can change the whole effect and emphasis...consider colour juxtaposition effects carefully. The beauty of the computer is that you can play with coloured backgrounds quickly, safely, and economically.

The "dropped shadow" shown in this example, can be a useful affectation ...as are bevelled "Mattes". These imitate details of "real world" presentation, and lend an animation to what would otherwise be flat and stark. Include frames only if they are an integral part of a desired mood (for example: a Procenium arch on a black background framing a performance scene).
Remember that these effects are part of the image and add Kb, increasing load time. A dropped shadow is a fuzzy frame.

• The plain featureless background that is used for this page, uses 1 byte of memory whatever the colour, and contributes little to the time bill ...the more complex the background the more Kbs and time are wasted.
  
  
• Note: the gradient background used behind ADU's Home page is a "tiled" background...the tile is almost free of detail and is tall and only one pixel thin...when identical copies are placed tightly against each other, the optical effect is of one colour or tone merging with and becoming another. Being more than a plain background means that it uses more Kb and time. But hey, it's just 577 bytes ... not too bad, for the interest added to the page.

POSTERISE.
If your "image" is a printed poster, design it with size reduction in mind from the start, or have a separate web version…but it must be readable…at least the major headings and captions. Try enlarged sections, COLLAGE, transparencies…design it. Simple graphic shapes are best compressed using GIF (see above).

 

...but the "Showcase" web page needs a few standard specifications outlined and explained before text and image are added: ~

GO:

PAGE size and format: make a new page in a HTML editing programme and give it a background with that same orange FF3300...insert a "table" with at least two cells…one for image and one for text…centre the table on the page…make the border of the table zero so that the lines don’t appear.
Remember that the monitors used to view the Web will rarely be more than 800 pixels wide. That's the "window" you aim for even if your monitor is larger. So work within a rectangle 800 pixels wide by 600 pixels deep to allow the viewer to see the whole page in one look.

• Note:...now you can see why the dropped shadow background colour must be exactly the same colour as the web page background... they merge seamlessly... or should if the FF3300 orange was used for both.
  
  
• Note: If there is an obvious border and the same orange has been used, then it is the edge of the image rectangle that causes the effect...in this situation, SHARPENING AN IMAGE should be followed by CROPPING. "SHARPENING" WILL CHANGE VALUES IN THE OUTERMOST PIXELS AND CAUSE A VERY FINE BUT OBVIOUS "HALO"...magnify the edge back in your photo manipulation programme and see what it looks like...it should be uniformly orange for the overlap to be invisible.
  Be careful not to crop into the "dropped shadow" as it will create a very obvious edge...so make your original image background selection a few pixels more all around than needed, so that they can be cropped away after sharpening. The edge must be clean.
  
  

• IMAGE cell properties: make sure that the format properties of the cell containing the image are centered for both the horizontal and vertical alignments.. but if you're creative, adjust or add cells for an interesting arrangement...consider the work of the artist Piet Mondrian.
  

• TEXT cell properties: ...cells are cells, ...open the prepared text files in your Arts Management Folder and copy / paste or drag the relevant ones into cells in the same way as image files are.
  The same controls apply for text manipulation as for image...it can be centered as a shape, aligned left or right, top or bottom, indented, spaced, edited, copied, and pasted.
  
  
• Note: the pixel ruler and the page cell outlines for the illustration opposite have been included to convey space use. This page is in "Dreamweaver", a web page editing programme.
  Such programmes allow lettering to be coloured, sized, Italicised, made Bold, have Serifs or be a mixture of fonts, or be all at the same time...without being Artwork.
  
  
• Keep text minimal…use the font "Arial"...use sizes 2 and 3, aligned left or right (flagged) ... but check the effect...especially how it looks on your Browser.
  
  
• No scrolling…keep everything in view from the start…the Showcase page shown in the tutorial fits within 800 x 600 pixels ...this rectangle is small enough to be seen completely on an average user's screen without scrolling down.

HEADINGS and CAPTIONS...don't let your text overpower the image, and keep headings carefully under control, The text supports the display and is secondary to it...a subdued explanatory introduction.

• Those using the access for "Gallery" purposes should make their entry in the "Gallery" format…Title, Date, Artists name and date(s), Nationality / Origins, Size, medium, support …even price. If you have a statement to make, keep it concise, and carefully decide where to place it for best effect... where it doesn’t compete with your visual. Centrally aligned text is more useful for scrolling credit lists, where it is best used in two-line units.

TEXT

• HTML: short for Hypertext Mark-up Language.
  This is a system of word processing "marks" in text files that tell a computer where to make a paragraph, indent, use a particular font in a particular colour and in a form described as Italic, or Bold...a set of instructions for how type and text are to be displayed on a computer monitor.
  Files with .html after them can be downloaded easily from the Internet.
  Text is best typed into a word processing programme...the spelling, grammar and even syntax can be checked. It is best to copy and paste the text from there into the web page editing programme.
  

TIME

• The full-colour RGB image used in the Tutorial has a final memory size of 75.58 Kbs after compression.
  
  
• The final total page size is 79 Kbs (image, text, headings) and should take 20 to 30 seconds to load using a Modem running at 28.8 Kbps in a perfect world. Be aware that the rate may be very very low...it is beyond your control...and mine.
  The 22 seconds the editing programmes calculates as loading time for this finished Showcase page is not an average but an ideal...web users with newer connections and faster modems will see the page earlier...the rest of us?...well.
  
  
• We've found 100 Kb will take near a minute to load on average...so be aware of this.
  
  

• INSERT A LINK: use one only…remember that we are in your site when we visit to view your up-dated Showcase offering…so to enter the rest of your site should be one click away.
  Include one discreet "Contact" or "Enter Site" link. Keep the Showcase page un-cluttered.
  
  
• For some extra notes about inserting a Link in a page in your website, check the "Link" tutorial...the procedure is the same, but it will be your button, logo and "Contact" page URL instead of ADU's.
  

• NEXT:
  TEST RESULT ON BROWSER, THEN UP-LOAD TO SERVER. CHECK RESULT ON WEB...LINK TO ADU AND SEE HOW IT LOOKS.
  But it's not to be found on the "Quicklinks / Showcase" page....WHY?...because you haven't opened your edit page with your ID number and added the URL of your new or made-over page in the text box provided. Once you've done this, select "Quicklinks / Showcase" again and you'll find a link has appeared opposite your entry...test it...how long did it take to load?...what was your connection like?
  
  
  
  
  
  
• For additional "Showcase" information and re-emphasis, visit the "General Notes" found by clicking on the "About ADU" link found on ADU pages, and scrolling down to the pertinent notes.
  
  
  
  
  
  

END TUTORIAL

Note: that many Web masters or designers include a request for feedback about their site...this allows them to polish their product, make it easier to use...and to correct errors...particularly broken links (incorrect file addresses or URLs). Web masters appreciate your efforts. (We at ADU certainly appreciate constructive criticism)
Indicators: a "broken link" for a"picture" is a small icon with a jagged break across it...it sits there and never loads. For a "page" that is missing you usually get a 404 error message.

 

Click here to see the finished sample Showcase page.