Vector Tutorial: Creating Your Own Vector iPhone


It’s been a while since I last did a tutorial here in Graphic Design Free Resources. Few weeks ago while doing a short piece about Apple’s iPhone on my technology and gadget blog. I was looking for a clean generic iPhone mock-up to superimpose different screen displays but couldn’t find one. I ended up using something else. So I thought about creating my own iPhone mockup and feature its tutorial here as well.

This tutorial requires intermediate level skill in Adobe Illustrator. You should already have working knowledge of paths using Pen Tool, creating and manipulating shapes using Pathfinder, gradients, symbols, swatches, and the Mesh Tool. Sorry for newbie Illustrator users. But even if you don’t know much about Illustrator, this tutorial will at least give you an idea how this is done. I’ve seen some basic vector Illustrator tutorial like this around (I saw one from vector tutsplus) but the result is not very impressive, but still gets the job done.

Let’s get it on. Before we get started, let’s take a look at the final image we’ll be creating.


Step 1: The basic frame.

Let’s create the outer frame using the Rounded Rectangle tool. I initially created three rounded rectangles 2mm apart on both sides and 2 points difference on rounded corners. Outer rectangle is 60mm x 113mm 25pt rounded corner, next one is 58mm x 111mm 23pt, third and inner one is 56mm x 109mm 21pt. You can have your own dimensions as long as the proportions are similar to what I’ve done.


Next we need to create a compound path by subtracting the middle panel from the outer one. Select the two rectangles and use the “Minus Front” button from the Pathfinder palette.


Now we need to extract/separate the top and bottom part of the compound path we created. We need to do this to create our chrome shine effect. Create another rectangle similar to the one in the image below (the red one). Using the Pathfinder tool again, separate the top and bottom from the sides of the compound path using the “Divide” button.


You will have a similarly shaped top portion of the frame below.


Now we create mesh gradient as indicated below using the Mesh Tool. You can also use other methods in creating a chrome-like gradient like the blend tool but I prefer the Mesh Tool as you can have more control over your gradient to create a more realistic effect.



For convenience, you can also create a set of swatches ahead which you can just select as needed. For this project, I made a bunch of gray swatches from light to black. For the mesh gradient, you may apply colors on the gradient nodes as indicated in the images above.

Step 2: Buttons, switches and symbols

After we’re done with the chrome frame, let’s move on with the other details of our iPhone. Draw the side controls and the top sleep/wake button using the Pen Tool and apply gray color similar to the adjacent chrome frame. You can use gradient or flat color. I use a subtle gradient as I don’t want to make these buttons too shiny.


Next we create the home button with the shape tool using circles and rectangular oval shapes. The crescent shaped gradation was created using a copy of the outer circle subtracted with a larger circle. Apply the home button colors as indicated in the image below.


Here’s how our home button looks like.


I make it a habit to convert most nitty-gritty elements of my projects to symbols, especially if you see plenty of usage for some elements in your document. Converting to symbols and using them will dramatically reduce file size. So I converted my home button and other iPhone icons like the battery level, signal strength, and lock icon to Illustrator symbols. Again I will not elaborate anymore how to create these icons as they are normally created using various path creation tools available in Illustrator.


To convert to symbols, simply select the graphic element you wish to convert and click the new button from the Symbols palette, and you will be prompted with Symbol Options. Type a name for your symbol, select Graphic and click ok. Your symbol is now added in the symbols palette.


Step 3: Creating the face/front panel

We need to create three elements for the front panel. Let’s create the first two, the inner black strip and the inner panel. The third one is the display window.

You create the inner black strip the same way we created the outer frame. Two rectangular oval shapes joined to create a compound path using Pathfinder tools.


The inner panel’s gradient is illustrated in the image below. Gradient is angled at 45 degrees, with two inner black colors positioned near halfway at 45 and 55. Both sides fade to 80% black.


Part of the front panel is the iPhone speaker. You may do a simpler one since its relatively small, but I like to do everything in good details.

Create 3 rectangular ovals similar to the figure below.


The first and the third oval are measured 11.3mm x 2.5mm with 1.5mm round corners and 9.8mm x 1.2mm with 0.8mm round corners respectively. The middle one need not be measured accurately as long as it covers the third oval. The middle one will be meshed speaker part.

As usual, combine 1st and 3rd oval by subtracting the inner from the outer. While the compound path is selected, select “Flatten Transparency” from the Object Menu to convert the compound path to a whole and flatten shape. Make sure the compound path solid filled and doesn’t have an outline. Please refer to the image on settings applied using this tool.


Now we need to divide the thick oval shape to apply shading and reflection. Create a similar path as illustrated in the image below. Make sure you create a mirror copy of the cutting path then position it symmetrically on the lower right part below. While the cutting path and the oval shape are selected, apply the “Pathfinder Divide” tool. Do the same with the cutting path below.


Select the oval shape, right click and select ungroup to separate the divided shapes. When outlined, you will have a similar shape like the one below.


Now let’s fill up those speaker shapes. The top part of the oval we divided will be solid black. The lower part will be filled with gradient from gray to white angled at 45 degrees with similar positions indicated in the image below. To fill the middle part or the speaker mesh with the dotted pattern, we need to create a pattern similar to the one shown below. Then drag that pattern to the “Swatches Palette” to create a pattern swatch. Then apply that pattern to the middle part to create a speaker mesh look.


Step 4: Display window

Now this is getting long. I hope I’m not getting you bored. Don’t worry, we’re almost there. Let’s create the front display window by creating another rectangular shape object. Create a rectangle measuring 148px by 220px with slightly rounded corners of around 2 pixels. Create another rectangle this time measuring 144px by 216px but this time no rounded corners. Subtract the inner from the outer. Fill it up with 80 to 90% black.


Let’s fill our screen display with some wallpaper. I don’t want to make this tutorial the longest vector tutorial ever, so I’m cutting it short by just grabbing an image from our previous Photoshop tutorial, Creating a Cool Fabric Background Using Reflected Gradient Tool.

Position the image exactly in the middle or you may use a “Clipping Mask” to the exact boundaries of your image by creating or copying the inner rectangle and placing it on top of the image. While both the image and the clipping shape are selected, right click and select “Make Clipping Mask” to clip the wallpaper image. I have slightly lowered the transparency to 75% to give our wallpaper the right blend on the display panel.


Now we will place all the icons from the symbols palette and some text on our display. But before we do that, let us create two rectangular bars as placeholders for our icons and time/date display. The following are measured 144px by 9px and 144px by 43px. The top bar is filled with 80% black while the bottom one is filled with gradient fill of various gradient points.


Gradient settings for the bigger bar below are illustrated in the image below.


Place these bars on top of the display as shown in the image below. Set the top bar transparency blending mode to “Multiply”. Set the bottom bar blending mode also to “Multiply” but give it 80% transparency.


Now we are ready to place all icons and text on our display. Icons and text are filled with 30% black. Also place a copy of the time/date gradient bar at the bottom part of the display area (this should hold the “slide to unlock” button which I’m sure you’ll be able to create once you fully understood everything in this tutorial). See our almost done image below.


One final piece before we do the last step is the reflective triangular part on top of the iPhone to add some highlight to our piece. Draw a triangular shaped object similar to the one shown below, fill it with white and set transparency to 10%.


Step 5: Mirror reflection

Finally, our iPhone piece is done. Let’s do a quick one for mirror reflection. Before we do that, let’s add some shadow below our iPhone by creating two shapes, inner one is dark gray (or black) and outer part is white. Select both objects, go to Objects > Blend > Make. Presto, we have our shadow.


Create a mirror copy of the iPhone and place it underneath. The Mirror Tool is located right below the Rotation Tool in the Tools palette.


Now create a rectangle enough to cover the mirrored image. Fill it with gradient similar to the one in the image below.


The magic trick to make the reflection appear is done by using the “Make Opacity” option inside the Transparency Palette.


While the mask and our mirrored image are selected, click the “Make Opacity” option. Make sure the “New Opacity Masks are Clipping” and “New Opacity Masks are Inverted” are both checked.


Lastly, add some blur to the reflection by applying “Gaussian Blur” from the Effect Menu, and set blur effect radius at 5.0. Then set the reflection image transparency to 50%. DONE!!! I hate doing tutorials. =). Let’s go back to doing more freebie downloads next time, ok?

Once again… the final image of our very own vector iPhone.


Vector source file download link:
GDFR Vector iPhone vector source files (Illustrator ai, EPS and PDF) – 9.47MB

Alternate download link:
GDFR Vector iPhone vector source files (Illustrator ai, EPS and PDF) – 9.47MB


  1. clipping path 13 May, 2009 at 12:10

    I love the amount of details you gave in your instructions through this tutorial. Great example. Looking forward to more from you.

    background removal services

  2. Michael 1 August, 2009 at 15:44

    Any way that someone can get me a high-resolution png version of this phone? I’ve been looking for a photograph of an iPhone that I can manipulate for some poster-size prints, but never occurred to me to use a vector-based image! mikee60369 “at” aol “dot” com. Thanks!

  3. Graphire 3 August, 2009 at 14:20

    Hi Michael. I emailed you the same vector iPhone I used in this tutorial. Files attached are pdf and png. I hope you get to use them. Enjoy.

  4. Riekelt Pasterkamp 9 September, 2009 at 21:06

    Hi there,

    I’m also planning on making some big posters and leaflet folder with a phone on it.
    I’ve been searching the web for hours but I can’t find a decent large iPhone photo or vector. Is it OK if I use yours? Could you share it with me? By the way yours looks amazing, very accurate!

  5. Dana ODell 23 September, 2009 at 20:48


    Do you think you could send me your vector art of the iPhone? I’m looking to use it in a brochure.

    If you would be able to send it ASAP, I would really appreciate it. My deadline is later today. šŸ™‚



  6. Oscar Valdez 2 October, 2009 at 02:01

    Very nice artwork. Is there any chance you can post the source (.ai) file somewhere or email it to me? Seems like many people would find it useful. Thanks, Oscar.

  7. james deezolio 6 October, 2009 at 14:21

    beautiful work, could i possibly bother you for the PDF? I’d like to see the final work and attempt some graphics with it? thanks in advance… james

  8. Graphire 9 October, 2009 at 12:06

    Ok guys. Due to a lot of requests, link to the vector source file of our iPhone tutorial is now added. Please find the link somewhere below the article. The archive file provided contains 3 file types, Adobe Illustrator ai (CS4), EPS (Illustrator 10) and PDF. Hope you find it useful. Enjoy!

  9. Marcia 17 March, 2010 at 11:29

    Hi, I have been looking everwhere for a large printable vector iphone and finally i found this! I downloaded the GDFR-vector-iphone.rar file but wont open on my computer i’m on a mac so not sure if that’s the problem.. If you had a chance could you email me the files it would be much appreciated!! thank you again love the look!

  10. Rikers 29 March, 2010 at 15:09

    Hello, Nice work with this device ! I tried to redo it, but I’m having a lot of troubles with the meshes (not on the top shape, but on sides) it’s just going everrywhere oO !

  11. nick lamb 24 May, 2010 at 23:52

    hi there, wonder if you could send me the iphone vector, looks great i want to use it for a catalogue im creating on apple hardware and software. Kind regards Nick.

  12. Kurt 23 October, 2010 at 19:55

    i’m looking to make a costume for Halloween everything i try to blow up is low res Could I use your vector art?
    631-949-2628 is my cell

  13. gmc 26 October, 2010 at 08:09


    i can’t get the link to the vector image of the iphone to work.

    would you mind sending me another link?



  14. Graphire 26 October, 2010 at 11:35

    Hi gmc. The mediafire download link is working fine. But if you’re having trouble downloading from your end, I have provided an alternate link above. Thanks.

  15. Rosena Hibbs 18 January, 2011 at 08:13

    Thanks for taking the time to share this, I feel strongly about it and love learning more on this topic. If attainable, as you gain expertise, would you thoughts updating your weblog with additional data? This can be very useful for me.

  16. Albert 5 June, 2011 at 05:02

    Hi Graphire. I can’t seem to find the link to download the file. I searched the site for “Vector source file download link” with no matches. Would you please send me a copy to my e-mail please? I would really appreciate it. I’m trying to do a promo for a made-up app for a class. Thanks!

  17. Graphire 5 June, 2011 at 08:54

    Hi Albert. The download link is just beneath the last and final image of the iPhone tutorial. There is also an alternate/mirror link below that link.

  18. Md Al Masud 4 November, 2015 at 23:42

    Hello there, I have been searching everwhere for a substantial printable vector iphone lastly i discovered this! I downloaded the GDFR-vector-iphone.rar record yet wont open on my PC i’m on a macintosh so not certain if that is the issue.. On the off chance that you had a chance might you be able to email me the records it would be highly valued!! much obliged to you again cherish the look!

  19. Graphire 5 November, 2015 at 10:52

    Hi Md, file is in rar format, an archived compressed file which contains several files (vector files) inside. You will need a decompression tool for RAR-archives like WINrar or 7zip to extract the vector files and open them.

  20. ccc 14 July, 2016 at 10:12

    yeah, your steps for making a shadow lack clarification. Make two shapes. Top one is solid black, no outline. Bottom one is white, no outline. Then object-blend-make…

Post a new comment

Recommended for you