Creating Web Elements with Adobe Illustrator: Login Form
Create a new document:
Size: 680px x 350px
Color mode: RGB
Raster Effects: 72 ppi
Align objects to pixel grid: on
Create a rectangle 680px x 350px
Fill it with #919BA1 or 145, 155, 161
Copy the rectangle (Cmd+C) and paste it in front (Cmd+F)
Open the swatch library > Patterns > Basic Graphics > Basic Graphics_Lines and choose Grid .25 inch swatch.
Set the rectangle with the pattern swatch to a screen blend mode in your transparency panel.
Copy the patterned filled rectangle (Cmd+C) and paste in front (Cmd+F)
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.
Create a rectangle 260px width x 40px height.
Fill it with the same color as your background #919BA1
Add an inner glow effect of #605F5F, normal, 75% opacity, 4px (Effect menu > Stylize >Outer Glow)
Copy the rectangle below by selecting the first rectangle (selection arrow) and holding the option+dragging below the original shape.
Type the words: “email”, “password” and an example email in the first field ie: firstname.lastname@example.org).
Create a circle using the elipse tool which is 10px x 10px.
Select the circle and go to Effects > Distort & Transform > Transform and type 7 copies and move them horizontally 15px apart.
Create a rectangle 80px x 30px.
Fill it with a subtle gray to tint of gray gradient.
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.
Apply a subtle drop shadow to the offset path.
Copy rectangle and paste in back. (Cmd+B)
Effect > Path > Offset Path = 2px
Fill the offset path with the same gradient but this time flip the direction of the gradient on its opposite side.
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.
Add any extra details you feel are necessary. ie: Title, create new account icons etc…