Graphics Design Unit

James Buckmaster

AO1

Terraria&App&Store&Icon

The&avatar&in&the&middle&of&the&icon&is&the&avatar&you&play&in&during&the&game.&He&is&highlighted&from&the&background&due&to&the&black&borderline&that&differen>ates&him&from&the&blue&background&and&the&green&foliage.&The&icon&is&a&pixelated&bit&map&image,&it&contains&pixels&of&shading&and&light&that&help&bring&out&the&main&colours&of&the&image,&the&icon&also&has&no&text.&

The&image&on&the&right&has&a&guideline&template&over&the&top&of&it,&the&is&Apple’s&template&for&any&app&that&goes&into&the&App&Store.&You&can&see&that&the&eye&of&the&avatar&is&right&in&the&middle&next&to&the&crosshairs&and&that&the&body&is&in&the&middle&in&the&line&that&runs&in&the&middle&of&it.&

The&top&two&sides&of&the&icon&have&leaves&or&clovers&in&them&to&add&to&the&logo’s&theme&but&if&you&look&at&the&other&two&previous&logos&that&same&space&is&clear.&All&three&logos&have&the&same&type&of&background,&4&shades&of&blue&going&from&dark&to&light;&this&brings&out&the&main&avatar&which&is&posi>oned&in&the&middle&and&the&item&they&are&carrying&is&on&the&leF.&

Visually&I&can&see&16&colours&when&looking&at&the&logo.&Using&the&colour&index&feature&on&the&Photoshop&it&showed&me&there&is&actually&230&different&colours&in&total&in&the&logo.&The&colours&are&mostly&made&up&of&shading&and&different&light&strokes&to&really&bring&out&the&image.&

Game Publisher

Online Content!

Game!Platform

Exclusive

Game Title

Cover Artwork

Age Rating

Game!Platform Online Content!

Age Rating

Cover Artwork

Game Title

Game Developer

Game Developer

Game Platform

Game Name

Game Awards

Front Artwork

Front Artwork

Age certificate

Age certificate

Television System

Game Publisher

Game Publisher

Game Developer

Game Developer

Looking into App icon layouts & game covers.

AO1

- Main game logo - Black t shirt which is easy

wearable - Artistic

- Mainstream audience, people who play the game casually when they have time and wont look into it anymore than that.

- The t shirt is easily understandable by anyone.

- Nothing too fancy. - Doesn’t require good knowledge of the

game.

- Game themed graphic - Grey t shirt which is easily

wearable. - Relates to sport in the real

world.

- This t shirt is for people who are a casual/core gamers.

- They have to know the game to get the resemblance.

- !

- The graphic is relating to a place in the game and turning it into a graphic that would be used for a sporting club, etc; in the real world.

- If the audience doesn’t like sport but likes the style of graphics, this t shirt would be ideal for them.

- Game themed outfit. - Jump suit. - In game graphics used. - Real life brand logo on the

jump suit.

- Serious core gamers. - Audience that invest in the

games theme for a personal satisfaction.

- It gives people something to invest in that is either in the game or has something to do with it.

- Only the fewest people who love the game will understand the logo and the jump hit together as a bit of game merchandise.

- Game themed design. - Black t shirt, easily wearable. - Half text based, half graphic

based.

- Casual/Core gamers. - People who now the game well

enough to understand the t shirt.

- The t shirt is easily understandable by anyone.

- Nothing too fancy. - Makes them feel individual as not many

people have that t shirt.

- Game themed graphic - Graphic based - Bold - Green, one of the games

colours.

- This t shirt is for people who are a casual/core gamers.

- They have to know the game to get the resemblance.

- The graphic is a simple version of an popular enemy in the game.

- It’s a fun t shirt for people who like the look of the enemy.

- Game themed t shirt. - In game graphics used. - Game’s official logo used.

- Casual gamers. - People who enjoy the game on

a casual level.

- It gives people something to invest in that is either in the game or has something to do with it.

- The game is very popular and everyone will know what the shirt is about.

These is a collection of early app work, t shirt

research and book cover research.

AO2: Freelance Rates

• There are 232,000 graphic designers in the UK and around 62,900 (28%) are freelance.

• The current average graphic design hourly freelance rate in the UK is £20 per hour.

• Less than half of freelancers use a time tracking system, this means that the client would have to bestow a lot of trust in the designer not to over charge them.

• Again, less than half of freelancers don’t have a rush fee - rush fees are good for both sides as the designer could get paid more but the people that don’t have the rush fee don’t get pressured into more hours and do it at the pace they are already at.

Graphics Design: Wallpaper James Buckmaster

What Will It Consist Of?

• The wallpaper will consist of many images having something to do with Achilles.

• Characters, text and recognisable images such as the helmet from the app logo will be included.

• Colours will vary but they will be related to the colour scheme in the actual game Achilles some how.

• The challenge in this project is to understand what goes well together - that being images, colours, composition.

Where I Stand With Wallpapers• We covered making wallpapers

slightly in our first year. • It had no relevance to any other

project so we could stick whatever we wanted on there.

• The only problem was that I couldn’t remember how to do it as it had been

over a year. • (First years wallpaper below)

I looked for help on the internet, a website called vector cove had a tutorial.

This tutorial wasn’t much help so I went on and found a

terrific sight called red bubble.

The tutorial showed me through the steps and

reminded me on what I had to do.

Assets

Achilles The Rock

Minotaur Athena

App Logo

These assets appear either in the game or in have something to do with the game

so people can relate it to Achilles.

First Wallpaper

My Reaction:

• I like the first attempt, nothing too fancy.

• Colours work well together, browns, reds, greys mix well with the white background.

• Looks too simple, a bit like cheap wrapping paper too.

Clients Reaction:

• To many grey colours, needs something else like a background change.

• Helmet is most recurrent theme, mix it up a bit.

• Text shows off Greek theme which is good.

Next Step..

• The client told me that the white background isn’t effective especially when there is a lot of grey on top of it making it a “dull mix” - I am going to make the background the same colour as the background as the app icon.

• I’m going to keep some of the greys in with the wallpaper but with the new background they shouldn’t cause a problem, the major helmet theme will die down a tad as there are other areas of Achilles we can present.

• Make the text a bigger part of the wallpaper.

Second Wallpaper

My Reaction:

• Better use of colour in the background, brings out colours.

• Items are blurred which is not good, technical error.

• Use of main character instead of just the helmet resolves the over use of helmet issue.

Clients Reaction:

• Lighter background, different shade.

• Use less assets, take rock out as it looks confusing.

• Still have helmet structure from first attempt.

• Helmet as ‘A’ in Achilles, not so much a good move.

Next Step..

• Client seemed more pleased with first wallpaper, I am going to strip the second one down with everything that the client didn’t like so the rocks, the background colour, the use of the helmet as an ‘A’ and start a fresh.

• I have a good idea of what sort of style of client wants now and having learn’t from the last two wallpapers I am pretty sure I can nail it here.

• If I look back to the RedBubble tutorial I noticed that the background they made isn’t as crowded as mine, maybe that’s one of the problems - the simpler, the better.

Third Wallpaper

My Reaction:• Better colour than second design.

• Everything’s in focus.

• Assets look good.

Client’s Reaction:• Looks more connected.

• Colour complements maroon colour in helmet and text better.

• Good not many greys as before.

• Background colour could go a shade lighter.

• Assets could be smaller.

!

Next Step..

• I’ve leant how to compose my assets in the grid which I position everything in, where as before I thought I had to fill every gap but now I know gaps are necessary.

• I don’t need to arrange the assets again, only make them smaller.

• Look into similar shades around the colour I am using at the moment for the background.

• Make sure the new background shade still complements the maroon and grey colours.

Final Wallpaper• I’ve taken the clients feedback on the

third wallpaper in and come back with this. Most of the comments on the third wallpaper were positive which only allowed me to adjust small details in the design.

• Adjustments consist of a background colour change and resizing the assets to complement the size of the page.

• The process has shown me what works and how to improve on my first design, the first design is linked to my final design a lot.

• This wallpaper opens up promotional and advertising possibilities for Achilles.

Graphics Design Unit: Web Banners James Buckmaster

The Plan

• To create a graphic involving my game assets to create a web banner.

• Show evidence of the graphic in a working progress.

• Get feedback, reflect and redesign graphic.

• Research other games stickers and banners to see if it helps my work.

Where I Stand With Banners

• Over the year of doing the diploma I have used Photoshop and Illustrator many times and am familiar with how to use them both effectively.

• Creating banners will demand a way of making it look good and effective so it stands out to possible customers, this is what I need to research.

• I already know that banners are a key part of direct marketing and that it leads to sales directly with just a click, therefore it has to look as good as it can to be effective.

Banner Examples

• These examples are all online advertisement but vary in what they advertise.

• Some advertise websites, some apps, some games.

• You can see that the app store advertisements (destiny island & wanderlust), have a certain way of presenting their app or game - keeping up with the trend.

• Web advertisements are quite glossy and a bit tacky, they make you not want to click on it.

App Banner’s Close Up • If we take a closer look into app advertisements,

most of them are similar - they have a clean theme to them.

• Fan Area and Magic Direct both have mute simple backgrounds to bring out the typography - they both have empty space within the box.

• The Surf Reporter App does this differently, they have filled the space with different texts, a themed character and a large iPhone - this sort of ad makes you not want to click on it as it doesn’t look professional and is most likely a waste of time.

• The Go Mobile skyscraper ad is a cross between the two, it keeps spacing and a similar colour scheme like the one above it but at the same time uses the wrong text and doesn’t have a ‘Available on the App Store’ logo.

• The ‘Available on the App Store’ logo makes the ad look professional, it’s all about the positioning of it as well.

First Banner Ad

My Reaction:

• Good first start, taken in simple ideas from the app ads I looked at.

• Composition is good, spacing and positioning is key in this task.

• Black and white image (expect from phone screens) to start with, makes it easier to concentrate on the composition.

Client Reaction:

• Framing between top of ad and phone doesn't match framing between bottom of ad and app store icon.

• Try having phones next to each other rather than overlap.

• Change slogan to something else.

• First phone covers main character, try switch.

Pushing On..

• I’m going to work on framing everything a lot more, by reducing the size of the app name and the icon.

• Change the black and white background and text to colour.

• Try new things with the iPhones, maybe add another phone or change the screens around.

• Work on a new slogan or have something else there instead.

Second Banner Ad’s

My Reaction:

• I think the second lot of banners are better than the first lot, especially with colour.

• The use of three phones instead of two is effective as it uses more of the page.

• I am in the middle about the text telling them to download instead of the icon.

Clients Reaction:

• Use of assets are good.

• Look’s like an iPhone wallpaper rather than the game.

Pushing Further..

• The clients reaction wasn’t as good as I hoped, they felt that the phone screens doesn't show the game off enough.

• I need to include gameplay or assets in a certain way to make it look like a game.

• I might swap around colours to bring it out a lot more.

Third Banner AdMy Reaction:

• Defiantly included in game screen shots including gameplay and a splash screen.

• Kept the colour scheme going but changed the light background to a maroon colour, same colour as the helmet.

• Kept the 3 phone positions the same, I removed one and made the other landscape but it didn't work.

Clients Reaction:

• Good I put the text instead of app store logo.

• Colour work.

• Gameplay works.

• Looks clean and professional.

• Maybe add another screen shot rather than splash screen.

• Adjust assets to add slogan.

Pushing Further Again..

• The overall feedback from the client was good, much better that the previous designs.

• I agree with the change of the third phone from the splash screen to another gameplay shot, it would make it look a lot better.

• I think a slogan would give it a bit of life, attract attention of the audience.

Final Image

• Myself and the client are very happy with the final ad.

• It shows Achilles in a modern app advertising way and shows it for what it is - 2D pixelated platformer.

• This style and format of this ad will carry over in other sorts of web advertisement like skyscrapers, square pop ups and full banners.

• You can see the skyscraper example next to the main banner in this presentation; same style to not confuse customers.

App Store Design Ideas

James Buckmaster

Top 5 Tips For Making An App Icon

1) Use complementary colours e.g. blue and orange.

2) Make it simple, simple doesn’t confuse you.

3) Try not to use text, the icon is a visual representation of words.

4) Stand out from the crowd.

5) Don’t worry too much about details, no one will notice.

iPhone Screen Of Target Market

This is the iPhone screen of theaverage target market for Achilles;the target market is early teens and

before, this is the stage where socialmedia comes into their lives more and

only the cheap or free games have a placeon their phone.

I’ve included a lot of social media apps because during the early teenageyears, teenagers and kids start to

connect with their friends and the internet.

Facebook and Facebook messenger are included because that’s the basic

social media app to have.

Vine and YouTube are involved as videos have never been more popularacross all ages, they are all top

social media apps.

What’s App is there because kids tend to have small contracts, this app allows them

to text and send media for free.

Snapchat is allows peopleto send instant photosfor free. Very popular.

Skype allows people

to call and chat to

anyone for free.

Instagram allows you to share photo’s with anyone that follows you, young

teenslove this.

Games like Flappy Birdare free and would of

ended up on here through

the addictive viral period

it went through, globally.

Zombie Lite and Talking Tom

are free and fun apps, Tom copies

your voice and says it in a higher

pitch and Zombies Lite is a trialversion of an arcade game.

The free music app allowspeople to download music straightfrom the internet to their phone.

Racing and DoodleJump are paid games,

but the average consumerwouldn’t have many.

Temple Run is a free game that went viral.

Initial App Icon Ideas

Gameplay/Screenshot

Language As Image Abstract/Iconic Symbolic/Thematic

Title As TextCharacter/Action

Logo Feedback

Logo Feedback

Action Plan For Best Icon

I chose this design as I believe icons should be simple and clear so people can remember them and spot them out easily,

this logo is that.!

My improvements I need to make are:!

- Make an 8 bit version and compare it to this version.

!- Maybe add some drop shadow to the image

so it doesn’t look so flat.-

-Personalise the image so it doesn’t look so much like clip art.

App Rating: 9+9+ This rating may include cartoon violence and/or mild suggestive, horror or fear

themed content not suitable for very young children.!

Drugs - No references to illegal drugs or drug misuse.!

Imitable Behaviour - Children could be influenced by the adventure theme in Achilles which could lead to danger, no realistic accessible weapons are used in the game.

!Language - No language said in the game.

!Nudity - No nudity in the game.

!Sex - No sexual activity takes place in Achilles.

!Threat - Frightening sequences or situations where Achilles is in danger are not

prolonged or intense; the fantasy setting reduces the effect of this.!

Violence - Violence is present in Achilles; there is death but no viewing of it, Achilles will simply start from the beginning plus the fantasy setting makes it more

mid.

Final Icon Composition

Previous Final Newest Final

The helmet worked well as a logo butI needed to adjust it so it would

fit better with the app grid.

I redrew the whole helmet so it would fitin with some of the lines and corners in thegrid. The top of he eye wholes are on a point

and the whole helmet is symmetrical.

Further Icon Composition

This icon uses the grid well but through feedbackI realised that the flicks on the sides of the helmet

are too big and it’s starting to come away froma standard greek helmet.

I made one or two adjustments to it to create my newest icon. I’ve used the diagonal line that

runs throughout the grid as a resting line for the side of the helmet and used the curve to carry it

on.

Working With ColourThese two icons are colours using the two colours

used in the Achilles splash screen. #CCCCCC (grey) and #660000 (maroon).

Colour Wheel Primary Colours

Secondary Colours Tertiary Colours

Complementary Colours Analogous Colours

The other 4 icons came from using

the colour wheel. I noticed that

green was opposite my maroon colour

so I tried working with green. I then used 2 shades of maroon/red to try

an analogous colour approach. I

used a yellow/green colour with a red colour and that also worked

well.

#CCCC99 #993333 #993333

#993333 #993333 #660000#99CC99

#CCCCCC

Final IconMy final icon came from

the nice colour comparison I had with the cream and

maroon colours. I felt thatthe cream in the other trywas a bit too strong so

I went down a shade.Personally I really like this new shade, it compliments the helmet well and

gives it a nice modern matt look.