Introduction

So I'm guessing you've not came over this website on accident and you're actually wanting to learn about Digital Graphics for Interactive Media?

I will be talking to you about different aspects that go into making Digital Graphics, which includes pixels, raster and vector images, scanners, digital cameras, resolution, compression, different file extensions, bit depth, and colour spaces. Not sure what any of them mean? Well you're at the right place, because I'm going to tell you about them!

Read More

Time to pixilate

The pixel which also means, picture element is the smallest unit of information that makes a picture. Every photograph that is in digital form is made up of pixels. This is what makes the picture look the way it does. Pixels are usually round or square and are mainly arranged in a 2-dimensional grid.

If you zoom into a photograph to the point where it distorts it into squares, these are actually pixels not squares. If you have a lot of pixels it will make it closer to the real thing. The picture below shows an original picture compared to a zoomed in picture showing the pixels.

What’s your resolution?

The amounts of pixels that are in a picture are sometimes called a resolution. The resolution is how many pixels are in the width and height, for example, in a computer monitor there could be 1280x1024. This means there are 1280 pixels from the left side to the right side of thescreen and 1024 from top to the bottom of the screen. Another example would be 1080p which is the full HD resolution, which is 1920x1080, which means 1920 pixels from left to right and 1080 pixels from top to bottom.

Another way to say the number of pixels as a single number is to use megapixels. A megapixel is a million pixels. To get how many megapixels a monitor is you would be doing 1280 times by 1024 which equals 1,310,720, which makes 1.31 megapixels. For a full HD monitor it would be 1920 times by 1080 which equals 2,073,600 or 2.07 megapixels.

Intense pixels

The pixel intensity is pretty much its brightness. The histogram of a picture shows you how many pixels are at a certain intensity level compared to the other pixels on the picture. The black is on the left and white is on the right, as you move to the right it intensifies.

Read More

Raster vs. Vector

Is Raster image which is also called a Bitmap image, is a way to show an image in digital form.There are many formats that a Raster image uses, the main ones are, BMP, GIF, JPG, PNG, TIFF and PSD.

When using a Raster image when seen on screen it is converted to pixels. Each one of those pixels is assigned a definite value which determines its colour. The colours it uses are red, green, blue (RGB) colour system. If a value of 0, 0, 0 were given to the RGB value, the colour would be black, and the maximum number it can go to is 256 for each colour.

Something that may worth to note about Raster images, is that if you enlarge an image from its original size, it loses quality and distorts the image and makes it blurry.

When saving a raster compressing the image comes into play when you want to save space on your computer but keep the same quality of the image. Lossless and lossy compression is terms which describe when compressing the image file, if all of the original data can be recovered when the file is uncompressed. Lossless compression keeps every single bit of information that remains after the file is uncompressed. The Graphics Interchange File (GIF) is an image format that is used on the Web which is a lossless compression.

But with lossy compression it reduces a file by permanently deleting certain information, mainly information that’s not needed. If the file is uncompressed only bits of the original information is still there (although the user may not notice it). Lossy is mainly used for video and sound, where certain bits of information loss will not be detected by most users. A JPEG image file is commonly used for photographs and other images that have a lot of information in on the web, which has a lossy compression. When using JPEG compression the creator can figure out how much loss that can be used and trade it to gain a smaller file size with good quality.

A vector image is made up of thin lines and curves which are called paths which involve mathematical theories. To create a vector graphic you must use computer software that is capable of doing so, they need to create wireframe type images and each line needs to point to certain node positions, node locations, line lengths and curves. Any of the lines or curves that are in the vector can all be assigned colour codes. With the way a vector is formed it can be sized to any scale infinitely without losing quality in the image.

The most common type of vector is text, this is because no matter how big you make the text, it will always look the same quality, no matter how big or small it is.

A different plus side to using vectors is the file size, because of the files way of using mathematical descriptions and not using single pixels, the file sizes are much smaller. Therefore making is simpler to put on the Web or transferring it to other people.

A problem with using vectors is they only seem to use file types that are native to the program that has been used to make the vector. Which means not everyone may have that program, therefore not being able to open the vector image. There are many different file types, but the main ones that are used are, Encapsulated PostScript (.EPS), Adobe Illustrator Artwork (.AI) and Flash Authoring (.FLA).

Examples of Vector Images are below:

Read More

Time to learn some bits

Bit Depth determines how many colours are available in an images colour palette, these are represented by the numbers 0’s and 1’s, which are also called bit’s. Although there are all of these numbers, it doesn’t mean that an image uses all of these numbers, but instead it provides a more accurate set of colours. For a greyscale image, the bits that are used determine how many different shades are available of that colour. Images that use a higher bit depth can create more shades and colours since there are more combinations of 0’s and 1’s.

The table below shows the amount of bits per pixel, how many colours are available for them bits and what they are commonly called:

Bits Per Pixel	Number of Colors Available	Common Name(s)
1	2	Monochrome
2	4	CGA
4	16	EGA
8	256	VGA
16	65536	XGA, High Color
24	16777216	SVGA, True Color
32	16777216 + Transparency
48	281 Trillion

http://www.cambridgeincolour.com/tutorials/bit-depth.htm

Read More

Using the space

The colour space is a method used to describe colours numerically, which is also known as a “colour model.” The most common colour spaces are RGB for scanners, cameras and displays, CMYK for colour printing and YUV for TV and video. Before electronic displays, which use RGA, colour spaces were made that was similar to the way people consider colours. To give an example of this the CIE Lab model uses lightness (L) and values on red-green (a) and blue-yellow (b) axes, while HSB uses hue, saturation and brightness.

In Adobe Photoshop they have a colour picker that lets you choose a colour by clicking inside the box or moving the slider. At the side there are numerical values for HSB, RGB, CIE Lab and CMYK colour spaces, also uses have the ability to choose which they use to make their adjustments.

Read More

How to capture your image

There many different ways to capture your images, as well as different ways to store them. To capture the images you can use scanners and digital cameras. Scanners use a light source, which is a cold cathode lamp that illuminates a scanned imaged. The light is then reflected off of the object and into Charged Coupled Device (CCD). The CCD then collects information and through a series of electronic devices converts the analog signal into a series of digital signals, which then can be read and processed by the internal electronics of the scanner and then a computer.

The way a digital camera captures images is similar to the scanner, it lets in light through the lens which then reflects the outside into a CCD. The CCD then collects the information needed and transfers it to the cameras computer same as a scanner.

Even though I’ve mentioned resolution before, this resolution is different, this is printing resolution. The printing resolution is measured in Pixels per Inch (PPI) or Dots per Inch (DPI), which determines how pixels are in an inch of the file size. When using DPI you’d be using a DPI of 72 for use on a monitor, but when using it for print you’d be using a DPI of 300. This is because when printing it’ll be clearer rather than distorted and show pixels.

Read More

Making things smaller

With images there are many things you can do to get a high quality image but get a really small file size. If you want to use images on the web you will have to have a small file size so the images load quickly enough so users don’t have to wait for it to load. But you also want to keep the same quality; you can do many different things to do this by using the .PNG file type and using optimisation methods on this website. But if you’re using an image to use on screen so say your presenting it to some peers or something, you’d still have to think about file size as you’d need to get all the images onto the CD, this is if you have lots of images to show.

Read More