Advertisement
Typography

Create a Copper Pipe Text Effect in Adobe Illustrator

by

In the following steps you will learn how to create a detailed copper pipes text effect in Adobe Illustrator. For starters you will learn how to create the letters paths taking full advantage of the Snap to Grid option. Next, using a basic blend and some simple rectangles you will learn how to create a pretty simple pattern brush. Moving one, using that same blend along with some basic blending and vector shape building techniques you will learn how to create the pipe corners, the pipe connectors and the pipes support. Once you have the pipes, you will learn how to add some subtle shading and highlights. Using the Zig Zag effect, simple shapes, some other effects and taking full advantage of the Appearance panel you will learn how create the taps and the water counters. Finally, you can learn how to create a textured background using the Appearance panel, two raster effects, a built-in pattern and some basic blending techniques.


1. Create a New Document and Setup a Grid

Hit Command + N to create a new document. Enter 600 in the width box and 360 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid). For starters you will need a grid every 5px, so simply go to Edit > Preferences > Guides > Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.



2. Create the Letter Paths

Step 1

Pick the Type Tool (T) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color at black. Focus on your Artboard and simply add the black "VECTOR" piece of text. Use the Retro Stereo Thin font with the size set at 72pt and lower its Opacity to 30%. Move to the Layers panel and simply lock this piece of text to make sure that you won't accidentally select/move it. We will only use it as a guide.


Step 2

Enable the Snap to Grid (View > Snap to Grid). Focus on the "V", pick the Pen Tool (P) and draw a simple path as shown in the first image. Fill it with none, but add a 6pt stroke and set its color at black. Make sure that this little path is still selected and go to Effect > Stylize > Rounder Corners. Enter a 10px radius and click OK.


Step 3

Make sure that the Pen Tool (P) is still active and create the "E" path as shown in the first image. Add the same 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK.


Step 4

Using the Rectangle Tool (M), create a 65px square and place it as shown in the first image. Fill it with none, add the 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 30px radius, click OK and go to Object > Expand Appearance. Switch to the Direct Selection Tool (A), select both anchor points highlighted in the second image and simply hit the Delete key from your keyboard. In the end things should look like in the third image. Keep focusing on this path, grab the Pen Tool (P), add some path as shown in the fourth image and then go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK.


Step 5

Reselect the Pen Tool (P) and create the "T" path as shown in the first image. Add the same 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK.


Step 6

Using the Ellipse Tool (L), create a 65px circle and place it as shown in the first image. Switch to the Pen Tool (P), create a 20px, vertical path and place it as shown in the second image. Reselect both shapes made in this step, add that 6pt, black stoke and make sure that there is no color set for the fill.


Step 7

Using the Rectangle Tool (M), create a 45 x 40px rectangle and place it as shown in the first image. Fill it with none, add the 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 30px radius, click OK and go to Object > Expand Appearance. Focus on the resulting shape, switch to the Direct Selection Tool (A), simply click and drag across the bottom, left side and hit the Delete key from your keyboard. In the end things should look like in the third image. Keep focusing on this path, grab the Pen Tool (P) and add a vertical path as shown in the fourth image.


Step 8

Using the Rectangle Tool (M), create a 40 x 40px rectangle and place it as shown in the first image. Fill it with none, add the 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 6px radius, click OK and go to Object > Expand Appearance. Focus on the resulting shape, switch to the Direct Selection Tool (A), select the three anchor points highlighted in the second image and hit the Delete key from your keyboard. Select the two anchor points highlighted by the blue circle in the third image and hit Control + J (or go to Object > Path > Join). Finally, select the anchor point highlighted by the green circle and drag it to the right as shown in the fourth image.


Step 9

Pick the Pen Tool (P) and draw a path around the text as shown in the first image. Fill it with none, add the 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK. In the end things should look like in the second image.


Step 10

Pick the Pen Tool (P) and draw a second path around the text as shown in the first image. Add that same 6pt, black stroke, make sure that there's no color set for the fill and go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK. In the end things should look like in the second image.


Step 11

Make sure that the Pen Tool (P) is still active, focus on the top, right corner of your Artboard and create a simple path as shown in the following image. Fill it with none, add the 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK. Continue with the Pen Tool (P), focus on the bottom, left corner of your Artboard and create a new path as shown in the second image. Fill it with none, add the 6pt, black stroke and go to Effect > Stylize > Rounded Corners. Enter a 6px radius and click OK.


Step 12

For the following steps you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Focus on the top side of your "V" shape and you will notice that there's a small gap between the "V" shape and the paths that go around the text. You can easily solve this small problem by adjusting the positioning of the anchor points. Grab the Direct Selection Tool (A), select the the left anchor point highlighted in the first image and drag it 1px to the right then select the right anchor point highlighted in the first image and drag it 1px to the left. Once you have finished, select all these black paths and Group them (Control + G). Move to the Layers panel, double-click on this new group and name it "pipes". When you're done you can remove that piece of text.



3. Create a Simple Pattern Brush

Step 1

Using the Rectangle Tool (M), create a 3 x 6px shape and fill it with R=113 G=41 B=29. Continue with the Rectangle Tool (M), create a 3 x 2px shape, fill it with R=173 G=101 B=89 and place it as shown in the second image. Focus on your Toolbar and double click on the Blend Tool (W) (or go to Object > Blend > Blend Options...). Select Specified Steps from the Spacing drop-down menu, enter 15 in that white box and click the OK button. Reselect both rectangle made in this step and simply hit Alt + Control + B (or go to Object > Blend > Make). In the end things should look like in the fourth image.


Step 2

Using the Rectangle Tool (M), create two, 3 x 1px shapes and place them as shown in the first image. Select the top rectangle and fill it with R=193 G=121 B=109 then select the bottom rectangle and fill it with R=103 G=31 B=19. Reselect both shapes made in this step along with that blend in the back and Group them (Control + G). Make sure that this new group is selected, open the Brushes panel (Window > Brushes) and hit the New Brush button (pointed by the little, blue arrow in the following image). Check the Pattern Brush box and click OK to open the Pattern Brush Options window. Pick a name for your brush, enter the properties shown in the following image and click OK. In the end your new pattern brush should show up inside the Brushes panel.


Step 3

Select your "pipes" group and simply replace the existing black strokes with your pattern brush. In the end things should look like in the following image.



4. Create the Pipe Corners

Step 1

Return to the group of shapes that you used to create the pattern brush and decrease its width to 2px. Using the Rectangle Tool (M), create a 2 x 6px shape, fill it with black, place it as shown in the second image, lower its Opacity to 10% and change the Blending Mode to Soft Light. Continue with the Rectangle Tool (M), create a 1 x 6px shape, fill it with black, place it as shown in the third image, lower its Opacity to 30% and change the Blending Mode to Soft Light. Select both, black rectangles along with that resized group and Group them (Control + G). Make sure that this new group is selected and go to Object > Transform > Rotate. Enter a 90 degrees angle and click the Copy button. Select the newly created group, drag it down and to the right and place it as shown in the fifth image.


Step 2

Using the Rectangle Tool (M), create a 19px square, fill it with a random color, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 5.5px radius, click OK and go to Object > Expand Appearance. Continue with the Rectangle Tool (M), create a 12px square, fill it with R=113 G=41 B=29 and place it as shown in the second image. Reselect both shapes, open the Pathfinder panel (Window > Pathfinder) and click the Intersect button. Make sure that the Rectangle Tool (M) is still active, create a 6px square, fill it with black, place it as shown in the third image and go to Effect > Stylize > Rounded Corners. Enter a 0.5px radius, click OK and go to Object > Expand Appearance. Select the resulting shape along with the other shape made in this step and click the Minus Front button from the Pathfinder panel.


Step 3

Select the dark brown shape and make a copy in front (Control + C > Control + F). Using the Rectangle Tool (M), create an 18px square and place it as shown in the second image. Fill it with none, but add a 2pt stroke. Align it to inside, set the color at R=173 G=101 B=89 and go to Effect > Stylize > Rounded Corners. Enter a 6px radius, click OK and go to Object > Path > Outline Stroke. Select the resulting compound path along with the copy made in the beginning of the step and click the Intersect button from the Pathfinder panel. Select the resulting path along with the remaining, dark brown shape and hit Alt + Control + B.


Step 4

Focus on the Layers panel, open the newest blend, select the bottom shape and make a copy in front (Control + C > Control + F). Select this copy, drag it outside the blend and bring it to front (Shift + Control + ] ). Using the Rectangle Tool (M), create an 17px square and place it as shown in the third image. Fill it with none, but add a 1pt stroke. Align it to inside, set the color at R=193 G=121 B=109 and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Path > Outline Stroke. Select the resulting compound path along with the copy made in the beginning of the step and click the Intersect button from the Pathfinder panel.


Step 5

Using the Rectangle Tool (M), create a 1 x 8px shape and an 8 x 1px shape, fill both rectangles with R=103 G=31 B=19 and place them as shown in the first image. Using the Rectangle Tool (M), create a new 1 x 8px shape and an 8 x 1px shape. Fill both rectangles with white, place them as shown in the second image, lower their Opacity to 20% and change the Blending Mode to Overlay.


Step 6

Focus on the Layers panel and re-open that blend. Duplicate (Control + C > Control + F) the bottom shape, select the copy and drag it outside the blend. Using the Rectangle Tool (M), create a 6px square, fill it with R=103 G=31 B=19, place it as shown in the third image and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Object > Expand Appearance. Select the resulting rounded rectangle along with the copy made in the beginning of the step and click the Intersect button from the Pathfinder panel.


Step 7

Using the Ellipse Tool (L), create a 2 x 3px shape and fill it with white. Rotate this squeezed circle 45 degrees, place it as shown in the second image, lower its Opacity to 15% and change the Blending Mode to Overlay. Return to the Layers panel, re-open that blend and duplicate (Control + C > Control + F) the bottom shape. Drag this new copy outside the blend, bring it to front (Shift + Control + ] ) and focus on the Appearance panel. Remove the color from the fill and add a 1pt stroke. Set its color at white, lower its Opacity to 25%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK. Finally, select all the shapes that make up this pipe corner and Group them (Control + G). Move to the Layers panel and simply name this new group "corner".


Step 8

Multiply your "corner" group then spread and rotate (if needed) these copies as shown in the following image. Once you've finished, select all your "corner" groups and Group them (Control + G). Move to the Layers panel and name this new group "corners".


Step 9

Take a closer look at the top, left corner and you will notice that the pipe and the pipe corner do not match. Here's a quick thing that you can do to fix it. Go to the Brushes panel, select your pattern brush and simply drag it over the New Brush button to duplicate it. Double-click on this newly created brush, check the Flip Across box and click OK. Get back to the top, left corner, select the piece of pipe that goes into that corner and simply replace the existing pattern brush with the new one. Focus on the rest of the corner pipes and make sure that things match.



5. Create the Pipe Connectors

Step 1

Using the Rectangle Tool (M), create a 12 x 8px shape and fill it with R=133 G=61 B=49. Continue with the Rectangle Tool (M), create a 12 x 2px shape, fill it with R=173 G=101 B=89 and place it as shown in the second image. Reselect both rectangle made in this step and simply hit Alt + Control + B (or go to Object > Blend > Make). In the end things should look like in the fourth image.


Step 2

Using the Rectangle Tool (M), create a 12 x 1px shape, fill it with R=193 G=121 B=109 and place it as shown in the first image. Continue with the Rectangle Tool (M), create two, 1 x 8px shape, fill both rectangles with R=103 G=31 B=19 and place them as shown in the second image. Create another two, 1 x 8px rectangles, set the fill color at white, place them as shown in the second image, lower the Opacity to 20% and change the Blending Mode to Overlay. Make sure that the Rectangle Tool (M) is still active, create two, 2 x 6px rectangles and place them as shown in the fourth image. Fill both rectangles with black, lower the Opacity to 10% and change the Blending Mode to Soft Light. Continue with the Rectangle Tool (M), create two, 1 x 6px rectangles and place them as shown in the fifth image. Fill both rectangles with black, lower the Opacity to 30% and change the Blending Mode to Soft Light.


Step 3

Using the Rectangle Tool (M), create an 8 x 4px shape and fill it with R=113 G=41 B=29. Continue with the Rectangle Tool (M), create a 2 x 4px shape, fill it with R=173 G=101 B=89 and place it as shown in the second image. Reselect both rectangle made in this step and simply hit Alt + Control + B (or go to Object > Blend > Make). In the end things should look like in the fourth image.


Step 4

Using the Rectangle Tool (M), create a 1 x 4px shape, fill it with R=193 G=121 B=109 and place it as shown in the first image. Continue with the Rectangle Tool (M), create an 8 x 1px shape, fill it with R=103 G=31 B=19 and place it as shown in the second image. Create a second 8 x 1px shape, fill it with white, place it as shown in the third image, lower its Opacity to 20% and change the Blending Mode to Overlay. Create a 6 x 2px rectangle, fill it with black, place it as shown in the fourth image, lower its Opacity to 10% and change the Blending Mode to Soft Light. Make sure that the Rectangle Tool (M) is still active, create a 6 x 1px shape and an 8 x 1px shape and place them as shown in the fifth image. Fill both rectangles with black, lower the Opacity to 10% and change the Blending Mode to Soft Light.


Step 5

Using the Rectangle Tool (M), create a 12 x 8px shape and an 8 x 4px shape. Fill both rectangles with white,place them as shown in the first image and click the Unite button from the Pathfinder panel. Select the resulting path and focus on the Appearance panel. Simply hit Shift + X to transfer the color properties from the fill to the stoke. Select the new white stroke, align it to inside, lower the Opacity to 25%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK. Finally, select all the shapes that make up this pipe connector and Group them (Control + G). Move to the Layers panel and simply name this new group "connector".


Step 6

Multiply your "connector" group then spread and rotate (if needed) these copies as shown in the following image. Once you've finished, select all your "connector" groups and Group them (Control + G). Move to the Layers panel and name this new group "connectors".



6. Add Shading and Highlights

Step 1

Disable the Snap to Grid (View > Snap to Grid). Select the three groups created so far and duplicate them (Control + C > Control + F). Select these copies, go to Object > Expand Appearance and Object > Expand then click the Unite button from the Pathfinder panel. Fill the resulting compound path with black, focus on the top side of the "V" shape and you will notice some small gaps. Grab the Delete Anchor Point Tool (-) and simply click on those undesirable anchor points to remove them.


Step 2

Select the black compound path, make a copy in front (Control + C > Control + F) and send it to back (Shift + Control + [ ). Make sure that this copy is selected and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the top, left window (in the following image), click OK and go again to Effect > Stylize > Drop Shadow. Enter the properties shown in the top, right window (in the following image), click OK and go once again to Effect > Stylize > Drop Shadow. Enter the properties shown in the bottom, left window (in the following image), click OK and go one more time to Effect > Stylize > Drop Shadow. Enter the properties shown in the bottom, right window (in the following image) and click OK. Move to the Layers panel, double-click on this compound path and simply name it "shadow".


Step 3

Select the top back compound path and focus on the Appearance panel. Remove the color from the fill, but add a 1pt, white stroke. Align it to inside, lower the Opacity to 50%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -1.5px Offset and click OK. Move to the Layers panel, double-click on this compound path and simply name it "highlights".



7. Create the Pipe Supports

Step 1

Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create an 8 x 7px shape, fill it with the linear gradient shown below and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Effect > Warp > Bulge. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.


Step 2

Using the Rectangle Tool (M), create a 1 x 5px rectangle, fill it with R=192 G=193 B=203, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 0.5px radius and click OK. Select the Rounded Rectangle in the back, make a copy in front (Control + C > Control + F), bring it to front (Shift + Control + ] ) and focus on the Appearance panel. Remove the color from the fill, but add a 1pt, white stroke. Align it to inside, lower the Opacity to 50%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK.


Step 3

Using the Rectangle Tool (M), create a 6 x 11px shape, fill it with black and place it as shown in the first image. Send this new rectangle to back (Shift + Control + [ ), lower its Opacity to 15% and change the Blending Mode to Overlay. Continue with the Rectangle Tool (M), create a 6 x 9px shape, fill it with black and place it as shown in the second image. Send this new rectangle to back (Shift + Control + [ ), lower its Opacity to 35% and change the Blending Mode to Soft Light. Reselect both rectangles made in this step along with the three shapes made in the previous step and Group them (Control + G). Move to the Layers panel and name this new group "supoortFront.


Step 4

Using the Rectangle Tool (M), create a 20 x 5px rectangle, fill it with the linear gradient shown below and go to Effect > Stylize > Rounded Corners. Enter a 2.5px radius, click OK and go to Object > Expand Appearance. Select the resulting shape and send it to back (Shift + Control + [ ).


Step 5

Reselect that 20 x 5px rounded rectangle and make a copy in front (Control + C > Control + F). Focus on the Layers panel and open that "supportFront" group. Select the bottom shape and go to Object > Path > Offset Path. Enter a 1px Offset and click OK. Fill the resulting shape with black. Select it along with the copy made in the beginning of the step and click the Intersect button from the Pathfinder panel. Select the resulting shape, lower its Opacity to 20% and change the Blending Mode to Soft Light.


Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect that 20 x 5px rounded rectangle and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down using the down arrow from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 75% and change the Blending Mode to Soft Light.


Step 7

Reselect that 20 x 5px rounded rectangle and add the four Drop Shadow effects shown in the following image.


Step 8

Enable the Snap to Grid (View > Snap to Grid). Using the Ellipse Tool (L), create two, 1px circles. Fill both shapes with R=77 G=75 B=88 and place them as shown in the first image. Select these tiny circles along with the 20 x 5px rounded rectangle and the subtle black and white shapes and Group them (Control + G). Focus on the Layers panel, send this new group to back (Shift + Control + [ ) and name it "supportBack".


Step 9

Multiply your "supportBack" group then spread the copies as shown in the following image. Once you've finished, select all your "supportBack" groups and Group them (Control + G). Move to the Layers panel and name this new group "supportBack".


Step 10

Multiply your "supportFront" group then spread the copies as shown in the following image. Once you've finished, select all your "supportFront" groups and Group them (Control + G). Move to the Layers panel and name this new group "supportFront".


Step 11

Select the "highlights" compound path, make a copy in front (Control + C > Control + F) and bring it to front (Shift + Control + ] ). Make sure that this copy stays selected and focus on the Appearance panel. Remove the color from the stroke and add a black fill. Select it, lower the Opacity to 8%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.



8. Create the Round Taps

Step 1

Using the Ellipse Tool (L), create a 6px circle, fill it with black and focus on the Appearance panel. Add a 2pt stroke, set its color at black, align it to inside and go to Effect > Path > Offset Path. Enter a 4px radius, click OK and go to Effect > Distort & Transform > Zig Zag. Enter the properties shown in the following image and click OK.


Step 2

Using the Pen Tool (P), create a 16pt, vertical path and place it as shown in the following image. Add a 1pt, black stroke for this path and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.


Step 3

Reselect the vertical path and the 6px circle and go to Object > Path > Outline Stroke. Select the resulting shapes and click the Unite button from the Pathfinder panel. Fill the resulting shape with R=67 G=112 B=172.


Step 4

Disable the Snap to Grid (View > Snap to Grid). Reselect your blue compound path and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down. Reselect both copies and click the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (Control + 8 or Object > Compound Path > Make), fill it with white, lower its Opacity to 80% and change the Blending Mode to Overlay.


Step 5

Reselect your blue compound path and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (Control + 8 or Object > Compound Path > Make) and fill it with R=45 G=54 B=134.


Step 6

Enable the Snap to Grid (View > Snap to Grid). Reselect your blue compound path, focus on the Appearance panel and add a second fill using the Add New Fill button (pointed by the little, blue arrow in the following image). Drag this new fill in the bottom of the Appearance panel, set its color at R=57 G=100 B=155 and go to Effect > Path > Offset Path. Enter a 0.5px Offset and click OK. Using the Ellipse Tool (L), create a 2px circle, fill it with R=45 G=54 B=134 and place it as shown in the following image.


Step 7

Select all the shapes that make up this round tap and Group them (Control + G). Select this new group, name it "roundTap" and add the four Drop Shadow effects shown in the following image. Duplicate this group (Control + C > Control + F) then place these two taps as shown in the second image.



9. Create the Bib Taps

Step 1

Using the Rectangle Tool (M), create a 6 x 30px shape, fill it with the linear gradient shown below and add a 1pt stroke. Align it to inside, set the color at R=170 G=10 B=25 then go to Effect > Stylize > Rounded Corners. Enter a 3px radius and click OK.


Step 2

Using the Ellipse Tool (L), create a 2px circle, fill it with R=52 G=53 B=63, place it as shown below and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK.


Step 3

Reselect that tiny circle along with the red rounded rectangle and Group them (Control + G). Name this new group "bibTap" and add the three Drop Shadow effects shown in the following image. Duplicate this Group (Control + C > Control + F) then place these new taps as shown in the second image.



10. Create the Water Counters

Step 1

Using the Ellipse Tool (L), create a 20px circle and fill it with the linear gradient shown in the following image.


Step 2

Make sure that your 20px circle is still selected and focus on the Appearance panel. Add a second fill, drag it in the bottom of the Appearance panel, replace the existing linear gradient with the one shown in the following image and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK.


Step 3

Make sure that your 20px circle stays selected and focus on the Appearance panel. Add a third fill, drag it in the top of the Appearance panel, set the color at R=236 G=236 B=236 and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK. Return to the Appearance panel, add a 1pt stroke and set its color at R=52 G=53 B=63. Select it, align it to inside, lower the Opacity to 15% and hit Shift + Control + E to add the same Offset Path effect used for the fill. Get back to the Appearance panel and add a second stroke for this shape. Use the same color, make it 2pt wide, align it to inside, lower the Opacity to 5% and hit Shift + Control + E.


Step 4

Reselect your 20px circle, focus on the Appearance panel, make sure that no fill or stroke is selected then add the four Drop Shadow effects shown in the following image.


Step 5

Using the Pen Tool (P), create a 5px, vertical path. Place it as shown in the first image, add a 1pt stroke and set its color at R=237 G=28 B=36. Pick the Ellipse Tool (L), create a 2px circle, fill it with R=122 G=123 B=133 and place it as shown in the second image. Continue with the Ellipse Tool (L), create a 12px circle and place it as shown in the third image. Fill it with none, but add a 0.5pt stroke and set its color at R=52 G=53 B=63. Make sure that this thin stroke stays selected and open the Stroke panel (Window > Stroke). Check the Dashed Line box and the Align Dashes to Corners... button (pointed by the little, blue arrow in the following image) then enter 0.5 in the dash box and 2 in the gap box.


Step 6

Using the Ellipse Tool (L), create a 10 x 6px shape, fill it with the linear gradient shown in the first image and lower its Opacity to 80%. Continue with the Ellipse Tool (L), create a 12 x 8px shape, fill it with the linear gradient shown in the second image and lower its Opacity to 30%.


Step 7

Select all the shapes that make up the water counter and Group them (Control + G). Move to the Layers panel and name this new group "waterCounter". Duplicate it (Control + C > Control + F) then place these water counters as shown in the second image.



11. Add a Patterned Background

Step 1

Pick the Rectangle Tool (M), create a shape the size of your Artboard, fill it with R=240 G=240 B=235 and send it to back (Shift + Control + [ ). Focus on the Appearance panel, add a second fill for this rectangle and select it. Use the radial gradient shown in the following and change the Blending Mode to Overlay.


Step 2

Make sure that your background rectangle is still selected, focus on the Appearance panel and add a third fill. Make it black, lower its Opacity to 15%, change the Blending Mode to Multiply and go to Effect > Sketch > Note Paper. Enter the data shown below and click OK. Keep focusing on the Appearance panel and add a fourth fill for this background shape. You will need a built in pattern for this new fill. Move to the Swatches panel (Window > Swatches), open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures. This should open a new window with a simple set of built-in pattern. You will only need the "Diamond" pattern. Make sure that your rectangle is still selected, return to the Appearance panel and select that fourth fill. Add the "Diamond" pattern, lower its Opacity to 8%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the data shown in the following image, click OK and you're done.



Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.


Related Posts