Monday, 4 May 2015

File Extension

File Extension:
.PNG = Portable Network Graphics. It also uses a lossless compression and is normally used to store graphics for web images. This format was developed in response to the limitations with the GIF format. Its primary use is to increase colour support. PNG can use an 8-bit transparency channel; this allows the image colours to fade from opaque to transparent and can allow an image not to have a coloured background it can just be completely transparent. however one downside to PNG images is that they cannot be animated like GIFs, however, a similar format to PNG, .MNG format can be animated. PNG files do not have a CMYK colour support because they are not intended for professional use in graphics. PNGs are supported by most Web browsers. 
.GIF = Graphics Interchange Format. This file format is mainly used for images on the web. Different to the JPEG format, GIFs use lossless compression; meaning that the quality of the images stays the same. GIFs also can store there data using indexed colour. This means it can include a maximum of 256 colours. 
.JPG/JPEG = Joint Photographic Experts Group. It uses Lossy compression. This format is the standard format used. It is able to be up to 24-bit. In one of my assignments I was asked to edit a number of images in an assignment i used Photoshop to edit these images however had to convert the files to other formats after i realised that the .PSD file type was taking all of my memory up and therefore had to convert them.

Image Resolution

Image Resolution: is how an image is shown the lower the resolution the harder it is to see the image the higher the better, however one issue with higher resolution is that it can slow down a PC loading time as it has to load more pixels compared to a low quality images which has less pixels to load. When editing images one thing that i was asked to do was increase the resolution of an image to make it look sharper and better off to show for a college open day.






Image Capture

Image Capture:
Digital camera: Digital cameras have become better and more powerful with good optical lenses and high resolution. Picking a digital camera means finding the best mix of lens, price and the amount of mega pixels it has. The lens should allow you to control how much you want in the picture, this is called optical zoom. Digital zoom is carried out on a computer with photo-editing software, such as Photoshop. The CCD determines how many mega pixels a camera has e.g: a 12 mega pixel camera is able to take pictures in a variety of sizes, the maximum being 12 million pixels; this is big enough for a 4000 x 3000 picture to be taken. When a picture has a number of pixels, editing small parts of it and zooming it in is easier. With some images i had asked to edit i went out before starting the assignment and was asked to take a number of photos of college life that I could edit so that I was ready for editing when we started the assignment.









http://ecx.images-amazon.com/images/I/816ojoGcyzL._SL1500_.jpg


Scanner: scanners are the best way to put paper images into a computer. They work similar to photocopiers, with a bar that moves across the length of the scanner under the glass. The paper that is going to be copied is placed face down onto the glass window and a mechanism moves back and forth underneath the glass. Light bounces of the paper from a lamp and reflects into the lens. This makes the image into the CCD; this digitises the results via an analogue-to-digital converter. It the sends this information to the scanners hardware and then to the PC. The resolution of scanners has rapidly increased in the past few years and they are no longer a standalone piece as they can be integrated into printers. It is rare to find a scanner with less than 600 dpi. Even though you don’t need more than 300 dpi for scanning a photo. The most common dpi is 1200 x 2400 dpi, and the maximum resolution is 9600 dpi. I was asked to scan in an image onto Photoshop and edit it much like I had for the other images however this image i had not taken but still had to use techniques that i had learnt from editing the other images.












Resolution: Is the number of pixels on-screen, it is expressed in terms of the number of pixels on the horizontal and vertical axis. The higher the resolution on screen, the more pixels to create the image, the sharper and clear the image displayed is. When editing images one thing that i was asked to do was increase the resolution of an image to make it look sharper and better off to show for a college open day.











Storage: File Management: This involves the methods used to keep care of work saved to the hard drive or USB drive, including the following:

-File naming: This is naming a file to what it is, important to name it to what it is so its easier to find.

-Folder structure: This one of the most powerful tools that IT professionals can use to help organise all their work. As putting everything in a folder allows a certain structure to be created allowing you to know where everything is located. There are various ways to organise folders. The best one is the one that is more suited to the user. 

-Moving files: this involves cutting it from a folder then pasting it into another folder. You might need to move files around when cleaning up your folder structures, so that the files are all in the correct locations and are easy to find. 

-Deleting files: means removing them from the drive so they cannot be used again. so that you can remove files that you don't need, that are taking up space such as temp files.

Vector Graphics

Vector graphics: Vector graphics are images made up of shapes. One thing that is good about them is that they don't lose resolution when resized. Which allows you to increase or decrease the size of the image and it will have the same amount of detail as it had before being resized, they have a small file size. This makes vector images great for art work and complex diagrams as they don't take up much memory even if there is a lot on a document.


Vector graphics are comprised of paths instead of pixels. These paths are defined by starting and ending paths an example of this is using the Pen Tool on Photoshop which allows you to create images with paths. These paths can be lines, squares, triangles, or a curved shape. Vector graphics are not made up of pixels.




I have created vectors in Photoshop for editing images, it is a useful tool as it allows you to draw on a PC without using pixels and and creates a full image out of shapes and can easily be used for logo creation.



Logo Graphics

Logo graphics: The logo of businesses can be either a raster or vector and usually have something to do with the company; logos have to represent the brand in one way or another and cannot be completely about the opposite of what they have to create.
one positive of creating a logo with a vector graphic is that once zoomed in all that can be seen is the actual shapes themselves instead of the pixels also bitmap images tend to stake up more memory than vectors as they have to save every pixel in an image compared vectors which have to save each shape created therefore allow less memory to be needed when saving.



http://www.customlogographic.com/custom-logo-graphics25/custom-logo-graphics8.jpg








I have edited a number of logos when creating work for my course i have not only edited the logos but have also created a few for my work, i have also produced a number of thumbnail sketches of logos for my work and know what a logo must consist of.

Bit depth

Bit depth: is used to describe the number of bits used to determine the colour of a single pixel. The exact colour of a pixel is a blend of the three components of the colour spectrum, RGB (Red, Green, and Blue). The number of bits that are used to represent each pixel determines how many colours or shades of grey will be displayed in the image. For example in 8-bit images, the colour monitor uses 8-bits of information for each pixel; this makes it able to display 2 to 8th power different colours or shade of grey. Allowing it to display 256 colours. There are many bit-depths/colour-depths that can be used for images. These are: 1-bit monochrome, 8-bit grayscale, 8-bit colour (Known as 256-Colour mode), 15 or 16-bit colour (known as high colour), 24-bit colour (known as true colour), 30, 36 or 48-bit colour (known as deep colour). It can be measured by BPP (Bits Per Pixel), the value which indicates how many bits have been used in an image.













http://www.kirupa.com/images/rgb_image.png


Bit depth refers to all of the colour information stored in a single image. The higher the bit depth of an image, allowing it to store more colours. A 1 bit image only shows two colours, black and white. Whereas an 8 bit image can store 256 colours and a 24 bit image can store around 16 million colours. The resolution of an image affects the file size as well as the bit depth drastically affects it as well.

High colour only uses two bytes of information. This is done by splitting the 16 bits up, 5 bits for blue, 5 bits for red and 6 bits for green. This results in 32 different variations of blue and red but 64 for green. This means there is a slight loss of image quality because of the reduced colour precision. High colour is sometimes used instead of true colour because it uses less video memory and the file sizes are smaller compared to true colour which takes up more.  












True colour is given its name because it uses 3 bytes of information, one for each blue, red and green to make up each pixel in an image. A byte has 256 different values; this means that each colour can have 256 different variations of that colour. This allows for over 16 million different colours to be used. This allows graphic designers to be able to create realistic looking images. This is because the 16 million colours that can be used is more than the human eye can see. True colour is a necessity for high quality work, such as photo editing, graphic design, etc. However one downside to it is the amount of video memory it takes up.












Raster Images

Raster Images:
Are images that are created up by pixels in a grid, raster images are also known as bitmap graphics and they rely on resolution. Resolution is how many pixels are in that image, which is normally seen as ppi (pixels per inch). an issue with resizing bitmap images is that as soon as they size is changed from what they originally are they loose quality when up scaled however there quality can increase when de-scaling an image this increases the image quality because you are increasing the ppi. When you enlarge a bitmap image the edges of it go all Compression techniques, these are used to reduce the size of a file. The size of a file is important, as a file may need to be sent to another location. Smaller files arrive at the other location faster the big ones. The Only way to make a bigger file smaller is to compress it.



http://www.printcnx.com/wp-content/uploads/raster.jpg
When editing some images for a previous task i had to use my college logo which was a raster image i had to make sure that it was okay to put onto the images without any of the pixels increasing and stretching when i increased the image size.






Colour Space

Colour space: This is the organization of colours or can be known as the digital colour palette. The colour space describes the range of colours that a camera can see, a monitor can display and a printer can print. Colour spaces such as Adobe RGB or sRGB are device independent. They also say the colour range which can be used. this is a system for organizing colours numerically and is also called “Colour model”. The mainly used colour spaces are RGB (Red Green Blue) which is used for cameras, scanners and monitors, whereas CMYK (Cyan Magenta Yellow Key) is used for printing, HSV (Hue, Saturation, value) which is used by artists and YUV (Luma Colour Difference) which is used for video. 













 
The colour space applies numbers to the colours which can be used and it is a three-dimensional object. This object contains all the colour combinations. It works like a paint palette works; each direction in the colour space normally represents some aspect of colour, such as lightness, saturation or hue.
In work I am completing at the moment i have been asked to pick a colour scheme i have looked between RGB and CMYK and have decided to use RGB as it has a wider vibrant variety of colours to use compared to CMYK.

Compression

Compression: 
Compression techniques are used to reduce the size of a file. File size is important if the file needs to be sent to another location. Smaller files arrive at the other location faster as they have less to send compared to big ones. If you want to send a bigger file quickly it needs to be compressed so that it takes less memory up. 













Lossless Compression: Lossless compression is the technique where no data is lost through the compression. An example, a file which is 5.5MB could be reduced to 5MB or less an example of a file that uses this is a GIF file.


http://petapixel.com/assets/uploads/2012/10/lossdng.jpg

Lossy Compression: This technique data is lost. This is done by removing colours that are not used. however one issue with this technique is that it reduces quality of the image. However it does reduce file size.
When creating images to promote the college i had a number of images that were Photoshop files, I noticed that these were taking up a lot of memory on my hard drive and had to compress them down to different formats to save memory.

Screen Icons

Screen icons: Application icons used to launch an application it’s used as navigation mostly for mobile devices however is also used on computers as well, they are used and have a hyper link in to launch every application (form of GUI)
screen icons can vary between the sizes of 16 X 16 to 128 X 128,





http://david-smith.org/resources/iphonesixhomescreen.png
I have been asked to create screen icons and so far have completed thumbnail sketches of these icons however i will have to create these on the PC with working hyper-links to go to other pages. 





Pixel

Pixel: Pixel is the short name for Picture Element. Its the basic programmable colour capable on displays and images. Pixels are single point on an image and are a Raster Graphic. Computer monitors display pictures by splitting them up into millions of pixels; these pixels are arranged into rows and columns. Once the pixels are put close together, they creates a clear image, the image looks crisp however if zoomed into far enough you can distinguish each pixel. The size of a pixel on screen depends on what the resolution on the monitor is set to. If the monitors display is set at maximum resolution, the actual size of the pixel will be the same as the monitors pixels. If the resolution is set to smaller than the display maximum resolution, the pixels will be larger than the physical size of the screens pixels.






When editing images in a task i had to zoom into images so far so that i could see the pixels and edit things in the image this way so that i could change parts of the image that i wasn't able to with other tools in Photoshop.







Optimising

Optimising: is changing how an image looks and making it go to the point that it cannot be changed any more, such as changing its bit depth, resolution and dimensions, which allows it to bring out the best quality of an image. 
Target destination: is when moving an image on an image across from one folder to another location someone where else in the computer, this is known as the target destination as it is where the movement will end and be placed into he folder it has been told to be moved to.
Bit depth: is used to describe the number of bits used to determine the colour of a single pixel. The exact colour of a pixel is a blend of the three components of the colour spectrum, RGB (Red, Green, and Blue). The number of bits that are used to represent each pixel determines how many colours or shades of grey will be displayed in the image. For example in 8-bit images, the colour monitor uses 8-bits of information for each pixel; this makes it able to display 2 to 8th power different colours or shade of grey. Allowing it to display 256 colours. There are many bit-depths/colour-depths that can be used for images. These are: 1-bit monochrome, 8-bit grayscale, 8-bit colour (Known as 256-Colour mode), 15 or 16-bit colour (known as high colour), 24-bit colour (known as true colour), 30, 36 or 48-bit colour (known as deep colour). It can be measured by BPP (Bits Per Pixel), the value which indicates how many bits have been used in an image.
Bit depth refers to all of the colour information stored in a single image. The higher the bit depth of an image, allowing it to store more colours. A 1 bit image only shows two colours, black and white. Whereas an 8 bit image can store 256 colours and a 24 bit image can store around 16 million colours. The resolution of an image affects the file size as well as the bit depth drastically affects it as well.
Resolution: is how an image is shown the lower the resolution the harder it is to see the image the higher the better, however one issue with higher resolution is that it can slow down a PC loading time as it has to load more pixels compared to a low quality images which has less pixels to load.
Dimensions: are the height and width of an image, changing the dimensions of an image can cause it to change size such as increasing the dimensions makes it bigger and decreasing them make it smaller. When changing them the amount of pixels stay the same the only thing that happens to them is that they get more space between them.
Intended image output: intended image output is needed as it allows a creator to know what specific dimensions an image has to be set at such as it having to fit a specific webpage, however has to also be a specific size so that I can be downloaded quickly as well.
I was also asked in a task when creating images to optimise the colours in an image i did this by changing specific colours such as increasing the level of green on the image RGB so that the green would change, in this image i used it to change the grass so that it didnt look dead and was able to make it look like fresh grass.

Web Banners:

Web Banners:
A web banner is usually shown on a website and usually has to revolve around the websites theme, these are usually raster images as it is easy to create one with pixels compared to a vector which uses shapes. Web banners usually have a key component of a business such as there slogan or something catchy to entice a reader.
Web banners can be used as well to advertise a product,

I am creating an interactive media piece at the moment which i have to create a vast number of webpage sections one of these i have been asked to create is a web banner which is able to promote off what the specification has asked for.

Intensity

Intensity:
image intensity is the change of an image properties such as the gradient of a colour slowly fading out, the image changes from one colour to another and fades slowly till it reaches another colour.



http://upload.wikimedia.org/wikipedia/commons/0/0f/Gradient2.svg

I was asked to create a number of images with specific image options on them one of these that I had to create I had to change the image intensity quite vastly so that you could tell that there was a difference with the image.



Backgrounds

Backgrounds:
Backgrounds can consist of a graphic image that can be either a bitmap or a vector they a background much like a web banner usually consists of something that the site is about and is set as a backdrop for the site this is one of the biggest things and makes a look of it, it is used to make a site stand out and is usually saved as a JPEG format due to it being one of the best formats that takes up little memory.
A
 background can be used for multiple things such as a website background, mobile and tablet they have to be a specific size to be able to fit devices otherwise they will not fit and it would not work as a background.



http://www.freelargeimages.com/wp-content/uploads/2014/12/Cool_background-8.jpg
I was able to use this when i was asked to create a power point called decoding the jargon which specified on certain components of a computer, I had to make this into a presentation that looked suitable and had to use a background when creating it. 

Monday, 23 March 2015

Texture Graphics

Texture graphics: Images models render textures in later. Used a lot in video games they create he maps and models but do not render the textures of areas, characters, tools or vehicles till the end.
Texture graphics are Raster Graphics (Bitmap Graphic) it allows colour to be rendered onto a 3D object.
The original way of texture mapping was to wrapping pixels around the 3D object,

Tuesday, 17 March 2015

Animated graphics: GIF


Animated graphics: GIF
The format supports up to 8 bits per pixel of each image, this allows a single image to have a colour palette of 256 colours which are chose from a 24 bit RGB colour space. GIF’s use a compression of a LZW which is a compression type without losing much of the images quality, also GIF’s are relatively small files and do not take up much memory even though they are animated
A GIF (Graphical Interchange Format) it is a Bitmap image format that was introduced in 1987 and is vastly used over the World Wide Web.
                                                                                   http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif
GIF are useful as not only are they animated with a number of images together in a sequence surprisingly they take up little memory, and can be played on most internet browser, however the speed that they play is all down to the speed that your internet is.
I have used quite a few GIFs in my work, however i now have been asked to create one, the way i have done this is using Adobe Flash, and once i had completed creating it i converted it to be a GIF.

Navigation Bars and Navigation Menu's

Navigation Bars:
Navigation bars allow a user to see what is on a website they usually consist of 5 option and have dropdown menus allowing the user to access another page via a hyper-link.
Navigation menu's go with navigation bars and are the dropdown menus that allow the user to get to other pages when a mouse over happens once in the state of being clicked it allows the user to get to the next page via a hyper-link within the text. Navigation bars allows areas of a site to be slip up into specific sections with drop down bars allowing navigation menu's to dropdown splitting it into more sections.
 
I have been asked to create a navigation bar from scratch at the moment i have use Photoshop to build up what i want the design of it too look like and then used serif web-plus to set the hyper-links up and actually make it a working navigation bar.




Monday, 16 March 2015

Rollover buttons


Rollover Buttons:
Rollover buttons are buttons used on a site that change, such as a dropdown menu when a cursor highlights a specific area it changes state there are 3 stages of rollover buttons: Down Over and up. Down is when nothing is happening to it, it is in its original state, over is when the cursor is hovered over it activates the action and down is when the mouse is clicked onto the button and activates its hyperlink.















The use of rollover buttons allows a graphic to become more interactive as it allows the user to have some control of where they are going around the website, as it allows them to change page or website completely. Images and menus will stay in there normal
images however the secondary one will appear when a mouse goes over it however as soon as the mouse over leaves the area it will disappear. I have been asked to create Rollover buttons for a navigation bar and have used Serif Web-plus to make it, the software allows me to make a Rollover and change each state of of it so when clicked it changes to a darker colour but when highlighted goes brighter.