VforVectors

Vector Tutorials

bookmark
my banner
Andrei Marius On January - 27 - 2011

Hi there. In this week’s tutorial I will show you how to create a clean register form. It covers several interesting techniques and tips on how to work with patterns, grids and guides, multiple fills and strokes. It might be particularly useful for those of you involved in the web design area.

Difficulty: Intermediate-Advanced
Estimated Completion Time: 1 hour
Number of Steps: 24


This is what you’ll be creating:

preview

Step 01

Create a 400 by 370px document. First, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 10px. Go to Edit > Preferences > Guides & Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. Al these options will significantly increase your work speed.

Step 02

Pick the Rectangle Tool(M) and create a 320 by 320px shape. Fill it with any color and use no stroke. Select it and go to Effect > Stylize > Rounded Corners. Enter a 3px Radius, click OK then go to Object > Expand Appearance.

Step 03

Select the shape made in the previous step, fill it with R=240 G=240 B=240 and add a 2px, white, aligned to inside stroke. Select the stroke from the Appearance panel and lower its opacity to 50%. With the shape still selected open the fly-out menu of the Appearance panel and click on Add New Stroke. This will add a second stroke for your shape. Select it, move it above the original stroke, decrease its size to 0,5px and change the color to R=120 G=120 B=120.

Step 04

Reselect the shape made in the previous step. Open the fly-out menu of the Appearance panel and click on Add New Fill. This will add a second fill for your shape. Select it and replace the color with the gradient shown below the first image. If you take a closer look at the gradient images you’ll notice some yellow text. It stands for sliders opacity. Add two new fills for this shape and use the linear gradient shown in the second and the third images. Now, your shape should have four fills and two strokes. Reselect it, add one more fill and make it black. Select this new fill (from the Appearance panel), change its blending mode to Multiply, lower its opacity to 5% then go to Effect >Artistic > Sponge. Enter the data shown above the final image then click OK.

Step 05

For the next step you’ll need a grid every 2px. Go to Edit > Preferences > Guides & Grid and enter 2 in the Gridline every box. Pick the Rectangle Tool(M) and create four squares (2 by 2px). Fill them with black and R=120 G=120 B=120 then place them as shown in the following image. Select these fresh shapes and drag them over the Swatches panel to turn them into a pattern. Return to the large square shape. Select it, add one last fill and use the pattern. Lower its opacity to 25% and change the blending mode to Overlay.

Step 06

Reselect the entire shape and go to Effect > Stylize > Drop Shadow. Enter the data shown below then click OK.

Step 07

Again, you’ll need a grid every 10px. Go to Edit > Preferences > Guides & Grid and enter 10 in the Gridline every box. Pick the Rectangle Tool(M), create a 340 by 40px shape, place it as shown below and fill it with the linear gradient. This time, if you take a closer look at the gradient image you’ll notice some white text. It stands for sliders location. Next, you need to add a little roundness for some anchor points. You’ll need the Round Any Corner Script. Save it to your hard drive then pick the Direct Selection Tool(A). Select the top anchor points and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 5px Radius and click OK. In the end your shape should look like in the second image.

Step 08

Pick the Rectangle Tool(M), create two simple squares (5 by 5px) and place them as shown in the following image. The Snap to Grid will ease your work. Fill them both with the linear gradient shown below. First, focus on the left one. Pick the Delete Anchor Point(-), click on the bottom left anchor point and you will get a triangle. Move to the right shape and remove the bottom, right anchor point.

Step 09

Turn off the Snap to Grid then go to Edit > Preferences > General and enter 0,5px in the Keyboard Increment box. Let’s focus on the left triangle shape made in the previous step. Select it and make two copies (Ctrl+C > Ctrl+V > Ctrl+V). Select the top copy and hit the right arrow (to move it 0,5px to the right). Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=0 G=86 B=178. Go to the right triangle shape, select it and make two copies. Select the top copy and hit the left arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=0 G=86 B=178.

Step 10

Turn on the Span to Grid then go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Pick the Rectangle Tool(M), create a 320 by 5px shape and place it as shown in the first image. Fill it with R=120 G=120 B=120 and lower its opacity to 10%. Pick the Pen Tool(P), draw two horizontal paths and place them as shown in the second image. Add a 0,5px, white stroke for each path and change the blending mode to Overlay. Pick the Type Tool(T) and add your text. Use the Cooper Std font with a size of 15pt, make it white and place it as shown in the final image. Select the text, go to Effect > Stylize > Drop Shadow, enter the data shown below then click OK.

Step 11

Go to Edit > Preferences > Guides & Grid and enter 10 in the Gridline every box. Pick the Rectangle Tool(M), create a 250 by 30px shape and place it as shown in the following image. Fill it with white and add a 2px, white, aligned to outside stroke. Select the stroke and lower its opacity to 50%. Add a second stroke, decrease its size to 0,5px and change the color to R=147 G=149 B=152. Finally, reselect the entire shape. Go to Effect > Stylize > Rounded Corners, enter a 3px Radius and click OK.

Step 12

Select the shape made in the previous step, make two copies and place them as shown in the first image. Pick the Type Tool(T) and add the text shown in the second image. Again, use the Cooper Std font with a size of 10pt and change its color to R=72 G=72 B=72. Select all this text and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 13

Pick the Rectangle Tool(M) and create a 340 by 50px shape. Place it as shown in the first image and fill it with the linear gradient. Pick the Direct Selection Tool(A), select the bottom anchor points and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 3px Radius and click OK. In the end your shape should look like in the second image.

Step 14

Use the techniques shown in the eight and the ninth steps to create the triangle shapes shown in the following steps.

Step 15

Go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Pick the Rectangle Tool(M), create a 320 by 5px shape and place it as shown in the first image. Fill it with R=120 G=120 B=120 and lower its opacity to 10%. Pick the Pen Tool(P), draw two horizontal paths and place them as shown in the second image. Add a 1px stroke for each path (R=240 G=240 B=240). Reselect both paths, change the blending mode to Overlay and lower the opacity to 50%.

Step 16

Pick the Rectangle Tool(M), create a 90 by 30px shape and place it as shown in the following image. Select it and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK then go to Object > Expand Appearance. Duplicate the resulting shape then make the copy invisible. Select the original shape along with the large green rectangle and click on the Minus Front button. The resulting shape should look like in the final image.

Step 17

Turn the copy made in the previous step back to visible. Fill it with none, add a 0,3px, white, aligned to outside stroke and lower its opacity to 50%. Duplicate this shape. Select the copy, remove the stroke, fill it with white then go to Effect > Stylize > Inner Glow. Enter the data shown below, click OK then go to Object > Expand Appearance. You will get a group with two separate subgroups. A simple and a masked one. Delete the simple group then select the masked one and lower its opacity to 30%.

Step 18

Pick the Rectangle Tool(M) and create a 80 by 20px shape. Place it as shown in the following image then go to Effect > Stylize > Rounded Corners. Enter a 13px Radius and click OK. Fill it with the linear gradient shown in the first image and add a 0,25px stroke (R=0 G=104 B=56). Go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Pick the Ellipse Tool(L), hold Shift, create a 14 by 14px shape and place it as shown in the second image. Fill it with the linear gradient and add a 0,25px, aligned to outside stroke (R=0 G=104 B=56).

Step 19

Disable the Snap to Grid. Pick the Type Tool(T) and add the white “register” text. Again, use the Cooper Std font with a size of 12px. Place the text as shown in the following image then go to Effect > Stylize > Drop Shadow. Enter the data shown below then click OK.

Step 20

Enable the Snap to Grid. Grab the Rectangle Tool(M) and create a 4 by 4px shape. Fill it with none and add a 3px stroke. Select the stroke, open the stroke panel, click on the Round Cap and Round Join buttons then go to Object > Expand. Select the resulting shape, rotate and resize it then place it as shown in the final image. Fill it with R=0 G=148 B=68 and add a 0,15px, aligned to outside stroke (R=0 G=104 B=56). Select the fill from the Appearance panel (make sure that the arrow shape is still selected) and go to Effect > Stylize > Inner Glow. Enter the data shown below then click OK.

Step 21

Go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Pick the Ellipse Tool(L), hold Shift and create two circles (both 20 by 20px). Fill both shapes with R=240 G=240 B=240 and add a 0,25px, aligned to outside stroke (R=216 G=216 B=216).

Step 22

Go to Edit > Preferences > Guides & Grid and enter 10 in the Gridline every box. First, pick the Rectangle Tool(M) and create a 10 by 10px shape. Fill it with none and add a 5px stroke. Again, select the stroke then click on the Round Cap and Round Join buttons. With the shapes still selected go to Object > Path > Add Anchor Points. This will add four new anchor points for your shape. Pick the Direct Selection Tool(A), select the anchor points highlighted in the second image and hit the delete key. Select the resulting path and go to Object > Expand. Continue with the Pen Tool(P). Draw two oblique paths as shown in the third image (the snap to grid will ease your work). Add the same type of stroke for both paths and go to Object > Expand. Finally, select the resulting shapes and click on the Unite button from the Pathfinder panel.

Step 23

Now, let’s add some color for the shapes made in the previous step. Select the first one, rotate it, fill it with the green linear gradient and add a 0,25px, aligned to outside stroke (R=0 G=104 B=56). Select the second shape, fill it with the red linear gradient and add a 0,25px, aligned to outside stroke (R=190 G=30 B=45). Resize these two shapes and place them above the two grey circles, as shown in the final image.

Step 24

Finally, duplicate the shape made in the first step. Pick the Rectangle Tool(M) and create the two shapes shown in the first image. Select them and go to Object > Compound Path > Make. Rotate the resulting path as shown in the second image then select it along with the fresh copy and click o the Intersect button from the Pathfinder panel. Fill the resulting shapes with white, lower the opacity to 15% and change the blending mode to Overlay.

Final

Now your work is done. Here is how it should look like. You can experiment by changing the colors for the register button and the bottom bar.

Categories: Web Graphics

6 Responses

  1. Thanks for the tutorial. I think there needs to be more web design related illustrator tutorials as it’s such a better program to use for web design than photoshop for most designs. My only criticism is that all of your screenshots seem to be taken with ‘view pixel preview’ turned off so close ups look really sharp. You should never have ‘view pixel preview’ turned off when doing any design for screen in illustrator and I think it leads to that (wrong) assumption by photoshop-designers that you can’t design with pixel perfection in illustrator.

    Thanks for the tutorial though.

    • Marius says:

      You’re absolutely right.
      I’ll remember it for the future web design related tutorials,
      Thanks a lot.

    • Agilius says:

      I agree with you on both ideas. Illustrator is quite great for web design, and I kinda feel like I need to learn how to use those vector tricks that everyone knows, like pathfinder and the rest. And yeah, pixel preview is important!

      I haven’t done it step by step, but I will soon and get back with a few impressions.

      Great job! Please share some more knowledge with us!

  2. Abbouh Ahmed says:

    Thanks for this amazing tutorial, well done!

  3. Eric says:

    This could be done so much faster with a bit of CSS3!

Leave your comment

    preview
    Finder Logo
    BMW Logo
    Flask Illustration
    Cube