Cara Menyesuaikan Templat Mockup Situs Web

Cara Menyesuaikan Templat Mockup Situs Web

Templat mockup situs web dapat menjadi penyelamat desain. Ini memudahkan untuk memamerkan konsep desain situs web dalam pengaturan yang mewakili penggunaan sebenarnya (di banyak perangkat berbeda). Namun bagaimana Anda bisa menyesuaikan templat mockup situs web dan memasukkan desain Anda sendiri? Begini caranya.

Ada dua cara untuk memulai. Anda dapat membuat templat mockup situs web Anda sendiri untuk digunakan dalam proyek atau mengunduhnya untuk memulai dengan cepat. Hal hebatnya adalah ada begitu banyak pilihan template di luar sana untuk membantu klien memvisualisasikan desain baru secara real-time.

Inilah semua yang perlu Anda ketahui tentang menyesuaikan templat (juga dan menemukan templat yang bagus untuk memulai).

2 Juta+ Maket Produk, Templat & Lainnya Dengan Unduhan Tanpa Batas

Unduh ribuan maket produk cantik (untuk produk fisik dan perangkat), untuk memamerkan desain digital atau fisik Anda dengan keanggotaan Envato Elements. Mulai dari $16 per bulan, dan memberi Anda akses tak terbatas ke perpustakaan yang terus berkembang yang berisi lebih dari 2.000.000 maket, aset desain, grafik, tema, foto, dan banyak lagi.

Jelajahi Templat Mockup

Apa itu Templat Mockup Situs Web?

maket situs web
Klien senang melihat desain akhir dalam templat mockup, karena ini memberi mereka gambaran lebih baik tentang apa yang dipikirkan tim desain.

Sebagian besar templat mockup situs web hadir dalam bentuk file Adobe Photoshop yang dapat diedit. Desainnya dibuat agar Anda dapat menempelkan tangkapan layar situs web Anda ke dalam bingkai yang tampak realistis, seperti menampilkan beranda situs web di komputer, tablet, atau perangkat seluler sebenarnya.

Templat mockup situs web dapat menyertakan satu gambar, beberapa gambar, dan render pada orientasi berbeda. Maket yang baik dapat memberikan visualisasi yang bagus tentang seperti apa produk jadi dalam penggunaan sebenarnya.

Meskipun Anda dapat membuat maket sendiri, ada banyak opsi yang tersedia untuk diunduh. Sebagian besar templat ini dibuat sebagai file PSD menggunakan lapisan dan objek pintar untuk membuat desain akhir, dengan tetap mempertahankan properti visual file. Ini berguna saat menggunakan maket yang menggunakan orientasi menarik, seperti tampilan 3D atau perspektif.

Sebagian besar templat mockup situs web menyertakan campuran gambar vektor dan raster, jadi eksporlah dengan hati-hati. Anda ingin memastikan gambar situs web Anda terlihat sebaik mungkin sebelum dipamerkan.

Cara Menyesuaikan Templat Mockup

Meskipun file Photoshop dengan beberapa lapisan yang tampak aneh mungkin sedikit menakutkan, menyesuaikan template mockup bukanlah proses yang rumit. Anda hanya perlu:

  1. Temukan templat mockup situs web yang Anda sukai. (Anda dapat membuatnya sendiri, namun dengan begitu banyak pilihan bagus yang tersedia, kami merekomendasikan opsi unduh.) Carilah templat yang menonjolkan fitur desain Anda, seperti beberapa tampilan untuk situs web responsif (desktop, tablet, dan ponsel), dengan latar belakang yang sesuai dengan gaya proyek (putih atau hitam versus latar belakang warna-warni atau gaya foto-realistis).
  2. Buka zip unduhan dan konfirmasikan bahwa Anda memiliki semua bagian yang diperlukan: File PSD dengan mockup yang dapat diedit, JPG yang menunjukkan seperti apa tampilan desainnya (opsional) dan file informasi atau readme dengan informasi dan instruksi lisensi apa pun.
  3. Buka file PSD di Photoshop dan lihat lapisannya. Carilah layer yang bertuliskan “Letakkan Desain Anda Di Sini”, atau yang serupa (selalu ada satu yang menonjol dengan instruksi ini!)
  4. Klik dua kali layer itu, untuk membukanya.
  5. Ambil tangkapan layar yang sesuai dari desain Anda, dengan ukuran resolusi optimal dan untuk menunjukkan dengan tepat apa yang Anda ingin orang lihat di desain maket akhir.)
  6. Salin dan tempel, atau seret dan lepas gambar atau konten Anda ke lapisan yang sesuai, ubah ukurannya sesuai kebutuhan untuk mengisi ruang.
  7. Tekan Ctrl-S, atau Cmd-S, untuk menyimpan layer pintar, lalu kembali ke gambar aslinya. Voila! Anda akan melihat tangkapan layar baru Anda di mockup.
  8. Ekspor file, menggunakan ukuran dan format yang Anda perlukan, untuk ditampilkan.

Cara Menggunakan Templat Mockup Situs Web

Setelah Anda mengkustomisasi templat mockup situs web, apa yang Anda lakukan dengannya? Desain yang tampaknya sederhana ini memiliki banyak kegunaan praktis. Anda dapat menggunakan templat mockup situs web untuk:

  • Pratinjau desain untuk klien
  • Mempersiapkan pemasaran dan promosi pasca peluncuran
  • Sertakan dalam portofolio cetak
  • Ikuti entri kontes, saat Anda berencana memamerkan desain akhir

Yang harus Anda lakukan untuk menggunakan templat mockup situs web adalah mengekspor desain khusus Anda ke dalam format yang dapat digunakan. Biasanya ini mencakup dua pilihan – file gambar resolusi tinggi untuk aplikasi cetak dan file resolusi web untuk digunakan secara online atau untuk berbagi email.

Di mana Menemukan Templat Mockup Situs Web

Jadi semua ini mungkin menimbulkan pertanyaan: Di mana Anda menemukan salah satu templat mockup situs web yang berguna ini? Ada banyak pilihan gratis dan berbayar yang tersedia dari berbagai sumber.

Kami juga memiliki beberapa kumpulan hebat yang mencakup banyak maket yang dapat Anda mulai segera.

  • 20+ Templat Mockup Situs Web & Aplikasi Responsif Terbaik
  • 20+ Mockup Perspektif PSD Situs Web Terbaik

10 Maket Situs Web Gratis untuk Memulai

Untuk memastikan Anda siap mulai menggunakan mockup situs web, kami telah menemukan 10 opsi bagus – dan gratis – untuk membantu Anda memulai. Beberapa maket ini juga dapat ditemukan di kumpulan Design Shack lainnya.)

2 Maket Meja MacBook Pro

maket situs web

Mockup PSD Showcase Responsif

maket situs web

PSD Perangkat Garis Besar Apple Vektor

maket situs web

Etalase Responsif Datar

maket situs web

Mockup Lantai iPad dan iPhone Putih

maket situs web

MacBook dan iPhone di Tabel Mockup

maket situs web

Maket Wireframe Perangkat Apple

maket situs web

Mockup Showcase Desain Web Responsif

maket situs web

Maket MacBook Air

maket situs web

Tampilan Retina MacBook Pro PSD

maket situs web

Kesimpulan

Menyesuaikan templat mockup situs web untuk memamerkan proyek adalah alat hebat yang harus Anda miliki. Bahkan jika Anda hanya memiliki waktu beberapa menit untuk mempersiapkan presentasi, Anda dapat memasukkan desain situs web Anda ke dalam skenario kehidupan nyata untuk tampilan yang sempurna.

Meskipun Anda mungkin tidak peduli dengan keseluruhan presentasi desain atau ide, klien pasti akan memperhatikannya. Ini adalah salah satu jalan pintas cepat dan mudah yang dapat dilakukan oleh desainer (dan pekerja lepas) untuk membuat kesan yang luar biasa. Bersenang-senang menyesuaikan template untuk proyek Anda!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top