Drawing an iPad from Scratch

Step 1: IntroductionComment on this step

With all the hype surrounding Apple’s latest device , I thought it would be great promotion if we held a draw for a free iPad!

Did I say draw for a free iPad? I meant we should draw an iPad for free.

In this tutorial, I’ll be showing you how to create an iPad illustration in Aviary’s free online Vector Editor .

Open in Raven

Final Result Preview

Step 2: Creating the baseComment on this step

To begin, select the Rectangle Tool, set the Corner Rounding and Ellipse Height settings to 20, and drag out your base shape.

Select Object > Object to Path to convert the shape into an editable vector shape with nodes.

Set your Fill color to black in the Fill and Stroke Menu, and set your Stroke setting to None.

Step 3: A little perspectiveComment on this step

To give your device a little perspective, select the Edit Paths tool and drag the individual nodes to taper the left side of the shape to create the appearance of the right side being closer to the camera.

Step 4: Let's get deeperComment on this step

To begin giving the side of the device some depth, duplicate the shape by copying (Edit > Copy) and pasting (Edit > Paste) the layer.

Then, set this duplicated layer’s fill color to a light grey and drag it below the original shape layer on the Layers menu.

Using the Transform tool, expand the size of the shape so it almost creates an outline around the initial shape.

Then, repeat the process one last time with a dark grey shape and drag it to the very bottom layer again Expand the shape with the Transform tool to create almost a light outline around the device.

Step 5: It's all in the detailsComment on this step

Next, we’ll be drawing in some details.

First, we’ll create a reflective shadow on the top right corner of the chrome lining. To do so, select the Pen Tool with the Fill color set to a medium gray, and draw in a rounded reflective shadow as outlined in the following diagram.

To give the device an even shinier effect, we can add gradients to the chrome surfaces. To add a gradient, select the largest light grey shape in your composition. Change your Fill setting for this layer to Linear Gradient in the Fill Menu. Vary your stop points in the gradient bar to create your gradient, and use the Gradient Tool from the Tools sidebar to set the direction of the gradient.

Step 6: I'd like some inputComment on this step

Next, we’ll be adding in the inputs on the side of the panel. Using the Rectangle Tool with the Corner and Ellipse settings set to 20, I dragged out a narrow rectangle. Then, using the Transform Tool, I skewed the shape to sit parallel on the side of the panel.

Additionally, you can add a gradient to this shape for even added sense of depth in the input.

I copied and pasted this layer and dragged the layer below the original input shape’s layer from the Layers menu.

I set this duplicated shape’s Fill color to white, and expanded the size of it to create a highlight/reflection effect around the input.

I then made three copies of this input and aligned them near the top of the side.

Step 7: Take me homeComment on this step

To add the Home button, I selected the Eliptical Tool (docked with the Rectangle Tool) and dragged a circular shape onto the canvas. I set the Fill to a Linear Gradient, with a dark grey shade gradiating to a lighter grey shade.

Using the Transform Tool, I skewed the shape and moved it to the surface of the iPad panel.

Step 8: ShadowsComment on this step

Next, I wanted to create a shadow under the device. I selected the Elliptical Tool and dragged a circle outside of the canvas. I set this circle Fill color to the Linear Gradient setting and set the leftmost color to black, and set the rightmost color to black, but set the Alpha for the outer black to 0% to create a feathered circle.

I dragged this layer to the bottom of the Layers Menu. Then, I selected the Transform Tool to skew, resize, and move the shadow on the canvas to sit under the iPad device.

Next, I wanted to create a reflection of the device on the surface. To do this, I selected all the layers of the iPad and copied and pasted these layers into a new Layer folder. Then, I dragged this folder to the bottom of the Layer Menu. Using the Transform Tool, I flipped the duplicated layer vertically, then dragged it below the original iPad.

To lighten the reflection, I selected the Rectangle Tool with the Fill color set to white, and dragged a white rectangle covering the entire reflection. I lowered this shape’s Alpha to 77% to leave a subtle reflection on the surface.

Step 9: Glossy effectComment on this step

Finally, to add a glossy sheen on the surface of the iPad, I selected the Pen Tool, and drew in the shape over the surface with a crescent shaped cut across the middle.

I set the Fill of this layer to Linear Gradient to give the appearance of the glossy surface.

Step 10: Final touchesComment on this step

Additionally, you can draw in your own on-screen display, or take your creation into Aviary’s Image Editor and import your own screenshots for display on your shiny new iPad!

Try it out yourself! A free iPad illustration tutorial that anyone can try on almost any system that supports Flash. (Sorry iPad owners.)

Open in Raven

Final Result