Tutorial DasarSIAP Wacana

Artikel Kategori // Tips & Trik

Beranda / Tips & Trik / Photoshop Tutorial Smart object mockup
Photoshop Tutorial Smart object mockup
2 Komentar | Dibaca 2207 kali
Ariyo Galih @pamandolit
30 January 2014

Hi there..
This time i wanna share about simple tutorial using Smart Object to make laptop mockup perspective done by Adobe Photoshop, this kind presentation is common these days in many crowdsourcing website used by designers to improve their design perspective in various future implementation.

Step 1

Find some laptop photography on internet, or you can take picture of your own laptop for originality purpose. After that, open the image in photoshop and locked the layer for safety. For this sample i’m downloading the laptop image from this website.

Step 2

After open the images in photoshop, now create a layer rename it into smart object or whatever yo want, then press shortcut “U” then find “custom shape” and choose “Grid Shape”.


Then drag into rectangle depend on laptop monitor image, no need to exact fill for this.. just similar from edge to edge.

Now the important part is convert the layer into smart object


After convert your layer into smart object, select your smart object layer and right click on photoshop display area grid shape “free transform” then choose “distort” setting and match the rectangle edge into actual laptop display images one by one for perfect match.


After matched the edge correctly into laptop display, now just double click the smart object layer that you created recently and photoshop will open new windows called [yourlayername].psb and you can place your logo / wallpaper / images to this space and click save. In this case i will paste my previous wallpaper illustration and click save, Wallahhhhhh… now you have your design into laptop perspective for your presentation.

Put the images on .psb new windows and saved

Final Result, saved then export the images and enjoy :)

Enhanchment Tips

  1. You might can adding some effect “inner shadow, gausian blur or lighting etc” to shown some depth visualization on the displayed laptop monitor.
  2. If you want to implement into anothers media like Billboard, Canvas Paper, Glass, Wood is just same as this step, the important thing is you must know the perspective imagination the object will be placed on those new media.

Dictionary :

  • 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.
  • Mock-up is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes
  • Perspective is the technique of representing three-dimensional objects and depth relationships on a two-dimensional surface.
  • PSB Files which stands for “Photoshop Big” (also known as “large document format”)

Nanti akan saya translate kedalam bahasa indonesia 🙂

Harap tunggu, laporan sedang dalam proses submit....

Terdapat 2 Komentar pada "Photoshop Tutorial Smart object mockup"


    March 13, 2014 at 2:22 pm

    kalau pakai bahasa Indonesia munkin lebih faham lagi..

  2. Robert Davis Chaniago

    March 13, 2014 at 3:06 pm

    iya nanti saya coba versikan pakai bahasa indonesia, soalnya awal buat itu ditujukan orang bule 😀

Anda harus login untuk berkomentar. Login Sekarang

Penulis Lainnya

putri hastuti

Penulis ini masih malu-malu menuliskan sedikit tentang Biografinya
Daftar Artikel Terkait :  3
Layanan ini diselenggarakan oleh PT. TELKOM INDONESIA untuk dunia pendidikan di Indonesia.
Mari kita majukan bangsa Indonesia, melalui pemanfaatan Teknologi Informasi yang tepat guna
pada dunia pendidikan Indonesia.
Sistem Informasi Aplikasi Pendidikan
versi 2.0