In the following steps you will learn how to create a detailed old lamp illustration in Adobe Illustrator. For starters you will learn how to setup a simple grid and how to prepare your document. Next, you will learn the basics of pixel perfect vector shapes building techniques. Moving on you will learn how to add shading, highlights and subtle textures using the Appearance panel, a simple mesh, a bunch of linear gradients, the Film Grain effect and some basic blending techniques. Finally, you will learn how to easily recolor your entire lamp.
1. Create a New Document and Setup a Grid
Hit Control-N to create a New document. Select Pixels from the Units drop-down menu, enter 600 in the width and height boxes 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) and the Snap to Grid (View > Snap to 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 Lamp Base
Step 1
Pick the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color at R=0 G=148 B=68. Move to your Artboard and simply create a 115 x 10px shape, the Snap to Grid should ease your work. Make sure that your green rectangle is selected and go to Effect > Stylize > Rounded Corners. Enter a 5px Radius, click OK and go to Object > Expand Appearance.
Step 2
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. Make sure that your green rounded rectangle is still selected 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 made in this step, open the Pathfinder panel (Window > Pathfinder) and click the Minus Front button. Make sure that the resulting shape stays selected, set the fill color at white (R=255 G=255 B=255) then open the Transparency panel (Window > Transparency). Simply change the Blending Mode to Overlay and lower its Opacity to 20%.
Step 3
Reselect your green rounded rectangle and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px down. Reselect both copies and click the Minus Front button from the Pathfinder panel. Make sure that the resulting shape stays selected, set the fill color at white, lower its Opacity to 10% and change the Blending Mode to Overlay.
Step 4
Reselect your green rounded rectangle 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. Make sure that the resulting shape stays selected, set the fill color at white, lower its Opacity to 5% and change the Blending Mode to Overlay.
Step 5
Reselect your green rounded rectangle, open the Gradient panel (Window > Gradient) and simply click on the gradient thumbnail to add the default black to white linear gradient. Make sure that your shape stays selected and focus on the Gradient panel. First, set the Angle at 0 degrees. Next, select the left gradient slider and set the color at R=148 G=185 B=142 then select the right gradient slider and set the color at R=123 G=160 B=117.
Focus on the gradient bar and simply click on it to add a new gradient slider. Make sure that this new slider is selected, set its color at R=88 G=125 B=92, focus on the Location box (from the Gradient panel) and set it at 8%. Keep in mind that the white numbers from the Gradient images stand for Location percentage. Add six new sliders for this gradient then use the color and Location attributes shown in the following image. Now, you need to save this complex gradient.
Return to the Gradient panel, click on that gradient thumbnail and simply drag it inside the Swatches panel (Window > Swatches). Double-click on this newly saved gradient and name it "base". Make sure that your rounded rectangle is still selected, open the Appearance panel (Window > Appearance) and add a second fill using the Add New Fill button (pointed by the little, blue arrow in the following image). Select this new fill, lower its Opacity to 50%, change the Blending Mode to Soft Light and move to the Gradient panel. Add a two colors linear gradient and set its angle at 90 degrees. Select the left slider and set its color at black (R=0 G=0 B=0) then select the right slider, set the color at R=58 G=95 B=62 and lower its Opacity to 0%.
Make sure that your rounded rectangle is still selected, focus on the Appearance panel (Window > Appearance) and add a third fill using that same Add New Fill button. Select this new fill, set the color at black, lower its Opacity to 3%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the final image and click OK.
Step 6
Enable the Snap to Grid (View > Snap to Grid). Set the fill color at R=39 G=170 B=225, pick the Rectangle Tool (M), create a 105 x 30px shape and place it as shown in the first image. Make sure that this blue rectangle is selected, make two copies in front (Control-C > Control-F > Control-F) and disable the Snap to Grid (View > Snap to Grid).
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. Select the resulting shape, set the fill color at black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 7
Reselect your blue rectangle and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px up using the up arrow from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 8
Reselect your blue rectangle 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. Select the resulting shape, set the fill color at black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 9
Reselect your blue rectangle, focus on the Appearance panel and replace the flat color used for the fill with the "base" linear gradient from your Swatches panel. Make sure that your shape stays selected and focus on the Gradient panel. Set the angle at 0 degrees then select the seventh gradient slider and set its Location at 80%.
Step 10
Reselect your 105 x 30px rectangle, focus on the Appearance panel and add a second fill. Select this new fill, lower its Opacity to 40%, change the Blending Mode to Soft Light and add the linear gradient shown in the following image.
Return to the Appearance panel and add a third fill for this shape. Select it, set the color at black, lower its Opacity to 3%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the final image and click OK.
Step 11
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 105 x 10px shape, set the fill color at R=247 G=148 B=30 and place it as shown in the first image. Focus on the top side of this orange rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 25px to the right then select the right anchor point and drag it 25px to the left. In the end your rectangle should turn into a trapezoid.
Make sure that it stays selected, grab the Mesh Tool (U) and turn your orange shape into a mesh. Add seven mesh points as shown in the third image. Finally, reselect the Direct Selection Tool (A), select those mesh points one by one and use the colors shown in the following image.
Step 12
Using the Rectangle Tool (M), create a new 105 x 10px shape, set the fill color at black and place it as shown in the first image. Focus on the top side of this orange rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 25px to the right then select the right anchor point and drag it 25px to the left.
Make sure that the resulting black trapezoid stays selected, lower its Opacity to 3%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Step 13
Select all the shapes made so far and Group them (Control-G). Move to the Layers panel (Window > Layers), double-click on this new group and simply name it "Base".
3. Create the Support for the Glass Side
Step 1
Using the Rectangle Tool (M), create a 55 x 10px shape, set the fill color at R=188 G=189 B=191 and place it as shown in the first image. Make sure that this grey rectangle stays selected 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 15 x 10px shape, set the fill color at R=188 G=189 B=191 and place it as shown in the first image. Make sure that this new rectangle stays selected and go to Effect > Stylize > Rounded Corners. Enter a 3px Radius, click OK and go to Object > Expand Appearance.
Continue with the Rectangle Tool (M), create a 5 x 15px shape, set the fill color at R=188 G=189 B=191 and place it as shown in the second image. Make sure that this new rectangle stays selected and go to Effect > Stylize > Rounded Corners. Enter a 2.5px Radius, click OK and go to Object > Expand Appearance.
Step 3
Using the Rectangle Tool (M), create a 55 x 10px shape, place it as shown in the first image and use the linear gradient shown below. Save this complex gradient and name it "metal".
Make sure that the rectangle made in this step is still selected, focus on the Appearance panel and add a second fill. Select it, set the color at black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image, click OK and return to the Appearance panel. Add a third fill, set its color at R=28 G=117 B=188, change the Blending Mode to Color Dodge and lower its Opacity to 20%.
Step 4
For this step you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Rectangle Tool (M), create a 55 x 3px shape and place it as shown in the first image.
Make sure that this thin rectangle stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light. Using the same tool, create a 55 x 2px rectangle and place it as shown in the second image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 15% and change the Blending Mode to Soft Light. Create a 55 x 1px rectangle and place it as shown in the third image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 5
Return to “gridline every 5px “, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Using the Rectangle Tool (M), create a 55 x 10px shape, set the fill color at R=188 G=189 B=191 and place it as shown in the first image. Make sure that this grey rectangle stays selected 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, click OK and go to Object > Expand Appearance.
Step 6
Switch to “gridline every 1px“, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Rectangle Tool (M), create a 55 x 3px shape and place it as shown in the first image. Make sure that this thin rectangle stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Using the same tool, create a 55 x 2px rectangle and place it as shown in the second image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light. Create a 55 x 1px rectangle and place it as shown in the third image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 7
Return to “gridline every 5px “, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Reselect the three, thin rectangles made in the previous step and Group them (Control-G). Make sure that this new group is selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.
Step 8
Select all the shapes that make up the support and Group them (Control-G). Move to the Layers panel and name this new group "support".
4. Create the Metallic Side of the Lamp
Step 1
Using the Rectangle Tool (M), create a 65 x 20px shape, set the fill color at R=39 G=170 B=225, place it as shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 5px Radius, click OK and go to Object > Expand Appearance.
Step 2
Disable the Snap to Grid (View > Snap to Grid). Make sure that your blue rounded rectangle is selected and 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. Select the resulting shape, set the fill color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 3
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px up using the up arrow from your keyboard.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 4
Make sure that your blue rounded rectangle is selected 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. Select the resulting shape, set the fill color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light. Reselect the shape made in this step along with the other two thin, black shapes and Group them (Control-G).
Step 5
Make sure that your blue rounded rectangle is selected 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. Select the resulting shape, set the fill color at white, lower its Opacity to 15% and change the Blending Mode to Overlay.
Step 6
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px down using the down arrow from your keyboard. Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at white, lower its Opacity to 10% and change the Blending Mode to Overlay.
Step 7
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > 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. Select the resulting shape, set the fill color at white, lower its Opacity to 5% and change the Blending Mode to Overlay. Reselect the shape made in this step along with the other two thin, white shapes and Group them (Control-G).
Step 8
Make sure that your blue rounded rectangle stays selected and focus on the Appearance panel. First, select the existing fill, replace the flat color with the "metal" gradient and set its angle at 0 degrees. Next, add a second fill for your shape. Select it, set the color at black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Return to the Appearance panel and add a third fill for your rounded rectangle. Select it, add the linear gradient shown below, lower its Opacity to 20% and change the Blending Mode to Color Dodge.
Step 9
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 55 x 10px shape, set the fill color at R=247 G=148 B=30 and place it as shown in the first image. Switch to “gridline every 1px“, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.
Using the Rectangle Tool (M), create a 55 x 1px shape and place it as shown in the second image. Make sure that this thin rectangle stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Using the same tool, create a 55 x 2px rectangle and place it as shown in the third image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Create a 55 x 3px rectangle and place it as shown in the fourth image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 10
Return to “gridline every 5px “, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Reselect the three thin, black rectangles made in the previous step and Group them (Control-G). Make sure that this new group is selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.
Step 11
Make sure that your orange rectangle stays selected and focus on the Appearance panel. First, select the existing fill and replace the orange with the linear gradient shown in the following image. Save this complex gradient, name it "metalDark" then return to the Appearance panel.
Add a second fill for your shape and select it. Set the color at black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Step 12
Using the Rectangle Tool (M), create a 75 x 30px shape, set the fill color at R=39 G=170 B=225, place it as shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 5px Radius, click OK and go to Object > Expand Appearance.
Step 13
Disable the Snap to Grid (View > Snap to Grid). Make sure that your blue rounded rectangle is selected 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. Select the resulting shape, set the fill color at white, lower its Opacity to 15% and change the Blending Mode to Overlay.
Step 14
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px down using the down arrow from your keyboard.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at white, lower its Opacity to 10% and change the Blending Mode to Overlay.
Step 15
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > 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. Select the resulting shape, set the fill color at white, lower its Opacity to 5% and change the Blending Mode to Overlay. Reselect the shape made in this step along with the other two thin, white shapes and Group them (Control-G).
Step 16
Make sure that your blue rounded rectangle is selected and 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. Select the resulting shape, set the fill color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 17
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px up using the up arrow from your keyboard.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 18
Make sure that your blue rounded rectangle is selected 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. Select the resulting shape, set the fill color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light. Reselect the shape made in this step along with the other two thin, black shapes and Group them (Control-G).
Step 19
Make sure that your blue rounded rectangle stays selected and focus on the Appearance panel. First, select the existing fill, replace the flat color with the "metal" gradient and set its angle at 0 degrees.
Next, add a second fill for your shape. Select it, set the color at black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Step 20
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 65 x 15px shape, set the fill color at R=247 G=148 B=30 and place it as shown in the first image. Switch to "gridline every 1px", so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.
Using the Rectangle Tool (M), create a 65 x 1px shape and place it as shown in the second image. Make sure that this thin rectangle stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Using the same tool, create a 65 x 2px rectangle and place it as shown in the third image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Create a 55 x 3px rectangle and place it as shown in the fourth image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 5% and change the Blending Mode to Soft Light.
Step 21
Return to "gridline every 5px ", so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.
Reselect the three thin, black rectangles made in the previous step and Group them (Control-G). Make sure that this new group is selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.
Step 22
Make sure that your orange rectangle stays selected and focus on the Appearance panel. First, select the existing fill, replace the flat color with the "metalDark" gradient and set its angle at 0 degrees.
Next, add a second fill for your shape. Select it, set the color at black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Step 23
Select all the shapes highlighted in the following image and Group them (Control-G). Move to the Layers panel and name this new group "metal".
Step 24
Using the Rectangle Tool (M), create a 105 x 10px shape, set the fill color at R=247 G=148 B=30 and place it as shown in the first image.
Using the same tool create a second 105 x 10px shape and place it as shown in the second image. Focus on the top side of this second orange rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 50px to the right then select the right anchor point and drag it 50px to the left.
Reselect both shapes made in this step and click the Unite button from the Pathfinder panel. Select the resulting shape and go to Effect > Stylize > Rounded Corners. Enter a 5px Radius, click OK and go to Object > Expand Appearance.
Step 25
Reselect the orange shape made in the previous step, focus on the Appearance panel and replace the existing flat color with the "metal" linear gradient.
Make sure that your shape stays selected, keep focusing on the Appearance panel and add a second fill. Select it and add the radial gradient shown in the following image.
Return to the Appearance panel and add a third fill for your shape. Select it, set the color at black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Step 26
Using the Rectangle Tool (M), create a 105 x 10px shape, set the fill color at R=39 G=170 B=225, place it as shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 5px Radius, click OK and go to Object > Expand Appearance.
Step 27
Disable the Snap to Grid (View > Snap to Grid). Make sure that your blue rounded rectangle is selected 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. Select the resulting shape, set the fill color at white, lower its Opacity to 10% and change the Blending Mode to Overlay.
Step 28
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px down using the down arrow from your keyboard.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at white, lower its Opacity to 10% and change the Blending Mode to Overlay.
Step 29
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > 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. Select the resulting shape, set the fill color at white, lower its Opacity to 5% and change the Blending Mode to Overlay. Reselect the shape made in this step along with the other two thin, white shapes and Group them (Control-G).
Step 30
Make sure that your blue rounded rectangle is selected and 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. Select the resulting shape, set the fill color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 31
Make sure that your blue rounded rectangle is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px up using the up arrow from your keyboard.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at black, lower its Opacity to 15% and change the Blending Mode to Soft Light.
Step 32
Make sure that your blue rounded rectangle is selected and make a copy in front (Control-C > Control-F). Select it 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. Select the resulting shape, set the fill color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light. Reselect the shape made in this step along with the other two thin, black shapes and Group them (Control-G).
Step 33
Select all the shapes highlighted in the following image and Group them (Control-G). Move to the Layers panel and name this new group "top".
5. Create the Handles
Step 1
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 155 x 170px shape and place it as shown in the first image.
Focus on the Appearance panel, add a 6pt stroke for this path, set its color at R=39 G=170 B=225 and make sure that you have no color set for the fill. Focus on the top side of this new rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 15px to the right then select the right anchor point and drag it 15px to the left. In the end things should look like in the second image. Make sure that this shape stays selected and go to Effect > Stylize > Rounded Corners. Enter a 25px radius, click OK and go to Effect > Warp > Bulge. Enter the properties shown in the following image, click OK and go to Object > Path > Outline Stroke.
Step 2
Disable the Snap to Grid (View > Snap to Grid). Make sure that your blue compound path is selected 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. Select the resulting group of shapes, turn it into a Compound Path (Control-8 or Object > Compound Path > Make), set the fill color at black, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 3
Make sure that your blue compound path is selected 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. Select the resulting group of shapes, turn it into a Compound Path (Control-8), set the fill color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 4
Make sure that your blue compound path is selected 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. Select the resulting group of shapes, turn it into a Compound Path (Control-8), set the fill color at white, lower its Opacity to 30% and change the Blending Mode to Overlay.
Step 5
Make sure that your blue compound path is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2px down.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a Compound Path (Control-8), set the fill color at white, lower its Opacity to 20% and change the Blending Mode to Overlay.
Step 6
Make sure that your blue compound path stays selected and focus on the Appearance panel. First, select the existing fill and replace the flat color with the linear gradient shown in the following image.
Next, add a second fill for your shape. Select it, set the color at white, lower its Opacity to 30%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -2px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.
Step 7
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 10px square, set the fill color at 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, click OK and go to Object > Expand Appearance.
Select the resulting shape and replace the blue with the linear gradient shown in the second image. Switch to “gridline every 1px“, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.
Using the Rectangle Tool (M), create a 2 x 10px shape and place it as shown in the third image. Make sure that this thin rectangle stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Using the same tool, create a 1 x 10px rectangle and place it as shown in the fourth image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 8
Return to "gridline every 5px", so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.
Reselect that 10px square along with the two black rectangles and Group them (Control-G). Make sure that this new group is selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.
Step 9
Using the Rectangle Tool (M), create a 10px square, set the fill color at R=247 G=148 B=30, 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.
Select the resulting shape and replace the orange with the linear gradient shown in the second image. Switch to "gridline every 1px", so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.
Using the Rectangle Tool (M), create a 2 x 10px shape and place it as shown in the third image. Make sure that this thin rectangle stays selected, set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Using the same tool, create a 1 x 10px rectangle and place it as shown in the fourth image. Make sure that this new shape stays selected, set the color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 10
Return to "gridline every 5px ", so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.
Reselect that 10px square along with the two black rectangles and Group them (Control-G). Make sure that this new group is selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.
Step 11
Select all the shapes that make up the handles and Group them (Control-G). Make sure that this new group is selected and send it to back (Shift-Control-[ ). Move to the Layers panel and simply name this new group "handles".
6. Create the Metallic Ring
Step 1
Using the Ellipse Tool (L), create a 35px circle and place it as shown in the following image. Add a 5pt stroke for this shape, set the color at R=247 G=148 B=30 and align it to inside. Make sure that your circle does now have a color set for the fill then go to Object > Path > Outline Stroke.
Step 2
Disable the Snap to Grid (View > Snap to Grid). Make sure that your orange compound path is selected 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. Select the resulting group of shapes, turn it into a Compound Path (Control-8), set the fill color at black, lower its Opacity to 20% and change the Blending Mode to Soft Light.
Step 3
Reselect your orange compound path and go to Object > Path > Offset Path. Enter a -1px offset and click OK. Select the resulting shape and make a copy in front (Control-C > Control-F). Select this copy and move it 1px down.
Reselect both shapes made in this step and click the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a Compound Path (Control-8), set the fill color at white, lower its Opacity to 30% and change the Blending Mode to Overlay.
Step 4
Reselect your orange compound path and replace the flat color used for the fill with the linear gradient shown in the following image. Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 10px square, set the fill color at R=39 G=170 B=225, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 2.5px Radius, click OK and go to Object > Expand Appearance.
Step 5
Select your blue rounded rectangle and replace the blue with the linear gradient shown in the first image. Move to the Appearance panel, add a second fill for this shape and use the linear gradient shown in the second image.
Step 6
Select all the shapes highlighted in the first image and Group them (Control-G). Make sure that this new group is selected and send it to back (Shift-Control-[ ). Move to the Layers panel and simply name this new group "ring".
7. Create the Glass Side
Step 1
Using the Rectangle Tool (M), create a 75 x 90px shape, set the fill color at R=190 G=229 B=246 and place it as shown in the first image. Focus on the bottom side of this new rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 5px to the left then select the right anchor point and drag it 5px to the right. In the end things should look like in the second image. Make sure that this blue shape is still selected and go to Effect > Warp > Bulge. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.
Step 2
For this step you'll need the Round Any Corner script. You can find it in the Tuts+ 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 first image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 25px radius and click OK. Make sure that the Direct Selection Tool (A) is still active, select the two anchor points highlighted in the second image and go again to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 5px radius and click OK. In the end things should look like in the third image. Move to the Layers panel, double-click on this blue shape and simply name it "glass".
Step 3
Disable the Snap to Grid (View > Snap to Grid). Reselect your "glass" 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. Select the resulting shape, set the fill color at white, lower its Opacity to 50% and change the Blending Mode to Soft Light.
Step 4
Reselect your "glass" 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. Select the resulting shape, set the fill color at white, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 5
Reselect your "glass" shape and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 5px to the left.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at white, lower its Opacity to 10% and change the Blending Mode to Soft Light.
Step 6
Reselect your "glass" 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. Select the resulting shape, set the fill color at white, lower its Opacity to 60% and change the Blending Mode to Soft Light.
Step 7
Reselect your "glass" shape and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 3px to the right.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at white, lower its Opacity to 40% and change the Blending Mode to Soft Light.
Step 8
Reselect your "glass" 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. Select the resulting shape, set the fill color at white, lower its Opacity to 25% and change the Blending Mode to Soft Light.
Step 9
Reselect your "glass" shape and make a copy in front (Control-C > Control-F > Control-F). Select this copy, move it 10px to the right then duplicate it (Control-C > Control-F). Select this new copy and move it 15px to the right.
Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Select the resulting shape, lower its Opacity to 15% then fill it with the linear gradient shown in the following image.
Step 10
Reselect your "glass" shape and make a copy in front (Control-C > Control-F > Control-F). Select it, 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 made in this step and click the Minus Front button from the Pathfinder panel. Select the resulting shape, lower its Opacity to 30%, change the Blending Mode to Soft Light then add the linear gradient shown in the following image.
Step 11
Reselect your "glass" shape and make a copy in front (Control-C > Control-F > Control-F). Select it, move it 5px to the left then duplicate it (Control-C > Control-F). Select this new copy and move it 25px to the left.
Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Select the resulting shape, lower its Opacity to 30%, change the Blending Mode to Soft Light then add the linear gradient shown in the following image.
Step 12
Reselect your "glass" shape and make a copy in front (Control-C > Control-F > Control-F). Select it and focus on the Appearance panel. First, select the existing fill, lower its Opacity to 5% and replace the existing color with R=40 G=170 B=225.
Keep focusing on the Appearance panel and add a second fill for this shape. Select it, add the linear gradient shown in the following image and lower its Opacity to 10%.
Step 13
Reselect your "glass" 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. Select the resulting shape, set the fill color at R=39 G=170 B=225 and lower its Opacity to 5%.
Step 14
Reselect your "glass" shape and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 10px up.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at R=39 G=170 B=225 and lower its Opacity to 5%.
Step 15
Reselect your "glass" shape and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 5px up and 15px to the left.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, lower its Opacity to 65%, change the Blending Mode to Soft Light and add the linear gradient shown in the following image.
Step 16
Reselect your "glass" shape and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 5px down.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at R=39 G=170 B=225 and lower its Opacity to 5%.
Step 17
Reselect your "glass" shape and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 10px down.
Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting shape, set the fill color at R=39 G=170 B=225 and lower its Opacity to 5%.
Step 18
Enable the Snap to Grid (View > Snap to Grid). Using the Ellipse Tool (L), create a 65 x 15px shape, set the fill color at black, lower its Opacity to 50%, change the Blending Mode to Soft Light and go to Effect > Blur > Gaussian Blur. Enter a 7px Radius and click OK. Make sure that the Ellipse Tool (L) is still active, create a 25 x 65px shape, set the fill color at white and place it as shown in the second image. Make sure that this squeezed circle stays selected and focus on the Appearance panel.
First, select that white fill, lower its Opacity to 50%, change the Blending Mode to Overlay and go to Effect > Blur > Gaussian Blur. Enter a 10px Radius and click OK. Return to the Appearance panel and add a second fill for your shape. Select it, add the linear gradient shown in the following image, lower its Opacity to 30% and change the Blending Mode to Soft Light.
Step 19
Reselect your "glass" shape along with the rest of the paths used to highlight it and Group them (Control-G). Move to the Layers panel and simply name this new group "Glass".
8. Create the Background and Add the Final Touches for the Glass Side
Step 1
Using the Rectangle Tool (M), create a 610px square, set the fill color at R=234 G=219 B=202 and send it to back (Shift-Control-[ ). Move to the Appearance panel and add a second fill for this new shape. Select it, add the radial gradient shown in the following image and lower its Opacity to 20%.
Next, you need to center this rectangle, so open the Align panel (Window > Align). Set the aligning to Artboard (open the fly out menu and go to Show Options if you can't see the Align To section as shown in the following image) then simply click the Horizontal Align Center and Vertical Align Center buttons. In the end your rectangle should cover the entire Artboard. Move to the Layers panel and simply lock this shape to make sure that you won't accidentally select/move it.
Step 2
Focus on the Layers panel and open your "Glass" group. Select the "glass" shape, make a copy in front (Control-C > Control-F) and bring it to front (Shift-Control-] ). Make sure that only the copy is selected and focus on the Appearance panel. Select the fill, replace the existing color with black, change its Blending Mode to Soft Light then go to Effect > Stylize > Inner Glow. Enter the properties shown in the following image and click OK.
Step 3
Keep focusing on the Layers panel and reselect your "glass" shape from the "Glass" group. Move to the Appearance panel, select the existing fill, and replace the flat color with the linear gradient shown in the bottom of the following image.
Return to the Appearance panel and add a second fill for your "glass" shape. Select it and simply add the other linear gradient shown below.
9. Recolor Your Lamp
Step 1
Using the Selection Tool (V), select all the shapes that make up your lamp and duplicate them (Control-C > Control-F). Focus on these copies, select the mesh and simply remove it using the Delete key from your keyboard. Select the remaining copies, focus on the Pathfinder panel and click the Unite button. Make sure that the resulting shape is selected and add a simple, black fill.
Step 2
Using the black compound path made in the previous step and some basic blending techniques you can easily recolor your entire lamp. Simply select your black compound path, focus on the Transparency panel, lower the Opacity to 30% and change the Blending Mode to Overlay. Clearly, you can try different colors or different blending modes. There are countless possibilities. Play with those attributes and find the one that you like.
10. Add Subtle Shadows
Step 1
Using the Ellipse Tool (L), create a 195 x 20px shape, set the fill color at black and place it as shown in the first image. Make sure that this squeezed circle stays selected, switch to the Convert Anchor Point Tool (Shift-C) and simply click on the two anchor points highlighted in the first image. In the end your black shape should look like in the second image.
Make sure that it stays selected and focus on the Appearance panel. Select the existing fill, lower its Opacity to 30%, change the Blending Mode to Soft Light and go to Effect > Blur > Gaussian Blur. Enter a 7px Radius and click OK. Return to the Appearance panel and add a second black fill for your shape. Select it, change the Blending Mode to Soft Light, lower its Opacity to 10% and go to Effect > Path > Offset Path. Enter a -3px offset and click OK.
Step 2
Switch to “gridline every 1px“, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Rectangle Tool (M), create a 115 x 2px shape, set the fill color at black and place it as shown in the first image. Make sure that this rectangle stays selected and focus on the Appearance panel.
Select the existing fill, lower its Opacity to 20% and go to Effect > Path > Offset Path. Enter a 3px Offset, click OK and go to Effect > Blur > Gaussian Blur. Enter a 5px Radius and click OK.
Return to the Appearance panel and add a second black fill for your shape. Select it, lower the Opacity to 10% and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK. Get back to the Appearance panel, select the entire path and go to Effect > Stylize > Rounded Corners. Enter a 1px Radius and click OK.
Step 3
Reselect the two shapes that make up the shadow and Group them (Control-G). Move to the Layers panel and simply drag this new group below your "base" group.
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.
