Cara Membuat Mockup dengan Adobe Photoshop CS6

Posted on by pdai uma
0

Cara Membuat Mockup dengan Adobe Photoshop CS6 – Mockup merupakan sebuah tools yang digunakan dalam mempresentasikan sebuah desain produk yang akan dibuat dan dikembangkan. Selain itu, mockup juga memiliki keterkaitan dengan dunia programming.Programming juga memiliki peranan penting dalam proses untuk membuat sebuah mockup. Misalnya adalah tampilan sebuah web atau aplikasi mobile. Pastinya itu sangat diperhatikan secara khusus untuk meningkatkan daya tarik pengunjung website.

Apa Itu Mockup?

Mockup adalah sebuah rancangan dari konsep desain yang akan diaplikasikan pada suatu produk. Rancangan ini lebih lanjut dapat dikategorikan kedalam low-fidelity atau high-fidelity. Low-fidelity adalah desain yang masih bisa dikatakan simpel dan praktis. Sedangkan, high-fidelity merupakan desain sudah diperhalus dan lebih kompleks dibandingkan biasanya.  Desain tersebut biasanya dibuat dengan varian dua dimensi dan tiga dimensi, lalu akan diberikan berbagai efek visual keren dan menarik. Sehingga akan terlihat seperti nyata dan terkesan elegan atau modern. Penggunaan mockup ini sendiri akan sangat memudahkan ketika kamu ingin menyelesaikan suatu proyek desain produk. Selain itu, juga dapat mengetahui dan melihat gambaran dari suatu produk sebelum produk aslinya tersebut dirilis.

Manfaat Mockup

  1. Memiliki Gambaran yang Realistis

Mockup dapat membuat gambaran terlihat lebih realistis atau tampak nyata. Sederhananya dengan menggunakan tools ini dapat menyerupai hasil final dari yang ingin ditunjukan.  Hal ini bertujuan agar nantinya pihak klien memiliki imajinasi atau bayangan sama mengenai desain yang ingin diciptakan. Klien pada awalnya tidak memiliki gambaran nyata tentang karya yang ingin diciptakan dan ditampilkan. Maka dari itu, mockup menjadi media pembantu dalam dunia desain produk.

  1. Media Presentasi

Sebagai media presentasi bertujuan untuk menyamakan perspektif antara klien dengan desainer. Akan lebih mudah ketika menyampaikan ide gagasan dari tiap-tiap orang dengan menggunakan alat pendukung yaitu mockup. Sehingga semua ide akan dipaparkan pada media tersebut dan pemikiran mereka akan menyatu yang nantinya akan tercipta karya.

  1.  Hemat Anggaran

Akibat banyaknya revisi yang dilakukan pada tahapan rancangan desain produk, maka  dengan menggunakan tools ini akan lebih menghemat anggaran jika dibandingkan dengan perbaikan yang dilakukan setelah tahap finalisasi. Sebelum menciptakan sebuah karya, tentunya harus ditinjau ulang untuk memastikan apakah sudah sesuai atau belum. Pastinya ketika sebuah karya sudah di finalisasi, maka jika terjadi kerusakan diharuskan membuat ulang dan dibutuhkan biaya tambahan lainnya. Oleh karena itu, perannya sangat penting untuk para desainer pemula hingga profesional. Dengan tujuan untuk menyampaikan ide gagasan hingga pada tahap mempresentasikan dan menghasilkan sebuah karya yang sesuai dengan permintaan klien.

Jenis-jenis Mockup

  1. Mockup Logo

Seluruh produk pastinya membutuhkan logo untuk dijadikan sebagai ciri khas atau identitas. Tujuannya agar logo tersebut mudah diingat oleh para pembeli dan audiens.

  1. Mockup Kemasan

Kemasan memiliki pengaruh yang besar  pada kualitas produk. Sebab, untuk meningkatkan daya tarik, dapat dilakukan dengan membuat desain dari segi kemasan yang bagus.

  1. Mockup Kaos

Desain pada kaos pada awal sebelum penggunaan mockup sangat banyak sekali klien yang melakukan komplain akibat desain yang disuguhkan tidak sesuai dengan kaos yang telah jadi. Untuk itu para pengusaha kaos kini telah menggunakan mockup sebagai tools yang dapat membantu untuk mengetahui gambaran desain kaos yang akan dikembangkan.

  1. Mockup Stationary

Stationary atau peralatan tulis juga membutuhkan bantuan mockup dalam mendesain produknya. Kini banyak sekali desain buku, kartu nama hingga kotak pensil yang beragam dan memiliki nilai estetika. Desainnya yang terbilang bagus dan unik akan membuat banyak pelanggan tertarik untuk membeli produk tersebut.

  1. Mockup Website dan Aplikasi

Tampilan website dan aplikasi yang di desain dengan menarik akan membuat para pengguna merasa nyaman untuk menggunakannya. Dalam proses mendesain tampilan website dan aplikasi
(user interface) tersebut dilakukan menggunakan mockup agar desain yang dibuat dapat sesuai dengan apa yang diinginkan.

Kekurangan dan Kelebihan  Mockup

Kekurangan Mockup

  1. Membutuhkan waktu yang cukup lama

Jika kamu masih belum terbiasa dalam membuat sebuah desain menggunakan tools ini untuk website, maka proses pembuatan akan memakan waktu yang cukup banyak.

  1. Harga template website yang mahal

Kamu sebenarnya dapat membeli template yang dijual oleh para UI/UX desainer, akan tetapi harganya cukup mahal yaitu berkisar Rp. 75.000 sampai Rp. 800.000 untuk sebuah template website tergantung dari jenis website.

Baca Juga : 

Kelebihan Mockup

  1. Dapat menerapkan kreasi tanpa batas

Keuntungan yang pertama adalah dapat menerapkan kreasi tanpa ada batasan. Seorang designer dapat menuangkan dan mengimplementasikan desainnya ke dalam model sebebas mungkin dan sebanyak mungkin tanpa ada batasan yang menghalanginya.

  1. Menghemat banyak waktu

Jika dibandingkan dengan kamu harus membuat produk akhir atau melakukan coding untuk membuat sebuah website, penggunaan tools ini dapat menghemat banyak waktu. Karena waktu yang dibutuhkan untuk membuat sebuah model pasti lebih sedikit ketimbang harus mengulang pembuatan produk yang sudah jadi.

  1. Hemat anggaran

Berikutnya, biaya produksi dapat ditekan jika kesalahan pada saat proses desain dapat diminimalisir. Bahkan untuk pembuatan mockup untuk website dapat kamu buat sendiri lho. Sehingga, tidak memerlukan sumber daya tambahan untuk membuat ulang sebuah produk dikarenakan desain yang dibuat kurang sesuai dengan apa yang diharapkan.

  1. Memberi gambaran yang realistis

Dalam perancangan sebuah model website, desainer akan membuat UI/UX semirip mungkin dengan produk final yang direncanakan, termasuk alur penggunaan aplikasi dengan menggunakan prototype. Permasalahan pada produk akan dapat segera diketahui ketika menggunakan prototype ini.

  1. Dapat mempermudah perbaikan atau penambahan fitur

Perbaikan atau penambahan fitur akan lebih mudah dilakukan ketika produk masih berupa rancangan dan belum masuk ke tahap penulisan kode. Karena jika penulisan kode sudah dilakukan maka perbaikan atau penambahan akan lebih sulit dilakukan dan akan berdampak pada waktu dan anggaran yang ada.

Cara Membuat Mockup dengan Adobe Photoshop CS6

  1. Buka gambar yang ingin dijadikan mockup menggunakan aplikasi Photoshop CS6 yang ada di PC. Anda bisa menggunakan desain buku, mug, T-shirt, dll. Pada contoh kali ini, kita akan membuat mockup sebuah buku.
  2. Setelah itu, kita akan melakukan trace pada bidang tempat gambar akan ditempelkan. Gunakan Pen Tools untuk melakukannya. Saat Pen Tools diaktifkan, ubah settingannya menjadi Shape.
  3. Setelah itu, ikuti bentuk objek yang ada di gambar atau dalam hal ini buku yang terletak di tumpukkan atas seperti pada contoh gambar.
  4. Setelah semua sisi sudah ditutup menggunakan Shape, langkah selanjutnya adalah memilih Convert to smart object. Nantinya, akan muncul layer baru yang merupakan bagian dari bidang yang kita bentuk menggunakan Shape
  5. Jika sudah, aktifkan layer berupa smart object yang baru saja kita buat dengan cara klik 2x pada layer tersebut. Nantinya, Anda akan diarahkan ke jendela yang sudah terdapat Shape sebelumnya.
  6. Setelah itu, masukkan gambar pada bidang berwarna merah yang sudah kita bentuk barusan. Caranya adalah dengan klik Place > Pilih gambar yang ingin Anda gunakan > Open.
  7. Anda akan melihat gambar tersebut sudah bisa mengikuti bidang merah yang kita buat sebelumnya karena kita sudah mengaturnya menjadi smart object.
  8. Setelah itu sesuaikan bidang gambar tersebut dengan buka yang ada di layer lainnya dengan cara distort. Untuk melakukannya, silakan klik kombinasi keyboard Ctrl + T. Setelah itu geser sesuai dengan objek buku yang ada di bawahnya.
  9. Jika desain anda telah selesai, silakan Save.
  10. Untuk buku yang ada di bawahnya bisa Anda ubah dengan cara yang sama seperti buku di atasnya. Silakan ulangi cara di atas untuk menerapkan pada bidang buku di bawahnya.

Mockup kini menjadi tools yang sangat membantu khususnya di bidang desain produk. Kemunculan mockup ini sangat membantu dalam menampilkan desain agar terlihat lebih nyata dan sesuai dengan imajinasi klien.  Selain itu, dengan adanya tools ini sangat memudahkan dan efisien dalam pengerjaan desain produk.