0

No products in the cart.

Creating Web Elements with Adobe Illustrator: Login Form

1.
Create a new document:
Profile: Web
Size: 680px x 350px
Color mode: RGB
Raster Effects: 72 ppi
Align objects to pixel grid: on

2.
Create a rectangle 680px x 350px



3.
Fill it with #919BA1 or 145, 155, 161


4.
Copy the rectangle (Cmd+C) and paste it in front (Cmd+F)

5.
Open the swatch library > Patterns > Basic Graphics > Basic Graphics_Lines and choose Grid .25 inch swatch.





6.
Set the rectangle with the pattern swatch to a screen blend mode in your transparency panel.


7.
Copy the patterned filled rectangle (Cmd+C) and paste in front (Cmd+F)

8.
Fill the copy with a Black–White radial gradient in your swatches panel and give it a screen blend mode in your transparency panel. Bring down the opacity to 45%–50% or to your liking.





Input Fields:

9.
Create a rectangle 260px width x 40px height.

10.
Fill it with the same color as your background #919BA1

11.
Add an inner glow effect of #605F5F, normal, 75% opacity, 4px (Effect menu > Stylize >Outer Glow)


12.
Copy the rectangle below by selecting the first rectangle (selection arrow) and holding the option+dragging below the original shape.

13.
Type the words: “email”, “password” and an example email in the first field ie: youremail@hostname.com).


14.
Create a circle using the elipse tool which is 10px x 10px.

15.
Select the circle and go to Effects > Distort & Transform > Transform and type 7 copies and move them horizontally 15px apart.

 

Login Button:


16.
Create a rectangle 80px x 30px.

17.
Fill it with a subtle gray to tint of gray gradient.

18.
Add a rounded corner effect: Effect > Stylize > Rounded Corners  and set the radius to 10px.
Select the rectangle and create an offset path of 2 px.

19.
Apply a subtle drop shadow to the offset path.

 


20.
Copy rectangle and paste in back. (Cmd+B)


21.
Effect > Path > Offset Path = 2px

22.
Fill the offset path with the same gradient but this time flip the direction of the gradient on its opposite side.

23.
Type the word “Login” and fill it with a dark gray. Copy it and paste in back. Fill the copy with a lighter shade of gray and nudge it down 1–2 increments using your arrow down arrow key.

24.
Add any extra details you feel are necessary. ie: Title, create new account icons etc…

 

 

Final Graphic:

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.