Design a Clean, Stylish Registration Form

Designers and marketers spend a lot of time, energy, and effort persuading website visitors to sign up for trials, newsletters, free downloads, and other incentives. Designing a creative and interesting registration form is a crucial final part of that process. You will need to maintain a certain balance between appealing design and simplicity. If you add too many design elements or form fields, the user may get distracted. Conversely, if you have a very simple form with only text and default styles, they might find it boring and ignore the offer. So, today I’ll walk you through the careful balance of designing a clean and stylish registration form that is both simple and appealing. We’ll focus on keeping it clean, interesting, and at the same time effective. So, let’s get started! Resources: Fabric patterns Wood Patterns Final Result: (To download the completed, layered file, click here.)

Step 1

Open Photoshop and create a new file with a 575px width and a 600px height.

Step 2

Now, create a new layer and fill it with color #2d3335 using the paint bucket tool.

Step 3

To add a nice pattern to the background, click on the “Layer Style” > “Pattern Overlay” and add a pattern.

Step 4

For the form base or background, select the rectangle tool and create a rectangle using color #d7d7d7.

Step 5

Now, click on the layer styles and add a pattern, Satin, Inner Shadow, and Stroke. Add a 1px stroke using color #bfbfbf.

Step 6

For the title, select the type tool and add your desired text. Then, click on “Layer Styles” > “Drop Shadow.”

Step 7

Now we will create two dividers. For the first one, select the line tool to draw a line with a 1px weight using color #bcbcbc. Now, click on “Layer Styles” > “Drop Shadow” to add a thin shadow to the line. Use the following settings.

Step 8

Right-click on the new line layer and select “Rasterize layer.”  Then, select the eraser tool with a soft round brush and use it on the sides to achieve the effect shown below.

Step 9

Repeat the same process described above to create the second divider.

Step 10

Now, let’s start with our registration form fields. So select the rectangle tool and create a rectangular stripe with color #9e0039.

Step 11

Click on “Layer Styles” and add Stroke, Inner shadow, and Drop Shadow using the following settings.

Step 12

Select the type tool and add form field text using color #efefef. Then, click on “Layer Styles” > “Drop Shadow” and use the settings shown below.

Step 13

Repeat the same process to create additional form fields.

Step 14

Now for the button, select the rectangle tool again and create a rectangle using color #464646.

Step 15

Click on “Layer Styles” and add Stroke, Inner Shadow, and Drop shadow using the following values.

Step 16

Add the button text using the type tool with a very slight drop shadow.

Step 17

For the side options, select the rectangle tool and create a small rectangle using color #464646. Then, click on “Layer Styles” and add Stroke and Inner Shadow to the rectangle. Use the following settings.

Step 18

Select the type tool and add text along the right side using a slight drop shadow.

Step 19

Repeat the same process to add more options; you can simply duplicate the above rectangle layer and add text.

Step 20

Now, group up all the layers and click on “Edit” > “Free Transform” and make the entire form look slightly tilted. Don’t tilt it too much, or your form fields will look strange when they’re used.

Step 21

Now let’s start with the nail and ropes. For the holes, create a new layer, select the hard round brush, and use it on the sides with a 16px size and color #424242.

Step 22

Click on “Layer Styles” > “Inner Shadow” and apply the following settings.

Step 23

Reduce the brush size to 10px and create a tilted line. Then, click on “Layer Styles” and add “Bevel & Emboss” and a fabric pattern. Use the settings below. Repeat the same process to create the other side.

Step 24

For the nail, select the ellipse tool and create a small round shape. Then, click on “Layer Styles” and add Stroke, Gradient, and Drop Shadow to the shape using the following values.

Step 25

For the Drop Shadow, create a new layer, select the lasso polygonal tool, create a shape similar to our form, and fill it with color #000000. Now, click on “Filter” > “Blur” > “Gaussian Blur.” Use the settings shown below. We are done! Our sleek and clean registration form is ready. Hope you guys enjoyed the tutorial. Take care!

Frequently Asked Questions about Designing a Clean, Stylish Registration Form