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

Learn How-to Create a Flappy Bird Game Design

Step 1

Create a new document of dimension 359 x 620 pixel and fill the background with color # 000000.

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

Step 5

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

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.

Learn How-to Create a Flappy Bird Game Design

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

Step 7

Now make a new layer below grass layer and name it “Buildings” Now activate Pen tool and make some random building shapes.

Learn How-to Create a Flappy Bird Game Design

Step 8

Then press Ctrl+Enter and fill it with #d6f0cb .

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

Step 9

The result should be similer to this :

Learn How-to Create a Flappy Bird Game Design

Now make a new layer and name it “Cloud”.

Now activate pen tool (p) and draw some random clouds and fill it with #e7fadc .

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

Now write other words and follow the same steps :

Learn How-to Create a Flappy Bird Game Design

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 :

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

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.

Learn How-to Create a Flappy Bird Game Design

Now write start with #ffffff as foreground color.

Learn How-to Create a Flappy Bird Game Design

Step 16

Now,add more buttons.

Learn How-to Create a Flappy Bird Game Design

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 .

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

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.

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

Again make a square and fill it with #e96000 color.

Learn How-to Create a Flappy Bird Game Design

Step 17

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

Now make two duplicates of bird layer see as below :

Learn How-to Create a Flappy Bird Game Design

Select any bird layer thn goto Image > Adjustments > Desaturate.

Learn How-to Create a Flappy Bird Game Design

Now make a new layer and name it movement then activate pen tool and and draw a curve shown as below : .

Learn How-to Create a Flappy Bird Game Design

Now activate brush tool.

When the brush collection box opens, input the following:

Learn How-to Create a Flappy Bird Game Design

Now again activate pen tool and make a right click and choose Stroke path .

Learn How-to Create a Flappy Bird Game Design

When the Stroke path box opens, input the following:

Learn How-to Create a Flappy Bird Game Design

Now again make a right click and this time choose Delete path.

Learn How-to Create a Flappy Bird Game Design

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

Now make a new layer and name it Pointer Then activate pen tool and draw a pointing hand and fill it with #ffffff color .

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

just follow the same process and add more elements like arrow Instruction banners.Shown as below :

Learn How-to Create a Flappy Bird Game Design

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

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 :

Learn How-to Create a Flappy Bird Game Design

Now select Gradient tool (g).

When the Gradient editor box opens, input the following:

Learn How-to Create a Flappy Bird Game Design

Now make a new layer and name it “Pipe1″ then activaterectangular marquee tool and make rectangular shape and fill it with our gradient tool.

Learn How-to Create a Flappy Bird Game Design

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

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:

Learn How-to Create a Flappy Bird Game Design

The result should be similar to this:

Learn How-to Create a Flappy Bird Game Design

Now just follow the same process and add more pipes in our third screen.

Learn How-to Create a Flappy Bird Game Design

If everything gose right then our three screens are going to look like this .

Learn How-to Create a Flappy Bird Game Design

Final Image

Learn How-to Create a Flappy Bird Game Design