Instructions for working

with a mockup

It’s easy to convert a mockup into a high-quality image

of your finished product.


Structure and principle 
of working with the mockup

Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. 

In Photoshop CC and CS6, you can embed the contents of an image into a Photoshop document. In Photoshop CC, you can also create Linked Smart Objects whose contents are referenced from external image files. The contents of a Linked Smart Object are updated when its source image file changes. 

Linked Smart Objects are distinct from duplicated instances of a Smart Object within a Photoshop document. With Linked Smart Objects, you can use a shared source file across multiple Photoshop documents which is a familiar and welcome concept for web designers. 

In your document, select the Smart Object layer in the Layers panel.


Choose Layer → Smart Objects → Edit Contents. Or you can simply double-click the Smart Objects layer thumbnail in the Layers panel. A dialog box appears, telling you to save your changes and save the file in the same location. 

Click OK to close the dialog box.
The Smart Object opens in the program in which it was created,

either Illustrator or Photoshop.

Choose File → Save to incorporate the edits.

Close your source file.

Return to your Photoshop document, which contains your Smart Object.
If all goes as expected, all instances of the Smart Object are updated


Imagine your design at the

highest level

Combine the easiness of working process and an excellent result. Be professional.


You can see the full range of our layouts in the store

The work uses the Source Sans Pro font
Used quotes from the Tutorials Photoshop User Guide