A mockup is quite a useful thing if you know how to use it. But not every user understands the meaning of this word, and does not even know what a mockup is, how to use it and where to get it.
Mock-Up is a full-size mock-up of the future product that demonstrates its appearance, but does not have full functionality. If we compare the site mockup and the finished site, then in fact, in the first case, we will get an image that allows us to evaluate the design of the product. In the second case, a complete product is obtained that has functionality. It is very important to understand that such a blank does not carry any practical benefit, except for a demonstration. But it is for the good appearance of such a blank that designers get their money. Purpose There are several use cases, they are determined by the purpose and origin of the mockup. After all, they are used by both web designers and layout designers in product design and development. With the help of such a full-scale mock-up, designers demonstrate their work and photographers agree on the features of the products with the client.
Therefore, Mockups are divided into:
- Websites. Such blanks are aimed at demonstrating the appearance to the client. Having some kind of basic blank, it can be provided to the buyer so that he can see with his own eyes what color scheme he wants to use, and how it will look. It is more convenient to fix one layer in Photoshop than to fix the page code.
- Pictures. Here the situation is more interesting. The user is presented with the image in the form that it will receive after printing. That is, not how brightly the picture looks on the screen of the device, but how it will be in the hands, in real life. Sometimes the difference comes out tangible and it is better to focus on the mockup, where these features have already been taken into account.
- Future products. It is worth noting that any item where the design can be applied can be represented by a mockup. For example, the cover of a book or a mug. The finished view of the object will be presented on the mockup.
In fact, the site mockup has some functional features like links and clickable buttons. However, there is no full-fledged functionality in this layout. It will become a full-fledged site only after layout.
Mock Up for Photoshop
There are many ready-made mockups for Photoshop, we will return to this issue later. The main difficulty is understanding the principle of editing them. After all, so-called smart objects are used in layouts. Roughly speaking, these are containers, the contents of which can be changed without changing the overall appearance of the image. Consider a specific example of a randomly selected Mock-Up from a stock file hosting service:
Open the downloaded file in Photoshop. Let’s double click on the smart object icon in the layers. This will load another image (caption) that you can edit in a convenient way. Let’s rasterize the object (you can just try to apply any tool to it). Editing the image. We save it. Using “CTRL + S” or the “Save” button in the “File” menu. This applies the necessary effects on the main image (previously downloaded mockup). As a result, we get the following image: In addition to the example shown with text, you can use shapes and other graphics capabilities of Photoshop. One has only to remember that the file size will only increase from this.
Site Mock up
Modern website mockup deserves a special mention. A kind of working models to which you can add the necessary content. They are created using different tools and resemble site layout. For beginners, without knowledge of the basics of site building, it will be difficult to understand this process. If you still need to familiarize yourself, then you can resort to some tools. For example, you can create or edit ready-made mock up sites using the Gliffy program. In the basic configuration, it is free, but the set of functions is also cut down.
As a result, you can create a simple model:
If you really need to, you can get the job done in Photoshop by presenting each element of the page as a Smart Object. That is: the background image, components, labels, videos, individual blocks and links – everything turns into mockups leading to editable elements. So you can quickly “sketch” some elements and agree on the design.
Under “quickly sketch” should be understood only the first blank, which can be guided by when creating the primary design. That is, actions like “this is higher, then – lower, but that is – delete.” Do not assume that creating a design from scratch is possible in 10-15 minutes. This can only be done as a cursory sketch in a notebook, which everyone will see in their own way.
Where can I download ready-made examples? There are many sites on the Internet where you can find mockups for Photoshop. Basically, these are blanks for logos or products. If you search carefully, you can find many interesting examples of work. Also, quite often such models are sold and designers, so to speak, “stuff their hands on them.”
If it comes to web design, the following resources will come to the rescue.
Process of Creation
The creation process itself is rather complicated and is not at all recommended for beginners. It should be understood that the structure of any mockup includes the following components: smart object (or objects); background image; effects. It is required to create the necessary blanks that correspond to the conditions of the assignment. For example, creating an example of how the photo will look after printing, you just need to add the appropriate effects (lightening / darkening, etc.). But the problem is that you can only determine these effects by eye with experience. The presets for adding images to products contain a similar number of features. Therefore, online logo mockups are considered the simplest. Simple in terms of creation, not filling. Without a design flair, these will simply be groups of mutable objects.
Barry Lachey is a Professional Editor at Zobuz. Previously He has also worked for Moxly Sports and Network Resources “Joe Joe.” He is a graduate of the Kings College at the University of Thames Valley London. You can reach Barry via email or by phone.
