Learn How-to Create a Flappy Bird Game Design using Photoshop

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 .

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 .

Final Image