UI- Creating Each Phase of the Final UI

Here is my final standard UI for the Age of Mythology game for the IPad. I created the UI in Adobe Illustrator ( I also created the mock ups in this software too). I started by opening up my latest mock up (version 2) in Illustrator to use as a guide. Then, I created the illustration of the map in the bottom right corner in photoshop using paint tool, following the style in the PC version. After that, I created the three graphic tabs for the build, search and chat menus. I produced these in illustrator by first creating a rectangle with the rectangle tool. Then, I added a hieroglyphic texture within the rectangle and used clipping masks on the top edges to create the tab shape. After that, I added the bronze boarder and shadowing with the paint tool.Finally, I added the icon into the middle of the tab and fill it with the same colour as the hieroglyphic texture using the eyedropper tool as well as the fill tool. For the boarder around the map, I created it by using a gold texture as the background of the boarder then I painted turquoise stripes and shadowing using the painting tool. For the triangle icon on the top of the map, I created the triangle by using star tool and removed all the corners of the star apart from one corner using the clipping mask tool. Then, I filled the rectangle with red using the fill tool and added a gold colour for the shape boarder. For the resources statistics display in the bottom left corner, I first created a rectangle with the rectangle tool then added the sand texture inside the rectangle.Then, I created five smaller rectangles and used them to fill the larger rectangle and applied a gold coloured boarder to all of them. After that, I added the icons that represent each type of resource (one in each smaller triangle) and typed in the value for the amount of each type of resource in papyrus font.Finally, I added shadows with the paint tool. For the top part of the screen god powers display, I first placed the sand texture within the guide. Then, I added gold textured boarders and the text 'mythic age' below the top gold boarder in papyrus font. After that, I created the decorated columns by first creating a gold coloured filled rectangle with the rectangle tool. Then, I used the clipping mask tool with a rounded rectangle to cut the gold rectangle into the column shape. After that, I used the line segment tool and the paint tool to create the decorations and the shadow/ lighting on all parts of the god powers display. Finally, I placed some of the images that represent god powers in between the middle and bottom gold boarders (spaced out neatly). I created the 'god tree' and 'menu' tabs by first adding the scroll texture on both sides of the ' god powers' display ( after removing the blank white areas around the stroll texture using the magic wand tool). Then, I added the 'God Tree' text onto the left scroll and 'menu' text on the right scroll in papyrus font. 

Standard UI

Standard UI (how to interact with a building)

Standard UI (showing pop up displays)

To create the pop up map legend display, I first created a gold coloured rectangle using the rectangle tool and placed it on the top of the map. Then, I reduced the rectangle's transparency and placed the icons for the different filters of the map above it. After that, I added coloured squares (that represent the colours used in the map) neatly organised onto the gold transparent rectangle and placed the description on the side of the specific square. Finally, I placed a brown coloured square with a dark brown boarder on the top of the gold transparent rectangle and placed the text 'legend' on top. For the build/ search/ chat menus, I first placed the hieroglyphics texture in the space below the tab. Then, I placed the content on top of the hieroglyphic texture (building icons for the building menu, transparent brown texture and search options for the search menu, text boxes and the 'send' button, transparent brown texture as well as the send resources icon for the chat menu).

Standard UI (showing how living units interact with buildings)

Standard UI (showing how to open up main menu)

To create the main menu display, I first created a dark red coloured rectangle using the rectangle tool. Then, I made a copy of one of the tabs and placed it on the top of the rectangle. After that, I copied the tab and placed it on the bottom of the red rectangle. I placed seven brown coloured rectangles onto the red rectangle, neatly organised  with the options text placed within them (papyrus font). Finally, I copied and pasted one of the columns from the god power display onto both sides of the red rectangle as well as painted shadow details in the needed parts of the main menu display (using the paint tool).

Standard UI (showing how to open up the god tree screen)

I captured a screenshot of the god tree from the PC version of the game and placed it onto the UI design.

Standard UI (showing how to apply god powers)