In the following tutorial you will learn how to create a detailed coffee maker illustration in Adobe Illustrator. Starting with the base, you will learn how to use a simple 3D Extrude & Bevel effect and how to add depth or shading using basic blending and vector shape building techniques. Next, using basic tools and effects along with some built-in patterns and a bunch of semi-transparent linear and radial gradients you will learn how to create the rest of the coffee maker. Finally, using basic masking and blending techniques you will learn how to add extra lightning and shading for the carafe.
1. Create a New Document and Setup a Grid
Hit Control + N to create a New document. Enter 600 in the width box and 760 in the height box then click 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) and the Snap to Grid (View > Snap to Grid). For starters you’ll 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 Base of the Coffee Maker
Step 1
Pick the Ellipse Tool (L) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color at R=231 G=151 B=73. Move to your Artboard and simply create a 135px circle, the Snap to Grid should ease your work. Switch to the Rectangle Tool (M), create a 30 x 25px shape, place it as shown in the second image and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance. Select both shapes, open the Pathfinder panel (Window > Pathfinder) and click the Unite button.
Step 2
Make sure that your orange shape is selected and go to Effect > 3D > Extrude & Bevel. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.
Step 3
Focus on the Layers panel (Window > Layers), make sure that the existing group is selected and hit Shift + Control + G three times to get rid of all that groups and subgroups. In the end your should have four orange shapes. Select the top one and replace the orange with the linear gradient shown in the second image. Move to the Layers panel, double click on this newly edited shape and simply name it "top". Focus on the remaining shapes, select the bigger one, fill it with the linear gradient shown in the third image then go to Layers panel and name it "right".
Step 4
Select the two remaining orange shapes and click the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below then go to the Layers panel and name it "left".
Step 5
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. Duplicate your "left" and "right" shapes (Control + C > Control + F). Select both copies and click the Unite button from the Pathfinder panel. Fill the resulting shape with R=231 G=151 B=73 then make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up using the up arrow from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 6
Reselect the orange shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px up using the up arrow from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 7
Reselect the orange shape 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 15% and change the Blending Mode to Overlay.
Step 8
Reselect the orange shape and make only one copy in front (Control + C > Control + F). Select the top copy and move it 3px 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 10% and change the Blending Mode to Soft Light.
Step 9
Reselect your "top" shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up and to the right using the arrow keys 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 10% and change the Blending Mode to Overlay.
Step 10
Reselect your "top" shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px up and to the right using the arrow keys 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 10% and change the Blending Mode to Soft Light.
Step 11
Reselect your "top" shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down and to the left using the arrow keys from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 12
Reselect your "top" shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px down and to the left using the arrow keys from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 13
Reselect your "top" shape, make a copy in front (Control + C > Control + F) and fill it with black. Select this new shape along with "right", open the Align panel and simply click the Vertical Align Bottom button.
Step 14
Reselect that black shape, send it to back (Shift + Control + [ ), focus on the Appearance panel and add a new fill using the Add New Fill button (pointed by the little, blue arrow in the following image). Make sure that your black shape stays selected, keep focusing on the Appearance panel and select the bottom fill. Lower its Opacity to 10% and then go to Effect > Path > Offset Path. Enter a 2px Offset and click OK. Select the other fill, lower its Opacity to 5% and go to Effect > Path > Offset Path. Enter a 4px Offset and click OK. Get back to the Appearance panel, make sure that the top fill is selected and click the Duplicate Selected Item button (pointed by the little, green arrow in the following image). Select this newly created fill and go to Effect > Blur > Gaussian Blur. Enter a 4px radius and click OK.
Step 15
Enable the Snap to Grid (View > Snap to Grid). Using the Ellipse Tool (L), create a 105 x 15px shape, fill it with the radial gradient shown below, place it as shown in the following image and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the left window (in the following image), click OK and go again to Effect > Stylize > Drop Shadow. Enter the properties shown in the right window (in the following image) and click OK. Select all the shape made so far and Group them (Control + G). Move to the Layers panel, double click on this new group and simply name it "carafeSupport".
3. Create the Backside of the Carafe
Step 1
Using the Rectangle Tool (M) create a 125 x 120px shape. Fill it with R=39 G=170 B=225, place it as shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK and go to Effect > Warp > Arc Lower. Enter the properties shown below, click OK and go to Object > Expand Appearance.
Step 2
Make sure that the Rectangle Tool (M) is still active, create a 125 x 25px shape and place it as shown in the first image. Select this new rectangle along with the blue shape and click the Minus Front button from the Pathfinder panel. Select the resulting shape, focus on the Appearance panel and replace that blue with the linear gradient shown in the third image. Add a second fill for this shape and use the linear gradient shown in the fourth image. Move to the Layers panel and name this new shape "carafeBackside".
4. Create the Carafe Lid
Step 1
Focus on the top side of your "carafeBackside" shape and pick the Rectangle Tool (M). Create a 105 x 15px shape, fill it with R=39 G=17 B=225, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Object > Expand Appearance. Next, you will need a grid every 1px. Simply go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Make sure that the Rectangle Tool (M) is still active, create a 129 x 4px shape, fill it with R=243 G=153 B=71, place it as shown in the second image and go to Effect > Stylize > Rounded Corners. Enter a 2px radius, click OK and go to Object > Expand Appearance.
Step 2
Duplicate the orange rounded rectangle (Control + C > Control + F). Select this copy along with the blue rounded rectangle and click the Minus Front button from the Pathfinder panel. Using the Rectangle Tool (M), create a 123 x 7px shape, fill it with R=57 G= 181 B=74, place it as shown below and go to Effect > Warp > Arc Lower. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.
Step 3
Disable the Snap to Grid (View > Snap to Grid). Select the blue shape and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Duplicate the resulting shape (Control + C > Control + F), select the copy and move it 1px down using the down arrow from your keyboard. Reselect both shapes made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 15% and change the Blending Mode to Overlay.
Step 4
Reselect the blue shape and make two copies in front (Control + C > Control + F > CTR + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 5
Reselect the blue shape and make two copies in front (Control + C > Control + F > CTR + F). Select the top copy and move it 3px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 6
Reselect the blue shape and replace the blue with the linear gradient shown below. Make sure that this shape stays selected, focus on the Appearance panel and add a second fill. Select it, change the Blending Mode to Overlay and add the radial gradient shown in the second image.
Step 7
Select the orange shape, replace the orange with the linear gradient shown below 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. Fill the resulting shape with white, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 8
Reselect the green shape and replace the green with the linear gradient shown below. Make sure that this shape stays selected, focus on the Appearance panel and add a second fill. Select it, change the Blending Mode to Overlay, lower its Opacity to 50% and add the radial gradient shown in the second image. Select these dark shapes along with the thin paths used to highlight them and Group them (Control + G). Move to the Layers panel and name this new group "carafeLid".
5. Add Coffee Inside the Carafe and Create the Front Side of the Carafe
Step 1
Enable the Snap to Grid (View > Snap to Grid) and return to “gridline every 5px”. Simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Select "carafeBackside" and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape and focus on the Appearance panel. Remove the top fill then select the remaining fill and replace the existing linear gradient with R=167 G=94 B=25. Pick the Rectangle Tool (M), create a 125 x 65px shape and place it as shown in the third image. Reselect both shapes made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image.
Step 2
For this step you will need a simple built-in pattern. Go to the Swatches panel (Window > Swatches), open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures. A new window with a set of built-in patterns should open. Make sure that your brown shape is still selected, focus on the Appearance panel and add a second fill. Select it, change the Blending Mode to Color Dodge and add the "USGS 22 Gravel Beach" pattern. Keep focusing on the Appearance panel, make sure that the patterned fill is still selected and simply duplicate it using that same Duplicate Selected Item button.
Step 3
Again, you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Ellipse Tool (L), create a 123 x 4px shape, fill it with the linear gradient shown in the first image, place it as shown below 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. Fill the resulting shape with the linear gradient shown in the final image, lower its Opacity to 35% and change the Blending Mode to Overlay.
Step 4
Select the three shapes that make up the coffee and Group them (Control + G). Move to the Layers panel and simply name this new group "coffee".
Step 5
Return to "gridline every 5px". Select the "carafeBackside" shape, make copy in front (Control + C > Control + F), bring it to front (Shift + Control + ] ) and focus on the Appearance panel. Remove the top fill then select the remaining fill and replace the existing linear gradient with a simple blue (R=39 G=170 B=225). Move to the Layers panel and name this new shape "carafeFrontside".
Step 6
Disable the Snap to Grid (View > Snap to Grid), select the blue shape 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. Fill the resulting shape with white, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Step 7
Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the right. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image and lower its Opacity to 15%.
Step 8
Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the left. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Step 9
Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px to the left. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 10
Duplicate the blue shape (Control + C > Control + F). Select the copy, move it 5px to the left then duplicate it (Control + C > Control + F). Select this new copy and move it 10px to the left. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below, lower its Opacity to 40% and change the Blending Mode to Soft Light.
Step 11
Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px up and 15px to the left. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 12
Duplicate the blue shape (Control + C > Control + F). Select the copy, move it 10px to the right then duplicate it (Control + C > Control + F). Select this new copy and move it 20px to the right. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below and lower its Opacity to 8%.
Step 13
Reselect the blue shape, make sure that it stays selected and focus on the Appearance panel. Select the existing fill and lower its Opacity to 5%. Add a second fill for this shape, lower its Opacity to 20% and use the linear gradient shown below.
Step 14
Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool (M) and create a 10 x 65px shape. Fill it with white, place it as shown in the first image, lower its Opacity to 3% and go to Effect > Stylize > Rounded Corners. Enter a 5px radius and click OK. Reselect "carafeFrontside" along with the rest of the shapes used to highlight it and Group them (Control + G). Move to the Layers panel and name this new group "carafeFrontside".
6. Create the Handle for the Carafe
Step 1
Using the Rectangle Tool (M), create a 105 x 90px shape. Fill it with R=39 G=170 B=225, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 3px radius and click OK. Continue with the Rectangle Tool (M) and create an 85 x 90px shape. Fill it with R=231 G=151 B=73, place it as shown in the second image and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Effect > Warp > Arc Lower. Enter the properties shown in the following image and click OK. Make sure that the Rectangle Tool (M) is still active and create an 80px square. Fill it with R=57 G=181 B=74, place it as shown in the third image and go to Effect > Stylize > Rounded Corners. Enter a 12px radius and click OK. Finally, create an 80 x 75px shape and fill it with R=255 G=222 B=23. Place it as shown in the fourth image and go to Effect > Stylize > Rounded Corners. Enter a 10px radius and click OK. Select all four shapes made in this step and go to Object > Expand Appearance.
Step 2
Make sure that your four rounded rectangles are still selected and click the Merge button from the Pathfinder panel. Ungroup (Shift + Control + G) the resulting group and delete the yellow shape. Using the Rectangle Tool (M), create a 35 x 90px shape, fill it with white, place it as shown in the third image then duplicate it (Control + C > Control + F).
Step 3
Select one of those white rectangles along with the orange shape and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the second image. Select the remaining white rectangle along with the green shape and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the fourth image.
Step 4
Disable the Snap to Grid (View > Snap to Grid) then select your blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the right. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 50% and change the Blending Mode to Soft Light.
Step 5
Reselect the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px to the right. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 25% and change the Blending Mode to Soft Light.
Step 6
Reselect the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up. Reselect both copies and click the Minus Front button from the Pathfinder panel. Ungroup the resulting group (Shift + Control + G) and delete the top shape. Select the remaining shape, fill it with black, lower its Opacity to 25% and change the Blending Mode to Soft Light.
Step 7
Reselect the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px up. Reselect both copies and click the Minus Front button from the Pathfinder panel. Ungroup the resulting group (Shift + Control + G) and delete the top shape. Select the remaining shape, fill it with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 8
Reselect the blue shape, focus on the Appearance panel and replace the blue with the linear gradient shown in the following image. Select all the shapes that make up the handle and Group them (Control + G). Move to the Layers panel and simply name this new group "handle".
7. Create the Filter
Step 1
Enable the Snap to Grid (View > Snap to Grid) and focus on the top side of the lid. Using the Rectangle Tool (M), create 105 x 15px shape, fill it with R=255 G=222 B=23, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Object > Expand Appearance. Make sure that the Rectangle Tool (M) is still active, create 125 x 15px shape, fill it with R=39 G=170 B=225 and place it as shown in the second image. Switch to the Direct Selection Tool (A) and focus on the bottom side of this blue rectangle. Select the left anchor point and drag it 10px to the right then select the right anchor point and drag it 10px to the left. This should turn your rectangle into a trapezoid. Select it and go to Effect > Stylize > Rounder Corners. Enter a 3px radius, click OK and go to Object > Expand Appearance.
Step 2
Using the Rectangle Tool (M), create 105 x 15px shape, fill it with R=57 G=181 B=74, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance. Continue with the Rectangle Tool (M), create a 65 x 10px shape and place it as shown in the second image. Select both shapes made in this step and click the Intersect button from the Pathfinder panel. The resulting shape should look like in the third image.
Step 3
Duplicate the yellow shape (Control + C > Control + F) then select the blue shape and go to Object > Path > Offset Path. Enter a 1px Offset and click OK. Select both shapes made in this step and click the Intersect button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 4
Select the yellow shape and replace the yellow with the linear gradient shown below. Make sure that this shape stays selected, focus on the Appearance panel and add a second fill. Select it, change the Blending Mode to Overlay and add the radial gradient shown in the second image.
Step 5
Disable the Snap to Grid (View > Snap to Grid). Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move 1px down. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 6
Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move 3px down. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Step 7
Select the blue shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move 1px up. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 8
Select the blue shape and replace the blue with the linear gradient shown below. Make sure that this shape stays selected, focus on the Appearance panel and add a second fill. Select it, change the Blending Mode to Overlay and add the radial gradient shown in the second image.
Step 9
Select the green shape and replace the green with the linear gradient shown below. Select all the shapes that make up the filter and Group them (Control + G). Move to the Layers panel and name this new group "filter".
8. Create the Reservoir
Step 1
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create 135 x 200px shape, fill it with R=231 G=151 B=73, place it as shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 20px radius, click OK and go to Effect > Warp > Arc Upper. Enter the properties shown below, click OK and go to Object > Expand Appearance.
Step 2
Using the Rectangle Tool (M), create a 135 x 25px shape, fill it with a random color and place it as shown in the first image. Select this new rectangle along with the orange shape and click the Minus Front button from the Pathfinder panel. Next, you’ll need the Round Any Corner script. You can find it in the Vectortuts+ article 20 Free and Useful Adobe Illustrator Scripts. Save it to your hard drive, return to Illustrator and grab the Direct Selection Tool (A). Select the two anchor points highlighted in the second image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 5px Radius and click OK. Select the resulting shape and replace that flat orange used for the fill with the linear gradient shown in the following image. Once you’re done move to the Layers panel and name this shape "reservoir".
Step 3
Disable the Snap to Grid (View > Snap to Grid). Reselect your "reservoir" shape 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. Fill the resulting shape with black, lower its Opacity to 25% and change the Blending Mode to b.
Step 4
Reselect your "reservoir" shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px down. Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 5
Reselect your "reservoir" shape 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. Fill the resulting shape with white, lower its Opacity to 50% and change the Blending Mode to Soft Light.
Step 6
Reselect your "reservoir" shape, focus on the Appearance panel, add a second fill and select it. Lower its Opacity to 50%, change the Blending Mode to Overlay and add the radial gradient shown in the first image. Keep focusing on the Appearance panel, add a third fill for your "reservoir" shape and select it. Lower its Opacity to 30%, change the Blending Mode to Soft Light and add the linear gradient shown in the second image.
Step 7
Enable the Snap to Grid (View > Snap to Grid). Using the Ellipse Tool (L), create a 115 x 20px shape, fill it with white and place it as shown in the first image. Continue with the Ellipse Tool (L), create a 155 x 25px shape, fill it with the same color and place it as shown in the second image. Reselect both shapes and click the Minus Front button from the Pathfinder panel. Select the resulting shape, focus on the Appearance panel and select the existing fill. Lower its Opacity to 75%, change the Blending Mode to Overlay, replace the white with the linear gradient shown below and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK. Keep focusing on the Appearance panel, add a second fill for this shape and select it. Use the same linear gradient, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 8
Make sure that the Rectangle Tool (M) is active and simply click inside your Artboard to open the Rectangle options window. Enter 135 for the Width and 1 for the Height and click OK. Fill this new shape with black and place it as shown in the first image. Lower its Opacity to 50%, change the Blending Mode to Soft Light and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Duplicate this thin rectangle (Control + C > Control + F), select the copy and drag it 5px down.
Step 9
Select all the shapes that make up the reservoir and Group them (Control + G). Don’t forget to go to the Layers panel and name this new group "reservoir".
9. Create the Reservoir Connector
Step 1
Using the Rectangle Tool (M), create a 20 x 15px shape, fill it with R=231 G=151 B=73, place it as shown below and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Effect > Warp > Arc Upper. 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 5 x 15px shape, fill it with black, place it as shown in the first image and disable the Snap to Grid (View > Snap to Grid). Select this new rectangle along with the orange shape made in the previous step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the second image and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Duplicate the resulting shape (Control + C > Control + F), select the copy and move it 1px down and to the right. Reselect both shapes and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the fifth step. Reselect the orange shape edited in the beginning of the step and focus on the Appearance panel. Add a second fill, select it and use the linear gradient shown in the final image.
10. Create the Pipes
Step 1
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 50 x 220px shape and place it as shown in the following image. Make sure that this new shape has no color set for the fill, but add a 5pt Stroke Weight. Set its color at R=170 G=180 B=183, align it to inside and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK and go to Object > Path > Outline Stroke.
Step 2
Using the Rectangle Tool (M), create a 25 x 220px shape, fill it with black and place it as shown in the first image. Select this new rectangle along with the grey path and click the Minus Front button from the Pathfinder panel. Send the resulting shape to back (Shift + Control + [ ) then move to the Layers panel and name it "leftPipe".
Step 3
Make sure that "leftPipe" is still selected, add a second fill and drag it in the bottom of the Appearance panel. Select it, use the linear gradient shown below and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK.
Step 4
Make sure that your "leftPipe" shape stays selected and focus on the Appearance panel. Add a new fill, drag it in the bottom of the Appearance panel, set the color at R=109 G=119 B=122 and go to Effect > Path > Offset Path. Enter a 1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and return to the Appearance panel. Add a new fill, drag it in the top of the Appearance panel, set the color at R=208 G=218 B=221 and go to Effect > Path > Offset Path. Enter a -1.5px Offset, click OK and go to Effect > Distort & Transform > Transform. Again, enter the properties shown in the following image and click OK.
Step 5
Reselect your "leftPipe" shape and add a fifth fill. Drag it in the top of the Appearance panel, use the linear gradient shown below and go to Effect > Path > Offset Path. Enter a 1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.
Step 6
Using the Rectangle Tool (M), create a 5 x 130px shape, fill it with a random color and place it as shown in the first image. Send this new rectangle to back (Shift + Control + [ ) and then add the same Appearance attributes used for the "leftpipe" shape.
11. Add a Subtle Shadow and Create the Background
Step 1
Using the Ellipse Tool (L), create a 350 x 10px shape, fill it with black and place it as shown in the first image. Focus on this squeezed circle, switch to the Convert Anchor Point Tool (Shift + C) and simply click on the left and right anchor points (highlighted in the first image). Send this black shape to back (Shift + Control + [ ), lower its Opacity to 30%, change the Blending Mode to Soft Light and go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK.
Step 2
Using the Rectangle Tool (M), create a shape the size of your Artboard (600 x 760px), fill it with R=200 G=188 B=140 and send it to back (Shift + Control + [ ).
Step 3
Make sure that your background rectangle is still selected, focus on the Appearance panel, add a second fill and use the radial gradient shown in the following image.
12. Add the Final Touches for the Carafe
Step 1
Using the Rectangle Tool (M), create a 30 x 90px shape, fill it with white and place it as shown in the first image. Make sure that this new rectangle stays selected, change its Blending Mode to Overlay and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK and go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK.
Step 2
Using the Ellipse Tool (L), create a 30px circle, fill it with white and place it as shown in the first image. Make sure that this new shape stays selected, change its Blending Mode to Overlay and go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK.
Step 3
Using the Ellipse Tool (L), create a 90 x 180px shape, fill it with black and place it as shown in the first image. Make sure that this new shape stays selected, lower its Opacity to 50% and change its Blending Mode to Overlay then go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK. Reselect this black shape along with the white rectangle and the white circle and Group them (Control + G). Move to the Layers panel and name this new group "extra".
Step 4
Open the Transparency panel (Window > Transparency). Move to the Layers panel, find that "carafeBackside" shape and duplicate it (Control + C > Control + F). Select this copy, bring it to front (Shift + Control + ] ) and focus on the Appearance panel. Remove the top fill then select the remaining fill and replace the existing linear gradient with a flat white. Select this white shape along with your "extra" group, open the fly-out menu of the Transparency panel and simply go to Make Opacity Mask. Finally, focus on the Layers panel and drag this masked group inside your "carafeFrontside" group (try to place it in the top).
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.
{excerpt}
Read More