In this blog I will be comparing 3 websites on Digital
Graphics:
Navigation Bar
A
navigation bar is vital of a web page that contains hypertext links in order to
navigate between pages of a website. As you can see all three of these websites
have a navigation bar. You would usually find a navigation bar on
all websites which have more than one page. These sections of the webpage will include links to the
most important sections of the site. The navigation bar is one of the key
design elements of a website; it navigates the user around the website.
Navigation Menus
A navigation menu provides navigation to all areas of the
website from one location. It puts the entire website into different categories
and organizes the whole thing, it also interactive with the audience. It is normally designed in a graphic editing
program rather than just pure HTML or hypertext its purpose is for the user to
navigate all the resources and pages with ease.
As you can see in this image the website http://www.plymstockschool.org.uk/ has a navigational menu compared to the 2nd
website, which looks much less interesting, boring and also looks a bit
confusing. So having a navigation bar also makes the website look interesting
and organized, which helps interact with the users and makes the website user
friendly.
Roll Over Buttons
Roll
over buttons are created by web designers. This website is a good examplle of a
roll over button, it changes colour and underlines the word when you hover over
the menu. There are
four states to a roll over button;
- up state
- mouse over
- click
- down state
- mouse over
- click
- down state
The word roll-over comes from the fact that when you roll your mouse over the button it
will react by either changing colour or does something else. They are used to
provide interactivity between the user and the page itself. Roll-over buttons
can be created using imagery, text and buttons. All of the three websites have roll-over buttons, but in my opinions I think http://www.markhall.essex.sch.uk/page/default.asp?title=Home&pid=1 has the best design of a roll
over button, because it changes into a bright yellow and underlines the word
when you hover over it or click on it.
In comparison to http://www.kingalfreds.oxon.sch.uk/ and http://www.wrightrobinson.co.uk/ , http://www.markhall.essex.sch.uk/page/default.asp?title=Home&pid=1 is much more interesting and interactive
with the audience.
Applications of interactive media graphics:
Web Banner
A web banner is a form of advertising on the World Wide
Web. It is a form of advertising on-line to entails embedding an advertisement
into a web page. The purpose of a web banner is to attract people to a website
by linking it to the web page. The advertisement is constructed from an image
which is either GIF, JPEG or PNG. I personally really like the web banner for
this website http://www.wrightrobinson.co.uk/. Because it is
much more interactive and interesting it has also got little graphics that move
like a little microphone swinging from left to right and a speaker with music
booming out of it. The web banner also slides across every 3to 4 seconds and
changes
images and graphics, which are very bright, bold and colourful
representing the school. It also has a white background that goes with the
unexciting, and is incredibly boring, a person would just get off the
website straight away.
Animated
Gifs
An
animated GIF file comprises a number of images or frames to be displayed
successively, each described by its own GCE (Graphic Control Extension)
preceded by a header whose content by default applies to all the frames. After
the header the data is stream-orientated instead of being at fixed indices
Logo Graphics
Logo Graphics are
commonly used by commercial organisations
like KFC,
this logo is known worldwide. Individuals also use logos to promote instant
public recognition. Logos are either purely graphics or are composed of the
name of the organisation logos
are typically vector based graphics. I personally think that the http://www.markhall.essex.sch.uk/page/default.asp?title=Home&pid=1
logo
is the best, because you are able to see it the most easiest and it is
the
quickest to see because, it is positioned at the top left hand corner of the
school website. I like this logo because it’s go a simple design and is easily recognisable.
I also thing the http://www.kingalfreds.oxon.sch.uk/ logo is good because it is simple and easily recognisable, but I also think it
is a bit bull and boring, it is also not positioned in the right placebecause, logos are usually positioned at the top of the page, but this
logo is at the bottom left-hand corner. http://www.wrightrobinson.co.uk/
logo in my opinion is the worst out of the
three, this is because it is really hard to find because it is embedded into
the web banner which slides across every 3 to 4 seconds and changes images and
graphics, so it is very had to tell were the logo is.
Screen Icons
A
screen icon is a pictogram displayed on a website and used
to navigate from one website to another. The icon itself is a small picture or
symbol (a bit like a logo) serving as a quick "intuitive"
representation of a soft-wear tool, function or a date file accessible on the
system. In functions an electronic hyper-link or file short-cut to access the
program or data.
Texture Graphics
In computer graphics, the
application of a type of surface to a 3D image. A texture can be uniform, such
as a brick wall, or irregular, such as wood grain or marble. The common method
is to create a 2D bitmapped image of the texture, called a "texture map,"
which is then "wrapped around" the 3D object. An alternate method is
to work out the texture entirely using maths instead of bitmaps. The latter
method is not widely used, but can create more precise textures especially if
there is great depth to the objects being textured. The textured graphics can look
good as a background for a website, because it makes the website look more
futuristic in a way and much more interesting than just a boring one coloured background. This website http://sixrevisions.com/graphics-design/20-useful-websites-for-graphic-design-textures-and-patterns/
shows good textured graphics people
could use of their websites to make them look more interesting, exiting,
appealing and different from all the rest of the websites.Pixel:
Picture Elements- The screen is divided up into
pixels. The amount of pixels that can be displayed on the screen is dependent
on the resolution. Resolution is often referred to as dpi or ppi, these are
abbreviations of Dots per Inch, and Pixels per Inch. Computer screen resolution
is predominantly 72 dpi, however the print is often higher. It is at least
150dpi but is more commonly found as 300dpi. The screen that the images are on
are all divided up into pixels
Each pixel is a sample of an original image; more samples typically provide more
accurate representations of the original. The intensity of each pixel is variable. In colour image systems, a
colour is typically represented by three or four component intensities such as red, green, and blue, or cyan,
magenta, yellow, and black. However, pixels tend to blend
together because they are so small and very hard to see. The number of colours
each pixel can be is determined by the number of bits used to represent it. For
example, 8-bit colour allows 1 of 256 colours that can be displayed. There are almost always picture elements in every single website on the internet, some more than others. 
Image Resolution- Image
resolution is the detail
an image holds. The term applies to raster digital images, film images, and other
types of images. Higher resolution means more image detail. It can be measured in a number of ways. Basically,
resolution quantifies how close lines can be to each other and still be visibly.
Resolution units can be tied to physical sizes (lines per mm, per inch) and to
the overall size of a picture (lines per picture height,). Line pairs are often
used instead of lines; a line pair comprises a dark line and right next to it a
light line. A line is either a dark line or a light line. A resolution 10 lines
per millimetre means 5 dark lines alternating with 5 light lines, or 5 line
pairs per millimetre (5 LP/mm). Photographic lens and film resolution are most often quoted in line pairs per millimetre. Some of the earliest computers were created in an
age where there was a limitation to screen resolution as they didn't have the
technology. The screen resolution was thought to be very low. Individual pixels
were clearly visible. This has given rise to higher levels of detail and a
smoother less pixelated finish to graphics. A few years ago a monitor
would have a resolution of 640X480. But nowadays a screen resolution of
1280X720 is not unheard of.Raster Images:
Compression- Lossy compression is when data is compressed and then opened again, it looses some of its
original quality. Lossy compression is most commonly used to compress multimedia data, especially in applications
such as streaming media and internet telephony.
Lossless Compression is when data is compressed;
it does not lose any of its original quality once opened up again. The term lossless
is in contrast to Lossy data compression, which only allows an estimate of the original
data to be reconstructed, in exchange for better compression.
File Extensions- It is a type of memory organization
or image file format used to store digital
images.
TIFF - A Tagged Image File
Format is a file format for storing images. The TIFF format is widely supported
by image-manipulation applications, by publishing and page layout applications,
by scanning, faxing, word processing, optical character recognition and other
applications.
JPG - JPG compressions is used
in a number of image file formats. JPEG is the most common image format used by
digital cameras and other photographic image capture devices; along
with JPEG/JFIF, it is the most common format for storing and transmitting photographic
images on the World Wide Web.
BMP - Bit Image File or Device
Independent Bitmap file format or simply a Bitmap, is a Raster graphics image
file format used to store bitmap digital images, independently of the display
device, especially on Microsoft Windows and operating systems.
PNG - Portable Network
Graphics (PNG) is a bitmapped image format and video codec that employs
lossless data compression. PNG was created to improve upon and replace GIF
format as an image file format not requiring a patent license. PNG supports
palette-based images. PNG was designed for transferring images on the internet,
not for points graphics, and so it doesn’t support non-RGB colour spaces.
PSD - The .psd format is the
Adobe Photoshop data format which can be read on any machine that has Adobe
Photoshop installed. It is cross platform and can be used on both PCs and Macs.
The PSD format provides extended support for layering, apha channels, paths and
vectors. The PSD source file included with ou templates are usually Ina sliced
format which allows you to customise and make changes to the
images on your skin.
GIF - The Graphics Interchange
Format is a format the supports up to 8 bits per pixel thus allowing a single
image to reference a palette of up to 256 distinct colour. The colours are
chosen from the 24-bit RGB colour space. It also supports
animations and allows a separate palette of 256 colours for each frame. The colour limitation makes the GIF
format unsuitable for reproducing color photographs and other
images with continuous color, but it is well-suited for simpler images such as
graphics or logos with solid areas of colour.
Vector images:
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to
represent images in computer
graphics. "Vector", in this context,
implies more than a straight line.
Vector Points - A vector point
is the points that make up a vector shape. For example, on a vector triangle
there are three vector points. One on each corner of the triangle.
Vector Lines - A vector line
is the lines that make up a shape, they join up with the vector points, and
these will then make up the shape.
Vector Curves - A vector curve
is used to create circles or anything shape that has a curve in it. For
example, a semi-circle will be mad up of two vector points, one vector line and
one vector curve.
Vector Polygons - A vector
polygon is a shape that is complete. For example, a square is made up of 4
vector points, 4 vector lines. This shape is called a vector polygon because it
is made up of vectors and its a polygon
Bit Depth:
Sampling- Bit Depth
sampling is a technique used to increase or decrease the amount of pixels
within an image. There are many resembling programmes on the market.
Bits per pixel- Bits
per pixel also known as BPP is the number
of bits of information stored in to each pixel of an image or displayed by a
graphics adapter. The more bits there are, the more colours can be represented.
Bits per pixel- Bits
per pixel also known as BPP is the number
of bits of information stored in to each pixel of an image or displayed by a
graphics adapter. The more bits there are, the more colours can be represented.
Bits per pixel- Bits
per pixel also known as BPP is the number
of bits of information stored in to each pixel of an image or displayed by a
graphics adapter. The more bits there are, the more colours can be represented.
Monochrome-
Monochrome is basically two colours; black and white. Monochrome images or typically scanned from line art
and/or text originals, are comprised of a single bit of data. is a 1-bit
image.1 bit = 2 levels of gray. Monochrome images generally require higher
resolution than tone images in order to prevent aliasing of diagonal lines.
256- 256 is the number of colours in a single pixel. An 8-bit colour image has 256 colours. Depending on how many bits there
are depends on how many colours there are. In a 12-bit colour image there are 409 colours. In a 16-bit colour image there are 65,536 colours.
High colour- High colour graphics consists of thousands of colours; it is a way of
storing image information in a computers memory such that each pixel is
represented by two bytes. Usually the colour is represented by all 16 bits, but some devices also support 15-bit high colour. High colour uses 16 bits per pixel, 5 bits for blue, 5 bits for red
and 6 bits for green. 
True Colour- True colour is a method of representing and storing
graphical image information that allows a huge number of colours, shades and
hues to be displayed in an image, such as in high quality photographic images
or some complex graphics. True colour defines 256 shades of red, green and blue
for each pixel of the digital picture, which eventually results in 16,777,215
colours for each pixel. Colour Space:
RGB- The RGB colour
space is any additive colour space based on the RGB colour model, in which
red, green and blue lights are added together in various way to reproduce a wide
range of colours. The name of the model
comes from the initials of
the three primary colours, red, green and blue. The main purpose of the RGB
colour model is for the sensing, representation, and display of images in
electronic systems, such as televisions and computers
YUV- YUV is a colour space typically
used as a part of a colour image pipeline. In encodes a colour image or video taking
into account the human perception, allowing reduced bandwidth for chrominance components,
there by enabling transmission errors or compression artifacts to be more capably
by the human perception that using a direct RGB representation. 
HSV- HSV (hue, saturation, value)
also known as HSB (hue, saturation, brightness). In each cylinder, the angle
around the central vertical
axis corresponds to 'hue', the distance from the axis corresponds to
'lightness', 'value' or 'brightness'. Whilst 'hue' in HSL and HSV refers to the
same attribute, their definition of 'saturation' differ dramaticallyImage Capture:
Scanners- An image
scanner is a device that optically scans images, printed text, handwriting or
an object, it then converts it to a digital image. There are four different types of scanners that can be bought:
Drum
Flatbed
Film
Hand
scanners.
Prices of scanner can vary depending on the make and the quality of the
scanner, the most cheap scanner can be priced at around £40 pound. Some
of the industrial scanners that are available on the market can price around £4,800
of the industrial scanners that are available on the market can price around £4,800
Digital Cameras- A camera is a device that
records/stores images. These images may be still photographs or moving images
such as videos or movies. The term camera comes from the word camera is Latin for
"dark chamber", an early instrument for projecting images. There are many different types or cameras, some are Plate
Cameras, Box Cameras and Digital Cameras. The prices of cameras vary on how
good the resolution is and the make of the camera, some of the cheapest are priced
at £49.99. The most expensive cameras can be priced at around £429.99.
Storage- In computing,
memory refers to the store information of a computer system, it’s kept active
in some physical structure. File size measures the size of a computer file. Normally
it’s measured in bytes with a prefix. The actual amount of disk space consumed depends
on the file system. The maximum file size a file system supports depends on the
number of bits reserved to store size information and the total size of the
file system. For instance, with 'FAT32', the size of one file can’t be equal or
bigger than 4 GiB. 1 KiB = 1,024 bytes, 1 MiB = 1,048,576 bytes, 1 GiB =
1,073,741,824 bytes and 1 TB = 1,099,511,627,776 bytes.
Resolution- Pixel density is a measurement of the resolution of devices
in various contexts. Normally computer displays, image scanners and digital
camera image sensors. PPI can also describe the resolution, in pixels, of an
image to be printed within a specified space. For example, a 100 x 100 pixel
image that is printed in a 1-inch square could be said to have 100 dots oper
inch (DPI).
When capturing an image, whether form a scanner or
a digital camera you are creating a digital representation of an existing
image. Once this digital image is captured you are then able to edit this image
in photo/graphic editing software e.g. Serif Photo Plus x4 and ADOBE Photoshop
cs5. In these programs you can import the captured image as an
"asset" that can be used/separated in to different sections and
filters can be applied as well as a range of other tools and techniques.
Optimising:
Target Destination- When
creating digital graphics the designer needs to consider the objective of the
graphics they are creating. Designer can be asked to make graphics for a range
of things including, film, the web, poster for print and desktop graphics. The
destination of the graphic image will determine the way it is made; for
instance to create a web page designers would use vector shapes in
Fireworks to make sure that the file size is kept down.
Dimensions- Dimensions
of a image can be anything, they can be measured in pixels per inch, centimetres
or inches. Most graphics are measured in pixel per inch as it is much easier. When making
a graphic for print the dimensions of the image are going to be huge. But if
the graphics are being created for the web, then the dimensions of the image
are going to be small, such as 200 X 200 pixels per inch
No comments:
Post a Comment