Being able to manipulate and prepare any kind of digital-media is one of the most important tasks associated with web-design.

In this task we are looking at three different methods for obtaining images in a digital format – scanning, screen-grabbing (print-screen) and uploading images to a computer using a digital camera.

1) Scanning – A scanner allows for optically scanning and storing physical documents and images (written or printed texts/images, drawings, photographs etc.) in a digital format to be stored on a computer. Scanners are most commonly connected to a computer using a USB connection or FireWire (older standard).

The digital image taken from a scanner is most commonly stored in either a PNG or JPEG format as this offers the best compression/quality rate while keeping file-size relatively small.

Once scanned, the image or text can then be manipulated for use on the web or in digital media.

Flatbed scanners (as pictured below) are the most common but hand scanners and other variants are available for professional use.

 

2) Screengrab – A screen-grab or screenshot is a method used to capture what you see on your computer screen when you see it, anything you can display can be captured using this method and the only hardware required is your computer and keyboard.

Screenshots take a snapshot of your current display exactly as it is at the moment of capture. On Windows-based computers simply pressing the PrntSc (see picture1 below) button where as Macintosh based operating systems require the user to press the CMD+Shift+4 to capture sections of the screen or CMD+Shift+3 to capture the display in its entirety.

The image is then stored on the clipboard temporarily from where it can be pasted into a photo-editing application like Photoshop (Mac + Windows), Microsoft Paint or similar.
Once pasted into the editing program it can then be manipulated to be re-sized, cropped (to show only part of the area captured) or otherwise edited.

VS

 

Screen-grabs (print screen’s as they are more commonly known) are often used when reporting system issues to IT support staff or to demonstrate a procedure to other users graphically which helps show exactly the steps needed to accomplish the task at hand.
Although screen-grabs can technically be used to circumvent protection put in place to disallow the saving of content on website, care should be taken to ensure that no material used is copyrighted or unlawfully obtained.

3) Digital Cameras – Digital cameras allow you to capture video or still photographs via an electronic image censor rather than the traditional 35mm film that was used before digital cameras become the norm, benefits of using digital over analog camera’s include the ability to instantly (p)review the photo or video that have been captured, storing a large amount of digital media on the built-in storage and the ability to record and remove any content when needed.

Digital cameras are used in both professional and recreational environments and store the images that are taken in (most commonly) either Jpeg or RAW format onto the built-in storage or memory card. RAW formats are uncompressed and they offer the best quality at the sacrifice of storage space where-as JPEG images are already compressed to save space which in turn reduces the quality of the image depending on the compression used.

Digital cameras deal in pixel count as a means of resolution of a picture, the higher the count the better the resolution and larger the print size. Many phones and gadgets come equipped with a digital camera which allows many people to take excellent photos without the need to carry dedicated and often quite cumbersome hardware.
Although digital cameras can (in some expert’s opinions) not compete with traditional cameras in terms of resolution and quality they have well and truly surpassed analogue cameras in ease of use, price, availability and future potential. Digital cameras are constantly being improved and higher resolution cameras are more common which means that analogue is now truly a thing of the past.

 

IMAGE FORMATS

1. JPEG (Joint photographic experts group)

JPEG is one of the most popular image file formats. It supports bot lossy and lossless image compression making it ideal and very versatile for most types of usage.
JPEG images are true-colour images which have 24 bit/pixel which will help give a natural look to photographs and images as a wide bit-range is used.
While encoding/saving in JPEG format, a lot of data is discarded to keep the image and file-size to a minimum. The quality and compression can be set in advance to prevent images from ending up grainy or unusable. Unlike other formats (GIF for example) JPEG does not allow for animation or transparency.

2. GIF (Graphics Interchange Format)

The GIF image format is usable for compressing images with 256 colours or less only, GIF’s can be animated to show effects and different frames within one single image.
GIF images are very polular on online forums and message boardsand they are perfect for storing logo’s, drawings and text although photo’s should normally be saved in a different format due to colour and quality restrictions.

 

 

 

3. TIFF (Tagged Image File Format)

Although TIFF is not a common or popular format among regular users it is recognized in the media and publishing industry.
TIFF can support both lossy and lossless compression and are usually much larger in size than JPEG but are not compatible with many different browsers and operating systems which really limits its use to commercial studios and environments. (most commonly in printing).

4. BMP (Bitmap)

BMP (also know as bitmap image) was developed by Microsoft which means that all Windows operating systems handle the image format very well and any program made in windows should be compatible with the BMP format.
Unfortunately, due to the encoding used in bitmap files, the file-size for BMP images is extremely large compared to other formats and bitmap images can also not be scaled very well without degrading the image quality and adding distorting.
Furthermore, bitmap files are incompatible with a lot of devices which makes it use limited although they do have a very simple file-structure.

5. PNG (Portable Network Graphics)

PNG was made as a free-to-use image file format to supersede GIF. In the 1990s a licence was required to encode in GIF which was not the case for PNG.
PNG files are lossless by nature and also support transparency better than GIF files although animations aren’t supported. PNG supports true-colour images with the downside of resulting in large file sizes.

6. PICT 

PICT is a graphics file format which was originally introduced on the Apple Macintosh computer as its standard format. PICT allows for the interchange of graphics and has (limited) text support between Mac applications.
PICT can be compared to BMP for windows and is not often used nowadays as it was dropped in later MacOS versions for the PDF format but it is still used by some applications as it was native in earlier versions.

7. EPS (Encapsulated PostScript )

EPS or Encapsulated PostScript files can contain any combination of text, graphics and images. Since they are actually PostScript files, it is one of the most versatile file formats that is available. EPS-files usually contain a small preview image that is used to visualize the content of the file. This is done so that applications don’t need a PostScript interpreter to display the content of the EPS file.
EPS files can be generated by all drawing applications as well as most layout applications and image manipulation programs like Adobe Photoshop can also save bitmap images as EPS-files.

 

IMAGE CAPTURE, ASSOCIATED PROBLEMS

1. Moire Patterns 

A moire pattern can be seen as a type of visual interference pattern or a digital artifact which are caused by interference between two sets of fine pattern grids when scanning images that have been printed, usually they can be seen as a dotted or cross-hatched pattern (see first image below).

         

Any scanner is susceptible to this type of artifact although methods like post-editing and scanning at a high resolution will help decrease or eliminate this problem.
Most scanners do offer a descreen filter (the original is printed using a selection of dots called a “screen”) with several settings to match the type of image or document that you are attempting to scan (see secondary image above with the descreen filter applied).

2. Pixelation

Pixels are blocks of colour that make up any digital image, pixelation can be seen when the individual pixels are large enough to be distinguished with the naked eye and the lower the resolution the more this effect is noticed
Enlarging an image will also enlarge each pixel which often degrades the quality of the image (see image below).

Pixelation can be avoided by capturing and saving images in a higher quality or by means of enhancing the photo using editing software although this will never provide the best results.

3. Resolution

Resolution directly relates to the amount of pixels that are contained within a single image, the higher the resolution, the higher the pixel counter and the better the quality.
Cameras capture images using a sensor which is set to record at a defined resolution, cameras with a higher pixel count will capture in greater quality and detail.
Image resolution can be measured in a few different ways although the most common scale is know as Megapixels.
One Megapixel is equivalent to one million pixels which means that a 13 megapixel camera is able to capture aproximately 13,000,000 pixels.

Colour Casts

A Colour cast is a tint of colour (usually unwanted) which affects an image completely and evenly.
Certain types of light can cause film and digital photographs to have an improper colour balance, this can either be caused by over/under-exposure or improper calibration of the capture device.
In both cases this can cause either an excess or lack of light in the media that has been captured which affects the colour range of the image.

Most modern editing programs have several features that help amend any photograph that has been taken which has been affected by colour casts.
Colour correction and brightness/contrast settings are the most important when editing the image (see Photoshop screenshot below).