In the world of design, “mockups” are essential tools that allow us to visualize what a project would look like if it were tangible. Aware of their importance, Adobe Illustrator has launched a new feature, Mockups, which promises to save us a considerable amount of time when designing these prototypes.
In addition to facilitating the creation of prototypes, this feature in Illustrator also allows us to implement changes and see the results in real time. Mockups have been designed to adapt to any situation and need, as you will see below.
What is a mockup and why are they so useful?
A “mockup” (or prototype) is a visual representation, almost always to scale, of a product or design that has not yet been built. It is mainly used to show what a finished product will look like, whether it’s a website, a mobile app, packaging, clothing, or any other item. Mockups allow designers and clients to imagine how a product would look in real life and also make necessary adjustments before going into production.
As you can see, creating a prototype is essential because it allows us to detect any design or functionality problems before time and resources are invested in producing them. For example, creating a mockup for a cup design would allow us to see how it would look in real life. Additionally, it is an excellent way to present and sell an idea, as it offers a clear and realistic image of the final product.
Create your own mockups in Adobe Illustrator
The new Mockup tool will allow us, in a few steps, to place our design on any product, be it a box, a cup, a t-shirt, or anything else. In this way, Illustrator can take a vector illustration and fit it to a raster image. Here’s how you can do it:
- Open Adobe Illustrator and go to Windows. Then, select Mockup (beta) to bring up the mockup panel.
- Use the Selection tool (V) to select both your vector design and the image you want to place it on. Now, click on Create Mockup from the Mockup panel.
From the Mockup panel, you can also see how your design looks on other Adobe Illustrator templates. If you like any of them, you can always select it and drag it to the canvas. As you will see, the vector illustration will automatically fit the geometry of the object detected in the image.
To adjust the position of the vector image, you just need to go to the Properties panel and select the Edit Content option. If you want to detach the vector illustration from the object, simply click on Release, and it will return to its previous state.
From here, you can also edit the mockup, change its position, or alter certain things. To do this, go to Properties. Then, click on Edit Mockup Group, Edit Image, or Edit Content. Each of these options will help you change size, colors, alignment with the canvas, etc. Experiment with your designs to make the most of this feature.
And if you like it, save it for later use
If you want to save your mockup project for future use, select the + symbol you will see in the Mockup panel. This will add it as a template within Your Mockups.
Adobe Illustrator allows you to save up to 20 templates. However, keep in mind that you cannot add mockups created with version 28.5 or earlier of Illustrator to Your Mockups. If you still want to do so, you will have to recreate your mockup from scratch.
Use the templates offered by Adobe Illustrator
As mentioned earlier, Illustrator itself has several predefined templates that you can use to see how your design will look on clothing, packaging, cards, and more. There are several categories to choose from, including Apparel, Branding Graphics, Digital Devices, or Packaging.
Using these templates is quite simple, as you will see now:
- Go back to the Mockup panel.
- Select from the categories mentioned earlier and see which template best suits your needs.
- Use the Selection tool (V) and select your design. Then, in the Mockup panel, click on Preview Mockup on any of the templates.
- Once you have decided on one, select it and drag it to the canvas (you can also select Place on canvas). As we did before, click on your design and place it on the part of the template you prefer. The vector image will automatically adjust to the object you place it on.
Although Mockups is quite a useful feature, it currently has some limitations. For example, we cannot create prototypes with multiple designs, and we cannot create mockups within a mockup. However, we won’t tell you what can or cannot be done: it is better that you check it out for yourself within Adobe Illustrator.
