Raster images

Raster images

A raster image also known as a "bitmap" image, is a way of representing a digital image through many different formats which all will be explained individually. A raster image is made up of many different pixels, each pixel has its own form of coulours which add together to create the final image.

Compression

Image compression is the compression of a graphic in order to reduce the size of a file without damaging the quality of the file to an unacceptable level. This is done in order for the file to be stored or transported as different file types from the original file type. It can also reduce the time of images been sent over the internet and downloaded.

Lossless

Lossless is a type of compression method that packs data into a smaller file size, this is done without any loss of data in the compression process. Depending on the type of file that is being compressed, lossless compression could potentially half the file size, for example if a file size was 1.5 megabytes it could be compressed to half of that size. This makes lossless compression useful for transferring files across the internet as smaller files transfer faster, lossless compressed files also come in handy for storage as they take up less room.

Deflate - This is a type of lossless compression used for PNG images, in addition to this it can also be used for ZIP and gzip compression.

Lempel-Ziv-Welch (LZW) is another form of lossless compression that performs a limited analysis of data. It’s used in GIF and some TIFF file formats.

Lossy

Lossy compression hosts a number of different types of this specific compression, some of which can be combined with lossless methods to create even smaller file sizes. One of the methods is to reduce the image space of the images most common colour, this technique of compression is often used in GIF files and sometimes in PNG images.

Transform encoding - This is a type of encoding used for JPEG images, In images, transform coding averages out the colour in small blocks of the image to create an image that has far fewer colours than the original.


Chroma subsampling - This is another type of lossy compression that takes into account the fact that the human eye notices changes in brightness more than changes in colour. This is taken advantage of by dropping of averaging out colour information while maintaining brightness, It’s commonly used in video encoding schemes and in JPEG images. 

File extensions

BMP - Short for bitmap, the BMP file type is a commonly used file type that saves raster graphic files. The reason that its so common within raster images is that the file stores all colours in each indevidual pixel without any compression. This allows a file save that has high quality graphics and large file sizes, no other file extension can carry this out without compression.

PNG - This is a compressed raster graphic format that is oftern used for internet files and is a popular choice for application graphics. PNG includes many of the benefits of GIF and JPEG formats, an example of this being PNG images uses lossless compression like GIF files. The PNG format supports "RGBA" color space, unlike the JPEG and GIF formats.

GIF - GIF is a file type that stamds for "Graphics Interchange Format", this is a compressed image file format. GIF files can be quickly transfered over a network or the Internet, this is why you often see them on web pages. GIF files are suitable for small icons and animated images, but they dont have enough of a color range to be used for high-quality images.

TIFF - Tagged image file format is a graphics file format that is the standard image format across multiple platforms. Colour deps ranging from 1 bit to 24 bit can be handled on this file type. There are around 50 different variations of this file due to people making individual improvements on the file type. More recently JPEG has become the most popular image file type due to its compact file size and internet compatibility. 

JPEG - "Joint photographic experts group" is the actual title of the file type due to the committee that created it. JPEG is a compressed file type that unlike GIF, is not limited to a certain amount of colour, for this reason JPEG is the best format for compressing photographic images. Because of this large colourfull images on the internets are most likely to be a JPEG one. Due to JPEG being a lossy format, when compressed some quality is lost.

PSD - A PSD file is a file type created by Adobe Systems, the file type supports the colour modes, RGB, CMYK, grey scale  monochrome, duotone, indexed colour, lab colour and multi channel colour.The file type can be opened in operating systems, Mac, Windows, Linux and Android.     

Vector images

Vector Images 

Vector graphics are made up of vectors (Paths or strokes) they use points, curves, lines and shapes or polygons based on mathematical expression in order to represent images in computer based graphics. Although not as commonly used as bitmap graphics, vector graphics have a lot of strong points, let's explore through them now!

Points - Points are locations within a 3D space, they also have no size. The location of a point is specified by its X, Y, and Z coordinates  

Lines and curves -  The most simple breakdown of vector graphics is to describe them as a series of "lines and curves" connected by points which, when viewed as a whole look like a specific shape (a logo, a character of text, an illustration, etc.).

Now I will demonstrate how to actually carry out the creation of lines and curves in a certain programme such as Flash:

1. Click on line tool.






2. Open the info dialog box.

3. Click the stroke tab.

4. Choose a style and adjust the thickness of the stroke.

Book reference: Flash 5 Made Simple, Mike McGrath

Polygons - Polygons are also a vector graphic upon creation. In geometry a polygon is a plane figure that is bounded by a closed path or circuit, composed of a finite sequence of straight line segments. These segments are called its edges or sides, and the points where two edges meet are the polygon's vertices or corners. In computer graphics, the term polygon has taken on a slightly altered meaning, more related to the way the shape is stored and manipulated within the computer.

File extensions:

EPS - EPS is a file extension for a graphics file format used in vector-based images in Adobe Illustrator. EPS stands for Encapsulated PostScript. An EPS file can contain text as well as graphics. It also usually contains a bit map version of the image for simpler viewing rather than the vector instructions to draw the image.

AI - Adobe illustrator is a vector graphics based file format developed by Adobe Systems, files that have the AI extension are drawing files that Adobe illustrator has created. As mentioned the files created by the program are made up of paths that are connected by points, this creates the vector image. The image can then be re sized without losing any image quality. 

FLA - The FLA file format is the "master" document format for Flash projects. When you create a new Flash file, you create an FLA file. This contains all the elements which make up the finished product, including graphics, animation instructions, action script code, comments, etc. FLA files can only be opened in Flash (not the Flash Player).

 

A bit of this and a bit of that

Bit depth

Bit depth quantifies the amount of unique colours that are available in an image's colour palette in terms of the number of 0's and 1's, or "bits," which are used to determine each colour. This does not mean that the image necessarily uses all of these colours, but that it can instead specify colours with that level of precision. For a grey scale image, the bit depth quantifies how many unique shades are available. Images with higher bit depths can encode more shades or colours since there are more combinations of 0's and 1's available. 

Sampling - Sampling defines the number of samples per unit of time (usually seconds). Sample rate, how often these audio snapshots are taken is referred to as the sample rate. The more snapshots taken, the more detail the sound has. These pictures illustrate how sampling works:

Bits per pixel - Images are described as having a certain amount of bits per pixel, 1 bit, 8, bit, 24 bit, 32 bit etc. 

Putting this into disk space and file size:
1 byte = 8 bits, 
1 K byte = 1000 bytes, 
1 Megabyte = 1000 K bytes (1,000,000 bytes)
1 Gigabyte = 1000 Megabytes (1,000,000,000 bytes)
1 Terabyte = 1000 Gigabytes (1,000,000,000,000 bytes)

Think of a bit as one piece of information. Better described: one bit of information, an image is made up of many pixels, an image has a colour palette. If an image is a 24-bit image, then that image uses 24 bits of information to describe each pixel, (24 bits per pixel). The larger the bits per pixel, the more colours available in the palette.

Example: a 1-bit image has only two colors in the palette: black and white. A 24 bit image potentially has 16,777,216 colours in its palette.

Monochrome - Also called "mono." Refers to display screens that use one foreground and one background color; for example, black on white, white on black or green on black. The first terminals connected to mainframes and minicomputers were monochrome, and monochrome screens were widely used on early personal computers.

256 colours - 8-bit colour graphics is a method of storing image information in a computer's memory or in an image file, each pixel is represented by one 8-bit byte. The maximum number of colours that can be displayed at any one time is 256. There are two forms of 8-bit colour graphics. The most common uses a separate palette of 256 colours, where each of the 256 entries in the palette map to given red, green, and blue values. In most colour maps, each colour is usually chosen from a palette of 16,777,216 colours (24 bits: 8 red, 8 green, 8 blue).

Bit    7  6  5  4  3  2  1  0

Data   R  R  R  G  G  G  B  B

High colour/ true colour - 

Numbers of Colours:

The difference between Medium, High and Highest, over wise known as High color and True Colour is the number of numbers that can be used to represent the colour information for one pixel. Windows tends to use terms "Medium", "High" and "Highest" to represent the different alternatives, so I'll use that here:

Color Setting	Bits per pixel	# of different colors	Memory for 1280x800 screen
Medium	16	65,536	2 megabytes
High	24	16,777,216	3 megabytes
Highest	32(*)	1,073,741,824	4 megabytes

High colour or true colour ?

It depends on you, your vision, your monitor, your computer, your graphics card and how you use your computer. For most people these days we tend to land on 24 bit colour as the compromise. Pictures look good without going overboard, and the sky doesn't have that "stair step" feel in its colour gradient. If you know how your graphics hardware supports it, you might play with 32 bit as a speed enhancement, but in the long run it may not be worth it.

Colour space

Colour space 

A device colour space describes the range of all colours that a camera can pick up, a printer can print, or a monitor can display. An editing space, on the other hand, is grey balanced colours with equal amounts of Red, Green, and Blue appear neutral. Editing spaces also involve changes of lightness, hue, or saturation and are applied equally to all the colors in the image.

What a colour space contains - Basically imagine a box that contains all different colours, the further away from the centre of the box, the colours become more saturated, etc. red towards one corner, Blue towards another, Green towards the third and a purple colour for the fourth. A Cyan, Magenta, Yellow colour space works the same way, except that the primary colours are CMY rather than RGB. In general, you want to use colour spaces that are as large as is practical.

YUV - YUV colour space is a bit unusual. The Y component determines the brightness of the color (referred to as luminance or luma), while the U and V components determine the color itself. Y ranges from 0 to 1 (or 0 to 255 in digital formats), while U and V range from -0.5 to 0.5 (or -128 to 127 in signed digital form, or 0 to 255 in unsigned form).

One neat aspect of YUV is that you can throw out the U and V components and get a grey-scale image. Since the human eye is more responsive to brightness than it is to color, many lossy image compression formats throw away half or more of the samples in the chroma channels to reduce the amount of data to deal with, without severely destroying the image quality.

Image capture

Image capture

Image capture is process of capturing the still image, this can be achieved through more than one method:

Scanners - Scanners are a type of computer hardware used to make digital prints of photos and documents, allowing users to print, copy or fax the material. The basic function of a scanner is to make a digital copy of a picture or a document. The digital copies can then be manipulated by the user and printed, copied or sent digitally anywhere in the world. Scanners are most often used by the general public to make copies of photos or important documents.

Digital cameras - Digital cameras are the latest type of camera on the market, they are able to capture images digitally using a sensor, unlike their predecessor that used film to capture images, the images then had to be developed. Digital cameras have an optical system, typically using a lens with a variable diaphragm to focus light onto an image pickup device. The diaphragm and shutter admit the correct amount of light, just as with film but the image pickup device is electronic rather than chemical. Digital cameras can display images on a screen immediately after being recorded, and store and delete images.

   

Resolution - resolution is a measurement of the output quality of an image. The most common units to measure resolution include: PPI (pixels per inch), DPI (dots per inch), LPI (lines per inch), and SPI (samples per inch). PPI or "pixels per inch" is the term you will see most often when selecting a resolution for your images in photo editing software. Pixel is an abbreviation for "picture element." Millions of pixels make up the image of paper and text that you are viewing on your screen right now.

Storage - Storage can come in different forms, for example memory cards can be used for technology such as digital cameras, computers are able to house a built in hard drive. All memory devices such as hard drives and memory cards have various memory spaces, the larger the memory, the more files the storage device can hold. File size is measured in bytes, bytes represents a single character, digit , or symbol of data. Each byte is composed of 8 bits. A kilobyte holds 1000 bits, a megabyte holds 1,000,000 bytes, a gigabyte holds 1, 000,000,000 bytes and a terabyte is 1,000,000,000,000 bytes.

How to make a portfolio

Graph specs

Page templates - A page template is a page that can be customized, it would include text, fonts, style, images and so on. There are several important purposes of page templates, I will begin to start listing them below:

• Planning/ sketching - It is always useful to plan and sketch out your work; this allows you to have a reference and also see how your work will potentially look. You can also change anything on your planning at any time, this will make it easier being able to look back at your planning's while creating your final work.  

• Creating own - It is important to create your own as you know more about yourself than anyone else, this includes colours, fonts, and the overall layout, all of this adds together to show your personality.

• Skills and capabilities - Throughout your pages it is important to show off the skills you have in your own work field, by doing this you are able to also show the capabilities and the potential you have. You could include images of your work, for example if you're a photographer you should show your own personal favourite photographs and explain what makes it a good photo, i.e. composition and camera settings.    

File formats

File formats are the type of files and settings that are recommended for portfolio production, the correct settings and file types used for within the portfolio pages have to be correct to avoid any problems.

Resolution - The resolution should be at the settings of 300 dots per inch (DPI) this would ensure there is no distortion when printing as the quality of the file is at the maximum. 

Images - All images should be saved as either a JPEG, TIF or PNG file type, all of these file types are suitable for portfolio work as they are recommended file types for printing. I would recommend a JPEG file as this file compresses the data to be smaller in the file by using lossy compression. The image quality stays high enough within the portfolio pages. 



  

Printing

Printing is one of the most important parts when it comes to portfolio production, the pages you print are for the final portfolio, this makes selecting the correct colour mode essential.

CMYK - The portfolio work created has to be in the colour mode CMYK in order to print, this is the only colour mode that allows us to print onto paper. Please make sure you select the CMYK colour mode and not RGB colour mode in your Adobe Photoshop settings. The RGB colour mode is used for electronic displays such as CRT, LCD monitors, digital cameras and scanners. CMYK is a four color mode that utilizes the colors cyan, magenta, yellow and black in various amounts to create all of the necessary colors when printing images. The K colour, or black, is used to completely remove light from the printed picture, which is why the eye perceives the colour as black.

Saving

When working, it is important to keep saving you're work as you go along, it is a quick and simple process and can prove to be very important if anything was to happen such as the computer crashing. A easy shortcut to do this would be to press (Ctrl+S). 

Audience needs 

Easy to read - It is essential that all work is easy to read, this way the reader won't get board of sentences dragging on too much, always remember to be clear and to the point. 

Professional - Always remember to write in a professional manner and have a professional layout, this will present yourself as a professional person to the audience which is key for a good first impression.

Visual style  

Colour theory - Depending on the subject of your portfolio, a suitable colour that fits is necessary, looking into colour theory may help you when choosing correct colours for your portfolio. A few examples i can provide would be, blue is a mandatory colour, it is a colour that most people would like, it's a safe colour to go with. Green is an action colour, if you're an active outgoing person and you write about this in your work, this colour could be the right choice. The final example i will give is red, red is a colour that stands out, and is also seen as danger, this colour could be suitable depending on who you are. Looking into colour theory will explain more and help you decide on colours.  

Shape theory - Like colours, there is also a theory to certain shapes that when used could better your portfolio. Shapes can be used to show progression and continuity, for example a circle is a shape that shows continuity, by using a shape such as this the portfolio pages would have a better flow to them. Arrows are another good shape, arrows show progression, by adding these in a portfolio, it could demonstrate the progression of your portfolio pages. Please look into shape theory for more ideas.       



Picture element

Picture element (Pixel)

The "picture element" of an image is the smallest aspect of an image, it's a rectangle shaped area of an image, when many pixels are put together we get the final result. 











So what do all of the pixels create?

A digital image is made up of many pixels, the more pixels the higher quality of the image. For example if we were to have a small image it may appear high quality, then if we were to make the image larger we would see the image pixelate. This is due to the image loosing pixels in order for the image to enlarge, thus becoming more pixelated.
(See images below that demonstrate this.)   

Image resolution

The image resolution is the count of pixels (height x width) the more pixels, the higher the resolution. A good example of this would be in televisions, an HDTV would have a higher definition/ resolution due to more pixels. 

The image below shows the comparison between a high definition images compared to a low definition one, you can see the difference in the number of pixels effecting the quality.