How to Create MacBook Mockup

How to Create MacBook Mockup 🖥

Courtesy of @alexunderhess.design
⠀
Hey friends,
⠀
In this tutorial, you will learn how to create a realistic MacBook Pro mockup to present your web designs 👌
⠀
That one will be our screen.
⠀
And here you will create a keyboard for that screen.
⠀
As always, I worked in Figma to design it, and I used simple shapes like rectangles, gradients to show volume and shadows to add 3d effect.

IN THIS TUTORIAL YOU WILL LEARN HOW TO CREATE MACBOOK MOCKUP FOR YOUR WEBDESIGNS

TAKE THE TABLET MOCKUP FROM PREVIOUS POST

CHANGE SOME ELEMENTS

SCREEN COLOR: SOLID COLOR #171717
BASE DROP SHADOWS (COLOR IS THE SAME)
YOU CAN KEEP EVERYTHING THE SAME IF YOU WANT

NOW, KEYBOARD. DRAW A RECTANGLE

1834X44
SET LINEAR-GRADIENT COLOR

CHANGE CORNER RADIUS AND ADD SHADOWS

CREATE ONE MORE RECTANGE

POSITION: TOP CENTER OF THE PREVIOUS ONE
SIZE: 260X18 CORNER RADIUS:1,1;9,9
CHANGE IT’S COLOR TO LINEAR-GRADIENT

PUT THE KEYBOARD IN FRONT OF THE SCREEN

ADD SHADOW AND YOUR DESIGN

ENJOY!

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.