Unit 19 Digital Graphics
for Interactive Media: Task 1
In this article, I will be writing about the theory and applications of
digital graphics technology, and how they are used to create interactive media.
Applications of interactive
media graphics:
Interactive media, usually refers to an app, service or website,
digitally programmed to be interacted with by the user. It can contain text,
moving images and animations. Interactive media can be applied to any kind of
digital device, including computers, laptop, tablets, and phones.
It can be used and applied in multiple ways, some include;
o
Rollover buttons – this is when you move
your mouse over a button and it triggers a response. Often used on websites and
DVD menus.
o
Navigation bars/menus – these are
commonly used on websites, when you roll your mouse over an option, it shows
sub categories. This helps with communication part of the design. Causes less
clutter.
o
Animated graphics/gifs – the most common
format for animated graphics is a .gif file. An animated gif is a rudimentary
file type, uses a limited pallet of colours (256). Gifs can be embedded into
websites to add different kinds of graphics to draw in the reader’s attention,
or provoke them to click on it. More examples of animated gifs can be viewed
here: http://9-squares.tumblr.com/
o
Web banners, a banner is a
large graphic, usually advertising something or containing a logo. Below is an
example of a web banner being used on a site, with their social links being
displayed bottom right.
o
Logo graphics, these are
graphic images, used to represent a company. They are used for branding, so
when you see this logo, you know exactly what company they are and who they
represent.
o
Screen icons, similar to logo
graphics, however these are used to communicate a notion or action. Icons like
these are made in programs like adobe illustrator, and commonly saved as a
vector image, like ‘.svg’. This lets them be infinitely scaled without losing
quality.
o
Backgrounds, are large images
used to fill the wallpaper of a website. They can give us an idea of what a
website is about, or give us a comforting atmosphere or communicate a certain
aesthetic.
o
Texture graphics, these are
normally seen in games, to add a texture to an object. This is a graphic,
usually .png or .jpg file. Which is then added onto an already existing model. Seanlmcp.
(October 15, 2014 ). Applications of Interactive Media Graphics. Available:
https://seanlmcpunit19.wordpress.com/2014/10/15/applications-of-interactive-media-graphics/.
Last accessed 11th Oct. 2018.
Pixel:
When creating graphics for interactive mediums, it is important to think
about the resolution. Every image online is made up of pixels, zooming into a
picture very closely, makes the pixel squares visible. This is called a picture
element (image below of what a picture element can look like)
Social
impacts of the use of IT. (4th December 2013). Picture element. Available:
http://raybro06048325.blogspot.com/. Last accessed 4th Oct. 2018.
The higher number of pixels your image has, the higher resolution your
picture will be. It is normally read as width × height, with the units in
pixels. For example, 1080p is a HD resolution, and it is written as "1024
× 768", meaning the width is 1024 pixels and the height
is 768 pixels. Most resolutions are made with a laptop/computer screen
monitor in mind, however with smart phones becoming more popular, and more
people accessing the web on their phone, companies have to consider what kind
of resolution people are viewing their websites on.
It is also essential to know the DPI (dots per inch), there are two
common resolutions that we use, notably 72dpi is for screen, while 300dpi is a
printing resolution.
Another thing that differs from computers and phones are the intensity
of the images that can be viewed. This even varies from computer to computer.
What may look quite low in intensity on one monitor, on another monitor it
could look very bright and contrasted. Especially considering the different
brightness and colour modes that computers, laptops and phones all use.
While working in a digital medium, we use screens to display our images
and graphics, the colour space of the monitor is just as important as the
colour space we are working. (sRGB and RGB 1998)
Raster & Vector images:
Raster and vector represent two different types of ways to create an
image. To put it simply, raster images are made up of pixels, that can be seen
when zoomed in. Because raster images are made up of pixels, they can be used
to shade precisely down to each pixel, which makes them good for creating
images. Common file extensions for raster images are; .bmp, .png, .gif, .tiff, .jpg/jpeg, .psd, .ppm, and .tiff.
Vector images, on the other hand, are created using shapes, polygons,
curves, and lines that are connected by dots. This means vectors can be
compressed into smaller sizes and not lose their quality, unlike raster images
which can lose quality while sizing down. Vector images are usually in files
formats such as; .ai, .eps, .pdf, .svg,
and .fla.
Admin.
(6 Dec, 2015 ). Raster Vs. Vector Artwork. Available:
http://www.envymytee.com/raster-vs-vector-artwork/. Last accessed 5 Oct, 2018.
Vector images are useful for creating logos, as they don’t lose quality
in compression, while raster images are used for most web graphics displayed
online digitally.
JPGs don’t contain all their quality because the format used is a lossy compressed
file format.
Social impacts of the use of IT. (4th December 2013 ). Digital
Graphics for Interactive Media. Available: http://raybro06048325.blogspot.com/.
Last accessed 11th Oct. 2018.
This lowers the image quality when it keeps getting opened and closed,
however it also makes them use up less data, so they are useful for
transferring and sharing with friends and family.
Although JPGs can be saved in high quaility.
Over time it will lose its quality, which is
why,
in a professional environment, different types of files should be used, like PSD or TIF. This is because these are uncompressed
meaning they will keep all of their high quality and they will maintain layer
structure, which is inclusive of masks, layer masks, and adjustment layers.
Bit depth:
Bit depth refers to the colour information stored in an image. The more
bit depth an image has, the more colours they can store.
1-bit images are monochrome – they can only display 2 values, 0 (white)
and 1 (black).
8-bit images can contain 256 different colours, and 24-bit can store
over 16 million different colours in an image.
For example, this is what an image looks like, when it decreases in bit
depth;
University of South Florida. (2018). What
is bit depth?. Available: http://etc.usf.edu/techease/win/images/what-is-bit-depth/.
Last accessed 5 Oct, 2018.
Colour space:
This is also known as the colour system, and it is defined as a range of
colours. I will be listing the four most popular colour spaces;
Greyscale: this is described as a range of grey shades from
white to black. Greyscale colour spaces do not usually contain colours like red
and blue – it is all in monochrome.
RGB: this colour space stands for ‘red, green, blue’, and is based on the
idea that the colours red, green, and blue can be used to create every other
colour. Red and green produce yellow, blue and green make cyan, and red and
blue create magenta. When these three colours come together in equal amounts,
they make the colour white.
Social impacts of the use of IT. (4th December 2013 ). Digital
Graphics for Interactive Media. Available:
http://raybro06048325.blogspot.com/. Last accessed 11th Oct. 2018.
YUV: YUV refers to luminance and chrominance. This kind of colour
space is more efficient coding, and when used, can reduce the bandwidth.
HSV: this colour space is known as ‘hue, saturation, value’, and sometimes as
HSB,
short for hue, saturation and brightness. This colour space
is normally used in place of the RGB model in graphics, because once a colour
is picked, it can be easily adjusted by adding black of white.
Image capture:
Image capture refers to the process of taking a picture of a psychical
object, and turning it into a digital image.
Say you want to copy a picture you’ve drawn onto the computer. To
optimize the quality of your picture, it is recommended to scan it under a
digital scanner and transfer it online.
But if you do not have a scanner, then the next best option is with a high-quality
camera, photographed in natural daylight.
Resolution & storage:
When uploading a picture online, you also have to think about the
resolution that it comes in.
Common resolutions for professional companies to work in, are normally 720p
(1280x720), 1080p (1920x1080), and 4k (3840x2160).
However, the higher the picture is, the more file space it takes up.
This is important to think about, because although you might be saving every
picture in 4k, this can eat away at memory space. One way to combat this, is
saving pictures as jpg, as this doesn’t use as a .png, even though it may lose
quality. If quality is something you can’t compromise, then invest in having
multiple hard drives to save on CPU space and memory.
Optimising:
Optimising is important. When you think of a website, every image has to
load, which can be very time consuming. To cut this loading time, you need to
decrease the size of the image. The main three areas to drop an image size are
bit depth, resolution, and dimension.
By downsizing an image on a website, it improves the general
performance, as it doesn’t have to spend time loading.
Target Destination:
This is where you want the image, graphic or object to be
placed. It can be placed above or under words, however it must fit on the
webpage.
Intended Image Output:
Working out the intended image output is important, as it lets us work out
how the image is going to appear on the webpage, and also how fast the image
will be processed.
Dimensions:
Figuring out the dimensions (width x length) of the image can help us to
coordinate it along the webpage, or to decide to make it fit mobile dimensions.
Resources used:
No comments:
Post a Comment