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.