Isobel McKenzie: Assignment 1

Unit 19-Assignment 1
Rollover Buttons: This is a

Before

technique using javascript lets

you change the page element,
After
this is usually a graphic image,
when the user mouse rolls over
the page (normally a line of text)
it will become highlighted or
change is some way this is
shown in the images beneath.
Fanatics uses a roll over when
you go to select a team to view
the merchandise you can see in
the images that when I rolled
over Washington capitals it
was highlighted to let me know
that that was what I was clicking
on. Then once you have
selected your team there are many sub
categories such as Hats, jerseys and t-shirts
this makes it easier so that you can view the products they have to
offer that are linked with the team of your choice. This is also an easy
way to navigate along with the drop down lists. To the left are screen
shots from the NHL website as co can also just search for the
merchandise/jersey of a particular player of that team. Even for sub
categorys it still uses rollover buttons. Although both uses the
techniques of rollover buttons I think that the Fanatics one is better as it
fully highlights your option however I do think that no matter how
noticeable or not customers/views will still benefit from this feature.

Navigation Bar: Is a section of the website that displays links to other pages on the
website. A
navigation bar is a
main part of a
website template
this is usually placed
near to the top of the
website and should
generally stand out
as it is a main piece of navigation for
you as a user to find what it is that
you are looking for and also have full
control of the website as you can
view any page you want as well as return to the home page when you want to. And it is vital
for that reason as it helps the user to find what it is they are looking for quickly. Both of the

Isobel McKenzie: Assignment 1

websites that I am comparing have navigation bars. This example to the right is from the
NHL Washington caps shop. As you can see that it is clear and this was also featured at the
top of the web page. As well as the other example beneath from the fanatics website
although it is a navigation bar it shows you what you have clicked on therefore making it
easier for you to return to your previous page.

Navigation Menu: Both NHL and Fanatics

websites feature a navigation menu this list
suitable sub category for what it is you are
looking for and that are based on the
category that you are looking at at that
moment. This can be sizing, gender and
design. The example to the right is from the
NHL website and this is based off what
design of hockey jersey I am looking for. The
fanatics navigation menu is almost identical to the NHL one although there
are less sub categories. This is shown to the left again and is an example of
what i want my navigation menu to look like.

Animation
Animated gifs: Which stands for Graphic interchange format file.
This is a graphic image on a website that moves or a specialized
banner where the letters get bigger. An animated gif is a bunch of
images presented in a certain order and then makes the image
look as if it is moving. It is also looped and therefore constantly
playing and it appears that documents
never finishes arriving. They are
frequently used especially in website
banners. However neither of my chosen
websites have gifs on them there are
some valid reasons as of why, this can be because of that they
take a while to load and if the user is using a smartphone they may
not work correctly and then resulting in the website possible not
working correctly or to its full potential. The gifs that I have used as
example of what a website could use just to make it more visually
attractive and can also be shown to present what the merchandise looks like and also for the
sales of a certain player e.g. showing one of their most memorable moments.

Isobel McKenzie: Assignment 1

Web banners: A web banner is something

that can become a recognizable for the
website or company, depending on how you
use it can be to announce sales of products or
new items with a description. For example on
fanatics one of the banners is to promote the
sales of
Chicago
Blackhawks Stanley cup merchandise to celebrate that
they are the Stanley cup winner (this is shown on the
top left corner). To the right is a banner NHL website is
using to promote the sale of jerseys with also some of
the well-known names on the banner along with
people who have recently been traded or that are
prospects to also promote that you
can buy the most recent/newest
jersey of your favourite player. They
are also bright and eye catching with
little slogans such as wear your
pride this is not only information of
what the product on the banner is but
it also is a selling point to make you
think and then also want to buy their
products. The web banner also has
direct links to where you can
purchase what is being advertised.

Logo Graphics: The logographic is what represents the company or

the website and is often associated with it is also distinctive as well.
This can also help people to know
whether or not the product they are
buying is official as this can also be a
mark or trade. Just like the logo to
fanatics and NHL are obviously different
even though they are selling the same
product they have to be unique as this can
help with business and selling the product if
they are trusted then people will recognize
the brand and can also be associated with
their products this is especially if the logo is
unique. Just like with the NHL logo it is used
when anything is associated with the NHL
e.g. organizations and events. It is also
featured on official NHL jerseys (as seen on
the right) this lets people know that what they are buying is legitimate
and not a knock off product. You can see the NHL logo on the V-of the

Isobel McKenzie: Assignment 1

neck line this is normally embroider as once again another sign of being official.

Screen Icons: this is a computer icon that is a pictogram displayed

on your monitor, this helps the user to navigate a computer system or
smartphone device. As you can see the NHL website only has a few
links to there social media on sites such as
google plus, Facebook and twitter however this
is not very clear as it is at the very bottom of
the page and almost blends in with the
background as well as the icons not being very
clear or easy to see. This is also the same with
the fanatics links to Facebook, YouTube, Pinterest, blog, twitter and
google plus which offers more variety that NHL although that are
slightly clearer but still have the same placement as the NHL website
dose which can be advantage as it is also in the same place all the
time on every page. The social media icons advertise themselves as
they are recognizable and almost everyone has at least one account of the social Medias
mentioned above.

Stimulus
Client Brief: I have been approached by a marketing agency that is wanting to sell some
leisure products in the future and they have asked me to create a website that will help
promote and sell their products. The client has stated that they want their website to be
highly engaging, appropriately presented and suitable for a certain target audience. It also
needs to be easy to navigate and logical so the customer will be able to find the product with
ease and effortlessly. I need to have a welcoming opening screen to my website ae it will
make people want to browse the products to offer. I will also have to do some market
research to so that I will have an idea of what other company's websites look like that are
selling/ promoting similar products, this will also help give me an inside look on what kind of
look the client is wanting me to achieve as this is very important to attract the target
audience seen as the home page of the website is what the viewer is going to see first off
the client wants it to look appropriate for what is being sold. as well as what is going to
appeal to the target audience, and seen as the target audience is hockey fans of the
Washington caps, it will be more fitting to promote the sales of the more popular players
jerseyse.g. the fans favourite's.

Own Brief: I will be looking at existing websites which target audience is the same as my
own websites and the reason for this is I will be seeing what ideas they have used and also
come up with so that I can get the best looking site on my first time around. I want a very
simple but professional looking site that tell you all the information you need straight away so
that the costumer does not have to go looking for what they need. I will focus on new
products and special deals on the front page as this will appeal to my wide range target
audience, which will be men and women and possibly young adults that all love one thing,
Ice Hockey and The Washington Capitals with that being my target audience it does mean
that I will need to engage with all ages this will help to bring more people to view my website.

Isobel McKenzie: Assignment 1

To make my website look more official I will be using the team colours which are red, white
and blue as this will also let people know what team I am selling the merchandise of.

Market Research: I have been looking at two Ice

Hockey merchandise websites NHL Shop and
Fanatics. Both of these websites promote and sell Ice
Hockey merchandise from collectibles to Jerseys. They
are both interesting and in some ways very similar. I
feel as though Fanatics goes into more detail of the
more types of products they have and what is trending
e.g. T-shirts, long sleeved, for kids and for her as well
as a trending category.
As shown on the left.
But NHL shop Shows
the offers that have and
this take up a large
proportion on the home
page and also list all of
the team so that if you
want merchandise from
a particular team it is
easy to find this is
shown on the right.

Unit 19- Digital Graphics for Interactive

Media
Pixels
Pixels or picture elements are what makes up the image, an
image contains thousands of pixels. Each pixel is made up of
one or more dots, or a cluster of dots which make up/create an
image. The more pixels used in the picture the more high
resolution the picture will be this will also make it better quality. Pixels are presented as
squares in rows, horizontally and vertically which are all
joined together in a grid all of the pixels are the same size
and each square is a full block of colour, they are not mixed
for example you would not have a square that is half blue
and red it would just be blue or red. The dimension of the
image shows the resolution of the image by the number of
total pixels that have been included. The higher the
resolution is the more the zoom takes to be able to
distinguish between each single pixel. Over the years more
pixels are able to be used in a single image or digital
graphics this means that the way we see things on the

Isobel McKenzie: Assignment 1

computer and on are phones are very different to the 90s. To the right this is an example of
pixilation. This occurs when you zoom in or stretch an image too much the more the square
pixels will appear and become clearer.

Image Resolution: This is the amount of detail an image has. The image resolution changes when
you stretch an image for example when
you stretch an image to make it bugger
the pixels are going to become bigger
and clearer to see. The intensity of the
pixels and how clear you can see them
can also be at fault of the colour, if you
use colours that are bright such as red,
blue and yellow instead of a light tone pixel, this might also show a bright level of illuminations of a
pixel. However if you use bright colours and your image has a high resolution then the sharper your
image will appear as the more shades of a colour will be represented by very small pixels. As each
pixel has its own colour. The pixels will only have other pixels around it with a similar shade. The
brightness will also be the same in a pixel and will not change like a gradient. Above to the right is an
image that shows the more that you zoom in the more blurry/pixelated it will get.

Raster images
With a raster image pixilation occurs when you zoom
into the picture. Raster images or in other words
bitmap are digital images that are created or captured
e.g. photo. A raster is a grid of X and Y coordinates that
are displayed in a space an example of this is threedimensional images. An example of a Bitmap image is
displayed on the right. A raster image file is able to
identify which of these coordinates to illuminate in
monochrome or colour value. The raster file is
sometimes referred to as a bitmap this is because it
contains information that is mapped directly onto the display grid. A raster file is normally larger
than a vector graphic image file. It is also hard to modify your raster file without the loss of some
information, however there are now software tools that allow you to convert a raster file into a
vector file for refinement and changes. Raster images are used in programmes such as Photoshop
etc. Example of types of raster files are: JPEG, TIFF, BMP and GIF files.
JPEG: Stands for Joint Photographic Experts Group, it can store more colour that a GIF but it does
normally result in the loss of quality. JEPEG are often used for images e.g. on the web.
TIFF: Stands for Tagged Image Format. This is a format for storing grey-scale image data. It is the
standard format for scanned images as well as exporting grey-scale images on Microsoft windows
and OS operating systems.

Isobel McKenzie: Assignment 1

BMP: Stands for Best Management Practices, this is a file format that is used to store bitmap images
for example on Microsoft windows and OS operating systems.
GIF: stands for Graphic Interchange Format. This mean that the file for the format contains a graphic
or pictures that are able to move, this is only around 3 seconds long and a sequences of picture that
move.
PSD: Stand for Photoshop image file and is used on Photoshop which is a graphic editing program.
The file format consists of layers that are joined together.
The pixels make up the final finished image. When a raster image is viewed the image is smooth and
sharp for a photograph or drawing. However when stretched the pixels will become more obvious,
this isnt good. The smaller the resolution, the smaller the digital image file but this does mean the
easier you may be able to see the pixels.
There are two types of image file compression and these are lossless and lossy. Lossless compression
is reducing the file size whilst still preserving a perfect copy of the original uncompressed image this
dose mean that the file size is near enough always bigger than lossy file compression. Really the use
of lossless compression is to avoid having to recompress an image once you have finished editing it.
Lossy compression is where a representation of the original uncompressed image will be showed
this may look like a perfect copy however it isnt. Lossy file compression is able to achieve a smaller
file size than lossless compression, however lossy compression dose trade the image quality for a
smaller file size.

Vector Images
Vector Images are not made up of pixels. Vector graphics are made up of shapes, these are defined
by a start and end point as well as other points, curves and angles. The path can be a triangle, a
square or a curved shape. These paths can be used to create a
simple or complex drawing/ diagram. Paths are also used to
define the characters of specific typefaces. Because vector- based
images are not made up of a specific number of pixels/dots they
are able to be scaled to a larger size and not lose image quality or
end up being able to see the pixels. Unlike a raster image where if
you zoom in to much the image will very clearly become
pixelated. However when a vector image is zoomed in on the
edges of the image will stay clean and smooth. This comparison is
shown on the right. This is what makes Vector graphics ideal for
logos, than can be small enough to be put on something like a
business card or big enough to be shown on a full scale billboard.
The common types of Vector graphics are Adobe illustrator, ESP
files and Macromedia freehand. Flash animations also use vector
graphics, as they scale better and take up less space than a
bitmap image.

Isobel McKenzie: Assignment 1

EPS: Stands for Encapsulated PostScript they are mostly self-contained. PostScript documents that
are an image or drawing can be use with another PostScript document. This file format is used for
graphics, image and text. PostScript file format is compatible with PostScript printers and is used to
transfer files between various graphic applications. These files will also print identically on all of the
printers that are compatible as well as appear the same in all applications that are able to read a
PostScript format. Eps files are mainly used to store font and vector imager information.
FLA: is a file format that is used on flash and to add animation, video and interactivity to web pages.
Flash is very frequently used for advertisement and games. As you are able to compress the file
format that is also viewable on the web with flash software. It is a file that can be edited and
converted into SWF for professional uses.

Bit Depth
Bit Depth refers to the colour information that is stored in the image. The higher the bit depth is
the more colour that can be stored. A simple image that is 1 bit image is only able to show two
colour and these are black and white. This is because
the 1 bit is only able to store one of two values, 0
which is white and 1 which is black. Whereas an 8 bit
image has the possibility to store 256 possible colours
and a 16 bit image can display around 16 million
colours. As well as the images resolution the bit depth
determines the size of the image. As the bit depth
goes up so does the size of the image as well as the
colour information that has to be stored in each pixel
in the whole image. Its not just the image that has a
bit depth it is also your display. You are able to change
the bit depth of your monitor by changing the display
properties.

Monochrome: means one colour this can be Black

and white or grayscale image
(as shown below) it allows shades of the same colour to come into the
image which is what gives monochrome images depth, detail and effect.
This can aslo be done with verious tones but only of one colour. People
genrally think of monochrome as black and whir but as long as it it one
colour/ different shades it is monochrome.

Isobel McKenzie: Assignment 1

High Colour: is a method of storing information on your computers memory,

one pixel is represented by two bytes. Normally the colour is represented by all 16
bits (high colour), however this can depend on what your device suports 15-bit
high colour or not, although 15-bit is still classed as high colour. This is also the
reason bitmap images quality can decreas when they are enlarged as the
pixels become clearer. Of course the higher the number of bits the bigger
the colour scale and the more shades of coloure that can be used that
are representer by one pixel. And once you reach 16 bits which is 65-536
colours this is known as high colour.

True Colour: is the specification of the colour of a pixel. 24- bit value is
genrally what we see displyed on are screens. This allows a possibility of
up to around 16,777,216 possible colours. However many displys today
only support a 8-bit colour value only allowing there to be around 256
possibel colours. The number of bits that are used to define a pixels
shade of colour is its bit-de pth. True colour is known as 24-bit colour.
There are some new colours display systems offer 32-bit colour mode. Extra byte, called the alpha
channel, this is used for control and special effects information.

Bits per pixel: bpp is a refreeze to then number of bits

of colour that is within the three colour channels. As well
as represents the colours that ate available within each
pixel. The higher the number of bits the higher the
number of colours that can be included within the graphic
every single colour weather it is just a different shade is
represented by a single pixel.

Colour Space: colour space is useful conceptual tool that is used

for understanding the colour capabilities of a particular device or
digital file. When you try to reproduce a colour on
another device, the colour can show spaces
weather you were able to retain the
shadow/highlight detail and colour saturation,
and by how much that it may be compromised.
Greyscale: Greyscale is made up of different
shades of grey that form together. Red, Green and Blue will also have the same
intensity space as the RGB colour. The reason of this is that there is less
information need for each pixel. The intensity of the grayscale and RGB images
will be the same because with both the pixels need less information and less
pixels when the intensity of the colour is decreased.
RGB: RGB is made up of red, blue and green. These colour when altogether make up the colours that
can be seen on your display screen on your device. These three colours can be used to make up any

Isobel McKenzie: Assignment 1

other colour for an image. The RBG is popularly used for game graphics and also the human visual
system works the similar to the colour space.
YUV: This colour space is what is used in TV and for videos. The colour information is used for
luminance. The Y is used at full bandwidth and chrominance U.V is used at low/ reduced bandwidth.
Y stands for luminance and chrominance for U and V.
HSV: HSV colour space stands for Hue, Saturation and Value. Hue is the actual colour and the
richness and vibrancy of the colours are called the saturation this is how bright the colour appears
and the light that illuminates the object is called the value. Y works best when the image is at full
resolution but U and V are not as good of quality.
CMYK: CMYK colour space is best used for printing as it is good quality and clear. These are the four
colour that are mainly used for printing as it stands for Cyan, Magenta, Yellow and black. This is
mainly used for vector graphics as no matter the size there will still be a high quality.

Image Capture
To capture an image you will need some sort of device to
do so this can be a smartphone, scanner or camera etc. the
better quality of pixels/ higher resolution your device has
the better quality the picture you take will be. Resolution is
the amount of detail that is in each picture when it is
captured, this i9s measured in megapixels the higher the
resolution the better the quality however the sharpness of
the image will depend on the optics of the lens that is
being used. However there is now computer software that
can improve the quality of your pictures even if the devise
that you took the picture on was not that good. Each
devise that you use will have some kind of internal storage
this is generally some form of SD card , the higher quality
of your pictures the more storage that will be needed as
there are more pixels to each photograph to be stored.
One transferred to a computer and put in file storage, it is likely that automatically they will be put
into some kind of order whether this is chronological in date of when taken or size. These are the
most popular resolutions:

256x256- found on cheap camera phones

640x480 quality low but used for images for the web
1216x912 good for printing pictures
2240 x 1680 the best for good quality prints with no loss of quality and captures the most
colour

Technology has change's and so has the way we control are visual information. Digital cameras have
adapted over the past 20 years. Today cameras dont have to be taken to get there images
developed as they are now digitally processed aromatically and we are now able to store are images

Isobel McKenzie: Assignment 1

on are computers. However some cameras like film cameras do still need to be developed so that
the images can be seen.
The three primary colours combined make up the full colour spectrum. To capture colour means that
to get the most full colour image as possible.
Handheld scanners do the same thing and are almost exactly like flatbed scanners but they are just
of lower quality.
Flatbed or sheetfold scanners are the most used scanners. The item that you want to scan is placed
between the lid and a glass plate, there also may be options where you are able to view the image
before you scan it. Scanners allow thicker items to be transferred to a computer like e.g. books or
magazines.
Exposure is to do with the shutter speed and the amount of light that is able to get to the sensor.
The more professional or higher quality your camera the more control that you have over the
shutter speed, this allows you to determine how much light expositor you want your image to have
e.g. the quicker the shutter the lighter the image.

Optimising
Optimising is used for webpages when the image is too large and it needs to be resized, so that it
is then suitable for that webpage. Using the format file JPEG as the base file as it keeps the same
high quality but you are able to reduce the size. So that it is the right size and can be easily
sent/received and downloaded as well as it still being high quality and looking good. If you were to
just leave the original image and not change it e.g. the quality or size then what could happen is
when people visit your webpage and the
website takes to long for the image to
load because of the image size being too
big then you may lose visitors as people
are not very patience. However in order
for the page to load faster the image will
need to be reduced so that the website
loads quicker. There are software tool
that allows you to reduce the size of an
image and not lose any of its quality like
Adobe Fireworks.
File reduction is when the size and quality
is lowered on an image so that the file
size is smaller. When you make a change to the image such as colour or tone then the editor will
have to make a decision on whether to reduce the size of the image or the quality this will affect the
amount of colour that is used in the image. However if the image is just used for the internet then it
doesnt really matter as the resolution on a computer screen is much lower than the resolution need
to print a large scale image. The resolution of a computer screen is usually 72 pixels per inch and the
image that are on the internet are also normally set at 72 ppi, this is so that the graphics of the

Isobel McKenzie: Assignment 1

image match the graphics that can be displayed on a computer screen. This is the same with
programs such as Photoshop as they are automatically set at 72ppi however this is not the default
ppi for every program. 72 is the averaged but there are screens that change to about 96ppi.