As a designer, you’re really good at what you do. When a client comes to you with a clear vision for their business but zero idea of how their website should look or function, you know how to deliver amazing results that double or even triple their ROI. Yet sometimes your clients need a little more convincing—a little extra push—to really seal the deal. Or maybe you’ve got quite the collection of website or app designs for your portfolio, but want a flashier, more engaging way to present these designs to your future employers and clients.
Enter product mockups. By providing important visual context for your designs, mockups are key to helping your client fully grasp your collaborative vision when a simple screenshot or Photoshop file just isn’t quite cutting it.
Mockups provide context for your designs and help clients envision your final product in a real world setting. They can also help model your responsive design solutions—allowing you to showcase your ability to design for mobile screens, tablets, laptops, and desktops. Using mockups to showcase your designs is an effective way to highlight your talents. Luckily it’s easy, too—which is why we made this beginner’s guide to show you how it’s done.
Step One: Download a Mockup Kit
The internet boasts a plethora of design resources all at your fingertips—and often for free. Our suggestion? Simply google “free photoshop mockups.” You can also use well-known resources like Mockup World, which is what we used for the designs in our guide to designing swag and our Pantone spring color guide.
Once you’ve chosen your desired mockup, simply download the file, unzip it, and open it in Photoshop. Most photoshop files for mockups have highly organized groups and layers, and should be easy to decipher. Take a moment to understand the layers of your chosen mockup kit—a good kit will name its layers clearly.
Step Two: Insert Design
Most kits will name the layers you want to edit something obvious like “Put Your Screen Here” or “Edit This Layer.” The editable layer will be a linked smart object, so double click it and it will open another Photoshop file.
After you create your design and export it as a jpeg or png, simply drag and drop it into this photoshop file, resize it as needed, save it, and then it will automatically populate the the original composition.
Step Three: Save and Export
Now you simply save the composition to whatever file type and size you desire. It really is that easy to elevate your designs so that your clients or future employers will be that much more impressed.
Download the stock graphics used in these designs.
Need new stock graphics to inspire and amp up your next designs? Check out our top 20 graphics for web design.
|Start Designing with Stock Graphics|