5 Cara Membuat Gambar Mockup iPhone di iOS, Web, macOS dan PC

Makemac - Apakah kamu sering melihat gambar iPhone dengan screenshot aplikasi seperti di atas pada artikel MakeMac? Istilah yang digunakan untuk gambar tersebut adalah gambar mockup iPhone.

Bisa dibilang mockup iPhone adalah gambar tampilan aplikasi atau website yang sedang dibuka pada perangkat iPhone dan menampilkan bingkai atau tepiannya berupa tampak depan dari perangkat iPhone.

Biasanya mockup digunakan untuk gambar promosi atau melihat tampilan aplikasi yang lebih realistis. Misalkan untuk aplikasi di iPhone dengan Face ID, apakah bagian penting dari aplikasi tersebut tertutup oleh Notch atau tidak.

Ada beragam cara untuk membuat gambar mockup iPhone alias menempelkan screenshot dari sebuah aplikasi atau tampilan utama iOS, ke gambar tampak depan perangkat iPhone.

Cara Membuat Gambar Mockup iPhone

Berikut ini beberapa cara membuat gambar mockup iPhone yang sering saya gunakan dan bisa kamu coba juga, simak:

1. Stiiitch (iOS)

Stiiitch adalah salah satu aplikasi yang mendukung fitur untuk membuat mockup iPhone.

Sebetulnya fitur utama dari Stiiitch adalah menggabungkan screenshot panjang secara vertikal. Namun jika kamu membeli in-app purchase di Stiiitch, ada fitur mockup iPhone yang bisa digunakan.

Caranya cukup membuka Stiiitch, pilih salah satu gambar dari app Photos dan tekan Edit kemudian pilih Mockup.

Ada sejumlah pilihan mockup yang tersedia mulai dari iPhone terbaru hingga iPhone 8 dan juga beragam perangkat iPad.

Kamu juga bisa membuat mockup dengan posisi tegak, mendatar, ganti warna latar belakang, serta beragam pengaturan lainnya.

Kelebihan utama dari Stiitch adalah cara penggunaan yang mudah, tidak harus terhubung ke internet dan harga in-app purchase untuk mendapatkan fitur ini juga murah.

Download Stiiitch

2. Mockuuups Studio (macOS)

Cara kedua adalah menggunakan aplikasi Mockuuups Studio di komputer Mac.

Mockuuups Studio adalah aplikasi mockup generator dengan ratusan tipe tampilan dan belasan jenis perangkat yang didukung.

Contoh mockup iPhone yang bisa kamu buat dengan Mockuuups Studio adalah iPhone yang sedang dipegang, diletakkan di atas meja atau beragam tampilan lainnya sesuai yang disediakan.

Cara menggunakan Mockuuups Studio juga sangat mudah. Tinggal pilih gambar atau screenshot yang ingin kamu jadikan mockup, pilih perangkat dan juga tipe device yang diperlukan.

Setelah itu tinggal tekan tombol Export Mockup dan tunggu hasilnya tersimpan di komputer Mac.

Mockuuups Studio juga punya fitur integrasi dengan aplikasi Sketch bernama Sketch Live, berguna untuk para desainer UI/UX untuk melihat tampilan antarmuka secara cepat.

Kelebihan utama Mockuuups Studio adalah beragam pilihan tampilan dan perangkat yang didukung, cara menggunakan yang mudah dan hasil gambar dengan resolusi besar.

Selain itu pengembang Mockuuups Studio juga rajin memberikan update untuk tambahan gambar baru secara berkala.

Beberapa hal lainnya yang harus kamu catat dari Mockuuups Studio adalah penggunaan aplikasi ini memerlukan koneksi internet, layanan bersifat langganan langsung ke website Mockuuups Studio atau lewat Setapp.

Download Mockuuups Studio | Berlangganan Setapp

3. Shotsnap (Web)

Shotsnapp adalah website dengan fitur untuk membuat mockup iPhone.

Tidak sekedar membuat gambar mockup, Shotsnap punya mode edit untuk ukuran resolusi gambar, tambahan teks dan juga gambar latar belakang yang bisa menggunakan katalog dari web Unsplash.

Kelebihan utama dari Shotsnapp adalah tidak memerlukan aplikasi, semua aksesnya hanya cukup lewat browser di komputer saja dan dapat digunakan secara gratis.

Untuk kamu yang ingin menggunakan Shotsnap secara lebih lengkah, silakan beli akses Shotsnap Pro dengan tambahan fitur akses gambar device lebih banyak, mode menambahkan teks dan masih banyak lagi.

Web Shotsnap

4. Siri Shortcuts (iOS)

Siri Shortcuts atau dikenal juga dengan aplikasi Shortcuts sudah dikenalkan oleh Apple sejak iOS 13. Dengan Siri Shortcuts, kamu bisa membuat workflow untuk melakukan beragam hal secara lebih mudah dan bahkan otomatis.

Salah satunya adalah membuat workflow untuk mengolah gambar screenshot menjadi mockup iPhone. Di internet sudah banyak pengguna yang membuat Siri Shortcuts untuk membuat mockup iPhone dan bisa kamu unduh untuk gunakan secara gratis.

Salah satunya adalah tim penulis di MacStories yang membuat Siri Shortcuts bernama Apple Frames.

Kamu cukup unduh dan pasang Apple Frames di aplikasi Shortcuts. Setelah itu tekan workflow ini untuk memulai proses membuat mockup iPhone dari katalog screenshot yang ada di aplikasi Photos.

Fitur paling menyenangkan di Apple Frames Shortcuts adalah mendukung gambar proses membuat mockup untuk beberapa screenshot secara sekaligus dan hasilnya diletakkan secara berurutan.

Download Apple Frames Shortcuts

5. Apple Marketing Resource (macoS, PC)

Cara terakhir ini mungkin bisa dibilang yang paling repot atau paling manual.

Yaitu menggunakan konten gambar dari halaman Apple Marketing Guidelines. Kamu bisa mengunduh gambar desain (disebut Artwork oleh Apple) MacBook Pro, iPhone atau iPad dan beragam produk lain yang memiliki layar dan bisa ditambahkan screenshot untuk menjadi gambar mockup.

Format gambar Artwork yang dibagikan oleh Apple adalah dokumen Photoshop. Sehingga kamu cukup buka dokumennya lewat Photoshop di Mac atau PC lalu lakukan drag and drop gambar screenshot menuju dokumen ini.

Kelebihan utama dari cara membuat mockup lewat Apple Marketing Resource adalah ukuran dokumennya sangat besar dan tajam serta ukuran mockup dijamin sesuai dengan gambar screenshot dari produknya.

Kekurangannya adalah harus menggunakan Photoshop atau aplikasi pengolah gambar sejenis dan jika komputer yang kamu gunakan punya spek hardware kurang tinggi, prosesnya akan terasa cukup berat.

Web Apple Product Images

Punya Cara Lain?

Selama beberapa tahun membuat gambar untuk artikel di MakeMac, dari 5 cara di atas yang menjadi favorit saya adalah Stiitch dan Mockuuups Studio.

Stiitch sangat mudah digunakan dan cepat, tidak perlu menggunakan komputer. Sedangkan Mockuuups Studio biasa saya gunakan ketika ada di depan komputer dan perlu gambar yang memiliki tema tampilan tertentu.

Selain 5 cara di atas, apakah kamu punya cara lain untuk membuat gambar mockup iPhone? Bagikan di kolom komentar atau tweet ke @makemac ya.