How to Create an iPhone Mockup Vector

Final product image — What You'll Be Creating

In this tutorial, you will learn how to create a vector iPhone 12 template in Adobe Illustrator with various tools, such as 3D effects, Gradients, and Gradient Mesh! We will also be using the Pathfinder panel and playing around with some Transparency settings to get a sleek and realistic result.

Check out Envato Elements if you'd like to skip this tutorial and use similar, ready-to-go iPhone mockups in your work! Alternatively, head on over to Placeit to use mockups which don't require any software and can be created in your browser with the iPhone mockup generator.

iPhone mockups available on Envato Elements.

What You'll Learn in This iPhone Mockup Tutorial

How to apply 3D effects in Illustrator
How to use the Pathfinder panel
How to use Linear and Radial Gradients in Illustrator
How to apply a Gradient to Strokes
How to use Gradient Mesh in Illustrator

1. How to Draw the Frame

Step 1

Begin by creating a rounded rectangle with the Rounded Rectangle Tool. You can use my measurements below or choose your own!

Width: 258 px
Height: 530 px
Corner Radius: 40 px

Step 2

Next, select the rectangle and continue to Effect > 3D > Extrude and Bevel. Select a Depth of 25 pt and these rotation angles:

1°
-36°
14°
Perspective: 40°

You can also play around with the angles to rotate the frame differently! After you're happy with the result, select the element and go to Object > Expand Appearance.

Step 3

Ungroup the object until you are able to individually select each part of the frame. Next, select the three elements that make up the left side, open the Pathfinder panel and click Unite, fusing them all into one path.

Step 4

Use Object > Path > Simplify to "clean up" the path a little, inputting 100% for Curve Precision.

Step 5

Use a Linear Gradient to emulate the metallic shine of the frame of our iPhone mockup. Use a -74° angle and these colors, aligned according to the screenshot below (in order from left to right):

#000000
#ADABAC
#FFFFFF
#CBCBCB
#D8D8D8
#D5D4D4
#ECECEC
#C7C6C6
#BAB9B9
#FAFAFA
#000000

Step 6

Next, select the side we just colored and the "screen" of our iPhone mockup and drag both elements away. You can delete any of the leftover parts—we will not be using them in this tutorial.

Step 7

Select the screen and color it black. Create a copy of it and remove the copy's fill color, instead leaving it with a 3 pt wide Stroke. Apply this Linear Gradient to the Stroke:

#B7B5B6
#FAFAFA
#FAFAFA
#B7B5B6

Step 8

Create a copy of the last element we made and change its Gradient, this time using these colors:

#FAFAFA
#FAFAFA
#B7B5B6

Step 9

Change the last element's Transparency Mode to Multiply.

Step 10

Place both of the strokes back on top of our frame to complete the look!

2. How to Create the Screen

Step 1

Let's add a colorful screen to our iPhone mockup! Begin by drawing a rounded rectangle with the Rounded Rectangle Tool, just as we did in Step 1 of the previous section. This time, the size will be a bit smaller—use these measurements:

Width: 245 px
Height: 513 px
Corner Radius: 36 px

Step 2

Add a much smaller rounded square with the same tool:

Width: 70 px
Height: 70 px
Corner Radius: 8 px

Step 3

Place the square on the upper edge of the rectangle, as shown below. Next, select both elements and use Minus Front in the Pathfinder panel.

Fill the object with a placeholder color, like blue.

Step 4

Let's "rotate" our screen just like we did with the frame in the previous section, using Effect > 3D > Extrude and Bevel. Use these values with a 0 pt Depth:

1°
-35°
15°
Perspective: 42°

Step 5

After using the 3D effect, go to Object > Expand Appearance, and then Ungroup the element until you can no longer see the option to do it.

Next, apply a Radial Gradient to change the color of the screen, using these colors:

#C9FFF2
#E2F3E4
#F3EBC0
#FFBFC6

Step 6

Place the screen onto the iPhone template!

Step 7

Let's add a highlight to showcase the reflectiveness of the screen. Draw a rectangle with the Rectangle Tool (M) and fill it with a Linear Gradient just like the one shown below. Use #BEBFC2 for the gray and #EEEFF0 for the off-white color.

Step 8

Create a copy of the black screen we've been using as a backdrop to our colorful one and place the highlight on top of it. Select both items and use the Intersect function in the Pathfinder panel.

Step 9

Change the element's Opacity to 40% and its Transparency mode to Screen, and then place it on top of our iPhone mockup vector.

3. How to Add More Details

Step 1

Our iPhone mockup vector is almost done—we just need to add a couple more details, like the buttons, the receiver, and the camera.

Let's begin with the buttons! Create a grey rounded rectangle, using the dimensions below:

Width: 7.5 px
Height: 23.5 px
Corner Radius: 36 px

Step 2

Use Effect > 3D > Extrude and Bevel with these values and a 4 pt Depth:

0°
26°
15°
Perspective: 42°

Step 3

Next, Expand Appearance of the result. Ungroup the object until you can see all of the individual elements, and then select the parts that make up the right side of the button and use Unite in the Pathfinder panel.

Step 4

Color the left side of the button with a black to white Linear Gradient.

Step 5

Color the right side with a gradient that's a little more complicated. Use these colors in order:

#494646
#9C9A9A
#D9D8D8
#494646

Step 6

Use the Object > Transform > Scale function to create a slightly smaller button. Input a value of 70%, and click Copy.

Step 7

Place the buttons on the side of the iPhone template, as shown below.

Step 8

Create yet another rounded rectangle—this time for the receiver. Use the values below:

Width: 35 px
Height: 7 px
Corner Radius: 4 px

Step 9

Rotate the rectangle with Effect > 3D > Extrude and Bevel, using a 0 pt Depth:

1°
-25°
8°
Perspective: 0°

Step 10

Color the object with a Linear Gradient from black to white and lower its Opacity to 80%.

Step 11

Create a 90 px by 90 px circle using the Ellipse Tool (L).

Step 12

Use Effect > 3D > Extrude and Bevel for one last rotation with these settings:

1°
-36°
14°
Perspective: 40°

Expand Appearance of the object.

Step 13

Using the Mesh Tool (U), try to recreate the Mesh Grid below, and then color the selected nodes with the corresponding colors:

#2A2A2A
#3A3A3A
#CFCFCF
#373737
#505050

Step 14

Place both the receiver and the camera in the designated area on the iPhone mockup vector. Make sure the highlight still stays on top!

Step 15

We're missing just one thing: the shadow! Let's create it with Gradient Mesh.

Begin with a white rectangle, and then reshape it with the Mesh Tool as shown below. Color the middle nodes with #939393, and then add some #DCDCDC nodes on the left side.

Step 16

Change the object's Transparency mode to Multiply.

Step 17

Finally, place the shadow behind the iPhone template!

Awesome Work, You're Now Done!

Today we created a photo-realistic vector iPhone mockup in Adobe Illustrator. Hopefully, you learned something new about Adobe Illustrator's functions and will be able to use those in your future work—but even if not, at least you've been left with a fully editable and scalable template you can use in your designs. Just swap out the colorful background for whatever you want!

I hope you enjoyed the tutorial, and I would be super happy to see any results in the comments below!

What now? You can try any of my other tutorials from my profile, or check out these gorgeous templates on Envato Elements:

iPhone 12 Mockup (PSD)

This presentation contains five PSD files, providing you with 6k templates in all official colors! The mockup files are highly detailed and easily customizable due to the inclusion of the Smart Object feature.

iPhone 12 Pro Mockup (PSD, PDF)

This advanced, easy-to-edit pack of mockups contains everything you need for your project, and it looks great on both light and dark backgrounds.

iPhone 12 PSD Mockup (PSD)

Looking for landscape displays? Then this pack of high-resolution PSD mockups is perfect for you, offering multiple templates with well-organized layers.

iPhone 12 Pro Max Mockup (PSD)

Create an elegant presentation for your designs with this fully customizable collection of mockups. It includes smart-objects and masks, allowing you to easily showcase your own design.

iPhone 12 Mockup (Concept) (PSD)

Check out this concept iPhone template, which boasts an impressive resolution of 5k and includes a realistic, removable shadow!

Check out some other tutorials of mine!

from Envato Tuts+ Tutorials