Design a Flat Registration Screen in Photoshop

Registration screens may seem like an afterthought in a much larger customer acquisition process, but they are an essential linchpin of sound customer experience that’s not to be overlooked. Organizations invest tremendous amounts of time and money in attracting prospects, winning their confidence, and turning them into customers. The last thing you want to happen as a designer is for that investment to fail at the last step — registration. A well-designed registration screen carries the confidence inspired from a prior marketing process, transforms a lead into a customer, and leads to real revenue.

Today, we are going to design a registration screen in Photoshop. We will try to strike a subtle balance between functionality and flat design. To achieve this, we will utilize blending options, patterns, and several other techniques. So let’s get started.

Resources:
Minimal Patterns
Subtle Patterns

Final Result:
Finalresult-form

Download the finished, layered PSD file.

Step 1:
Open Photoshop and create a new file with a 640px width and an 1136px height.
Step 1-form

Step 2:
Create a new layer to add the status bar details. First select the rectangle tool and create a small horizontal rectangle. Fill the rectangle using color #000000.
Step 2-form

Step 3:
We will simply add the signal and battery icons to our status bar with color #acacac.
Step 3-form

Step 4:
To add the time onto the status bar, select the type tool and add the time in the middle using color #acacac.
Step 4-form

Step 5:
For the background, we will use a dark color to make the form stand out, I’m going with color #2c2f36. So, select the rounded rectangle tool and create a rectangle to fill the background space. Use color #2c2f36 to fill the rectangle.
Step 5-form

Step 6:
We will add a subtle pattern on the background layer, so select the layer and click on “Layer styles” to add some pattern. Select the minimal pattern from the resources set mentioned above and adjust the pattern settings according to the image below.
Step 6-form

Step 7:
Now, we’ll start with the title. Select the type tool and add the title text “Register” using color #ebebeb. Place the text in the center.
Step 7-form

Step 8:
For the form background, create a new layer and select the pen tool to create a simple shape. Fill the shape with color #898989.
Step 8-form

Step 9:
Once again, create a new layer and create another shape. This time, reduce the height and fill it with color #a1a6a5. Place it above the previous shape to create a layered effect.
Step 9-form

Step 10:
Again, add a new layer and create another shape using the pen tool; keep its height smaller than the previous one. Fill it with color #ced2d0 and place it on top of the other shapes.
Step 10-form

Step 11:
One more time, repeat the same process and create another shape using the same pen tool, but make sure to reduce the height as well as width to make it smaller than the previous shapes. Now, place the shape in the center and fill it with color #ededed.
Step 11-form

Step 12:
Select this rectangle layer and click on “Layer styles” to add some pattern. Select any subtle pattern from the set mentioned above and adjust the pattern settings according to the image below.
Step 12-form

Step 13:
Now, let’s start with the form fields. Create a new layer and select the rounded rectangle tool to create a small rectangle. Fill it with color #353b41.
Step 13-form

Step 14:
Select the field layer and click on “Layer styles” to add some inner shadow. Adjust the settings in accordance with the following image.
Step 14-form

Step 15:
Now, select the type tool and add the field title “Username” in the middle with the color #ececec.
Step 15-form

Step 16:
Repeat the same process and create three more fields using the rounded rectangle tool with the same color and Inner shadow. Now, add the text to these new fields using the type tool using color #ececec.
Step 16-form

Step 17:
For the “Register” Button, create a new layer and select the rounded rectangle tool to create a rectangle. Fill it with color #1a9aa5.
Step 17-form

Step 18:
Select the button layer and click on “Layer styles” to add some inner shadow same way that we did earlier. Adjust the settings to match the image below.
Step 18-form
Now, select the type tool and add the button title “Register” using color #fbfbfb.

Step 19:
Select the ellipse tool and create a small circle. Place it in the middle and fill it with color #f77f3e.
Step 19-form

Step 20:
Select the newly-created circle and click on “Layer styles” from the layer panel and add some inner shadow to the shape. Keep the inner shadow settings the same as those in the image below.
Step 20-form
Now, simply add the user icon in the middle and fill it with color #ececec.

Step 21:
Now, select the type tool and add “Already a member?” text using color #a1a6a5. Repeat the same process and add the “Login Here” text this time using color #f77f3e. Place the text in the middle.
Step 21-form

Our registration form is ready! I hope you guys enjoyed the tutorial. I’ll be back with some more soon. Until then, take care!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Alex

    Superb!!!

  • Keith

    Well, I know this is a “Design” tutorial, but how about now showing how to produce nearly the same thing using HTML5 and CSS3? That would be quite a bit more useful.