GUI #10 -- Cover Art

I had some spare time, so decided to go over the art a little. I think Luthers version is great, but I decided to put it on an actual box cover. Even though it is for steam, I am using something called a backup disc box, which can be used to install the game via disc to steam.

Here is the front and back of the cover art. I used a picture Luther designed for the front cover, and I used various images Luther also designed for the game.

These are all the layers I used to make the cover art.

Here is the final design for the cover art. I changed some of the text on the back cover and I also added our group logo to various spots on the cover box.

GUI #9 -- Group Logo

Here, I created a simple logo for my group work. Its a simple text layer, then I added a rectangle in the middle, with a line coming out the top to resemble dynamite. I added a slight fire to the end of the dynamite to make it look like the logo is about to explode. I also added the blog link underneath.

GUI #8 -- On Screen

This is how the GUI looks on screen. It may look like it takes over the screen, but the player will not have all of it open at once. This is just to show the placement of the GUI. I think everyone is happy with it, and it fits the style of the game. I tried to stick with the dark purple/blue colors. I would have done animation, but Jem decided not to add it, as it started to break the game and we were running out of time, so she made the decision to not have animation and worry more about getting the game done on time. This was a good choice, since the GUI is not as important as getting a finished game for the deadline. Having still GUI would be better than having animation, but no game.

GUI Art #7 -- Notes and Paper Screen

This screen is actually being discussed as to whether be in the game or not. This is because it is not important, and we would rather focus on trying to make the game playable at the minute. As for the most part, I designed a few things to go on the screen, including the menu, a letter and an envelope.

This envelope explains to the player why they are at the factory. I put it in the envelope, because the idea is that it will look like this in the menu, then when you select it, the letter will pop out. I simply used an envelope from the internet and a piece of paper because we are still deciding whether to use it or not, I did not want to go into major detail, then have the group say we do not want this screen.

The piece of paper is simply a letter from "M". It explains why the player is at the factory, and has a little bit of backstory.

I made the image rather large, so Jem can place it anywhere, we had a problem with the main menu, where the black background didn't fit the screen, I do it this way so Jem can easily resize or move the menu, without having to go into photoshop.

This is a close up of the menu. I kept it to a similar design of the other menus. Since this is supposed to be a demo of the game, I added 6 boxes with question marks, so it looks like they are in use or available to unlock. I also put the letter in the first slot, so the player can access and read it when ever they want.

GUI Art #6 -- New Bag

 Here is the new bag! The old one was just a template, this one has a clean background. I tried my best to match the bag on the model. I colored it to the standard of the model textured. I also gave it a little diamond on the front. These will be used for the inventory. The box at the bottom is also where the assets go. There are 4 boxes and they will appear around the bag.

GUI Art #5 -- Menu and On screen buttons

 Here are some of the on screen items that are used in game. These are some things Jem asked me to make for her. The first two, are used for closing dialogue boxes. I made a purple one for Lavender, and a blue one for the ghost. But we decided not to have dialogue for the ghost.

This is the paused screen. The first image is the one that is used in game. Jem asked me to create the black background a little bigger, as it doesnt fit the screen, so now there is enough space to give her freedom of movement.

The box has a little blur in the middle, and I offered to fix it, but Jem said its fine as you cannot see it much in game when the text is covering it.

This is the pause button. I just used the menu box with II in the middle. I did create a button that was unique to the rest of the GUI, but we decided it was too plain. Jem suggested I use this box for most of the GUI. So I did.

The next ones are used for the cinematic introduction. The buttons are used to click through the intro images. There is also a skip button that will allow players to skip past if they are a returning player.

These are simple text layers used for the Pause Menu. They glow in game. Nothing too special.

GUI Art #4 -- Wrench

We needed a simple wrench asset to be used in the inventory system. I used a reference found on google images, to give me an idea of what type of wrench I wanted. I decided to go with a basic one. I outlined the shape in photoshop using the pen tool. Then I used the circle shape and merged it with the handle, and used the eraser to get rid of the circular shape in the handle. I added a slight bevel, stroke and shadow to give it a more 3D effect.

The next step, I added a dip that goes inwards on the handle. I gave it a little bit of a texture, and an inner shadow to make it appear as if it goes into the handle.

I did add a little text to give it a bit of effect. I thought it would be funny to type "Cameron made this". I also added some random numbers on the end to make it look like a model number. I also added a slight shadow to the end, to make it appear as if it goes upwards, like a ramp.

In my next step, I added part of the end of the wrench, I made the end in two sections as a wrench is generally using two parts that can change measurements. I gave it a simple metal overlay and gradient.

I then added the second shape, I made it a little darker so you can easily define the difference between the two.

Next, I added a little screw in the whole on the end. Its used to make the handle change measurements. I simply made a rectangle, then a few circles that were skewed and warped and it gave the effect of a screw.

I then added a metal texture to make it a little darker.

Then, using a rust overlay, I gave it a little bit of rust to make it appear like it is old and been used a lot.

 Here is an example of the layer styles I used.

GUI Art #3 -- Key Assets

Here, I was to create a set of keys that will be used on the Inventory screen. Rather than downloading an image from the internet, I was tasked to make a key that would go into the game. Firstly, I made a quick key for Jemilla to use whilst testing the game. I simply used a simple outline, gave it a few overlays and made a rustic looking key. This was used for about a week, while testing was done.

This key is the first key you find in game. It is meant to look kind of plane and old as it is used on the cupboard in the office. I simply made a quick outline using the pen tool in Photoshop. I then Overlayed it with a gray color, then added a few bits of lighting and bevel to give the key depth. I downloaded a splatter texture, and added a brown color to it. I then overlayed it on the key and it created a simple rust texture. This was good enough to use as you don't see it very clearly on screen anyway, but it will still be recognized as a key by the player.

The third key I created was the final design for the "Big Key". This key is used to open the last door in the game. The group wanted something that looks fancier than the first key you find in game. I made it a lot thinner but slightly longer. I also gave it a circle pattern for the handle part. Pretty much the same process as the first key, but I did not give it a rust of dirt look as this key is supposed to be new.

Here, Jem wanted the key to be golden in color as the material used to make the key is gold.

This is just a simple poster to go above the key making machine. It is simply a paper texture, with the gold key, then the text Forges Keys.

GUI Art #2 -- Paper

Here, I had to design a piece of paper to be used in game. The rest of the group thought it would be a good idea for me to re create a unique piece of paper, rather than ripping (no pun intended) one off the internet. I gave it my best shot and really liked the out come. I made it so its as if it is ripped out of a manual of some sort, with all kinds of instructions, then it is further ripped in half to make it seem like the player is missing pieces.

At first, I drew out a rectangle in Photoshop, and started to erase parts away to give it the "torn" effect. Then I drew out a coffee stain to make it appear as if the piece of paper was "used" and mistreated. I then added an overlay of crinkled paper to make it appear screwed up, and not neat even though it has been torn. I added a slight brown coloring to the outer part of the paper. Then added a burn effect simply by getting a black brush and lowering the opacity slightly. Then added some slightly faded text and I was finished.

Final Design

GUI Art #1 -- Laying Out The GUI

Each one of these images are not final! They are simply a place holder for the final art, and to give an idea of where we want everything and how we want the layout of the gui to look before making the final art.

Subtitles and Empty Power Bar

Here is the layout for the Subtitles for when the character(s) speak. This feature cannot be turned on or off as we are not sure weather we are doing voice acting, and it will be a lot easier to do it through music and subs. The empty power bar can also be seen, when the character uses the orb to produce "light", it will drain and when drained, the player will have to wait until it has filled.

Full Power Bar and Closed Inventory

Here is the template for the closed inventory. When the player is not using the inventory system, they can close it to clear the view and give them more of a screen to view on. The power bar is also full here.

Open Inventory

Here is the open inventory. It will give the player a hint to their objective. It will also show what room they are in so the player will not get so confused (Possible feature).

Paused Menu

This is a template for the paused menu. When paused, it will fade the background screen to a light black to draw attention to the main menu part of the pause screen. The player will be presented with a few options. Along with a quit, options, logo of the game and the word paused if it wasn't clear enough that the game is now paused.