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

Fable Anniversary UI – Old and New

Jenny PeersHello!  My name is Jenny Peers and I am the User Interface (UI) Artist on Fable Anniversary. I have been at Lionhead for nearly 2 years and 3 months now, and love my job here!  Before I started here, I was studying Computer Games Design BA (Hons) at the University of Wales in Newport while working as a freelance artist and web designer in my spare time.  My passion for games started when I was around 8, having seen and played on a friend’s games console. This spurred me to want a career in the games industry.

I first came across Fable while in my late teens, and I absolutely adored every minute of it.  From that point onwards it was my dream to work on a Fable game. I am over the moon to have been given the opportunity to work on Fable Anniversary!  Enough about me, now back to work!

So what is a UI artist?  UI stands for User Interface. This can include in-game menus, heads up display (HUD), icon design and even creating Xbox 360 Dashboard themes.  I have to find functional and attractive ways of displaying key information to the player while they are playing the game.

Press Start:

Fable Anniversary UI

Fable Anniversary Old and New - Press Start

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.

Frontend and Pause Menu:

Fable Anniversary Old and New - Frontend

Fable Anniversary Old and New - FrontendOnce 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 Old and New - Pause

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 HUD features.  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!  (There will be more information on the achievements soon!)

HUD:

Fable Anniversary Old and New - HUD

Fable Anniversary Old and New - HUD

Being the UI element that’s viewed most, the first task I gave myself was to tackle the HUD.  I wanted to design 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 Old and New - HUD Minimal

Inventory:

Fable Anniversary Old and New - InventoryFable Anniversary Old and New - Inventory

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.

Quest Complete:

Fable Anniversary Old and New - Quest Completed

Fable Anniversary Old and New - Quest Completed

The Quest Start and Quest Completed screen follows the paper visual style by presenting you with an actual quest card.  The card presents a summary for the active quest on its front side, it can then be flipped to show a more in-depth breakdown on its reverse side.  When you have completed a quest successfully, all rewards gained are listed and the card is given a Guild stamp of approval!

Region and World Map:

Fable Anniversary Old and New - Map

Fable Anniversary Old and New - Map
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…

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

Dunwall & Co Whale Oil

Dunwall & Co Whale Oil Dunwall & Co Whale Oil

I recently got inspired by the video game Dishonored and set myself a logo design challenge.

The design was created as a vector graphic in Adobe Illustrator.  I chose a colour scheme of brown, blue and orange to emphasise the vintage feel I wanted to create.   I added some final details in Adobe Photoshop to give it an aged appearance.

Personal work.

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

Panda and Crossbamboos T-shirt

Panda and Crossbamboos

Im happy to say my Panda and Crossbamboos design was accepted on the T-shirt website QwerteePlease visit and give my design a vote.  If I get enough votes you will be given the chance to purchase it at a low price 🙂

I have also decided to open up a Rebubble account if anyone wants to buy my designs here and now.  Please check it out.

 

Panda and Crossbamboos

Panda and Crossbamboos

I fancied trying out a different style that I have never explored before.  I am really happy with the results.  The idea was based on a skull and crossbones, but with a panda themed twist.

Created in Adobe Illustrator as a vector graphic.

Cloth Patch

Cloth PatchClient: Cloth Patch

Services: Web design, web coding

Web: www.clothpatch.com

A bright and funky website design for Cloth Patch, who specialise in hand made patchwork quilts and gifts.

The key points for this design were to use a pink and blue/green colour scheme and include a use for bows and stitched elements.

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

Thread Bear UI

Thread Bear Frontend Menu

Thread Bear Frontend Menu

Thread Bear Frontend Menu

Thread Bear HUD

Thread Bear HUD

Thread Bear Signposts

Thread Bear End of Level

Thread Bear Loading

Thread Bear is the project I created as part of my final year at University.

Thread Bear is visually heavy on fabric and stitching, it was important that I continued the theme in to the menu and HUD. This was the first time I had ever created a game menu or used Scaleform and Unreal.  It was a great learning curve and I really enjoyed the challenge.

Help Bobby, the panda spirit, travel through each level and sew up the rips that are threatening the balance of this colourful and fragile world. Navigate through each level collecting sewing equipment as you go, the needles, thread and bobbins will be required to stitch up the rips that are appearing in the world. The balance of the fabric world hangs by a thread! Only Bobby can repair the rips and restore peace among the fabric creatures.

Cardiff Design Festival 2011 Winner Thread Bear was also the winner of the Interactive Design category in the 2011 Cardiff Design Festival.

Thread Bear Concepts

Thread Bear ConceptThread Bear Concept Thread Bear Concept

Thread Bear is the project I created as part of my final year at University.

Help Bobby, the panda spirit, travel through each level and sew up the rips that are threatening the balance of this colourful and fragile world. Navigate through each level collecting sewing equipment as you go, the needles, thread and bobbins will be required to stitch up the rips that are appearing in the world. The balance of the fabric world hangs by a thread! Only Bobby can repair the rips and restore peace among the fabric creatures.

Cardiff Design Festival 2011 WinnerCardiff Design Festival 2011 Winner Thread Bear was also the winner of the Interactive Design category in the 2011 Cardiff Design Festival.

A Postcard From…

Postcard From... Birdman

Postcard From... Birdman

Postcard From... Kraken

A Postcard From… is an interactive flash project based on two themes I was randomly given, Kraken and Birdman. The challenge was to include both of these themes together in the same location. I opted to portray the bird man in his cell at Alcatraz prison while outside, a Kraken is causing mayhem and attacking the prison!

I created the concept, artwork and interaction using Photoshop and Flash.  Voice acting was performed by Berwyn Brewer.

I have the project available to play online here., it is roughly 8mb in size so please allow enough time for it to fully load…

Play Now

(Opens in a new window)