How To Design a Simple Login Form in Photoshop
One of critical element in a website or application your login page designs should be easy to understand and require no thought from the user.
In this photoshop tutorial, I’ll show you how to design a simple and minimal login form interface. I’ll be using a combination of vector shapes and layer styles. I also will only use two colors to keep the interface as simple, elegant and minimal as possible.
Let’s get started!
You may also like: 20 Super Minimalist Portfolio Websites for Inspiration
Tutorial Details:
> Program: Adobe Photoshop
> Difficulty: Beginner
> Estimated Completion Time: 45 minutes
Here, what you’ll be creating:
Photoshop Login Form Tutorial: Step by Step
Lets start to create your simple Login Form in Photoshop:
Step 1:
Create a new file, Open menu ‘File’ -> ‘New’. And set Width: 300px, Height: 267px
Step 2:
Show rulers by choosing menu ‘View’->’Rulers’. Then change the Ruler unit to Pixel by Right-click on the Rulers with your mouse.
Step 3:
Create guide with choose menu ‘View’->’New Guide’.
Check ‘Vertical’ and fill position to ‘0px’ and then click ‘OK’
Do it again and fill this:
Vertical: 20px,64px,150px,280px, 300px.
Horizontal: 0px,45px,50px,70px,114px,124px,168px,178px,222px,227px,237px,247px 267px
If you do like I do, the result would look like this
Step 4:
Now after we create the guide, resize the canvas with choice menu ‘Image’->’Canvas size’
set width to 600px and height to 500px.
Step 5:
Double click on layer Background. Change the name of the layer to “background”
Step 6:
Pick ‘Paint Bucket Tool’ and choose color #dd6800 from side tool box. And paint it to the canvas
Right-click on the layer “Background” with your mouse and choose ‘Blending Options’
Choose ‘Gradient Overlay’ and apply this layer style
Step 7:
Create object with ‘Rounded Rectangle Tool’ with radius: 5px and color: #5C5C5C.
Apply the following layer style to the layer “Shape 1”
Step 8:
Create a new group and name it “Header”
Create object with ‘Rounded Rectangle Tool’ with radius: 5px and color: #06BFC7, like in the picture below
With ‘Pen Tool’ delete the point like in the picture
Apply the following layer style to the layer
Step 9:
Create a text
Apply the layer style to the text
Step 10:
Create line beside the text
Apply the layer style to the line
Step 11:
At the bottom of the Header create line with pencil. First create a new layer and then pick Pencil Tool at tool box on side bar
Step 12:
After finish with the header, now create a new group and name it with “User Fill”.
Create object with ‘Rounded Rectangle Tool’ with radius: 5px and color: #FFFFFF
Duplicate the object and change the colour to #EEEEEE
With ‘Pen Tool’ delete and move some point like the picture below
Apply the layer style to the object
Add icon and text
Here I have prepare this small icon in vector object for you to use (
Download “download-ico-login-form-tutorial.zip” download-ico-login-form-tutorial.zip – Downloaded 3767 times – 20.49 KB
)
Step 13:
Step 13 is almost the same as in Step 12. Or if you wanna make it quick just dupilcate group “User Fill”
Change the group name to “Pass Fill”
Change the icon and the text
Step 14:
Create a new group and name it with “Button”
Create object with ‘Rounded Rectangle Tool’ with radius: 5px and color: #06BFC7
Apply the following layer style to the layer
Add the text at the center of the button
Apply the layer style to the text
Step 15:
Now the last, Add the text below the button
Conclusion
The point from this tutorial is the spacing between elements. So the first things I made was to prepare the guides which will assist and accelerate the process of making this login form.
So that is it! I hope this tutorial is useful for you.
5 Comments
Great work, i like it
Thanks.
[…] How To Design a Simple Login Form in Photoshop […]
Thanks a lot ! I adopted your creation…
I’ll have to match a form + css to it…
[…] How to Design a Simple Login Form in Photoshop […]
[…] How To Design a Simple Login Form in Photoshop […]