Role Over Buttons
Firstly, EIS employs the use of roll over buttons to assist users in navigating the website. Perhaps rather simply, each button becomes underlined as soon as the mouse hovers over them. In addition, the background of the button becomes grey. Perhaps simplicity is the key? Unfortunately, these role overs, while effective, do not relate to the target audience. For future reference, when I generate my own graphics, I will try and make mine more relevant. This is demonstrated by the image above in the top left: the "Home" role over is the one in action.
On similar websites, other roll over buttons can appear more animated. For example, on flash, objects can be animated so that when a user hovers over the object, the animation will begin. This is with the use of keyframes. When understanding keyframes, it is best to think of them as a timeline. Along any timeline, you will find key points. On this timeline, these key points are called "Keyframes" Therefore, when animating with keyframes, the computer does the animating for you! All you have to do is tell the computer how the object will look from one keyframe to another. For example, if an object began on the left side of the screen for the first keyframe and, for the next keyframe, the image was on the right - the computer would animate the object so that it appears to be moving across the screen. Although, on role overs, this is probably not going to be the desired effect, this is the general technique on how this is done.
In my own project, I will also be creating rollover buttons. However, instead of an animation beginning when rolled over, my buttons will simply change state to highlight the button. Since there is no keyframe animation present, the animations used here will be stop frame! At the moment, I intend to create the buttons in adobe fireworks - so the final will be a .PNG file.
On similar websites, other roll over buttons can appear more animated. For example, on flash, objects can be animated so that when a user hovers over the object, the animation will begin. This is with the use of keyframes. When understanding keyframes, it is best to think of them as a timeline. Along any timeline, you will find key points. On this timeline, these key points are called "Keyframes" Therefore, when animating with keyframes, the computer does the animating for you! All you have to do is tell the computer how the object will look from one keyframe to another. For example, if an object began on the left side of the screen for the first keyframe and, for the next keyframe, the image was on the right - the computer would animate the object so that it appears to be moving across the screen. Although, on role overs, this is probably not going to be the desired effect, this is the general technique on how this is done.
In my own project, I will also be creating rollover buttons. However, instead of an animation beginning when rolled over, my buttons will simply change state to highlight the button. Since there is no keyframe animation present, the animations used here will be stop frame! At the moment, I intend to create the buttons in adobe fireworks - so the final will be a .PNG file.
Imagery:
However, other websites such as the BBC are far better since they use higher resolutions and higher bit depths, meaning that the final result is more professional and more appealing to look at. However, both websites feature images with high intensity. This means that the brightness of each pixel is tuned higher than the raw file. This generally makes for a brighter and more appealing image which, in general, looks rather more professional provided that the intensity is not to excessive.
In terms of a logo - somewhat unfortunately, this particular website appears to have no clear logo or emblem. The only thing I could discover was this small bar above the navigational bar. Despite a large resolution of 1102x92, the logo appears insignificant and rather subtle. Luckily, this image has been rendered in 32bit, and as a result, looks very photographic and professional. Learning from this, we can ensure that our logo is clear, high resolution, with a high bit-depth and compressed minimally. If this is applied to every image on our platform, including the logo, we cannot fail to create a visually impressive piece of media content.
In terms of a better logo, it is better to search for an incredibly common logo, such as the YouTube one. Firstly, the proportions are far more appropriate. Since the "National Institute of Sport" logo had an aspect ratio of around 50:1, it resembled more of a web banner than a logo. However, the Youtube logo is closer to 16:9. In addition, the "National Institute of Sport" appeared to be far too complex - containing a huge array of patterns and colours. Opposing this, the Youtube logo uses three complementing colours: black, white and red. Having fewer colours means that the logo is easier to remember and is more pleasant for the eye. Somewhat more sensibly, the YouTube logo is relatively low resolution as apposed to the high resolution logo from the "National Institute of Sport". Normally, high resolution is a good thing, but when talking about logos, small graphics such as these are far more manageable when they are at lower resolution; their file size and therefore loading times are lower. Interestingly, this seems to be a continuous story with YouTube since their home page is able to load far more quickly than the "National Institute of Sport"
Actually, traditional logos normally are vector based. Being vector based means that the image is not rendered and, instead, the image consists of a set of co-ordinates which tell the computer how to construct the image. For example, if a logo contained a uniform circle, your computer will already know how to draw a circle and as a result, when the vector graphic dictates the size, position, thickness and colour of the circle, the computer will position the circle in the correct place. Similarly, when drawing a line, the vector graphic will instruct the computer to draw a line by providing it with a range of information. Namely, the starting point and ending point of the line, the thickness of the line. These points are called vector points. In conclusion, a vector graphic is constructed by a range of components which are pre-defined by the image file. However, the fact that the image is "pre-defined" is not to be confused with the term "pre-rendered" since the image will only be rendered when you access it. The advantage of vector graphics are that despite how large the image is requested to be drawn, the image will never appear pixelated since the computer will construct the image relative to the requested size.
This process is normally undertaken by the GPU and in lower spec computers, the APU (Graphics processing unit and Accelerated processing unit)
In terms of my logo, I will use vector-based drawings to create it. I plan to send out a survey to detail what should be in the logo but, as it stands, I plan to use a .PNG file with medium compression - this will reduce the file size of the logo and, as a result, reduce the loading time on the website!
Background:
As you can infer from this impressive background, the English Institute of sport has clearly invested a lot of thought into how the very foundations of their website appear. Similar to the logo, the resolution is high (without being excessive) and the bit-depth conforms with that on the rest of the website. Interestingly, their use of colour appears to have very little relation to the world of sport. However, on closer inspection, the colours seem to resemble the multitude of colours found on sporting flags around the world. This background is helpful with the navigation of the website as it contrasts specifically with the content of the website. For example, the web designers have used this very dark background to make the text/image windows stand out - making our eyes draw towards the useful content.
However, other websites have far less appropriate backgrounds. Folsoms website (for tying knots) has an extremely ill fitting background. In addition to the low bitdepth and small resolution, the background is extremely repetitive; the image above is tiled hundreds of times over on each page! Therefore, after spending only seconds on the site, the background becomes irritating. Similarly, yellows, reds and greens don`t even complement each other. Weather you disagree or not, this choice of colour is not one seen on most modern websites and is a colour scheme associated with old fashioned design or 80`s style graphics. When compared to the "National Institute of Sport" website, this background is one to be ashamed of.
Hopefully, I will be able to create a successful background in fireworks. Instead of using vector graphics, I plan to photograph and then edit my background. When editing the background, I will use effects such as channel mixer, 'hue and saturation' and 'brightness and contrast' to boost the quality of the image - to make the photograph look more professionally taken.
Hopefully, I will be able to create a successful background in fireworks. Instead of using vector graphics, I plan to photograph and then edit my background. When editing the background, I will use effects such as channel mixer, 'hue and saturation' and 'brightness and contrast' to boost the quality of the image - to make the photograph look more professionally taken.
Colour and File extensions:
In addition, the file extension for the majority of the images on the website are .png. This stands for "Portable network graphics" and is optimized for convenient web use. Therefore, when users try to load pages, PNG images can load relatively quickly due to their fairly modest file sizes. However, using PNG images can come at a price if images are compressed too vigorously, images may appear "lossy"
On websites such as this, images are constructed using pallets of colours - similar to the one above. Therefore, when a computer is asked to construct an image, the CPU or GPU will map shades from the pallet onto each pixel of the image- thus creating the final image.
When speaking about colour, bit depth is a term used to describe the number of colours available on the pallet used in the image. For example:
- 4 Bit images contain 16 colours (High Colour)
- 8 Bit images contain 256 colours
When speaking about colour, bit depth is a term used to describe the number of colours available on the pallet used in the image. For example:
- 4 Bit images contain 16 colours (High Colour)
- 8 Bit images contain 256 colours
- 24 Bit images contain 16,777,216 colours
In addition to these settings, there are images that only have two colours on the pallet. This is called monochrome and, with only two shades of grey available, the image appears to be in traditional "black and white". Despite this being effective, some of the diagonal edges in these images appear aliased (jagged). However, some GPUs have the function of anti-aliasing which counters this effect.
As a general rule with my texture graphics, if the graphic is photographed, I will export it with 24bit colours in order to retain the full range of colours. However, if the graphic is vector based, I will export it only in 8 bit - since such a huge range of colours will not be present there.
Saturation:
Within images, editing softwares can limit the intensity of colours which will be seen in the rendered image. For example, if an image was to be optimized for a younger target audience who appreciate bright and cheerful colours, the saturation would be set to a value of over 100 (e.g 140) However, if an image was being rendered for members of the army, using a lower saturation level (e.g 80) would help to give a gloomy style. To give you an example of the extreme saturation levels, a saturation level of 0 would appear black and white (No colours) However, the maximum saturation level of 200 would give an unnatural blend of colours - meaning that each colour would appear extrovert and outstanding.
On this website, saturation levels of around 140 appear to be used. This is because sport is often viewed as a positive occupation which stimulates fun and enjoyment. However, sport is not regarded as a childish and over-the-top occupation - thus why 110 is the saturation limit.
The saturation in my texture graphics will be used to bring out the colours of my photographed content to make it look more visually acceptable and professional looking.
The saturation in my texture graphics will be used to bring out the colours of my photographed content to make it look more visually acceptable and professional looking.
Brightness:
In an image, the brightness can be adjusted to give a range of effects. For example, in overexposed images, brightness can be turned down to compensate for images looking too.. well... bright!
In general, brightness is simply the intensity of each pixel within an image. Therefore, if brightness is too high, images may tend to look increasingly unprofessional since the colours used in an overly bright image become less and less appealing to the human eye.
Since the English institute of Sport use mainly computer based graphics, brightness appears to be an insignificant issue. However, on a website containing many photographs, brightness may be an issue that should be considered.
Animated Gifs:
Unfortunately, IRS contains no animated gifs on its website! This could be because the image quality on animated gifs can sometimes appear to be rather low.
This is because animated gifs are technically not just one image; there are many! In the same way that a video clip is made up of a series of frames, an animated gif is the same! However, a key difference is that a video`s frame rate is normally around 24fps. However, on an animated gif, the frame rate is closer to around 7fps. This is to save space when exporting such images so that they can be efficiently loaded on a website.
Web Banners:
However, having advertisements on a dedicated website can have its pros and cons. In terms of pros, advertising web banners can bring in financial supplements to assist with the development of the website in question. Unfortunately though, in terms of a con, an advertisement may not be relevant to the website, may distract users or may also appose the site`s ethos if the advertising company does not filter advertised content.
In the English Institute of sport, their web banner appears to be completely for personal and non commercial use. Looking closely, it is clear that the web banner holds no advertising for other companies. In stead, the banner sports the company logo with the addition of an impressive graphic which somewhat relates to the website background. Clearly, this technique achieves the following:
- It promotes the website.
- It conforms to colour schemes and themes of the website
- It remains relevant to the site - as apposed to an outside commercial.
On the technical side, the file type is a png. Similar to other images on the website, a portable network graphics is an excellent way to transfer high resolution high resolution images with a high bit depth but with relatively modest file sizes. Indeed, with a fairly high resolution of 1102x97 and is of a conveniently low file size of only 111kb. As mentioned above, this ensures that the website is
quick to load, navigate and explore.
On other websites, such as Amazon, the web banner is almost purely a commercial advertisement. As you can see, their banner promotes one of their products. Despite this key difference, the quality, bit depth and compression appear to be invariably similar.
When creating my web banner, I will aim for a high resolution of around 1102x97 with a high bit depth. This means that the quality of the banner will be as high as possible. I will make sure that it conforms to our colour scheme, advertises the website and is relevant to the brief.
Texture Graphics:
There are two types of texture graphics:
- Rendered texture graphics
- Photographed graphics.
The image above shows the importance of texture graphics. This 3D render contains none. As a result, each object looks grey and rather unrealistic. Therefore, the idea of texture mapping means that an object, or shape, can assume a texture (such as the fire graphic at the top) to make it look like a day-to-day object, such as a bonfire. Similarly, if the bed in the image was to assume a texture, a texture such as the one below may be suitable since it is a comfortable looking material which complements the style of the scene.
However, other options are available. Provided that your texture is uniform, the texture could be duplicated over and over to make a larger image.
To offer a more detailed analogy, I will describe how this process works using the idea of a simple every day object: a table. If one square table accommodates two people on which to be seated, in order to seat 4 people, putting two of these tables together would increase the size of the overall table. Therefore, if the table was consistently the same colour from one end to another, the point at which the two tables join would be fairly unnoticeable. However, if the tables transition from a dark shade of brown on the left to a light shade of brown on the right, putting the two tables together with the right side of table 1 against the left side of table 2 would create a large and sudden colour gradient. This sudden change of colour is more noticeable and, in most cases, this is not the desired effect.
The exact same problem occurs with textures: if a texture, such as the one below, is looped, the effect would be devastating and incorrect. Therefore, instead of photographing a texture, creating one on serif of Photoshop may be a desired choice. When you render your own texture, YOU can decide on how the colours progress - if at all. And, indeed, if you rendered the image in the correct resolution and aspect ratio, the use of "looping" would not be necessary at all!
Resolution Explained:
As you may have noticed, screen resolutions have been consistently mentioned above. Therefore, I will now go into more detail about what screen resolution is and how to tell what it means.
Screen resolution relates to how many pixels are displayed on the screen. Similarly, image resolution relates to the maximum number of pixels a particular image is capable of displaying. Therefore, a simple image with a resolution of 4x4 will have a resolution of 16 pixels. The reason that resolution is given as two numbers (4x4 as opposed to simply 16) is because having two numbers gives users more information about the image. In short, the first number gives the horizontal number of pixels, while the second gives the vertical.
So how is this useful? Well, an image with a resolution of 2x8 still contains 16 pixels but, as you can see by looking at the resolution; this image is rather large in the vertical plane but rather minimal in the horizontal plane.
Realistically, images tend to be of a resolution closer to 1920x1080 (2,073,600 pixels) as apposed to 2x8 or 4x4. Therefore, screen resolution can be analysed to infer the quality and aspect ratio of the image. Therefore, an image of higher resolution tends to appear higher quality than an image of lower resolution. Alas, this depends on the surface area of the image: If an image occupied simply 5cm2 of a monitor, it would be difficult to distinguish between an image of 800x600 and an image of 1600x1200. This is because a monitor only has a certain dpi (dots per inch) However, if an image occupied 50cm2 on a monitor with a similar dpi, the difference between 800x600 and 1600x1200 would be very noticeable.
For reference, resolution is also measured in DPI (Dots per inch) which is a measure of how many pixels are contained per square inch of image. This is a more direct measure of quality but the raw resolution is harder to determine when given a measurement of DPI.
Storage Explained:
Similar to the concept of resolution, I have also mentioned file sizes in the above categories (Eg Kb, Mb, Gb, TB or B) These prefixes relate to the number of bytes in a file. I will now list the meaning of each prefix - in order of lowest, building upwards.
- B=1 byte
- Kb = 1024B
-Mb = 1024Kb
-Gb = 1024Mb
-Tb = 1024Gb
Similarly,
- Kb = approx. 1,000 bytes
-Mb = approx. 1,000,000 bytes
-Gb = approx. 1,000,000,000bytes
-Tb = approx. 1,000,000,000,000bytes
As you can infer from the values above, file sizes and storage spaces can vary massively and therefore, choosing a suitable HDD or SSD size (for storage) and image size is very important when downloading, sharing and opening files for general use.
For our website, the net size of the page should be roughly 784kb - which is the current average. Therefore, if my webpage strays higher than say, 1mb, then more compression is clearly needed!
Sources:
No comments:
Post a Comment