Brief 2- Creating the Reference Image For the Concept Art

To plan what I'm going to draw and colour for the concept art piece, I first decided that I want to create a tropical rainforest scene. From this, I researched what can be found in a tropical rainforest on the internet. I used the results I gained to search for images of specific features I want to draw ( huts, flowers, bridges, waterfalls, foliage etc.) on the internet and placed them in Photoshop. I arranged the images into a moodboard formation.  

Tropical Rainforest Moodboard 

Final Concept Art Reference Image

To create the final concept art reference image, I first chose the images from the moodboard that I want to use in the concept art. Then, I placed the chosen images onto a fresh Photoshop canvas and arranged and edited them until I was happy. Finally, I used the clone stamp tool to fill in any empty spaces with parts of the chosen images and to blend the images together. This is to make the reference image look more realistic and more neat.

Brief 2 - Deciding What to Do

After completing my UI work, I had to decide what I wanted to do next out of the given optional briefs. I wanted to use a brief which will allow me to undergo observational drawing and create concept art as well as a 3D game scene of a natural environment. The main briefs didn't offer what I wanted to do so I looked at the alternative briefs. I found a brief that suited my criteria. This refers to a game art contest page on the internet where I need to create some practice observational drawing of the features that is going to be in the concept art and eventually produce the concept art too. I will produce the 3D game scene in brief 3.

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)

UI - Planning the Wireframe

Since I am happy with version 2 I have produced of the UI, I started to plan out the interactive wireframe of the UI. I did this by first copy and pasting each button/ icon from the mock UI into Microsoft Word. Then, I transferred the images of the features that are used within each specific interaction into the right place on the diagram on the Word document. After that , I added arrows in-between each sub interaction and explained each interaction in the word document.
 

UI- Version 2 Mock Up

UI - Version Two (Mock Up)

From analysing my first version of the UI, I think it needs more development before creating the final UI. The parts that I think need improving are .............

• Less icons
• Most needed icon needs to be placed in a more fast and easy place to access
• Create a legend for the map
• Could place the unit information around the unit instead of in a big box
• The UI needs to be more compact and take up less screen space
• Could merge or remove some icons and sections  of the UI

After completing the analysis, I improved the first version of the UI into the one shown below. It is more compact, takes up less space and it is neatly presented.

Initial Concept Sketches of the UI and Mood board

Sorry I haven't since October. I have been using my IPad notes app to jot down my thoughts etc. for my work. I am putting these on here now.

Moodboard 

To create the mock UI in the below post, I first created a moodboard to get ideas of what my UI could look like. Since the UI is for the Age of Mythology game, I used the PC version of the game's UI features for inspiration on my moodboard ( Gameplay UI and Main Menu). I also used UI features from the Tomb Raider reboot and Tomb Raider Legend game for inspiration on my moodboard. These include the style of the menus layouts, pop up statistics and the health bars. I thought these features will be adaptable to the ipad version of Age of Mythology because the style of the menus layouts and pop up statistics are compact and easy to use on a touch screen.

Initial UI Layout Sketches 

After creating the moodboard, I produced my first version sketches for the main menu and the gameplay UI using inspiration of the features shown on the moodboard. The first sketch of the main menu UI consists of the main menu design of the main menu from Age of Mythology with added sub menu for each option on the right hand side as well as an image of the previous level from the Tomb Raider games.

 The second sketch of the gameplay UI consists of the original UI on the pc version AoM. Some of the pc AI has changed. The map is square and the legend is a pop up menu instead of around the map and the unit information is shown as a pop up bubble next to the selected unit. Also, some sections of the original UI has changed format and positions on the screen.