Build a Sleek Threefold Login Form in Photoshop

Building an attractive, eye-catching login form is a great way to enhance your web design and compel visitors to sign up for site memberships. So, today we will create a folded login form that you can use it on your own design projects. You will learn how to create the folded paper effect using different blending options and shadows, and we will create a clean and stylish login form within the folds using some handy techniques.

Resources:

Midnight Blue Grunge Pattern

Final Result:

Step 1: Create a New File

Open your Photoshop and create a new file with a 650px width and a 400px height.

Step 2: Color the Background

Fill the background with color #ececec, and then click on “Filter” > “Noise” > “Add Noise.”

Step 3: Create Paper Sides

Now, we will start with our folded paper shape. So, create a new layer and select the pen tool to create our left fold. Then, right-click on the path, select “Make selection” and fill it with #262626.

Step 4: Add a Gradient

Click on “Layer” > “Layer Style” > “Gradient Overlay” and add a gradient. Use the settings shown below.

Step 5: Add a Pattern

Now, we’re going to add texture to make the shapes paper-like. Click on “Layer” > “Layer style” > “Pattern Overlay” and add the midnight blue grunge pattern mentioned in the above resources.

Step 6: Create the Middle Fold

Now, select the pen tool and create another shape, but make sure this one is bigger than the previous one and fill it with color #ab0707.

Step 7: Add a Gradient

Click on “Layer” > “Layer Style” > “Gradient Overlay” and keep the angle 180 degrees this time.

Step 8: Add a Pattern

We will repeat the same process as before: “Layer” > “Layer style” > “Pattern Overlay.” But, this time, we will choose a different pattern for this fold.

Step 9: Create the Third Fold

Select the pen tool and create the final fold. Fill it with color #262626.

Step 10: Duplicate the Layer Style

Simply right-click on the first fold layer and select “Copy Style.” Then, right-click on the current fold layer and click on “Paste Style.”

Step 11: Add the Frame

Now, click on the line tool and create a frame around our paper folds with an 8px weight using color #cdcdcd.

Step 12: Fill the Gap

To fill the gaps between our folds, we will again use the line tool with the same color (#cdcdcd) but with 6px and 3px weights.

Step 13:  Make the Fold Prominent

Select the hard round brush with a 1px size and create a thin line with #ffffff between the left and middle folds to make the crease prominent. Then, reduce the opacity to 50%.

Step 14: Add the Logo

Add the logo text with color #a02727. Then, click on layer styles and add a gradient.

Then, click on stroke and add a 1px stroke using color #860c0d.

Finally, add some drop shadow to our text.

Step 15: Add More Text

Select the text tool and add “Festival.” This time, use color #f2f2f2. Then, simply copy the above text layer style and paste it onto this new layer.

Step 16: Create the Form Fields

First, select the text tool and add the form title using color #ffffff. Add a subtle drop shadow using the following settings.

Now, select the rounded rectangle tool and create the username field. Then click on “Edit” > “Transform path” > “Wrap,” and adjust the right side of the rectangle so it appears slightly smaller than the left side.

Now, click on “Layer” > “Layer style” > “Stroke,” and add a 2px stroke to the rectangle.

Finally, apply the following gradient to the rectangle layer.

Now, repeat the same process to create another rectangle and add the necessary text to the fields.

Then, click on the rectangle tool and create a small rectangle. Add the check mark using custom shapes. Then select the text tool again and add some text using colors #b5b5b5 and #eb4545.

Step 17: Add the Login Button

Using the same methods that we used with the form field rectangle, create a small button, but this time use color #ffffff  for the stroke. Then, apply a gradient overlay to add an orange gradient. The gradient settings are below.

Now, add some drop shadow and the “Login” text using the text tool.

Step 18: Add Bullets and Text

Select  the hard round brush with a 13px size and use it on the right fold to form circular “bullets.” Make sure that our foreground color is #761818. Then, add a bit of drop shadow and gradient to your bullets.

Now, add the desired text next to the bullets using color #949494. Simply repeat the same process to create additional bullets and text.

Step 19: Add the Shine

This is optional if you want you can add some shine to the form. If you want a glossy look, select the polygonal lasso tool, create a rectangle, and fill it with #ffffff.

Then, change the blending mode to “overlay” and reduce the opacity to 25%.

Step 20: Create the Shadow

Create a new layer and place it just above the background layer. Now, click on the pen tool to create the shadow shape, fill it with color #595c59.

Then, click on “Filter” > “Blur” > “Gaussian Blur” and blur it out a bit.

Finally, our stylish folded login form is all done. I hope you guys enjoy it and employ it on your future landing pages and layouts.

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.

  • Skweekah

    The devil is in the detail! Great tut

  • martuanez

    There is a lack of perspective in the text, that could be easily solved with css3, so why not add it?
    nice work ;)

  • http://www.pixink.net Maija

    I’d like to see that! Good thinking martuanez.

  • http://www.grafixguru.com Guru

    Good thought n liked it.

  • Mik

    Very nice and detailed tutorial.

  • Yo

    Very nice tutorial! Am curious about the css trick as well.