Image 5: Special Addition Artwork 2 [Improved]

[IMPROVEMENT 2] After the suggestions and constructive criticism that was made regarding 'Special Addition Artwork 2' I have decided to take some of it on board and cut the planet out from the rest of the image background. This will allow me to use the planet in other areas of the game where I will have freedom to change the background of the planet to whatever I want, a complication I didn't think of at the time of making the original image. 


[TECHNIQUE] I initially erased majority of the background using the Rectangular Marquee Tool. I chipped into the sides and the more subtle bits of details using the Magic Wand Tool and finished off with the Eraser Tool which allowed for a more smoother, rounder cut of the rockets edges.

Image 3: Special Addition Artwork 1 [Improved]

[IMPROVEMENT 1] After the suggestions and constructive criticism that was made regarding 'Special Addition Artwork 1' I have decided to take some of it on board and cut the rocket out from the rest of the image background. This will allow me to use the rocket in other areas of the game where I will have freedom to change the background of the rocket to whatever I want, a complication I didn't think of at the time of making the original image. 

[TECHNIQUE] I initially erased majority of the background using the Rectangular Marquee Tool. I chipped into the sides and the more subtle bits of details using the Magic Wand Tool and finished off with the Eraser Tool which allowed for a more smoother, rounder cut of the rockets edges.

Image 5: Special Addition Artwork 2

 

STEP 1: I opened a new document size 400x400 pixels and set the background colour as black (#000000).

 

STEP 2: I created a new layer and copy and pasted an existing image of planet earth which I rendered (separated from the original background by manually cutting) from the internet. The image below is a picture of the unedited/non-manipulated version that has been untouched at this point in time. 

STEP 3: To make the image (planet earth in this case) stand out more from the monotony of a black(#000000) background I decided to do something different and add a gradient (the gradient ranging from #292C2F to #0F1010).

                                            

STEP 4: I then played around with the Hue/Saturation and Colour Balance settings of the image layer so that the browns and the greens became warmer and the blues and aquas stood out more.

STEP 5: Adding a new layer; to finish off I added my signature to the image using the Brush Tool freehand (colour #FFFFFF).

 

                                                                                                             

The image to the left: An image showing the different layers I used for this image.  

       

Image 4: Game Over Splash Screen

 

STEP 1: I opened a new document size 450x450 pixels and set the background colour as black (#000000).

STEP 2: I created a new layer and opened up an existing graphic that I previously created using brushes (with colours ranging from #FDBA6E, #D47A71, #558699, #0E1619, #985E35, #D5EFBF). Sticking with the same layer, I used Diffuse Glow which can be found in the Filter>Distort section of Photoshop. The settings and the end outcome can be found below.

STEP 3: Now to add some stylised text to the image. I added the text 'GAME OVER' in font style Franklin Gothic Heavy, size 59 (the software automatically making a new layer). I decided to add a subtle gradient (the gradient ranging from #F5F3F3 to #FFFFF). Sticking with the same font layer, I used Wind on each edge of the text, the effect can be found in the Filter>Stylised section of Photoshop. The settings and the end outcome can be found below.

 

STEP 4: I then made a new font layer with the text 'GAME OVER' in font style Franklin Gothic Heavy, size 59. Pretty much exactly the same as Step 3 but without the effects and filters. I placed this layer over the top of the other text 'GAME OVER'.

STEP 5: With this layer still selected, I tinkered with the Blending Options to make the text stand out more from its surroundings aswell as add interest to the overall image.The settings and end product are shown below (the gradient colour ranges from #000000 to #FDFEC1 and the stroke gradient ranges from #00000 to F09B65 to #FDFEC1 back to #000000). 

STEP 6: Adding a new layer; to finish off I added my signature to the image using the Brush Tool freehand (colour #FFFFFF).   

 The image to the left: An image showing the different layers I used for this image.  

Image 3: Special Addition Artwork 1

  

STEP 1: I opened a new document size 400x600 pixels and set the background colour as white (#FFFFFF).

                                                                    

STEP 2: I created a new layer and copy and pasted an existing image of a rocket from the internet. The image below is a picture of the unedited/non-manipulated version that has been untouched at this point in time.  

                                                                    

STEP 3: Sticking with the same layer, I used Rough Pastels which can be found in the Filter>Artistic section of Photoshop. The settings and the end outcome can be found below.

 

STEP 4: Adding a new layer; to finish off I added my signature to the image using the Brush Tool freehand (colour #959595).

  

The image to the left: An image showing the different layers I used for this image.  

         

Image 2: Game Login Screen

STEP 1: I opened a new document size 600x400 pixels and set the background colour as black (#000000).

STEP 2: I added a new layer and then used the Rounded Rectangle Tool to create the background for the standard login form that will be used at the start of the game. I tinkered with the Blending Options of this particular layer to get more of a clean, glassy background. The settings and end product are shown below (the gradient colour ranges from #DDDDDD to #F2F2F2).

 

STEP 3: I added a new layer and then used the Rounded Rectangle Tool to create two input boxes which is where the player will type their unique game alias and password in. Again, I added additional blending settings for this layer (the gradient in this case ranging from #F0F0F0 to #FDFDFD).

            

STEP 4: Adding another new layer, I decided to add some shadow to the underneath of the input boxes I previously made. Not only is this a neat piece of detail that makes the overall design look more professional and interesting, but also makes the input boxes stand out more. I used the Rounded Rectangle Tool to make a very thin circular edged rectangle that is placed underneath the input box (#000000). I then used Gaussian Blur and dropped the opacity of the layer down to 39%. I duplicated the layer and placed it underneath the second input box as shown.

STEP 5: Adding a new layer, I used the Rounded Rectangle Tool once again to make two smaller buttons. adding a clean metallic gradient (the gradient ranging from #949494 to #5D5D5D).

 

STEP 6: I then added some text to the login screen. I used font style Myriad Pro for all the text on this image with font size 18 for the text in the input boxes and font size 24 for the text in the metallic buttons. The colours I used were #AEAEAE for the text in the input boxes and #C5C5C5 for the text located on the buttons.

 

STEP 7: Making a new layer, I explored the internet for some likely images you would find on a login page. I came across two small icons which will be used to indicate whether the validation procedure has been correctly or incorrectly followed (such as illegal characters, password is too small, username is already in use etc.)

STEP 8: All that needs to be added for this step is some personality. I added a miniature game logo that would suit and sit nicely at the top of the login page. I created two separate text layers with the letters 'R' and 'G' both being manipulated and transformed differently (bar the colour which was #FFB228). I added a line (#FFB228) and a website address underneath (#BCBCBC) also.

 

The image to the left: An image showing the different layers I used to make this design. Some of the layers are not appearing as there are too many so had to cut some of the less important ones (such as background layer) out.

Image 1: Game Logo Text

Design 1

Design 2

Design 3

Design 4

STEP 1: I opened a new document size 400x400 pixels and set the background colour as black (#000000). 

STEP 2: I added the text 'Rocket' in font style Arial Bold, size 59 (the software automatically making a new layer). Sticking with design #1, I changed the font colour from the original white (#FFFFFF) to a vibrant green (#98FF00).

STEP 3: I added a new layer and then used the Ellipse Tool to add black (#000000) holes with the idea in mind that meteors or bullets have hit the text. I repeated this technique on another five separate layers, shifting each individual layer thereafter on a different section of the text 'Rocket'.

STEP 4: I then added the text 'Game' in font style Arial Bold, size 40 (the software automatically making a new layer). Sticking with design #1 as proposed before, I changed the font colour from the original white (#FFFFFF) to a more lighter, pastily green (#C6F795). 
STEP 5: Using the same the technique as explained in paragraph three, the text was transformed into a holy 'Game'. 

STEP 6: I finished off by adding the star autoshape (using colour #FFFF33) and a line underneath the text 'Rocket' (using the colour #98FF00).

The image to the left: An image showing the different layers I used to get design 1 of the Game Logo Text like it is.