Design The Macbook Line in Illustrator

One of the most popular techniques in portfolio design is to have a computer monitor or screen to display your works.  While you can try to find a free stock image to use, raster graphics tend to be lossy and lower quality, so it’s a better option to use Adobe Illustrator to design your own.

In this tutorial you will learn how to design the Macbook line for your portfolios!  Haven’t you felt the need for a good realistic design to help you preview your works?  Well this tutorial is just what you need then!  With more emphasis on screen space, you’ll be able to show your works in style!

Tools Used

  • Adobe Illustrator

Final Image Preview

Macbook White

1. First of all let’s create the Mac book white model. So to start off, create a rounded rectangle with The Rounded Rectangle Tool and fill in the shown measures.

2. Now, fill in the rounded rectangle with a linear gradient. With the gradient panel (Window>Gradient) or the Gradient Tool (G) fill in the shown measures.

3. Now with the shape selected go to Object>Path>Offset Path and enter 2pt in the popup box. Now with the new shape selected, go to Effect>Stylize>Inner glow and enter the shown measures.

4. Now with both shapes centrally aligned, duplicate the grey rectangle and fill it with the shown gradient [Gradient Panel or Gradient Tool (G)]

5. Now with both the Rectangle Tool (M) and the Rounded Rectangle Tool create two shapes (measures in image), then align them as shown (First centrally align them, then move the bigger rectangle up 1.5pt), Then with the Pathfinder Panel (Window>Pathfinder) and with both the shapes selected, click on the “Minus Front” button.

6. Now fill in the newly created shape with the gradient shown. (The location of all the “upper” handles is 50).

7. Now align this shape with the main screen like shown (Make sure you have Smart Guides turned on). This is our main body, now we’ll be adding more shapes to make it look more realistic).

8. Now duplicate the shape we just created (Ctrl + C to copy and then Ctrl + F to paste in front) and then with the transparency panel (Window>Transparency) set it on overlay and reduce the opacity to 50%. This intensifies the main shape and gives nice contrast.

9. Now we’ll be making apple’s “Magnetic Opener” (I’m not so sure what they call it) so first create the two shapes shown and centrally align them and then move the upper rectangle up 1.5pt. (The measures don’t matter for the rectangle as it is being used only as a temporary shape). So now with both the shapes selected, go to the Pathfinder Panel and click on “Minus Front”.

10. Now to add realism to the shape, so first fill the shape with white and cancel off any stroke and then select the Mesh Tool (U) and click on the shapes three times (shown in the image), then with the Direct Selection Tool (A), holding down Ctrl select the highlighted points and change their color to something gray.

11. Now just align the “opener” with the main body as shown. (It looks good, doesn’t it?).

12. Now time to make “power” or “sleep” shower (Again don’t know exactly what they call it). So first with the Line Segment Tool () make a line of 12pt everything else at default. Now cancel the fill and give it a stoke of color #383838 and then with the stroke panel change the weight to 2pt and click on the round cap button and finally align it to the main shape.

13. Now time to make the screws which appear on the bottom of the macbook, so first make an ellipse with the Ellipse Tool (L) [measures in image] and then fill it with #494949 and give it a stroke of #2C3235 and with opacity of 50%.

14. So now make 3 more copies of the screw and then align them at the bottom as shown.

15. In this step we’ll be using the appearance panel (Window> Appearance) to add multiple strokes to make the webcam on top of the macbook. So first with the Ellipse tool (L) make a circle of width and height 2pt, and then give the following strokes and fill shown in the image (To add multiple strokes click on the appearance fly-out menu and click on “Add New Stroke).

16. Now just align the webcam as shown in the image (at the top).

17. Now let’s make a temporary screen for our macbook, so first with the Rectangle Tool (M) make a rectangle (measures in image) and then simply align it to the main body as shown.

18. Now let’s make the famous reflection of the screen, so first duplicate the screen (Ctrl + C and then Ctrl + F) and then with the pentool, roughly create the shape as in the image. Then select both of them and with pathfinder click on “Minus Front”, voila you have the shape!

19. Now give the newly made shape a white-to-transparent gradient and at a slanting angle then align it to the screen. After aligning just reduce it’s opacity to 75%.

20. We are reaching the final stages! Now add some text at the bottom of the screen and fill it with a slightly darker grey than the body itself. Now to simulate a illusion so that it looks like it’s sitting on something, so let’s make a reflection! Duplicate the lower part and go to Object>Transform>Reflect and with Horizontal selected click on OK. Now just align it and fill it with grey to transparent gradient.

21. As the image says, Plant in a screenshot and you’re macbook is finished!

Macbook Pro

22. Now let’s make the awesome MacbookPro that everyone uses! So first of all with the Rounded Rectangle Tool create a rectangle with the measures shown in the image.

23. Now again with the same tool, create another rectangle with the measures shown and then give it a inner glow by going to Effect> Stylize > Inner Glow and fill in the shown measures.

24. Now centrally align both the shapes to get a similar looking figure in the image.

25. Now let’s make the camera, so first with the Ellipse Tool (L) create a circle of width and height 12pt, then fill it with a radial gradient like shown in the image and then align it to the top of the body we just made.

26. Now let’s make the temporary screen, so with the Rectangle Tool (M) create a rectangle with the measures shown and fill it with #OCOCOC and then align it to the main body as shown.

27. Now add a reflection like the way we made previously for the macbook white and then add some text at the bottom, now our screen is complete, so let’s move onto creating the base.

28. Ok so now let’s create the base, so to start off, select the Rectangle Tool (M) and create a rectangle with the measures shown, then fill it with a metallic gradient (measures in image).

29. Now make 2 copies of the “base” and then select the first one and go to Effect>Texture>Grain and fill in the measures shown, similarly do it for the second one also and then finally align them on each other. This is done to add a realistic metal feel.

30. Now, just align them to the screen like shown. Align them in such a way that the “base” overlaps the screen a bit.

31. With the Rectangle Tool (M) create a rectangle of width 875pt and height of 14pt, then fill it with a linear gradient (measures in image) and then with the Direct Selection Tool (A) select one-by-one the top corners of the rectangle and move the 25pt to right and left respectively, then go to Effect>Stylize>Round Corners and type in 10pt.

32. Now make a copy of the shape we made previously and go to Effect>Stylize>Texture and type in the measures in the image shown. Then align both the shapes on each other and then align then to the bottom of the “base” as shown in the image.

33. Now, add the final details (Gradient mesh opener, the power shower and the screws) like we did in the macbook. Then similarly again add a reflection at the bottom.

34. Again plant in a screenshot and you are good to go!

Macbook Air

35. Similarly with the same effects and gradients, you can create the Macbook Air also!!

Final Image

Why and where should I use it?

These have a lot of uses; they can be used for portfolios, marketplace previews and even for icon sets! In web design, when you need to show your client your work these are great for showing them, they enhance the design, these are awesome for portfolios to show your latest work, it gives a sense of professionalism to the viewer and they can also be made into icon sets! The great thing about these is that they can be practically used in any kind of design and since they are vector, these are scalable. There are endless possibilities for which you can use these for. And since the MacApp store is opening soon, these will be just the thing you’ll need for previewing those apps! And with the main focus on the screen and not other details like keyboard etc. it gives the maximum space for previewing your great websites and portfolios!!


By using simple shapes and gradients, You can make possibly anything!.


  1. I like the tutorial, just a thing that is the images, their links are broken (pointing to /files/uploads/ instead of /wp-content/uploads/), other than that, thanks for the tutorial…

Leave a Reply

Your email address will not be published. Required fields are marked *