In this tutorial, we will learn how-to Design a Flappy bird game design interface.We will learn all the importent techniques of game designing and graphic designing.
Final Image
Step 1
Create a new document of dimension 359 x 620 pixel and fill the background with color # 000000.
Step 2
So we are going to make three screens of our game.
Now lets start with the first screen which is start menu screen.So make a layer and name it “sky”.
So activate rectangular marquee tool (m) and make a selection of 204 px width and 359 px height and fill it with #72c4cf color .
Now make a new layer and name it “Ground” .
So activate rectangular marquee tool (m) and make a selection and fill it with #dcd793 color .
Step 3
Now make a new layer and name it “Road base”.
So activate rectangular marquee tool (m) and make a selection and fill it with #91dd56 color .
Now again make a new layer and name it “Road top”.
So activate rectangular marquee tool (m) and make lots of selections and fill them with #7dbf3b color .
Now make a new layer and name it “Road middle line”.
So activate single row marquee tool (m) and make a selection and fill it with #eef693 color .
Step 4
Now make a new layer and name it “Road bottom line”.
So activate single row marquee tool (m) and make a selection and fill it with #717f1d color .
Now make a new layer and name it “Road top line”.
So activate single row marquee tool (m) and make a selection and fill it with #2b5446 color .
Step 5
The result should be similar to this:
Now we will make a new layer below ground layer and name it “Grass”.
Now activate pen tool (p) and draw some random grass shapes .
Now press Clt+enter and fill it with #7de292 color.
Step 6
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
Step 7
Now make a new layer below grass layer and name it “Buildings” Now activate Pen tool and make some random building shapes.
Step 8
Then press Ctrl+Enter and fill it with #d6f0cb .
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer styleboxopens, input the following:
Step 9
The result should be similer to this :
Now make a new layer and name it “Cloud”.
Now activate pen tool (p) and draw some random clouds and fill it with #e7fadc .
Step 10
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window: When the Layer style box opens, input the following:
Step 11
Now we will work on the text.So i am using 04b_19 font so install it in your pc.
Now Write F .
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
Step 12
Again create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
Now write other words and follow the same steps :
Now we will create our bird.So make a new layer and name it “Bird 1″ activate pen tool and draw some rectangular shapes and fill them with #424244 .See as below :
Now make a new layer under bird1 layer and name it “bird2″ again draw some random rectangular shapes and fill them with #fbbb11 .If everything done properly your result will look like this:
Step 13
Now make a new layer under bird2 layer and name it “bird3″ again draw some random rectangular shapes and fill them with #fbef27 .If everything done properly your result will look like this:
Now make a new layer under bird3 layer and name it “bird4″ again draw some random rectangular shapes and fill them with #fb664c .If everything done properly your result will look like this:
The result should be similar to this:
Step 14
Now we will make menus.So make a new layer and name it “Menu1″ and activate rectangular marquee tool and make a random selection fill it with #ffffff color .
Advertisements
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
Step 15
Now make a new layer above menu1 layer and name it “menu2″ and activate rectangular marquee tool and make a random selection fill it with #e96000 color.
Now write start with #ffffff as foreground color.
Step 16
Now,add more buttons.
Now we will work on the second screen.
So activate rectangular marquee tool (m) and make a selection of 204 px width and 359 px height and fill it with #72c4cf color .
Our background for the second screen is going to be the same so just copy all the designs from first screen .
The result should be similar to this:
Now Activate text tool and write G and fill it with #eaae2a color .
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
The result should be similar to this:
Now we will create more buttons so make a new layer and name it “Pause”.
Now rectangular marquee tool and make a square and fill it with #ffffff color.
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
Again make a square and fill it with #e96000 color.
Step 17
The result should be similar to this:
Now make two duplicates of bird layer see as below :
Select any bird layer thn goto Image > Adjustments > Desaturate.
Now make a new layer and name it movement then activate pen tool and and draw a curve shown as below : .
Now activate brush tool.
When the brush collection box opens, input the following:
Now again activate pen tool and make a right click and choose Stroke path .
When the Stroke path box opens, input the following:
Now again make a right click and this time choose Delete path.
The result should be similar to this:
Now make a new layer and name it Pointer Then activate pen tool and draw a pointing hand and fill it with #ffffff color .
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
just follow the same process and add more elements like arrow Instruction banners.Shown as below :
The result should be similar to this:
Now we will work on our third and final screen.Use all the previous elements and drag them into our third screen see as below :
Now select Gradient tool (g).
When the Gradient editor box opens, input the following:
Now make a new layer and name it “Pipe1″ then activaterectangular marquee tool and make rectangular shape and fill it with our gradient tool.
The result should be similar to this:
Now create a Layer style layer which can be found by pressing on the Layer style layer button shown on the layer window:
When the Layer style box opens, input the following:
The result should be similar to this:
Now just follow the same process and add more pipes in our third screen.
If everything gose right then our three screens are going to look like this .
This is not really easy to understand….I cannot follow your steps easily, you should mention all of commands you use not just codes of colours.
However it is very beautiful design