Tag Archives: UI

User Interface.

Gamesmith Q&A

I recently did a little Q&A with Gamesmith about some of my experiences as a User Interface artist in the computer game industry.

Gamesmith Logo

Give it a read on the Gamesmith Lowdown blog here: The Work of a uI Artist- Much more than menus and buttons


1:​ ​Hello​ ​who​ ​are​ ​you​ ​and​ ​what​ ​are​ ​you​ ​known​ ​for?

Jenny BrewerHello, my name is Jenny Brewer and I am a senior User Interface Artist in the games industry. I started my career at Lionhead Studios in Guildford, Surrey where I worked worked on a range of titles from the Fable series including Fable The Journey, Fable Anniversary, Fable Legends and Fable Fortune.

After Lionhead Studios sadly shut down, I moved to Leamington Spa in search of new adventures where I joined the team at Pixel Toys on their VR project called Drop Dead and helped out on the mobile title of Warhammer 40,000: Freeblade. Nowadays I am at Radiant Worlds working for the Oliver twins, Andrew and Philip!

2:​ ​What​ ​advice​ ​would​ ​you​ ​give​ ​as​ ​a​ ​mentor​ ​to​ ​anyone​ ​entering​ ​the​ ​industry?

Talking from an art role perspective, don’t be scared to get feedback on your work and learn how to adapt it to make things even better! It is a constant learning experience and expect a lot of hard work coming your way, but as long as the feedback is constructive, there will always be something new to take from it.

As you progress, you will find yourself remembering bits of feedback from previous projects and learning how to apply the relevant bits of advice to your future work. It is all about gathering knowledge and learning how to execute it to suit what you are trying to achieve. I have been in the games industry as a UI artist for nearing 7 years now and am still learning new things in every task I approach. I also find that technology is progressing very quickly, so keeping up with that also helps spice things up a bit and keep things feeling fresh!

When I am not in my day job, I always try to have a personal project on the go for when I am at home, this could be some freelance work or just some digital painting for my own enjoyment. I find working on some extra projects really helps to keep your creative mind fresh and is a very good way to continue portfolio development. Recently, I have been helping out with some UI work on a new 2D sandbox RPG called Kynseed created by PixelCount Studios. LogoI love playing RPGs and Kynseed really appealed to me as a gamer as well as an artist. It gave me something different to focus on during my spare time and I got to try out a Celtic inspired UI theme, something I have not had the opportunity to attempt before!

Figuring out how Celtic patterns can be repeated and adapted to suit a user interface was a good learning project, knowledge which I am sure will help me in future work.

Kynseed HUD Concept Kynseed HUD Concept

3:​ ​As​ ​someone​ ​who​ ​has​ ​contributed​ ​to​ ​some​ ​iconic​ ​projects​ ​and​ ​studio’s​ ​such​ ​as Fable,​ ​with​ ​Rare,​ ​Lionhead​ ​and​ ​now​ ​Radiant​ ​Worlds,​ ​how​ ​has​ ​the​ ​team​ ​dynamics differed​ ​and​ ​how​ ​have​ ​they​ ​allowed​ ​you​ ​to​ ​grow​ ​as​ ​a​ ​artist?

I have been lucky enough to work in studios where there has always been a good team atmosphere. No matter what your role, your contributions will be part of a much bigger picture, pulling everyone’s skills together. Being part of a friendly team where everyone gets on, has a laugh but is also passionate for what they do and keen to put the effort in is a great mix. At the end of a project you can all stand together and share your pride of being part of creating something awesome together! Teams can change during projects, but I have always gained a new set of friends from each team I have worked in.

4:​ ​Working​ ​in​ ​the​ ​Royal​ ​Leamington​ ​Spa​ ​area,​ ​how​ ​does​ ​this​ ​games​ ​hub​ ​area​ ​in​ ​the UK​ ​compare​ ​from​ ​your​ ​previous​ ​hub,​ ​down​ ​in​ ​Guildford?​ ​Any​ ​tips​ ​for​ ​someone looking​ ​to​ ​relocate​ ​to​ ​either​ ​area?

Guildford Market.jpgI have found Guildford and Leamington Spa to be fairly similar in terms of them being known as game hubs. Both towns have a large selection of talented studios located within them, so there is always a good selection of exciting projects being worked on. In my experience, local studios who are in business competition with each other, are also happy to offer help and support to their neighbouring studios when needed.  My experience of the game industry in these areas is a nice creative atmosphere, and very supportive to the local talent.

5:​ ​Which​ ​title​ ​in​ ​recent​ ​history​ ​has​ ​really​ ​pushed​ ​new​ ​boundaries​ ​in​ ​gaming​ ​with​ ​their UI​ ​and​ ​user​ ​experience,​ ​and​ ​why?

I am a huge fan of CD Projekt Red’s The Witcher 3 and I found that its UI does its job very
well! I didn’t struggle with the usability, found things to be nice and clear as well as visually suiting the franchise. RPG’s often have a large amount of UI required, the importance of getting all the different screens and elements working well together really helps with player immersion. Bad UI usually sticks out and players can quickly get frustrated, in turn distracting from the game itself. I found The Witcher 3 married different elements really well and helped the experience to feel seamless – just what I look for when wanting to sit down and get immersed in a massive open world RPG!

6:​ ​Has​ ​working​ ​on​ ​a​ ​VR​ ​project​ ​changed​ ​the​ ​way​ ​you​ ​have​ ​had​ ​to​ ​consider​ ​UI​ ​usage and​ ​are​ ​there​ ​any​ ​”gotcha”​ ​type​ ​considerations​ ​that​ ​you​ ​might​ ​tackle​ ​differently​ ​if doing​ ​them​ ​again?

Working on UI for a VR environment was a huge challenge and learning curve! The firstpexels-photo-532559.jpg
problem being how do you show the player key information when they can be looking in any direction and not necessarily where you would like them to? I was new as a player of the platform as well as developer, so certainly felt like I was starting from scratch again!  I came across some constraints due to the technology available at the time. Working with mobile VR I found that aliasing of thin fonts and textures was really obvious and required a different approach. I tried to make use of thicker lines and bolder styling which helped minimise the visual problems.  Next time I work on a VR title, I will certainly keep these things in mind.

7:​ ​What​ ​has​ ​been​ ​the​ ​biggest​ ​zinger​ ​of​ ​a​ ​problem​ ​when​ ​working​ ​on​ ​a​ ​multi-platform title,​ ​particularly​ ​between​ ​PC​ ​and​ ​console?

While working on Fable Anniversary, we were asked to make the PC version after completing the xbox 360 version. In an ideal world, I would have preferred to work on the PC version first as downscaling UI art assets is much easier than upscaling. Luckily, over the years I have learnt it is always best to try and create work at a large scale or as vector images to maintain as much flexibility as possible. I often get asked to provide UI elements which can be used elsewhere such as things the marketing and social media teams are working on, usually requiring assets larger than 64 pixel icons that work well in a HUD.

8:​ ​What​ ​was​ ​the​ ​worst​ ​review​ ​or​ ​gamer​ ​post​ ​you​ ​read​ ​about​ ​one​ ​of​ ​your​ ​projects? How​ ​do​ ​you​ ​react​ ​to​ ​that?

Reviews from reputable gaming websites can be useful and highlight parts of the product as a whole. While working on UI, I often don’t have time to play the game fully or know much about what other departments have been working on – unless a feature requires a specific UI element to be made of course!  I don’t generally read comments about games I have worked on as they are very rarely constructive. lol!

9:​ ​How​ ​do​ ​you​ ​explain​ ​what​ ​you​ ​do​ ​for​ ​work​ ​to​ ​people​ ​not​ ​in​ ​the​ ​industry,​ ​say​ ​at​ ​a party?

Usually I will say something along the lines of “I am a User Interface Artist in the video game industry, it is my job to make sure the player has the correct information clearly shown to them as they play”. Failing that, simplifying and saying somethin[sic] like “making menus, buttons and icons” sometimes gets a better response. Either way, the assumption of “So you play games all day?” is often called upon, where the truth of it is I now have less time to play games and need to make the most of any gametime I have!

10:​ ​ ​Finally……Any​ ​advice​ ​for​ ​your​ ​last​ ​bosses?

I believe good project planning and time management is vital to minimising crunch, limiting wasted work and keeping team morale high.

Drop Dead

I worked as a graphic artist on the Drop Dead VR project at Pixel Toys.  I was tasked with creating a UI system from scratch for a high quality mobile VR experience.

The idea behind the UI styling was that the player is wearing a high-tech headset which they are given in game, this was to help justify the sensation of wearing the Samsung Gear VR headset in real life.  The UI makes use of a lot of digital style effects while still trying to maintain clear readability in a VR environment.

My work pictured below is how the game launched in October 2016.

Drop Dead HUD

Drop Dead Frontend

Drop Dead Pause Menu

I also created the game logo and marketing art which was used as part of the product launch in October 2016.  The artwork was created by using 3D in-game assets and posing them to suit.  There was a lot of positioning work to get a composition I was happy with and using Photoshop for layering different assets as well as some digital paint work to really make the image and logo pop!

Drop Dead Marketing Art

Publisher: Pixel Toys

Format: Samsung Gear VR

Studio: Pixel Toys

Year: 2016

Fable Fortune Card Design

Fable Fortune Cards

Fable Fortune Cards

I worked as a lead graphic artist on the Fable Fortune project at Lionhead Studios.  I was tasked with directing the UI layout and visuals while also communicating the Fable art style to an external development team.

 

Card UX Wireframes

Card design plays a massive part for a Collectable Card Game, especially a digital one.  The cards need to look valuable and pleasing while still maintaining clear readability.

The first step to solve this problem was to treat the cards as their own UI.  I drew up a number of wireframes to quickly explore different options.

Rough Card Concepts

The more successful wireframes were picked out and I started doing some rough concepts for how the card image and text could be framed.  I kept this stage as quick shapes to allow fast iteration and discussions with the team.

The designs went through a lot of iteration and discussion as to what the patterns and visuals could be.  But eventually we ended up with the result you can see at the top of this article!  In the images, my work was focused around the frame, card backing pattern and information elements only, the concept art placed behind the UI elements was provided by the concept artists on the project.

Sadly Lionhead Studios came to a close before I could finish my work on the project, but the cards looked as pictured in April 2016.

The project continues to live on as some of my colleagues were able to continue development working as a new independent studio. You can follow the progress of the game on its website : www.fable-fortune.com

Publisher: Microsoft

Format: Xbox One and PC

Studio: Lionhead Studios

Year: 2016

 

Fable Fortune Deck Building UI

Deck Building UI

I worked as a lead graphic artist on the Fable Fortune project at Lionhead Studios.  I was tasked with directing the UI layout and visuals while also communicating the Fable art style to an external development team.

Fable Fortune Physical Prototype

The deck building menu was an interesting task to tackle as I wanted the ability to sort cards and decks to feel as natural as if doing it by hand on a table top.  First step to trying to solve this problem was to get some physical cards and start arranging them on my desk, taking note of how I would sort the cards and arrange them.

Fable Fortune Whitebox Test

I created a test scene in Autodesk Maya and created some test animations for how the cards could magically move.  This was really useful when communicating to the rest of the team my ideas.

Fable Fortune UX Layout

Next step was to draw up some wireframes to start planning what features we will need and where is best to place them.

Fable Fortune Polished Whitebox

I did some concept tests with basic UI elements in place.  There was a lot of iteration at this stage to try and find the best combination of elements and layouts.

Deck Building UI

Once a layout was agreed on within the team, I communicated my ideas to the external developer and created a polished 3D scene with fluid card animations.

Sadly Lionhead Studios came to a close before I could finish my work on the project, but the menu looked as pictured on the left in April 2016.

The project continues to live on as some of my colleagues were able to continue development working as a new independent studio. You can follow the progress of the game on its website : www.fable-fortune.com

Publisher: Microsoft

Format: Xbox One and PC

Studio: Lionhead Studios

Year: 2016

Fable Fortune Frontend Menu

I worked as a lead graphic artist on the Fable Fortune project at Lionhead Studios.  I was tasked with directing the UI layout and visuals while also communicating the Fable art style to an external development team.

This example illustrates the first rough planning stages for an idea of what the frontend menu could be.  I was keen to make the menu a 3D scene as this would allow us to establish a suitable atmosphere in one of the first screens to greet players.

Fable Fortune Frontend Menu

I created some initial rough sketches followed by some 3D white boxes using Autodesk Maya to prototype my ideas. These tests along with the planning sketches were invaluable when communicating what I would like to achieve with both the internal and external development team. We went through a series of iterations and feedback sessions to create a very atmospheric frontend menu.

Sadly Lionhead Studios came to a close before I could finish my work on the project.  This is how the frontend menu looked around that time (April 2016)…

Fable Fortune Frontend Menu

The menu set the mood of a fortune tellers table top very well, I worked up the scene to create some key art which was used in online marketing for the game.

Fable Fortune Keyart

The project continues to live on as some of my colleagues were able to continue development working as a new independent studio. You can follow the progress of the game on its website : www.fable-fortune.com

Publisher: Microsoft

Format: Xbox One and PC

Studio: Lionhead Studios

Year: 2016

Fable The Journey UI Videos

Going back a few years to 2012, fresh out of University I was lucky enough to get the opportunity to work at Lionhead Studios as a UI Artist on the Xbox 360 Kinect title, Fable The Journey.

I realised I never got round to making some videos of that work, so here is a menu and HUD demonstration.

You can read a bit more about them and see some screenshots on my portfolio pages at:
http://www.missjenart.com/fable-the-journey-menus/
http://www.missjenart.com/fable-the-journey-hud/

Fable Anniversary Inventory Menu

Fable Anniversary Inventory Menu

I worked as a GUI and 2D Artist on Fable Anniversary by Lionhead Studios. Fable Anniversary is a remastering of the Fable The Lost Chapters, which is now 10 years old! I was tasked with creating a remastered user interface which would honour the original game while still achieving a freshness which suits the current generation of consoles.

The inventory screen was one of the biggest changes to the UI. The original game had many levels of options which you had to go back and forth through to find what you were after. I have tried to simplify it by creating a new layout which allows for quicker navigation. The Xbox 360 Controllers trigger and bumper buttons control which section you are viewing and their sub-sections. The two thumb sticks and D-pad are put in control of filtering the content and reading item descriptions.  Using this new layout players can quickly flick from choosing their equipment to reading about their current quest with minimal button presses.

Fable Anniversary Inventory Menu

Fable Anniversary Inventory Menu

The Region Map screen now has more space to show the map and text for each location, making it easier to see region information at a glance such as which shops a town has or if any houses are for sale. Players can also filter the location list so only regions that have active quests are displayed. The world map itself has had a big visual style update so it looks more hand drawn and compliments the updated mini maps. I referred to the original Albion map heavily and was keen to try and keep a familiarity between the old and new. By keeping the colours similar I hope that, at a glance, players still recognise it as the iconic Albion map. A new full screen world map view has been added, allowing players to zoom in and pan around to explore every fine detail as well as utilising it for loading screens. It was important to me that the map should become more of a feature, animations and a few hidden surprises have been added for the keen eyed adventurer.

Fable Anniversary Inventory Menu

Fable Anniversary Inventory Menu

More information about creating the Albion map can be found here.

I wrote a blog comparing the original UI from 10 years ago with my updated UI.  Read about it here:  http://www.missjenart.com/projects/fable-anniversary/fable-anniversary-ui-old-new/

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2014

Fable Anniversary Achievement Icons

Fable Anniversary AchievementsI worked as a GUI and 2D Artist on Fable Anniversary by Lionhead Studios.  Fable Anniversary is a remastering of the Fable The Lost Chapters, which is now 10 years old!  I was tasked with creating a remastered user interface which would honour the original game while still achieving a freshness which suits the current generation of consoles.

Fable Anniversary Achievements MenuI love working on achievement icons for games!  The ones for Fable Anniversary were particularly fun to work on.  They follow a visual theme of postage stamps, with their value being the gamerscore earned by completing that achievement.  There are also a number of achievements which have three versions of icon, which image gets unlocked is based on the choices you made in completing that achievement.  For example, to unlock the achievement called What Are Ya Sellin?, you can either make a profit from selling to a trader, or steal an item using the “Steal” expression from a trader.  If you make a profit the icon with the money bag is shown, if you steal an item the icon with a thief is shown, and if you do both actions an icon with both of the images is shown.

Fable Anniversary Achievements MenuThe achievements are displayed in the book themed game menus, presenting them as a stamp collection album.  Ted Timmins, the  game design on Fable Anniversary talks more about designing the achievements over on the Lionhead Blog.

I wrote a blog comparing the original UI from 10 years ago with my updated UI.  Read about it here:  http://www.missjenart.com/projects/fable-anniversary/fable-anniversary-ui-old-new/

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2014

Fable Anniversary Frontend Menu

Fable Anniversary - Frontend Menu

I worked as a GUI and 2D Artist on Fable Anniversary by Lionhead Studios. Fable Anniversary is a remastering of the Fable The Lost Chapters, which is now 10 years old! I was tasked with creating a remastered user interface which would honour the original game while still achieving a freshness which suits the current generation of consoles.

One of the first screens players are greeted with in Fable Anniversary is the Press Start screen.  I have made 4 versions of this screen which are randomly displayed each time you load the game.  The key thing I wanted to do with these screens was to make them interesting and showcase a range of different environments you can explore in the world of Albion.

Fable Anniversary - Frontend Menu

Fable Anniversary - Frontend Menu

Once you have pressed start, you are taken to the frontend menu which takes the shape of a book. While designing what the frontend should look like with lead designer Ted Timmins, we went through a number of different layouts and ideas. When we sat down to review all the concepts we noticed there were a few things that were still not quite working. Ted randomly commented “Can it be a book?” and the more we thought about it, the more it made sense. Each player is starting their own story as a new hero, as they progress through the game every action is being documented and their own story book is made.

Fable Anniversary - Frontend Menu

Fable Anniversary - Page Turn

It makes use of simple navigation to enable the player to quickly start or continue a game, manage their saves (all 18 of them!), and make a new hero as well as featuring a special achievements page!

Fable Anniversary - Frontend Menu

Fable Anniversary - Frontend Menu

The UI menus are placed on top of a 3D model of the book using render targets, this allowed us to create some nice page turning animations as the player navigates through different pages.

Fable Anniversary - Frontend Menu

I created a new set of concept images and worked on the visual design of this Fable book. This has also inspired the design of our strategy guide. The book theme is used for both the frontend and the pause menu, and strengthens the paper theme which runs through the Inventory as well as other UI features.

I wrote a blog comparing the original UI from 10 years ago with my updated UI.  Read about it here:  http://www.missjenart.com/projects/fable-anniversary/fable-anniversary-ui-old-new/

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2014

Fable Anniversary – Albion Map

Fable Anniversary Albion Map I worked as a GUI and 2D Artist on Fable Anniversary by Lionhead Studios.  Fable Anniversary is a remastering of the Fable The Lost Chapters, which is now 10 years old!  I was tasked with creating a remastered user interface which would honour the original game while still achieving a freshness which suits the current generation of consoles.

Albion Map ComparisonI was given the opportunity to redraw the map of Albion, I was thrilled by this as I often loved drawing maps when I was younger!  I started this task by tracing the original low resolution artwork and creating vector outlines for the land masses and details in Adobe Illustrator.  Once I had a good outline I then started experimenting with colour and textures, I wanted to create a hand drawn feel while maintaining a familiarity to the original design and colours.  A comparison of the original design and my new version can be seen in the image to the left.

Fable Anniversary Map MenuThe map is used in multiple in-game menus and loading screens, as well as a new full screen map menu which allows players to zoom in and pan around to explore every fine detail.  It was important to me that the map should become more of a feature.  I added animated elements to the map such as creatures, ocean waves and boats, these would appear as the player progresses through the game and act as a reminded of what happened in those locations.

I wrote a blog comparing the original UI from 10 years ago with my updated UI.  Read about it here:  http://www.missjenart.com/projects/fable-anniversary/fable-anniversary-ui-old-new/

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2014

Fable Anniversary Icons

Fable Anniversary Icons Fable Anniversary Icons

I worked as a GUI and 2D Artist on Fable Anniversary by Lionhead Studios.  Fable Anniversary is a remastering of the Fable The Lost Chapters, which is now 10 years old!  I was tasked with creating a remastered user interface which would honour the original game while still achieving a freshness which suits the current generation of consoles.

The original game was very icon heavy and I really wanted to keep that feature in place, this meant I have redraw over 400 icons.  I made a few adjustments there and there as well as creating brand new ones to fit in with the updated UI.  I recreated them as vector shapes which has allowed me to easily scale them for many different purposes during the project.  Some icons even made it as promotional badges for E3 2013!

Fable Anniversary Badges

Chicken Icons

Some extra icons were required for the PC release of the game, these chicken themed icons were used as badges on the Steam platform.

I wrote a blog comparing the original UI from 10 years ago with my updated UI.  Read about it here:  http://www.missjenart.com/projects/fable-anniversary/fable-anniversary-ui-old-new/

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2014

Fable Anniversary HUD

Fable Anniversary HUD Xbox

Fable Anniversary PC HUD I worked as a GUI and 2D Artist on Fable Anniversary by Lionhead Studios.  Fable Anniversary is a remastering of the Fable The Lost Chapters, which is now 10 years old!  I was tasked with creating a remastered user interface which would honour the original game while still achieving a freshness which suits the current generation of consoles and PC systems.

Fable Anniversary HUD Xbox

While designing the HUD, I wanted to create something that remained familiar to players who have played the original game while still creating a fresh and refined UI. The visual treatment I decided on uses golden framed elements to help celebrate Fable Anniversary and give a bit of elegance. The HUD uses over 400 unique icons for displaying objects including items, characters and spells. I recreated all icons as vector shapes which has allowed them to be resized quickly and easily for multiple uses. The Mini Maps have been restyled to have a more hand drawn look and the map container can be easily resized or completely hidden for the more advanced player. As you play the game, elements of the HUD fade in and out as and when they are needed, minimising the amount of information on screen at any one time. Players also have complete control over the HUD opacity. If you want to raise the difficulty of your game, try setting it to 0%!!!

Fable Anniversary QuestI also took the opportunity to rework the Quest screens in to something that felt more physical.  I went with the idea of using a paper card that would get stamped by the Heroes Guild once a quest was completed successfully.  Any rewards gained are shown clearly along with the option of flipping the card over to view a more detailed breakdown.

Fable Anniversary Quest Details

I wrote a blog comparing the original UI from 10 years ago with my updated UI.  Read about it here:  http://www.missjenart.com/projects/fable-anniversary/fable-anniversary-ui-old-new/

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2014

Kinect Sports Gems

Kinect Sport GemsKinect Sport Gems Banner UsageWhile working as a GUI artist at Lionhead Studios I was given the opportunity to provide work for Microsoft’s sister studio, Rare, for their project called Kinect Gems. I created a series of achievement icons, in-game score banners for Kinect Gems Ski Race and layout and positioning of xbox dashboard assets such as game cover images and title banners for the other series of Kinect Gems titles.

I was able to work from within Lionhead Studios, communicating with the Rare team via email and conference calls.

Kinect Gems is available from the Xbox Live Marketplace.

Publisher: Microsoft

Format: Xbox 360 Kinect

Studio: Rare

Year: 2012

22Cans Website

22Cans

A clean, simple and minimalistic design for the Guildford game studio, 22Cans.

The key points for this design were to tie in the colours of their existing logo and create a clean responsive website which would look good on multiple devices (PC’s, phones and tablets).

The site design is coded in to a WordPress theme, making updating and managing the website as easy as possible for the client.

Client: 22Cans

Services: Web design, web coding

Web: www.22cans.com

Fable The Journey – Dashboard Themes

Fable The Journey Dashboard Theme Fable The Journey Dashboard Theme Fable The Journey Dashboard ThemeI worked as a GUI Artist on the Fable The Journey project at Lionhead Studios.  I created a series of Xbox dashboard themes to coincide with the games release.

This is the first chance I have ever had to learn how to make a dashboard theme.  It involved lots of planning as well as trial and error while testing the best placements for each asset.  I collected the visuals from existing project material or taking my own screenshots from within the Unreal 3 Engine.

All themes and picture packs are available from the Xbox Live Marketplace.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2012

Fable The Journey – Achievement Icons

Fable The Journey Achievement Icons

I worked as a GUI Artist on the Fable The Journey project at Lionhead Studios.  I was thrilled when I was asked to create the achievement icons for the game.  The initial concept was to given them a rough hand-made feel, suggesting that they were ‘Hobbe’ made medals.  The final design mimicked a watercolour masking effect with use of colour to categorise the achievements, for example light blue is story related.

All designs were concepted on paper then drawn as vectors in Adobe Illustrator.  Some final touches were applied in Adobe Photoshop.  I also made some Xbox Gamer Pictures to match a similar style to the achievement icons above.

Fable The Journey Gamer Pictures

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2012

Fable The Journey – Menus

Fable The Journey - Splash ScreenI worked as a GUI Artist on the Fable The Journey project at Lionhead Studios.  I was tasked with creating an unique user interface style that would complement the game and its franchise.  I created a series of patterns and jagged swirl motifs which were used to frame menu elements as well as in the HUD during gameplay.

Fable The Journey - Frontend Menus

Fable The Journey - Frontend Menus

Fable The Journey - Frontend Menus

Fable The Journey - Frontend Menus

Fable The Journey - Pause Menu

The Map screen shows your progress through the story of the game and is filled with little animations such as previous story reminders, parting clouds, growing trees and hidden sea monsters.  I created a parallax effect using the land and sea which helped bring the map to life.

Fable The Journey - Map

I spent a lot of time working on the collectables menu.  This acts as a place to browse and read more about the collectable items you can find on your journey.  It starts off with a Hub screen giving the player a quick overview of what they have found so far.  The player can then dive deeper and browse the the items in more detail, finding out more about their significance in the Fable franchise.

Fable The Journey - Collectables

Fable The Journey - Collectables

Fable The Journey - Collectables

I worked closely with other artists and programmers on the team, delivering new concepts and progress updates regularly.

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2012

Fable The Journey – HUD

Fable The Journey - Combat HUD

Fable The Journey - Boss Combat HUD

Fable The Journey - Combat HUD

I worked as a GUI Artist on the Fable The Journey project at Lionhead Studios.  I was tasked with creating an unique user interface style that would complement the game and its franchise.  I created a series of patterns and jagged swirl motifs which were used to frame HUD elements as well as in both the front end and pause menu screens.

The layout of elements was carefully considered and placed using Adobe Flash and Actionscript.  I am particularly proud of the health bar animations which change based on the health status.  The hearts shatter as the players character takes damage.  When the health is very low, the remaining hearts get larger and a pulse animations kicks in getting more violent as the health decreases.  The idea behind this is to attract the players attention and alert them that they need to take defensive action to recharge their health bar.

Fable The Journey - Horse Travel HUD

Fable The Journey - Arcade Mode HUD

I worked closely with other artists and programmers on the team, delivering new concepts and progress updates regularly.

The project was powered by the Unreal Engine 3 and Scaleform.

Publisher: Microsoft

Format: Xbox 360

Studio: Lionhead Studios

Year: 2012