Create an Authorization window in Photoshop

In this lesson we will look at how to create a web form with a username and password in Photoshop. For our work we will use dark tones, and in the background we will place the bokeh texture to add brightness and vividness to our creation.

Final result:

And now let’s get down to the lesson!

Step 1

Create a new document (Ctrl + N) with a width of 450 pixels and a height of 300 pixels.

Step 2

Take a bokeh texture image, save it to your computer (right-click – Save). Open it in your Photoshop program and drag it into your new document created in the last step. Next, go to Filter Blur – Gaussian Blur (Filter> Blur> Gaussian Blur), set it to 25.2%.

This is how it should look like. Now we are going to create the form itself.

Step 3

Take the tool Rounded Rectangle (Rounded Rectangular Tool (U)), set the radius of rounding to 3 pixels, draw a shape similar to the one you see in the screenshot below and fill it with # 3a3a3a color. Name this layer “body”.

Step 4

Now, create a new layer (Ctrl + Shift + N) and name it “noised”. Standing on the “noised” layer, click on the thumbnail of the “body” layer with the Ctrl key pressed (thereby you will get a selection within the boundaries of the shape created in the previous step). Fill the selection you created (standing on the “noised” layer) with the color # 3a3a3a. Next, go to Filter – Noise – Add Noise (Filter> Noise> add Noise), set it to 1.5%.

Step 5

Re-create the new layer and name it “header”. Take the tool Rectangle selection (rectangular marquee tool) and select the area as shown in the screenshot below. Fill it with # 000000. (translator’s note: To do this, simply press the D key, this will set the default colors Colour foreground (Foreground color) will be black, and press Alt + Backspace). After that we need to remove the sharp edges at the top of our “header”. To do this, we need to do the following: standing on the “header” layer, we hold down the Ctrl key and left-click on the thumbnail of the “body” layer, thereby loading the selection around our shape, then we press the CTRL + Shift + I key combination This will invert the selection, and then press the delete key, this cuts off the sharp corners at the top. You can remove the selection by pressing the Ctrl + D combination.

Step 6

For the “header” layer, apply Overlay Parameters. To do this, right-click on the layer and select Overlay options (Blending Options). In the dialog box, select Gradient (Gradient), we set the parameters for it, as shown in the screenshot below.

This is what your web form should look like at the moment. Now we will have to add one more detail in the form of a line.

Step 7

Create a new layer and name it “white line”. Choose a tool region (horizontal row) (Single Row Marquee Tool (M)) and draw a white line (#ffffff) at a distance of 1 pixel from the lower border of your “header” area. Install opacity (Opacity) at 16%.

Step 8

Next we need to add some text. This tutorial uses a 27-pt Bebas font, white (#ffffff) for the name and password. Arial Bold 24 point font was used for the title Welcome back!

Step 9

Activate the tool Rounded Rectangle (Rounded Rectangular Tool (U)), set a radius of 3 pixels, draw a shape like in the screenshot below.

Step 10

Right click on the layer and select Overlay options (Blending Options), select the option Inner shadow (Inner Shadow), change the blending mode to normal (Normal), color # 565a63, opacity (Opacity) 100%, Angle (Angle) 90 degrees, Distance (Distance) and The size (Size) 1

Step 11

Now apply Gradient overlay (Gradient overlay) with parameters as in the screenshot below.

Step 12

Add Stroke (Stroke):

  • The size (Size): 1
  • Colour (color): # 302f2f
  • Location (Position): Outside (Outside)
  • Blend mode (Blend mode): on normal (Normal)
  • opacity (Opacity): 100%

Here you see the input fields we created. To make the same field for the password (Password) that we made for the name (Name), simply duplicate the layer using the Ctrl + J keys and move the duplicate down, not forgetting to align it with the top field.

Step 13

Create a new layer, name it “checkbox”. Take the tool Rectangle selection (rectangular marquee tool), create a small square below the text Password. Fill this square with black.

Step 14

Take the image of a green daw for the checkbox. Add text, for example, Keep me logged in. Here this text is made in Arial Regular font, 13 points in size, white (#ffffff). For forgot password – color # 686868.

Step 15

Activate the tool Rounded Rectangle (Rounded Rectangular Tool (U)), set a radius of 3 pixels, draw a shape like in the screenshot below. This will be our button. To send (submit).

Step 16

Right click on the layer and select Overlay options (Blending Options). Select a parameter Inner shadow (Inner Shadow), change the blending mode to normal (Normal), color # 87FCCE, opacity (Opacity) 100%, Angle (Angle) 90 degrees, Distance (Distance) and The size (Size) 1

Step 17

Now apply Gradient overlay (Gradient overlay) with parameters as in the screenshot below. Gradient from # 03ff9d to # 06b561.

  • Blend mode (Blend mode): Normal (Normal)
  • Opacity (Opacity): 100%
  • Style (Style): Linear (Linear)
  • Angle (Angle): 90

Step 18

Add Stroke (Stroke):

  • The size (Size): 1
  • Colour (color): # 05743F
  • Location (Position): Outside (Outside)
  • Blend mode (Blend mode): on normal (Normal)
  • opacity (Opacity): 100%

Step 19

Now add LOGIN to our button. To do this, use the font Bebas, size 23 points, color # 05a056.

Step 20

Next, add a parameter to this text. Shadow (Drop shadow) with the characteristics as shown in the screenshot below.

  • Blend mode (Blend mode): on normal (Normal)
  • Colour (color): #ffffff
  • opacity (Opacity): 100%
  • The size (Size): 1

And here is our final result.

I hope you learned something new while doing this lesson. We used a colorful background to give liveliness to our screen web forms, as well as light colors for the call-to-action button, and we did it all using simple and clear methods and techniques.

Download psd file

Like this post? Please share to your friends: