Survival Project

There are many ways to organize the photoshop tabs and can be separated into separate windows, tabs or photoshops itself. My preference is to choose to keep them in tabs above and select when needed and if I did have multiple tabs I wouldn’t use search tab and manually scroll search as that's how I like to find things

This is an essential part to make existing photos look better or make a picture entirely on its own

To even start making a photoshop picture you need to decide its canvas size. I always go for pixels as that helps me get the resolution correct. Personally i change the colour pallete to not use sRGB as its to precise with colours but does have its advantages

I’ve picked out a random picture and had separate layers allowing me to add or remove something with ease; the first layer is to allow me to add the night time sky whilst the second layer is the terrain. All this is entirely made up of Photoshop tools and no external textures were added.

This is the colour pallete and will allow you to pick any colour you desire. The colour pallete is essential for making pictures as it can help repair old pictures or make photos. If you want to find out what colour you have check the # for its hexadecimal value. If you want to limit yourself with certain colours using the hexadecimal value can help. (Quick disclaimer you can only do 1-9 and 1-F as thats how hexadecimal stores colours)

This is a nice addition photoshop added as it helps artists select what brush they want and effects. This is much better than painting by hand as you would be wasteful, fail to obtain the correct shape leading to having a hard time removing the mistakes and that it would cost more in order to get the brushes you need, the size, the effect and the actual paint. Also another great advantage is that's it's better for your health as you are not leaning down and only facing straight forward so no back aches that lasts for ages. Lastly the brush tool is not limited to a few and there is always new brushes being added for a desired effect and most will cost for free.

The advantages of using the RGB colour pallet over a conventional one is that you have wider range of colours and its easier to be more selective. If you wanted to change colour, you can with ease.Disadvantage is you will have a harder being specific colour and past colours you’ve used. It helps knowing you can revert back to the colour you had before. The only way to remember the colour you want is the Hexadecimal value.The difference from traditional art is that it's easier to change colours over computer and it costs free to change colour. Traditional art costs lots of money for paint, paint brushes and paper. It also consumes more space in order to do traditional art so it's technically easier to make art on the computer. The only thing to make art by hand for computer is a wacom tablet and will be cheaper in the long run. The only advantage of traditional art is that you don’t need electricity and a computer that can cost hundreds of pounds and the wacom tablet costing another one hundred to two hundred pounds.

The advantage of using the brush adjustment selector is its free. You don’t need to be worrying about how the brush works. You can adjust its strength and effects, its style and when you apply the brush down you can make it have a effect of being spaced out. There is many presets you can have such as, when you paint you can have a different colour glowing inwards/outwards. The main difference between traditional art and photoshop is that it will cost less, cost less in time and cost less in colour as you can choose a colour and just outside a object without spending time on it.

The advantage of having a layers tab is that it's easier to remove or add details and to be able to seperate them so you can edit another time. You also get the option of its settings of each layer so you can change the opacity, fill and its effect. These effects can be dissolve, screen, divide, times and more. With the layers you can also add effects on the layers and you can add glows and other helpful effects. There is no disadvantages of layers for photoshop.The difference between traditional and computer made is that with traditional it wouldn’t be possible to do al the effects done by the computer and that with traditional you would have to use tracing paper from some things.

This is the move tool. You can select the object you done in the layer and move things around

This is the magic wand tool. This tool selects anything that is the same colour and can help select certain things if you want them removed or gone/edited.

This is the square select tool. This selects things within the select squarespace you chosen and can be more useful than the magic wand tool.

This is the crop tool. This can crop a picture in a much more efficient and easier manner instead of adjusting the page border and then trying to move the picture to the way you wanted so you’ve cropped what you need.

This is the zoom in tool. This can zoom in and out into the picture if your looking to add detail or view from a distance.

This is the select tool. If you have shapes or anything in the page that can be selected this tool will allow you to select the object.

This is the gradient tool. This will allow you to add a colour gradient of anything into the picture and has multiple modes in how to make the gradient. First option just makes a basic gradient. The second allows the picture to have a 360 gradient. The third option makes a outside circle going inwards gradient and the last one is the inwards to outwards gradient.

This is the text tool. This allows you to add text into the page and you can change the colour, font and size of the text you added.

This is the grab tool. Instead of moving a object around on the canvas and zooming in and out this allows you to move around the page if your zoomed in.

This is the shape tool. This allows you to add a couple of shapes provided by photoshop just in case you wanted to add something such a circle that is hard to make.

This is the rubber tool. This will remove mistakes or something you didn’t want. It has opacity on it if you deliberately added something and need to adjust the gradient manually

This is the paintbrush tool. This tool allows you to most of everything you need to do. This allows you to select brush, colour , size, how the brush works and its opacity levels.

This is the clone stamp tool. This tool allows you to select a certain part of the image and then paint the same thing in another area. Perfect for trying to make a object look seamless or even.

First, Second and Third UI Designs

This is my first test on making my inventory. I had no clear idea on the inventory designs but stole ideas from a game called Unturned and the armour feature from a game called Empyrion.

This is my second design of my inventory and I had changed the amount of slots to 12 due to the original 28 was too many and I would have no purpose to fill that many inventory slots AKA useless waste of space. I have spent time making the character outfit so it looks better and shows you what you are wearing. I have made a border for each inventory slot to define the space more and added binary value for the slot to the side to bring a more computer feel to the game. For example the number for inventory slot 10 would be 00001010.

This is my first attempt to make a main menu design and is practically on its absolute basics and shapes. I had no influence on a game and used original designs of a UI to then use and incorporate into this Main menu design.

This is my second design of my main menu and i decided to add more detail to show what everything is. On the computer box I added more fans because I wanted to show it’s powerful and needs a lot of cooling in order to stay cool in both meanings. The computer i added a border and added a final touch of how big the monitor will be.

This is the final design of the inventory and i decided to remove the 1-12 on the side and stick with the binary numbers as it does give the game a more computery feel. I refined the space for the clothing as it was too much space and i added a few more borders around things to make sure each thing is seperate.

This is my first attempt on my HUD and it has the features of health, My Main and Secondary equipable items and a little crosshair retinol for the middle. The health bar is simple and doesn’t have anything special to it. The main and secondary equipable item slots is a stolen idea from many famous games that include combat such as call of duty. The retinal is added because not all the time you know where your looking so it will help you see what you are pointing at.

This is the final design for the HUB and i added a few more details such as ammo and a percentage of the health as it's not very clear when testing out the health bar program on what health you got so i added a percentage to tell you with accuracy on how much health you got. I also added a bit more of a defined shape the menus and gave them a slant.

This is the final design for my main menu and i have refined it more and gave the game a official name. I’ve named the game Vietech. The fans is to be animated and there is feature such as power buttons to make the main menu more unique. I also added a wire from the pc to the monitor as computer monitors connect to the computer.

3 ways i use photoshop tools to build up my GUI’s the most.

Shape tool. I use the shape tool the most as it helps define what the menu looks like. I also use it to help get a certain shape that i didn’t have access with basics such as triangles. I got triangles from using 2 squares and using the first square to cut half of the other square.I have also used the spherical shape from tools to cut out a small circle inside a circle so i can get a hole. I use this method for making the symbol.

I’ve used the paintbrush tool not as much but i have used it for when making the power symbol , the wire for the computer in Main menu and also for making the clothing for the inventory. It has been helpful at times but is not needed all the time for when making a clean GUI interface.

I’ve used the colour pallete a lot when making the GUI’s as i want all to be slightly different but to also help bring depth in the menus itself. I’ved used mostly shades of green for Inventory, dark greys for the Main Menu, and some reds and blues for the HUD.

Composition - Broken into background that is the smoke, mid-ground that is the character’s and the scenery itself and close up on the ghouls of men. Perspective - Scene seems to be shot from a distance underground a old ruins and the scene looks murky as they are undergroundProportion - Proportions seems to be over exaggerated as the proportions of the people compared to the buildings seem unnecessary as they are very small compared to the environment. Digital Techniques - The colours are used lot of a white and grey’s and i believe it's used to emphasizing the depth of the lighting affect. Another technique is they used a lot straight objects and not out of shape as the cavern looks like it had once been thriving and being well constructed.

Composition - Broken down to mostly being clear up close due to the smoke and the objects on the ground being so detailed compared to the mid ground composition but not as detailed. The composition is based of outside due to the light pouring in.Perspective - The perspective seems flat so we are not looking at it at a angle but we are looking as if we were in the middle standing on a object in order to see the back of the building.Proporions - The promotions seem perfect as it looks realistic such as the pipes and which way the smoke goes. The smoke pours inside the building as they is no force stopping the smoke to travel further inside.Digital Techniques- The colours are quite dark but the lighting brings the true colour of objects such as the steel beams and the yellow painted crane hooks. What is also made clear is the smoke engulfing the objects around it giving a sense of realism. The blues from the cargo to the left of the image to the fallen poll on the right of the image makes the piece highly complicated. I suspect a digital tablet may have been used when making this as a basic computer mouse can’t get the detail like this so clear.

Composition - The composition seems to be mostly mid to distance objects due to so much is happening in the image. It's clearly in space as the vehicles are not something that would be on a planet and that the colours are quite dull and dark just like space itself.Perspective - The perspective seems to be based off a ship’s tail where the fuel is being inserted as the pipes being connected to the ship and that the camera would be needed to connect the pipe correctly. Proportion - The large size of the ships and the such small size of floating objects such as damaged ships and rocks flying around really makes the scene looks realistic but also not realistic due to ships like that don’t exist but that space junk like that does exist as we do have flying space junk from space rockets.Digital Techniques - Digital techniques is to keep to the dark tone colours but to also to provide light wherever possible to show that the environment is not quiet but is quite active. Mostly consistent with defined squared shapes that overlap making the ships look uniformed but also not every object and ship the same.

Main Menu Functions

This opens the main menu at the start of the game and forces all other canvases off.. There is a code when if a button is pressed on the main menu the ExitMenuCanvas is turned to false and the HudCanvas is then enabled and the fpc lock is turned to true meaning we can have full access of the character’s control.

This defines all the canvases used and needed in order to have the main menu functional. Currently a lot but all are needed. There is 2 canvases with settings in entirety as it would conflict with other code for the other settings. It would conflict with Main Menu settings and and the exit main menu so if you were on exit menu settings and need to return it’ll open back to the exit menu and not open the main menu canvas up.

The close menu code

The start menu screen

Settings

This is the settings canvas and there has to be 2 different canvases as it would conflict between in game. This is the main menu settings and the other is the exit menu settings.

These are the segments for the settings as each settings menu has 4 options. Controls, volume, credits and graphics quality. All of them work and when switching back and forth the menu’s change and update correctly. I am not going to go into detail which one goes to which menu as even i get a little confused but the code works and that's all that matters

Settings for Exit menu

Functionality

This will open the Exit Menu and will give you the option to either return to the actual main menu, settings and other bits and bobs. In order to get to the exit menu all you need to do is press the escape key (Esc).

This is the ability to open inventory and to collect items. To to get a item to be collected you must name the item the variable i have given it “item” and then that adds score (item) into the inventory. To access inventory all you need to press is “i” for inventory and then you can open it.

This is the health bar codeWhenever i walk the health bar would go down

This is at full health

This is the health with damage

Health Bar

Walk speed

This controls how fast i walk so when i get hurt it should slow me down and when i heal myself i should be back to normal walking speed

Environment Building

My building was designed to be clean and white but also show age as it is a modern building. As it does have vents above that could have produced nasty smoke and the dirt is the build up of it. All optimization was done manually as when auto optimization was done it ruined the look of what the building should look and would be a lot harder to put in the UVW map so i did it manually to allow the simplisation of doing the UVW and the aesthetic appeal. What i had encountered is that the balcony banister wasn’t as perfect as i should have been and was possibly overlapping. If i could of have improved the design i would of done something about the windows and make them more realistic and make it have a shine/reflection as glass reflects but my skills were limited to making the building connect.