A computer screen mockup is the perfect way to show your website in context or to show your website actually being used. If you’ve ever searched for just the right computer screen mockup, however, you know that it can be really difficult to find the exact template you need. That is, until now. Placeit has an incredible range of Apple device mockups that will make you jump for joy. And using one is easier than you could ever have imagined.
How to Use a Computer Screen Mockup
Placeit’s iMac, MacBook, MacBook Air and MacBook Pro mockups are all very easy to use. Let me show you how.
1. Sign Up for Free at Placeit
Navigate to the MacBook Mockup page.
2. Select a Template You Like
3. Upload Your Image
Now you have two options:
Take a screenshot of the content you’d like to display in your Mac Mockup and click the Upload Image button in the upper left of the screen. Navigate to your screenshot and upload.
Alternatively, if you wish to display a webpage, select the option From URL, and then copy and paste the URL of the webpage you’d like to display in the box provided.
4. Crop If Necessary
If you chose to upload an image, you will be presented with a window which allows you to crop it to the required size for your Mac mockup. If you’ve typed in the URL of the webpage you’d like to display, the software will automatically fit the website to the dimensions of the mockup.
5. Make Changes as Needed and Download
After the image is processed, it will appear in your Apple mockup templates. If you’re not happy with your crop, you can click the crop icon in the upload box, located to the right of the upload image text, to re-crop the image.
If you want to choose another image or website, click the X next to the crop tool in the Upload Image box or the X next to the From URL box and start the process again. If you’re happy with your laptop mockup, you can download it for a small fee. And just like that, you’ve got a great Mac mockup.
21 Best Mac Mockups
This MacBook mockup is perfect for businesses of any size that want a photo of a laptop in the context of a modern office that they can use to display a specific page of a website, a business presentation, or some other page. The background is softly blurred so that all eyes will be on the screen.
There’s a reason flat-lays are so popular nowadays. They’re a perfect way to display the objects on any surface. What’s great about this particular flat-lay is that it's a perfect phone and computer mockup for showing off how a webpage would look on a computer screen and on a mobile device. A great laptop phone mockup combo for web designers, writers, or entrepreneurs.
Looking for a MacBook mockup in the context of a home interior? Take a look at the MacBook Mockup Featuring a House Environment. A great choice for home decorating, home cleaning or home furnishing businesses who want to show off their business websites in a context their clients can relate to.
This template has a youthful, cool creative vibe. Featuring a young woman taking a coffee break while checking her phone in a flex-office space, the MacBook png will appeal to solopreneurs, entrepreneurs, and start-ups.
If you need a minimalist mockup, this MacBook png is for you. It features a solid background so you can show off a presentation or website with minimal distraction. A handy feature of this mockup is that you can change the background to any colour you need.
Go into a coffee shop in any major city and you’re bound to see someone working on a laptop. So of course I had to include a MacBook mockup in a coffee shop. And this one is particularly nice, with freshly picked flowers on one side and a refreshing drink on the other. A really great laptop mockup to advertise a new website, a product sale, the publication of a new book, or some other fabulous event.
Just to make sure you have loads of options if you are looking for just the right cafe context for your laptop mockup, I’ve included another template here with the laptop much closer to the screen. The background on this one is nicely blurred so the context is a bit less specific. It could be a cafe, but it could also be a college cafeteria or cafeteria in a mall, all of which just extends the flexibility of this great computer screen mockup.
This MacBook mockup would work equally well for a casual context or work-away-from- office context. Shot from over the young man’s shoulder, the photo directs our gaze to the screen both by the clear view of the laptop screen and the man's intense gaze at the screen. A great multi-purpose Mac mockup.
This phone and computer mockup combo is ideal for showing off responsive websites. The iPhone mockup overlaps the MacBook just enough so that it doesn’t obscure too much of its screen. This Apple mockup template will appeal to those looking for MacBook png files that will allow them to insert the image easily in any background.
Alternatively, if you need a MacBook Pro png without the addition of the iPhone, take a look at this laptop mockup. This template features an angled MacBook Pro mockup as opposed to the head-on image featured above. This adds a bit of dynamism to the model while still keeping the computer screen mockup completely visible.
This over-the-shoulder angle of a woman using her computer on her lap gives the viewer a big, bright, clear image of the screen. A great Mac mockup for any number of uses, from a woman working on her book to booking an appointment on a website to buying a present from an e-commerce site and more.
Featuring a MacBook Pro mockup with the screen at a good angle for showing off whatever image you choose to add, this template is a great computer screen mockup for photographers, lifestyle, food, and travel bloggers, and various creatives.
Of course we don’t just use our computers in the office or other public spaces, and this MacBook template is a casual one that could be useful for bloggers of every stripe who want to show their content being appreciated by someone relaxing at home.
This new iMac mockup, which features two colleagues in an office discussing something on a computer screen, is ideal for a variety of uses, but particularly speaks to a collaborative work environment.
For those times when you need Apple mockup templates with no bells and whistles, there’s this new iMac mockup template. Just a giant screen that fills the frame and a transparent background so you can add your own. Minimalism at its best.
Need a photo of a creative office space to complement your website? Surely this template will do the trick. Featuring an iMac computer screen mockup on a vintage desk framed by plant leaves and surrounded by a brass Turkish coffee pot and mug on one side and an opened magazine on another, this mockup is perfect for designers of all types who want to display their website or portfolio page in a cool context.
This minimal apple mockup template is sister to the Mockup of a Space Gray MacBook Standing on a Solid Colour but for your MacBook Air instead of MacBook. Like the MacBook Mockup, it features a solid background whose colour you can change as needed.
The only thing as fabulous as a Mac mockup with a dog would be a Mac mockup featuring a cat. This ever so wonderful Apple mockup template is ideal for pet-related business websites, but would work equally well with websites related to lifestyle, home decor, etc. Don’t blame us if your viewers can't keep their eyes off the dog, though.
Featuring the triple threat combination of an iMac, MacBook Air, and MacBook Pro png mockup, this template is great for displaying a website's responsiveness. In addition, with its transparent background, you can place it against any background you choose.
If you’re looking specifically for an iMac and iPhone mockup, this one may be just the thing you need. The Apple devices mockup features a young man working from home or in what could be an informal office environment. You can use the template to illustrate website responsiveness, feature a different website on each device, or whatever your project calls for.
The sky’s the limit when it comes to the uses you can put this awesome MacBook Pro mockup to. Celebrate the launch of a new website, upload a photo to send a birthday greeting, use the Placeit Flyer Maker to create a party flyer, upload it to the screen mockup… your turn.
Choose Your Mac Mockup Today
That’s my list of the 21 best Apple device mockups, but remember there are hundreds of other Mac mockups at Placeit. So head on over there, sign up for free, and try out as many templates as you like. If you find one you really like, upload an image below to show how you’ve used it. Would love to hear from you.
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post