Brief 2 - Creating the Concept Art (Process)

After creating the reference image for the concept art, I started to plan how I was doing to create this piece. I thought about either creating in photoshop or traditionally create the art on paper. I decided to create it traditionally with paper and art supplies. After this, I analysed the image and started producing a basic sketch of the layout. My ideas of selected mediums are acrylics, watercolours, white/ black fine liner and sponges. 

  

Thoughts - After I completed my mock layout reference image, my next step was to sketch the layout onto paper. This proofed very difficult when trying to get the perspective right.

Thoughts - When I finished the sketch layout, I had to plan of how I was going to add the colour and the detail of the concept art. I planned to use watercolour for the base and acrylic for the detail. 

Thoughts - For the background trees and the river, I used a a tissue to dab on the black colour. 

Brief 2 - Observational Drawing

To practice how to draw the features in the final concept art, I used real life references as inspiration. These included rivers, different variety of flowers and leaves, trees etc. I observed how the light and shadows effect the scene i'm using, the perspective, how the environment affects the scene as well as how everything compliments each other. To draw the pictures below, I used mainly pencil to sketch each image and I also used a white/black fine liner as well as watercolours.

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