On Monday, I started the final inventory menu screen for the
art test. The game menu is designed for PC. I kept the theme of pirate. I
decided to go with this theme because I like the style and I had in mind the
new game coming out in March for Xbox one called ‘Sea of thieves’. I knew for
the background of this piece I wanted to go with a map. I did find one of
google images that fit the style I wanted to go for.
When I thought of a pirate themed I thought of wood, like
decking on a ship or wooden shelfs. I decided to create a border with an image
of a plank of wood. From that I edited the wood using layer styles such as
different blending options and shadows. To do this piece I got icons and images
online and modified them to suit my theme, in a way it became a photo bash
piece. I did make my own buttons for the piece and gave them a wooden like
effect, they also look like that water is reflecting off them which does
connect with the theme. To do the buttons I created a solid brown coloured rectangle.
Used the layer styles to edit, I used the different glow and shadow properties
to gain the 3D look. From there I added a worn effect using a textured brush
and edited with the overlay effects and layer styles. I then downloaded a suitable
font that matched, it was called ‘Trade Winds’.
Downloaded here: http://www.1001fonts.com/trade-winds-font.html
On Tuesday, I continued with the piece and added some other
elements. I added a character, if this was in a real game the character can have
clothing and weapons added to them in real time. The character can also be rotated
by clicking with the mouse on the rotate logo at the bottom of the character. Also,
the character would be animated slightly as well in game, such as when a piece
of clothing is selected for the character they would react to it. The 3D model
of the character was found online. I think it fits the style I wanted perfectly.
The game is aimed at teens onwards and is a cartoon implemented. I also added a
logo of a flag behind the character this shows what team the player is on, it’s
the logo for the team. I added Chains to the piece which hangs the inventory
title. When the player is navigating this area when they click on the chains a
different tab title will slide into view.
By the end of Wednesday, I would have liked to of finished
this task but due to being home this week for independent study week and having
doctor’s appointments all my time could not be set on the task, I could only
get parts done here and there, which was a shame as I would of liked to of continued
with my Zbrush Character also this week, but still I wanted to do the best I
could for this task and I am happy with the results so far.
On Wednesday, I added a shelf piece this holds all of the
inventory items and information needed about the item and the item level. The
shelf was made by using the same wooden plank image, the same as the border of
this piece. I added different lighting and shadow effects by using the layer
styles. When the player selects the item, they want it will appear with an
outline highlighting the icon, this gives the player knowledge that it has been
selected. I also added by the character a compass that illustrates the
characters current level.
On Thursday by the evening the menu was completed. I added a
scroll to show the characters stats. I added an easy to use upgrading system. To
upgrade, the player has the option to click on the left or right arrows on the
sides of the anchor to add points if the player has enough to do so. When
adding points, the numbed text on the left-hand side will change. I added a few
other touches for details and to fill out the menu. Overall, I am happy with the
result, I like the style and I believe it’s easy enough to pilot and understand
without having to use much text. For a first attempt at UI design I am happy,
this art test has also given me some practice for my final UI menu I will be
producing for my current project that will represent my robot character model.
Below I will show the PDF I had to put together to present this art test.