VforVectors

Vector Tutorials

bookmark
my banner
Andrei Marius On December - 2 - 2010

Hi there. In this new tutorial I’ll show you how to create a semi-realistic thermometer illustration. It might seem to be a complicated tutorial but if you’re familiar with the basic tools and effect you won’t face any problem. Give it a try and let me know if I was right.

Difficulty: Intermediate-Advanced
Estimated Completion Time: 1 hour 30 minutes
Number of Steps: 23


This is what you’ll be creating:

preview

Step 01

Create a 700 by 700px document. First, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter “5” 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

Let’s start with the basic shapes. First you need to know that I lowered the opacity of the next shapes so that you can disitinguish the grid and understand the exact position for each shape.Pick the Rectangle Tool(M) and create a 60x475px shape. Switch to the Ellipse Tool(L), create a 60x30px shape and place it in the top of the rectangle, as shown in the second image. Reselect the Rectangle Tool(M), create a 60x115px shape and place it as shown in the third image. Now, let’s focus on this last shape. Select it, grab the Add Anchor Point Tool(+) and add four new anchor point by clicking in the points highlighted with yellow. Next, you need to move some of these anchor points. Pick the Direct Selection Tool(A), select the bottom, left anchor point and move it 20px to the right then select the bottom, right anchor point and move it 20px to the left. Move up to the next pair of anchor points. Select the left one and move it 15px to the right then select the right one and move it 15px to the left. Now, your shape should look like in image #5. Select it and go to Effect > Stylize > Rounded Corners. Enter a 5px Radius, click OK then go to Object > Expand Appearance.

Step 03

Select the shapes made in the previous step and click on the Unite button from the Pathfinder panel then pick the Rectangle Tool(M) and create a shape like the green one shown in the second image. Select it along with the bigger shape and click on the Minus Front button from the Pathfinder panel.

Step 04

Duplicate the shape made in the previous step then pick the Rectangle Tool(M) and create a shape like the blue one shown in the first image. Select it along with the copy and click on the Intersect button from the Pathfinder panel.

Step 05

Once again, duplicate the shape made in the third step. Pick the Rectangle Tool(M) and create a shape like the blue one shown in the first image. Select it along with the copy and click on the Intersect button from the Pathfinder panel.

Step 06

Pick the Rectangle Tool(M) create a 10 by 465px shape and place it as shown in the first image. Select this thin shape, add a 5px Rounded Corners effect then go to Object > Expand Appearance.

Step 07

For the following step you’ll need a grid every 2.5 px. Go to Edit > Preferences > Guides & Grid, enter 2.5 in the Gridline every box. Once again, grab the Rectangle Tool(M), create a 20x95px shape and place it as shown in the first image. Pick the Direct Selection Tool(A), select the bottom, left anchor point and move it 2.5px to the right then select the bottom, right anchor point and move it 2.5px to the left. Now, your shape should look like in image #3. Select it and go to Effect > Stylize > Rounded Corners. Enter a 8px Radius, click OK then go to Object > Expand Appearance. Let’s make a quick recap. Right now you should have five shapes in the Layers panel. Double click on each of these shapes and name them from “1” to “5” as shown. It will be easier for you to find them when I nominate them during the tutorial.

Step 08

Disable the Grid and the Snap to Grid. Let’s start with shape “1”. First fill it with white then add two new fills (from the flyout menu of the Appearance panel) and use the linear gradients shown below. Take a closer look at the gradient. The yellow text stands for Opacity.

Step 09

Go to Edit > Preference > General and enter “1” in the Keyboard Increment box. Make tow copies of “1” (Ctrl+C > Ctrl+F > Ctrl+F), select the top copy then hit the down arrow and the right arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white.

Step 10

Make another two copies of “1”. Again, select the top copy and hit the up arrow six times. Reselect both copies and click on the Minus Front button. Select the resulting shape, fill it with R=153 G=153 B=153 then lower its opacity to 30%.

Step 11

Make a new copy of “1”. Fill it with none (remove the extra fills) and add a 1pt, aligned to outside stroke. Select this stroke and go to Object > Expand. Fill the resulting shape with R=181 G=181 B=180 then add two new fills and use the linear gradients shown below. Let’s continue with shape “2”. Select it, Bring it to Front (Shift + Ctrl + ]) then fill it with the linear gradient shown in the final image.

Step 12

Let’s move to shape “3”. First, fill it with white and add a 0,75, aligned to outside stroke (R=198 G=199 B=204). Add two new fills for this thin shape and use the linear gradients shown in the following images. Select the third fill (from the Appearance panel) and lower its opacity to 50%. Finally, reselect the entire path and add the discrete Outer Glow effect shown below.

Step 13

Select shape “3” and go to Object > Path > Offset Path. Enter a -2.5px Offset and click OK. Select the resulting shape. First, remove the Outer Glow effect the stroke and the extra fills. Now, fill it with R=173 G=166 B=179. Pick the Direct Selection Tool(A), select the top anchor points, hold Shift and drag down as shown below. Add a second fill for this shape and use the linear gradient shown in the final image. Select this new fill (from the Appearance panel) and lower its opacity to 50%.

Step 14

Next, is shape “4”. Fill it with the linear gradient shown in the first image then add two new fills and use the next linear gradients shown below. Make two copies of “4”. Select the top copy and hit the down arrow once. Reselect both shapes and click on the Minus Front button. Fill this new shape with the final linear gradient.

Step 15

Finally, shape “5”. Fill it with white then add three new fills and use the linear gradients shown below. Again, take a closer look at the gradients. The white text stands for Location. Select the second fill and lower its opacity to 70% then select the third and the fifth fills and lower their opacity to 80%.

Step 16

Make a copy of “5” and move it above the original shape. Fill it with none (remove the extra fills) and add a 0,5px aligned to inside stroke. Select this stroke and go to Object > Expand. Fill the resulting shape with R=204 G=204 B=204 then add a second fill and use the linear gradient shown below. Select this second fill (from the Appearance panel) and lower its opacity to 70%. Make another copy of “5” then select the Ellipse Tool and create small shape like the red one shown in the fourth image. Select this circle along with the fresh copy of “5” and click on the Minus Front button. You’ll get a group of two shapes. Remove the top one and fill the other one with R=77 G=77 B=77.

Step 17

For the next step you’ll need a grid every 1px. Go to Edit > Preferences > Guides & Grid, enter “1” in the “Gridline every” box. Pick the Pen Tool(P) and create a 48px horizontal path. Continue and make four new path. These ones should be 24px long. Make one final path. This one should be 36px long. Select all these paths, add a 1pt, black stroke and click on the Horizontal Align Center button from the Align panel. Finally, make sure that you’re leaving 4px between each path.

Step 18

Now, you need to multiply the paths made in the previous step. Select the longest one (48px) and go to Effect > Distort&Transform > Transform. Enter 6 in the Copies box and -40 in the Move-Vertical box, click OK the go to Object > Expand Appearance. Select the 24px long paths and go again to Effect > Distort&Transform > Transform. Enter 13 in the Copies box and -20 in the Move-Vertical box, click OK the go to Object > Expand Appearance. Select the last path (36px long) and go to Effect > Distort&Transform > Transform. Enter 6 in the Copies box and -40 in the Move-Vertical box, click OK the go to Object > Expand Appearance. Select all these paths place them as shown in the fourth image then group them. Move this group below shape “3” in the Layers panel.

Step 19

Now some text. Pick the Type Tool and add the characters shown below. I used the Elgethy Bold font but you can use any other font. Select this entire text and enlarge it as shown in the second image then go to Object > Transform > Rotate. Enter a 90 degrees Angle, click OK then go to Object > Expand. Spread the resulting shapes as shown in the final image.

Step 20

Pick the Ellipse Tool(L), create a squeezed shape (48 by 8px) and place it as shown in the first image. Select this shape and go to Effect > Warp > Arc. Enter the data shown below image #1, click OK then go to Object > Expand Appearance. Fill the resulting shape with R=204 G=204 B=204, lower its opacity to 40% then add a 3px Gaussian Blur effect (Effect > Blur > Gaussian Blur). Reselect the Ellipse Tool(L), create a second shape (40 by 7px) and place it as shown in the third image. Once again, go to Effect > Warp > Arc. Enter the data shown below, click OK then go to Object > Expand Appearance. Fill the resulting shape with R=179 G=179 B=179, lower its opacity to 50% then add a 4px Gaussian Blur effect.

Step 21

Make a copy of shape “1” and Bring it to Front (Shift + Ctrl + ]). Fill it with the first linear gradient and lower its opacity to 40%. Make another copy of “1” then select the Pen Tool(P) and create a shape like the red one shown in the second image. Select this new shape along with the copy of “1” and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with the second linear gradient and lower its opacity to 40%.

Step 22

Select all the shapes created so far and group them (Ctrl + G). Select this group and got to Object > Transform > Rotate. Enter a -45 degrees Angle and click OK. Reselect the group and add the Drop Shadow effect shown below.

Step 23

Finally, for the background use a simple rectangle. First, fill it with white then add a new fill and use the radial gradient shown below.

Final

Now your work is done. Here is how it should look like.

Categories: Illustrations

17 Responses

  1. woody says:

    very realistic !gratz !

  2. GTA 5 says:

    Great tutorial, thanks for sharing!

  3. Reza says:

    Nice & detail tutorial, i like the font set for thermometer. Thank you for the link, it’s still free-font.

  4. Larthan says:

    Could you please snapshot your layers panel you’re working with?
    Thus I can be able to understand more clear.

    • Marius says:

      No I can’t, but I can send you an e-mail with the snapshot if it helps you.
      Do you want me to send it to the e-mail address submitted with your comment?

  5. Laura says:

    Cool, can’t wait to give it a go.

  6. Nice tutorial. Like that you made use of the grid overlay for precise placement of vector points and didn’t forget to add shading and details.

  7. carl says:

    Very nice Marius..

    Just a few comments or possible corrections.
    In Step 13:
    quote: Select shape “3″ and go to Object > Path > Offset Path. Enter a 2.5px Offset and click OK..
    – Looking at the picture I believe this should be minus 2.5 px
    In Step 13:
    quote: First, remove the Inner Glow effect
    – In step 12 you gave shape # 3 an outer glow not an inner glow.
    I am halfway through your tut, and as always am enjoying it.
    Carl

    • Marius says:

      Hi Carl.
      As always, you’re right. I just made the correction.
      Don’t hesitate to contact me if you spot any other errors. I’m glad you’re enjoying it.
      Thanks, Marius.

  8. Adriana says:

    This is a nice outcome. I can see this thermometer on a poster for a medical clinique or something like that. 🙂

  9. Tyler says:

    Hi,
    I’m slightly confused. Maybe I missed something, but it looks like your grid size changes? One of your steps says “Once again, grab the Rectangle Tool(M), create a 20x95px shape and place it as shown in the first image. Pick the Direct Selection Tool(A), select the bottom, left anchor point and move it 10px to the right then select the bottom, right anchor point and move it 10px to the left.”

    If I move both corners of a 20 px wide shape towards each other 10 px, it should create a point, but that is not what is happening in your pictures.

    I’d be grateful if you could clear that up for me.

    Thanks,
    Tyler

    • Marius says:

      My bad. You’re right, I forgot to mention that you need to change the grid size. I made the corrections. Let me know if you spot any other errors.
      Thanks, Marius

  10. technology review says:

    Very intresting article on creation of a semi realistic thermometer creation Thanks!

  11. This is a really great tutorial. Thanks for sharing.

  12. Thank you for this tutorial, Its very clear.

  13. Raj Mehta says:

    Nice tutorial

    🙂

  14. Telecharger says:

    Nice super
    Thanks,

Leave your comment

    preview
    Finder Logo
    BMW Logo
    Flask Illustration
    Cube