Although im still quite certain of the asset designs i want in the final piece, i still want to tweek and develop it as i go along if needs be, So from here im not sticking to my paper prototype and sketched designs as much as id planned too originally.
First things first, gathering suitable images and icons for the animation.
I started with the background images, i wanted at least two different views, preferably the same match but of different situations and emotions.
From what ive gathered in my original research of current broadcasts of football. The game play view switches between close ups and full/half pitch views.
The close ups are mainly used during fouls or interesting tackles.
My animation will have an opening credit screen so in theory the game would only be beginning, so no interesting close ups would be needed straight away, so a full and not very active pitch view would be the most appropriate as the first game play screen.
I ended up choosing this image as it gives off an excited, early in the game atmosphere and is quite vibrant and striking.
I chose this close up not just because its very active and intense but because these opposing teams have the highest quality visuals available for team crests and plenty of online reviews for previous matches together.
I researched football, its teams, players and tournaments, then narrowing my search towards these two particular teams (Kerry and Derry) and their previous encounters.
I tried to keep all the information correct but between missing player rosters, minute by minute game play or small but crucial info on the game, venue, dates and time, i will end up only sticking loosely to facts.
The basic info ive decided to go with at this point....
Tournament: Allianz Football League
Match: Round 2
Venue: Fitzgerald Stadium
Date: Sunday February 9th
 |
| Derry |
 |
| Kerry |
Above are the two opposing teams crests. each team has a crests, but i think the shapes and colour schemes between these two suit the theme im aiming for in this graphic overlay.
They are very different yet suit each other.
There are many older versions of these crests but these are the two highest quality, up to date versions available. Because Derrys crests has a black outline and Kerrys doesnt, im afraid on might look more dominant and eye catching, so i may edit these slightly, or add an effect to equalize them.
The logo wasnt focused on too much before this last massive amount of research. through the design and development stages i decided on major aspects of the logo, like position, size, dominance and other features, i didnt actually decide on any particular logo.
Following along with the other information i gathered, i noticed that the most popular and local channel this sport is broadcasted on regularly is RTE.
I researched RTE and its current and previous logos, and found the type and style it uses.
As i stated previously, i want a non dominant constant brand/logo, no over bearing colours, trimmings and preferably no box or background.
RTE branding people must be thinking and long the same lines, as they regularly broadcast an opaque grey logo, consisting simply of the letters RTE.
It was difficult to get a high quality visual of their current opaque logo/brand, and when i did find one, it seemed out of place. so i made my own by using their simple, generic typeset and basic colour scheme.
My version of the logo has and does everything i intended it to but it doesnt have RTEs recognizable curved E with a stroke above it, but thats not really a crucial element in this project, therefore like alot of the player information, it is only loosely based on the original
. 
http://www.torun.mm.pl/~stepski/TVforum/mocks/rtenews/sport.jpg
I started the creating process with making the assets for the opening screen. The information is minimal, the real communication wont be in the type but in the way the elements move and create a high tension atmosphere, this will be done later on after effects.
 |
| team crests |
 |
| intro info |
For this intro info im hoping i can create a dynamic spin in-spin out or stretch in- stretch out animation.
Im really pleased with the outcome of this asset, its subtle but eye catching, it not only doesnt obstruct the view of the game play and venue but it also communicates the relevant information in a non invasive style.
 |
| pitch plan |
For the transition im hoping to have it swipe vertically in - pause - swipe vertically out or something similar.
I think the red gradient in the banner really suits the final view, and allows different shades for different info sections, making the inner layout of the box easier to understand at a glance.
 |
| constant assets- screen one |
It took alot of trial and error but im happy with the final spacing between the banner asset and the edge of the screen. The spacing and size i decided on allows the bold coloured banner to be very dominant on screen but not overbearing or distracting, it in no way interferes with the focal point/footage.
The final design not only suits the full view that has a relaxed and distant atmosphere but it also suits the second screens intense close up with an energetic, fast paced atmosphere.
 |
| constant assets - screen two |
If i were to continue developing anything, it would probably be the info in the banner box and its current layout. Although it easily communicates no more or less than the relevant information, the alignment and or font size could be better for a more professional finish.
Once the assets were completed i took a short break and focused on other work, returning to my 'finished' assets with fresh eyes, only to see the many errors.
Because i hadnt been following the guidelines like i was meant to, i left some of the assets too big or too far off for standard viewing.
not within the standard view guidelines
very slightly but obviously off center
Although the concept is right, some of the assets arent centered or arent sticking to both standard and widescreen guides.
Apart from the placement problems, i also noticed some image issues i need to clean up, and certain assets dont quite seem as striking as i originally expected, so whilst i fix these problems in photoshop i will also edit and see what alternatives styles there are for the less striking images ie. team crests.
This is a fairly decent example of why its important not just to double check work, but also get second and third opinions (preferably not the opinions of your cat or spouse) and if time allows take a few hours/days break mid-project, that way you can see with freash eyes any over looked errors or alternative designs/options you wouldnt have thought if you were to complete the project from start to finish without reexamining your work and ideas.
Unsure what all had to be done in regards to redoing and editing the existing digital assets, I decided to start at the beginning and work my way through the assets in order of screens, asset appearance and priority, documenting and fixing all the issues i would have over looked the last time.
The first to be modified is the team logos/branding.
The main issues that needed addressed were the unprofessional edges of both the assets, the lack of vibrancy and their placement in regards to not accommodating both widescreen and standard screen dimensions.
I started with the Derry logo since it had the most obvious indents in the edges. At first i attempted to smooth the edges out and erase any excess parts of the logo and enhance the colour using several methods including effects and colour saturation.
These efforts gave the logo a higher quality presentation, but i wasnt satisfied so i decided to start from scratch with both logos.
In small sections i carefully erased the excess white boarder in the stock image with the quick selection tool and eraser tool. This fixed the edges but after exhausting combinations of dozens of effects, styles and tools, i felt it needs a more dominant boarder, perhaps a glow ? and either enhance the intensity levels of the colours or add a slight filter to it. This of course means the same effects or filters would need to be used on the Kerry logo as well and what suits one may not suit the other, so after a long process of trial and error i decided a plastic wrap filter gives both logos a clean finish and makes them more dominant and engaging.
Derry.
highlight: 18
detail: 10
smoothness: 4
Kerry,
highlight: 18
detail: 5
smoothness: 11
I think the filter gives the logos more of a metal, 3D object, life like appearance.
These added filters now dont work as well with the background colour scheme, so that needs further development too.
I tried to make the gradient levels more intense and create a more obvious contrast but it dulled the logos and still didnt suit the primary purpose of this simple opening screen.
So i tried to radiate the logo assets presence on either side of the screen instead, i originally wanted to create a glow effect that i use with other types of adobe software but throughout the styles and layers and even lighting i coudnt find the tool to create a glow. It is such a simple effect that i couldnt even find an online tutorial for it. This is a problem i come across often, i can understand and create work that others find far too complicated but i have trouble with many simple features most adobe users take for granted.
I was experimenting with the lighting (camera glare/spotlights) and colour adjustment features when i finally found the Fx icon. With this i was able to add the outer glow layer effect to each of the crests.
DERRY- Outer Glow
Structure.
Blend mode: soft light
Opacity: 100%
Noise: 0%
Colour: light yellow, near white
Elements.
Technique: softer
Spread: 15%
Size: 50px
Quality.
Contour: halfround
Range: 100%
Jitter: 0%
KERRY- Outer Glow
Structure.
Blend mode: hard light
Opacity: 60%
Noise: 0%
Colour: light yellow, near white
Elements.
Technique: softer
Spread: 5%
Size: 60px
Quality.
Contour: linear
Range: 50%
Jitter: 0%
Because of the different shapes of each logo, the properties of the same effects and filters need to be designed individually so they appear the same in the end. This is time consuming but worth it when they look more professional and equal in the end.
Now i just have to follow the guide lines i made in tutorial one so that the screen accommodates both standard and widescreen dimensions.
For now i think this is the only edits i want to make to this screens assets incase more makes it tacky or cluttered.
The next asset to edit is the intro info asset. The first and obvious edit to make with this asset is to replace the old crests with the recently redone crests from the opening screen and scale/align them accordingly.
Once that was done i edited the filters on the crests slightly so they werent as opaque, which brought my attention to the colour of the font, at first i assumed it was a mistake i hadn't noticed when creating the type but the colour was light pink on all the assets text, so it seems it was intentional. So i changed it too a boring, no frills white.
There was quite a few minor edits to the pitch layout asset, i began with scaling the assets to fit the standard screen, but then i noticed the whole asset off line so i very carefully tweaked it with the skew transforming tool. Once everything seemed in place i corrected the font colour, but decided instead of having two team names and adding unnecessary text to this prototype, i deleted/replaced all the team/player information.
At this point it looked finished, everything was the right size and shape, nothing too detailed over all.
But then i thought how the pitch plan is leaning inwards, and although i kept the player position boxes aligned for game layout purposes, they seemed off.
The lower boxes looked smaller than the higher boxes, this is because of the perspective, i changed the sizes slightly to fix this problem, but if the perspective still doesnt look right after further review i will try other methods of getting the boxes into perspective ie. skew them all at once so the spacing doesnt get messed up.
The info box didnt really need much editing apart from type alignment but i wasnt happy with its overall outcome, since it will be my main animated asset i decided to start from scratch.
I tweaked the type and its alignment, and cut out the team colours, they made the asset cluttered.
Once i had the banner created, i organized all the layers in subgroups, this will help during the animation stages.
So far ive made all the assets fairly centralized so that they suit both standard and widescreen, but im unsure how i should present the two constant assets that are to be at the top corners of the screen, ive tried placing them further into the center but that looks too out of place and still not fully within the standard screens boundaries. So Ive settled on having the logo only visible on widescreens since they werent a crucial element to this project.
Because of the new position of the banner and logo, the banner will now need a different transition than the one i had originally intended, im hoping to have it slide in from the left, or swipe from left to right, using its shape and transition to my advantage, hopefully creating a fast and sleek atmosphere.
0 comments:
Post a Comment