Tuesday 20 November 2012

Unit 19: Digital Graphics Reflective Learning Log

Reflective Learning Log Day 1:

Today, we have began to draft a suitable email to send to our client requesting an initial meeting to discuss their initial ideas. When writing the email, we needed to keep in mind that we must remain professional and sensible in our writing as well as successfully getting our point across. Here is the email that we sent:

Dear Mr Hutchinson,

I am writing to inform you about the first stages of our project and what they entail.
As you may know, Myself and Joshua Wing have been assigned to your PE department project with the intention of re branding the department through the medium of an interactive media platform. With the news of this exciting development, we are both eager to schedule a meeting with you to discuss the following elements of our digital graphics and digital video sections:

- Project time frame
- The End products required by yourself

In more detail, our meeting will be to discuss deadlines and release dates as well as specific content that you would like to appear within the final product. As a result of this meeting, we will take forward your ideas in order to create sketch ideas, design ideas and initial designs for the first instance of the project relating to the digital graphics for the department.
In addition, we would like to discuss our digital video production unit; we feel that some sort of digital video would be an excellent way to demonstrate your ethos and to promote your ideas. Therefore, our designs and ideas can also be discussed at this time as well as the digital graphics.

We will mainly aspects of digital graphics such as backgrounds, logos, colour schemes, images and animations. In addition, we will be carrying out market research to further enhance our choice of ideas so that the final product will be of the highest possible quality to suit your needs. Similarly, when discussing our digital video, we will also talk about the key content of the video as well as any legal or ethical considerations which are necessary.
Therefore, we would like to ask when would be a good time to schedule this meeting in order to ensure that the entire process is as easy and convenient as possible for you.

Since this is our first contact with yourself, we would both like to take the opportunity to invite you to contact us at any time if you require further discussion on any aspect of the platform. More specifically, you can find both I and Joshua on the following email addresses:

Me: a07sturner@bluecoat.uk.com
Joshua: w07jwing@bluecoat.uk.com

We are both very enthusiastic about the prospect of this project and are looking forward to hearing from you in the near future.
Yours Faithfully,
Samuel Turner – Giga X Studios

As you can see, the email is rather brief but also concise. This was to ensure that we use as little of his valuable time as possible.

Reflective Learning Log Day 2:

Since sending the email, our second task was to devise a set of questions of which to ask our client at our initial meeting. These include the style, content and colour schemes to use in our digital graphics. The questions we plan to ask are as follows:

Questions:

-          Well clearly, it is important that we establish which target audience you have in mind so that we can target the project at an individual age group or party. What are your thoughts on this?

-          You mentioned that you want to establish sports within the school and to promote you ethos and to continue with the Olympic legacy. Could you at all expand on this , or do you require this to be the sole purpose?

-          Specifically talking about the video, what content are you expecting to be included within the video itself and, similarly, within the digital graphics?

-          We know that Bluecoat is a very active school, so with this in mind would it possible that we could attend any events or lessons in order for us to catch any sports in action for the shoot?

-          In addition, getting the right balance between content and length is important. What do you consider to be a sensible length for the digital video?

-          Within the media industry it is important to avoid indecency and any other ethical issues such as balancing the races and genders that appear within the video. In order for us to avoid any of these issues, are there any precautions or steps you advise us to take?

-          In your brief, you included a small range of recommended websites. Are there any of these websites that you would specifically like us to base all or some of our ideas?

-          The video needs some sort of theme. Do you have any particular input on the sort of slant we should take with this? For example, comic, cinematic, documentary, action or commercial styles?

-          We understand that the school loves sports, so we were thinking of using any footage or images which are free from copyright and royalties that we could/ should include? For example you may have a video which you want people to see and would like to include this in out video?

-          Finally, do you have any suggestions as to what we should include in the video with regards to audio? E.G. music, narration, dialogue or sfx?

-          Is there anything else you feel you could add with regards to our digital video, or are you happy to move on to discussing the digital graphics element?

We hope that these questions will give is sufficient information for us to begin the planning stage for our graphics product. More specifically, we will be able to decide on a colour scheme, a logo, images, animations and web banners.

Reflective Learning Log Day 3:

Today, we have begun to create a questionnaire designed to gain market research for our digital graphics. Firstly, we began by devising questions relating to some of the following:
- Colour Scheme
- Themes
- Brand Names
- Fonts
After choosing these questions, we continued by printing out the surveys ready to hand out. However, we found that providing handouts was a fairly unreliable process since we would have to "chase up" each completed survey in order to collect results. Therefore, we created our own account on "SurveyMonkey" in order to conduct the same survey online. This is better since we can easily and instantly collect results as well as reaching a larger audience.

Fortunately, this process was relatively problem-free from this point onwards. However, we encountered a small problem when asking the question relating to the fonts. On survey monkey, we are only able to type on one set font. As a result, we are not able to show our interviewees the selection of fonts we have in mind. Therefore, when collating the data, we must remember that the results for this question could potentially be less reliable than the rest.

Reflective Learning Log Day 4:

On arriving to lesson today, we realized the importance of project management and its significance. Therefore, we have decided to create a Gantt Chart. These are excellent when quickly and easily planning a project since it can provide you with a perfected schedule to help manage your time.

So, while I sent out the surveys, Josh began to schedule all of our tasks within the Gantt Chart. However, since he was new to the program, Josh found it difficult to eliminate some of the problems he encountered and, as a result, our Gantt Chart was left incomplete. However, on realizing this problem, I suggested that we swap roles so that I could complete the Gantt Chart whilst Josh finished the survey.

Looking back, this was an excellent decision since it meant that we finished our tasks more quickly and were able to begin thinking ahead about our tasks for the following week.

Reflective Learning Log Day 5:

Today, with the absence of Josh, I decided to collate and analyze our results. In my opinion, today has been a good day since I have collected all of our data and gained a definitive result for each question we asked, In a nutshell, here is the summary of what our questionnaire has discovered for us

- Our colour scheme should be in blues
- Our name should be "BA Sports"
- Our chosen font should be "Apple Boy BTN"
- Our main theme should be physical fitness - among others
- Our Target audience should be 11-15 year olds
-Any texture graphics should be based on a basket ball court/ any other sporting locations.

In terms of strenghts, I feel that these results reflect our preferance since we personally prefer the blue colour scheme and the target audience of 11-15 year olds. However, we feel that some preferances such as the "Apple-Boy BTN" font are rather innapropriate for a website of this type. Therefore, after checking with our client, we will make a more informed decision in order to make our website appropriate and acceptable. Although, I feel that Apple Boy BTN is a childish font and therefore may suite most of our target audience - should we choose to use it! To improove in the future, we should ensure that when creating surveys, we should only include reasonable answers to each questions in order to remove the chance of an ill fitting choice - such as the font.


Reflective Learning Log Day 6:

Today, we have begun to find inspiration ready for the start of the production of our digital graphics. Namely, I have been creating a word board and a mood board.

In the word board, I have entered key words into wordle in order to create a huge image consisting of every aspect of digital graphics I will be featuring. This is excellent since it offers inspiration at any time in any place in the form of words. Since these are only single words, there are no specific ideas to be read from the word board. This leaves endless opportunities for ideas to be generated when just looking at these words.

Similarly, I created the mood board for the similar purpose of gaining inspiration. However, on the moodboard, inspiration can be beckoned through the use of imagery. Therefore, in my moodboard, I have included images which not only are related to sport, but are related to our colour scheme, themes and survey results. This is also excellent since it offers professional inspiration to myself and Josh when creating digital graphics for equally professional use.

In addition, we have just undergone our meeting with our client in regards to our digital graphics. I feel that we both conducted ourselves in a professional manner and have extracted an informative video clip of the meeting which lasted for around 20 minutes. Our client responded excellently to our questions and provided us with informative answers which will provide us with a sturdy base on which to build our graphics project. I will also analyze the video file in order to create a document with a more detailed brief to work from.

Despite being nervous, I feel that our meeting went very well and was successful as we gained answers to many, if not all, of our questions.

Reflective Learning Log Day 7:

Today, we began to sketch some basic designs for our digital graphics. These include, animated gifs, roll-over buttons, backgrounds, texture graphics and web banners. Despite the crudity of my sketching, I am confident that myself and Josh can create a satisfactory final product on which to base our digital graphics which we will put on our media platform.

For my design of a roll over button, I drew the animation of a basket ball emerging from the top of the button when the mouse hovers over it. The ball will travel about 3cm above the button and then drop back behind it. In addition, the button will glow in order to clarify that this is the button that will be selected. Finally, the font used will be apple boy btn (since this was the result from our survey) and we will use appropriate colours from our colour scheme. I feel that this will be effective since it is rather creative and will appeal especially to our younger audience members - in order to keep them engaged.

Also, I have designed a web banner. Firstly, the background of the banner will feature a grass texture that we will photograph. Despite grass not fitting our colour scheme (being green), I hope that the green colour will contrast with the rest of the colour scheme to make for an effective banner. In addition, a basketball, golf ball and football will fill the majority of the banner space with the Apple Boy BTN font saying "Ba Sports - for sports with a kick" I also made the word "Kick" appear to be kicked to the right. I feel that this method of word painting makes the banner appeal far more than before and I think that the banner will appeal to all age groups - as intended. This banner will be exported as a high resolution PNG image - this format is suitable for web use and still retains most of the quality. The reson for the high resolution lies in the fact that the banner will be displayed fairly largely on the screen - this is necesarry since our banner will not be a vector graphic.

In addition to these, Josh has designed a logo for our website. Based on a circular background, the logo centralises over a golden trophey - designed to symbolise positivity and winning. It also implies the good work of the department and the positive impact that they have had on the PE students of the school. Apart from the golden colours, the logo remains to be based on our "Apple Boy BTN" font and the blue colour scheme - both of which are consistent throught the remainder of our digital graphics. This logo will be exported in a PNG format to ensure that all or most of the quality is retained. However, the resolution need not be exsessive since the size of the logo on the website is expected to be rather small - as is the default.

We have also produced the basic design for an animated GIF - created by Josh. This animation is designed to resemble a student at the school who is enjoying and participating with the good work of the department; he is playing basketball. Therefore, the main body of the animation is based around the idea of him bouncing his ball - looking as positive as possible without being excessively so. I feel that the strenghts in our animated gif lie in the fact that it is entertaining to look at and appeals to all age groups. This or any other animated gif will be rendered in a 16bit GIF format in order to preserve quality as well as space.

Similarly, another of our initial designs features a background - based on a grassy area. However, in order to allow this grassy area to fit with our colour scheme and sporty theme, we plan to digitally edit the grass into an electric blue colour as apposed to green. On the plus side, I feel that this is a modernising touch as apposed to the rather cliche grass backgrounds seen on other websites. However, the down side is that these colours present a rather un-natural look to the background. As a result, we will have to have a contigency background prepared in the event that our client does not agree with our choices. Finally, we plan to decorate the background with a range of sporting balls (such as tennis balls and basketballs) in order to make the background more interesting as well as constricting it to the sporting theme.

In terms of strenghts, I feel that my creative ideas were excellent when devising effective sketches. As a result, I feel that each graphic will be created with the exact intended results. However, I feel that my lack of drawing skills were a particular weakness when designing our graphics since some of my ideas are hard to interpret due to the crudity of my drawings. However, I hope that these problems will be resolved when we create them digitally with the use of a computer.

Reflective Learning Log Day 8:

Today, I made the desicion to digitally scan our initial sketches into the computer in order to add them into a data sheet that looks slightly more professional than the raw sketches.

As you can see on the right, I have applied the colour scheme to show our client what our eventual product will look like - including the actual fonts and colour schemes.
I feel that the strengths of doing this are in the fact that it looks far more presentable and professiona. However, in terms of weaknesses, this method means that changes are harder to make since the images would need to be re-scanned in order to update them. However, overall, I am happy with this method of presentation since it reflects our image of the final design.

We have also attempted to schedule another meeting with our client. During the meeting, we aim to show him our initial designs and discuss possible changes and ammendments. As a result of this, we will go away and create subsequent designs based on our updates. After this, we plan to create final designs once our secondary designs have been approved. Despite this being a lengthly process, I feel that is important that each of Myself, Josh and our client are happy with each and every design in order to avoid conflict at a later date.

Reflective Learning Log Day 9:

Upon hearing no reply from our client, we have proceeded to create the final versions of each design. Specifically, Josh has redesigned the logo and animated gif. Similarly, I have decided to make large changes to most of our other digital graphics work.

When planning our rollover buttons, I have changed them so that the ball does not protrude from the top of the button. This was a weakness since a large gap needed to be left above the button in order to prevent the button from overlapping other objects near by. As a result, the basketball/football remains inside the button and rotates behind the text of the button in order to save space on the final website. Aside from this, the colour and text font will remain the same.
Similarly, I did not like the idea of using electric blue grass on our web banner. As a result, I have decided to redesign the banner in order to use our blue colour scheme more appropriately. Namely, we have decided to have the words "B.A Sports" bursting from the centre of the image in a large blue flash. Around the edges, the same sporting balls are positioned around the edges.

In terms of the navigational bar, I have decided to change it in order for it to comply with our theme of sporting balls. Now, each button is based upon either a football, cricket ball, tennis ball, basket ball or golf ball. I feel that in terms of a strength, these buttons are far more engaging than the old buttons. However, in terms of a weakness, they do not necesarrily comply with our colour scheme but do provide a pleasant contrast to it.

Reflective Learning Log Day 154:

Now that Mr. Zafar, our teacher, has returned to school, we are ready to continue with our digital graphics course. Since it has been so long since we last spent time on the topic, we have spent today getting ourselves reaquanted with the project and finishing off our planning stage. In addition, myself and Josh have begun to research and familiarise ourselves with "Adobe Fireworks" - the program we will use to create our digital graphics!

Fireworks is a professional and interesing program to use - and is designed specificly for web design and various other graphical creation.

Digital Graphics Production:

Before creating any of my designs, it was necessary to download the font "Apple Boy BTN" onto the Macs since it appears that the Mac library of fonts is considerably smaller than that of the PC. However, this font was easy to download and installed quickly. Luckily, most programs - such as photoshop, flash and fireworks - seemed to accept the newly installed font!

Navigation Bar:

For my first final design, I decided to tackle the navigation bar. My navigation bar combines the rollover button as well. The final design for the navigation bar follows the original design rather religiously. However, the original design was intended to look rather hand drawn; each button was supposed to look rather wonky/ rustic. However, I felt that it would look more modern and up to date if each shape was uniform as apposed to being distorted. To confirm this, I used the skew tool to preview what the buttons would look like in this hand drawn style and I still felt that it would be a better idea to use straight rectangles.

To add the rollover behaviour inside fireworks, I created slices over each button as well as creating second states so that each button can transform upon mouse over. As in the design, a vector-based basketball appears and the text assumes a bevel effect. As you would expect, each button returns to normal as soon as the mouse travels away from it.

When creating the navigational bar, I tried to relate my product to the professional article. For example, most professional rollover buttons are fairly subtle and the rollover element rarely protrudes out from the edges of the button. Doing this ensures that no unwanted white background can be seen around the edges of the buttons. In most websites I have evaluated, most navigation bars specifically represent the theme and colour scheme of the rest of the website. Therefore, I have ensured that my bar is blue, as per the colour scheme, and includes the basketball - which is common with the rest of the website. I think using these conventions help to improve the sporting mood of the website.

As you can see by the example navigation bar on the left, the bar relates to the style of the website (Children's) in terms of the multi-colour and images used!


Technically, the navigation bar will be exported as a .PNG with moderate file compression. This means that it will be loaded quickly online and will not keep users waiting. The document will be exported at maximum resolution and at 220PPI which is ideal for viewing on screen! In terms of colour, I will export it with 28 Bit colour as is the convention of modern digital graphics.

In terms of strengths, I feel that the creation of the navigation bar was an excellent starting point for getting used to fireworks and creating professional digital graphics. I feel that the outcome of my rollover buttons is effective and is what you would expect to find on an existing website.

For a weakness, I feel that a more tight colour scheme could improve the appearance of each button since at the moment, the choice of colours means that the buttons look rather busy.

Texture Graphics:

I have decided to create a total of two different texture graphics to give the website a greater variety. One of these was photograph based and the other was vector based.

For the photographed version, myself and Josh visited the PE department to acquire some unused basketballs/footballs in order to cut up and scan into the computer. While this was relatively successful, I found that the curvature of the deflated ball meant that shadows were cast over sections of the ball during the scanning process. As a result, the scan looked crude and unprofessional. Therefore, I decided that it would be best to stick to a vector based texture graphics.

In fireworks, I began by creating a blank plane and assigning a typical basketball texture to it. Since fireworks allows us to assign textures to objects, I was pleased to find that a simple "Mesh" texture was sufficient to create a convincing basketball texture. After that, I created the black sections of the basketball by slicing circles and rectangles to create the illusion of the cross section of the basketball.

During the creation of these texture graphics, I feel that a key weakness was the fact that we could not find a way to effectively use a real football/basketball to use on the website. However, on the plus side, making our own does avoid copyright issues and allowed me to develop my knowledge of Fireworks more extensively.

None the less, I did not want to forfeit our photographic texture graphics. Therefore, I used one of our contingency designs and took a simple photograph of a patch of grass on the school field with Josh.

Then, to make the photograph look more professional, I used photoshop to increase contrast, saturation and filter colours so that it would fit with the style of the rest of our texture graphics.

Technically, the texture graphic will be exported as a 24 Bit image - this is especially important with photographed content due to the shier number of colours in the design. In addition, the saturation of this image will be rather high in order to make each visible colour more vibrant. As expected for online viewing, the image will, once again, be exported as a .PNG with moderate compression - aimed file size will be no more than 2mb for efficient loading times on slower broadband!


In terms of strengths, I feel that the outcome of my texture graphics stay fairly true to our designs - despite the slight change of plan. Although, I feel that using the grass texture instead of the football gives our texture graphics greater variety and will make our website far more exciting overall.

Logo:

When creating my logo, I attempted to stick to the design, however, I felt that the trophy on top of the basketball had little relevance and, as well as making the logo look too busy, ruined the original colour scheme with the golden and black colours. Instead, I emphasised the basketball by using a motion blur effect to give the illusion that the ball is moving through the air. I think that this works well since it gives the impression of action and excitement.
One problem I had was that the ribbon did not look as though it was attached to the rest of the medal and, as a result, looked out of place. To remedy this, I used the paint tools instead of the vector tools to create the golden hook which is used to hold the medal. From a distance, I feel that this solution works well and looks natural. However, if I was to create this again, I would steer clear of the medal style and try to find another way to relate to the olympic legacy.
In the design, the text bends around the inner edge of the circle. To achieve this effect digitally, I used the 'wrap text' function to give it the curve. I feel that this is one of the strongest elements of the logo since it is fairly innovative and relates to the olympic legacy since it is designed in the style of a medal.

When creating the logo, I purposely tried to link it to professional alternatives that I researched previously. Perhaps most obviously, most logos I researched involved the 'wrap text' - which means that the text bends around the logo. For example, the BMW logo adopts this technique and I feel that, as far as logos go, this one was very successful. More obviously still, the circular structure of my logo appears to be the convention and, due to the fact that ours is a sporting website, I felt that the circular structure related to that of the footballs/basketballs/tennis balls used by the department for which we are creating the graphics for!

In terms of strengths, I feel that the logo is interesting, child friendly and quirky. I feel that, despite subtle changes, it stays in line with the original designs. In addition, it also conforms to our colour scheme.

In terms of weaknesses, although it looks professional, the ribbon at the top makes the logo too tall - which could mean that positioning it on the webpage may be more of a problem.

Animated Gif:

When thinking about creating my animated Gif, it was evident that I needed to create some kind of character to use. Instead of simply copying a suitable image from the internet, I downloaded a sample character and chose to trace over it in fireworks. The advantages of this are that I could change the character to meet our designs and, at the same time, avoid any copyright issues that may arise. In order to make the GIF stand out from the rest of our colour scheme, I used a range of reds, greens and browns so that the character would be more noticeable.

Although fireworks has the ability to create simple animations, I felt that it would be more professional and convenient to use Adobe Flash instead. While this was fine, I needed to export each moving part separately in order to animate the character. Therefore, I exported each eye, eyebrows, foot and hand - as well as using the same basketball from the logo but clearly with the absence of the motion blur effect.

Inside flash, I decided against using motion Tweens and opted for stop frame animation instead. This is because I wanted more control over each element of the animation as well as giving the graphic a more hand made feel.

Technically, due to the large number of frames in the image, I have decided to reduce the bit-depth instead of the resolution to regulate file size. I will be using a bit depth of 8 bit. When viewed at full resolution, some people may see this lower bit depth as a pixelation. Instead, this just means that fewer colours were exported in order to reduce file size. Luckily, this effect is less noticeable when viewed at slightly lower resolutions - as seen here!

In order to effectively animate each element, I created a new layer for each moving part. This was excellent since it ensured that the layers did not interfere with each other and ruin the animation by mistake - I did this by locking layers into place.

In all, I am very pleased with the final outcome of my animation and feel that it fits in very well with the style of our website. I feel that it broadcasts a positive attitude to sports as well as it looking humorous to entertain younger viewers.

Screen Icon:

Although I felt that the original screen icon was brilliant for our purpose, I felt that it was simply impractical for a screen icon. Since a standard icon resolution can never be larger than around 250x250 pixels, our proposed icon would be out of the question.

To fix these problems, I realised that B.A SPORTS was far too much to fit onto an icon so small. Therefore, I decided to replace this with simply "BA". In addition, using the tennis balls at either side was a bad idea since they would be simply too small to see properly and would appear as just green specks when viewed at resolutions such as 150x150. Therefore, I decided that in the case of the screen icon, little is more!

Now that my design for the icon is complete, I am pleased with the overall outcome. Despite the fact that it is very basic, I feel that, in comparison with existing screen icons, the amount of content inside the icon is about right - in my opinion. Clearly, the simplicity of my screen icon is also directly comparable to professional screen icons as it is fairly minimal in terms of content.

I feel that my icon conforms with the rest of my digital graphics since it uses the same font and the same vector graphic football as used permanently. Trying to be creative, I re-coloured the football blue to fit the colour scheme. As a result, I think this touch makes the icon more engaging to look at. I feel that these were the key strengths within my logo.

The file size of the logo should be minimal. Therefore, I have used maximum compression at a low resolution; the file should be less than a few hundred KB. This means that the icon should load quickly on slower broadband but, with 24bit colour, should still look effective as it was designed to.

In terms of weakness, I dislike the fact that I deviated from the original designs. Therefore, to improve in the future, we should ensure that our initial designs are feasible before we proceed to make the final versions. Expanding on this, we should remember to make our designs specific to the purpose: in this case, remembering the typical resolution of a logo would have prompted us to ensure that the logo content was minimal - in stead of trying to squeeze too much in!

Background:


When creating my version of the background, we, unfortunately had to deviate from our design once again. Myself and Josh had planned to edit a photograph that we would take of the school's goal posts but, interestingly, the school's goalposts have not been put up. Therefore, it was impossible to photograph them.

Alternatively, we could have chosen to download an image from google and edit that to fit our purpose but, due to the fact that we would be very limited in terms of camera angle and quality, this was out of the question. In addition, copyright issues confirmed that this idea was not a possibility.

Therefore, although this was not my favourite idea, I reverted back to our initial design of a coloured background (of grass) dotted with a series of sporting balls.

Unfortunately, I did decide that this original design was a little too basic - possibly due to the fact that we did not develop this design and further than from the initial stages. Although I did keep the 'blue grass' in the background, I decided to use another motion blur effect to give the idea that each ball is in motion. I thought this was an excellent idea as the background will link to my other designs (the logo).

To create the grassy background, I imported a previous image, that we photographed during our digital graphics creation, into photoshop and used the channel mixer to change the colour. It was then a simple task of layering each ball - which I used from my vector drawings - on top of the edited grass.

In all, although this was not our plan, I am fairly pleased with the outcome of this background and am pleased that the original design was not ultimately scrapped. I feel that my strengths with this design are that it links in with the other digital graphics, as mentioned above, in terms of style, colour and effects. I feel that the fact that each ball has a different level of 'blurriness' gives the image a real feel of depth.

Obviously, a key weakness with this design was the fact that we were not able to photograph the goalposts as intended. Inevitably, despite this not being a consideration, we should have checked with the PE department that the goals would be assembled in time for our deadline to avoid inconveniences such as this one. None the less, I am still pleased with the eventual outcome of the background and feel that it should fit in with our website comfortably.

This brings us on to this background's second key strength; the fact that it is not as busy as our proposed final design means that it will blend into the website with more subtlety, as apposed to hogging too much of the users attention with too much content - which would have been the case with our proposed final design!

Web Banner:

Finally, I came to design the web banner - which was my favourite of each of the designs. Incredibly, this final design did conform to the design of the web banner - which is rather a novelty considering the last two final designs! As in the design, the banner consists of a green/grass background that myself and Josh photographed specifically on the school field. We made sure that we photographed the grass as close to mid-day as possible to ensure that the grass was evenly lit.

Using our vectors of a football, basketball and the innovative golf ball, I arranged each ball as was planned on the original design. However, this time, I decided to include an outline and a small shadow to make each ball stand out from the background - which I blurred slightly to give some depth of field.

Then, using our chosen font of "Apple Boy BTN", arranged the text "BA sports - for sports with a kick" in front of the banner - in our originally proposed format. Using the skew tool, as well as the well-used motion blur, I was able to distort the word "Kick" in order to give the impression that it had been kicked.

The image will be exported as a high-resolution .PNG file since this will be displayed quite largely on the screen. Therefore, I will keep the compression minimal and clearly use a standard bit depth of 24 bit to retain the photographed colours in the background.

In all, I am very pleased with my final web banner since it conforms to our design and looks professional at the same time. In comparison to professional web banners, I feel that it is visually pleasing and relates to the subject - as most professional ones do.

In terms of a weakness, I feel that I should have changed the "Ba" to "B.A" as we do not want the PE department to be associated with sheep for any reason.

Now that the designs are complete, I was able to record a reflective screencast on my portfolio:



The Website Preview:

Now that all my digital graphics are complete, It is time to substitute them into a website layout - such as the one proposed in our portfolio. Luckily, we have adobe 'dreamweaver' available to us - which is a professional web design tool!

To begin, I exported a version of my background with a reasonable resolution and set my background in dreamweaver. I set this background to repeat - which means that background will continuously loop - making a collective image which can fill any given space (excellent for different monitor or browser sizes.

Then, I imported the web banner and placed it, as planned, towards the top of the screen. I resized it so that it would stretch from edge to edge. The reason for this was because on most of the websites I reviewed previously, this was the way that banners were positioned. Therefore, in order to be as professional as possible, this is what I chose to do.

Then, I exported the navigational bar as a fireworks HTML and imported it directly into dreamweaver. Unfortunately, this graphic bought many 'spacers' with it - these are what create the gap between each button on the navigational bar - which are normally transparent. However, this time, the spacers were not transparent and, as a result, I deleted them and manually spaced each button. Again, these buttons were placed as they would be in professional websites (towards the top-left of the screen)

After the navigation bar, I imported a very blurred version of my basketball texture graphic and overlaid it with some sample text: the text made no sense but was in the correct font and size in order to give a realistic preview of the website.

For the animated gif, I could not find a way to make the image transparent without halting the animation. Therefore, the preview animated gif is still on the website since the alternative would be a large white box around the animation. However, if we do create the final website, I will export the image as a .SWF and find a way to make it transparent.

Next to the animated gif, I positioned my logo underneath the web banner. I tried to make it look as though the logo was suspended by it's ribbon from the web banner and I feel that this effect worked reasonably well.

Finally, for the main body of the homepage, I imported the grass texture graphic underneath the rest - adding a similar blur as seen on the basketball version. As on most websites I evaluated, this block of the website reaches across the whole page (similar to the web banner) Therefore, to reduce the amount of text visible (as this would be disengaging for the audience) I used some sample pictures on the far left in order to link the page more directly to the PE department. If we decide to make the final version, these images will be replaced by images taken by the PE department to promote it.

In all, I feel that my website is comparable to the other website that I evaluated. In terms of layout, I followed what appears to be the convention: navigation bar on the top left, a sidebar with widgets/animated gifs/logos and the main body of text being contained towards the bottom left.

1 comment:

  1. Some very good entries, Sam. Try not to combine tasks together, rather show an entry for every lesson and explain exactly what you were planning on doing in the lesson and show much of that you actually achieved by using evaluative comments.

    ReplyDelete