Desain Cover CD/DVD dan Presentasi Mockup

Kali ini, kita akan belajar cara mendesain sebuah cover CD sederhana menggunakan stock foto. Hasilnya akan kita sajikan dalam sebuah mockup cover CD buatan sendiri.

[hr]

Preview

Berikut adalah tampilan cover CD yang akan kita buat. Cover ditampilkan dalam mockup PSD.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Menengah
  • Software yang Digunakan: Adobe Photoshop CC
  • Teknik yang Dipelajari: Layer Styles, Tool Pen, Transformasi.
  • Lama Pengerjaan: 25 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut. Jika Anda tidak ingin membelinya, silakan cari alternatif stock yang sesuai.

[hr]

Tutorial

Langkah 1: Persiapan File

Buat file baru di Photoshop dengan ukuran 12 cm × 12 cm.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 2: Menggunakan Foto

Ambil gambar stock foto, lalu paste ke atas kanvas.Atur ukurannya dengan perintah Transformasi (Ctrl + T) hingga diperoleh komposisi foto yang menarik. Menggunakan foto bagus akan membuat proses ini lebih cepat dan sederhana.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 3: Label

Ambil label lalu paste ke salah satu pojok kanvas. Anda bisa membuatnya sendiri menggunakan tool teks dan tool Rectangular Shape jika mau.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 4: Editing Foto

Klik ikon ikon Add Adjustment Layer dan pilih Photo Filter. Oops! Maaf di screenshot ini pilihannya terpotong.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 5

Pilih tipe filter photo Warming. Lukis hitam di sisi kanan untuk menyembunyikan efeknya. Sekarang, efek filter photo akan mempengaruhi sisi kiri saja.

Tutorial Photoshop - Desain Cover CD dan Mockup

Di bawah adalah perbandingan sebelum dan setelah penambahan filter photo.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 6: Teks

Tambahkan teks. Pilih font yang sesuai.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 7

Tambahkan lagi teks untuk judul album. Pastikan ada kontras dengan teks sebelumnya. Bisa berupa tipe font atau warna. Di panel Character, atur ukuran spacing agar lebar teks judul CD sama dengan nama band.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 8

Tambahkan garis tipis di antara nama band dan judul album.

Tutorial Photoshop - Desain Cover CD dan Mockup

Inilah hasil yang kita peroleh.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 9: Desain Mockup

Untuk mempresentasikannya dalam bentuk CD, kita perlu menggunakan foto asli cover CD. Cara mudah adalah dengan membeli stock foto yang sudah ada. Atau, jika Anda punya waktu bisa saja dengan mengambil foto sendiri. Dengan tool Pen, buat layer shape baru menelusuri cover depan CD.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 10

Lakukan secara hati-hati hingga tertutupi. Warna layer shape dipilih hijau terang untuk mempermudah proses editing. Anda bisa memilih warna lain, tidak ada bedanya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 11

Lakukan juga pada cover pada CD. Buat layer shape yang sama. Dimulai dari bentuk lingkaran lalu dimodifikasi.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 12

Tambahkan lagi lingkaran kecil. Pilih mode path Subtract untuk memotong layer shape yang ada.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 13

Lakukan lagi untuk lingkaran kecil pada CD.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 14

Inilah hasil yang kita peroleh. Kedua cover harus tertutupi oleh layer shape.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 15

Kembali ke file cover. Seleksi semua (Ctrl + A) lalu tekan Ctrl + Shift + C untuk menyimpannya ke Clipboard. Di file mockup, tekan Ctrl + V untuk memasukkan desain cover ke kanvas. Klik kanan layer dan pilih Convert to Smart Object.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 16

Tekan Ctrl + T untuk perintah transformasi. Tahan Ctrl dan geser keempat pojoknya hingga cover menempel tepat pada cover depan CD.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 17

Klik ganda cover CD yang baru saja kita simpan dan aktifkan Gradient Overlay. Ini akan memberi pencahayaan pada tampilan cover.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 18

Pastikan layer desain cover berada tepat di atas layer shape cover depan. Ubah layer desain cover menjadi Clipping Mask dengan Ctrl + Alt + G. Sekarang, desain cover berada di dalam cover, tidak akan keluar dari batas yang telah ditentukan di awal.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 19

Buat layer baru. Ctrl-click shape dasar cover CD. Klik Edit > Stroke.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 20

Beri stroke cukup tebal dengan posisi Outside.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 21

Geser beberapa pixel ke kiri agar sisi kanan cover sedikit tertutupi garis. Ubah layer menjadi Clipping Mask (Ctrl + Alt + G). Turunkan Opacity layer ke 30%. Garis ini akan membuat sisi cover terlihat 3d dan realistis.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 22

Buat layer baru. Lukis garis hitam di bagian atas dan bagian bawah dengan tool brush lembut.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 23

Ubah layer jadi Clipping Mask (Ctrl + Alt + G). Ini menjadi bayangan lembut di kertas cover.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 24

Buat layer baru dan ubah menjadi Clipping Mask (Ctrl + Alt + G). Aktifkan tool Gradient lalu buat gradasi secara diagonal.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 25

Ubah blend mode layer menjadi Multiply. Jika perlu, turunkan Opacity layer.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 26

Buat layer shape baru melengkung dan simpan di sisi kanan menutupi cover.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 27

Tambahkan layer style Gradient Overlay.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 28

Turunkan Fill layer menjadi 0%.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 29

Inilah tampilan cover dengan kilauan di atasnya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 30

Kita akan membuat cover bagian dalam. Cukup sederhana, hanya menengahkan posisi teks.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 31

Masukkan desain cover dalam ke kanvas. Simpan tepat di atas layer shape lingkaran yang menutupi bentuk CD. Ubah layer menjadi Smart Object dengan cara klik dan pilih Convert to Smart Object.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 32

Klik ganda layer lalu tambahkan Gradient Overlay.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 33

Ubah layer cover dalam menjadi Clipping Mask (Ctrl + Alt + G).

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 34

Buat layer baru dan lukis bayangan hitam di bagian bawah (dekat lantai) dan sisi kiri (belakang tutup CD).

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 35

Ubah lagi layer menjadi Clipping Mask (Ctrl + Alt + G).

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 36

Perhatikan bahwa cover dalam ini terlihat seperti menembus tutup CD. Kita akan memperbaiknya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 37

Mulai dengan membuat layer shape putih sesuai dengan lebar tutup CD yang terpotong. Tidak perlu terlalu tepat ukurannya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 38

Copy bentuk lingkaran dari CD lalu gabungkan ke dalamnya. Ubah mode pathnya menjadi Intersect.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 39

Turunkan Opacity layer shape ini menjadi 30%. Perhatikan bahwa kita sudah berhasil membuat ilusi seolah-olah cover dalam berada di balik tutup CD.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 40

Tambahkan lagi garis hitam di layer baru lalu turunkan Opacity-nya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 41

Perhatikan juga bahwa kita sama sekali tidak melihat sisi belakang CD case di balik lingkaran CD. Biasanya, area tersebut transparan sehingga kita masih bisa melihat sedikit di belakangnya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 42

Kita perbaiki dengan menduplikasi warna garis yang ada di pojok kanan atas tutup CD (ditandai panah hitam) dan menyimpannya di belakang cover dalam CD.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 43

Buat layer baru di balik cover dalam lalu duplikasi tampilan warna CD case. Turunkan Opacity layer untuk memberi kesan tidak terlalu transparan. Buat lagi layer baru dan tambahkan bayangan CD di CD case.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 44

Buat layer baru lalu lukis hitam di bawah CD untuk memperkuat bayangannya.

Tutorial Photoshop - Desain Cover CD dan Mockup

Langkah 45

Seleksi bagian bayangan yang dibutuhkan lalu klik ikon Add Layer Mask di bagian bawah panel Layers untuk menyembunyikan pixel yang tidak dibutuhkan.

Tutorial Photoshop - Desain Cover CD dan Mockup
Tutorial Photoshop - Desain Cover CD dan Mockup

[hr]

Hasil Akhir

Berikut adalah tampilan cover CD yang kita buat dalam mockup PSD.

Tutorial Photoshop - Desain Cover CD dan Mockup

Alternatif

Berikut adalah alternatif lain cover CD. Untuk menggantinya, cukup dengan mengedit Smart Object untuk desain front cover dan inner cover. Gambar diambil dari shutterstock.

Tutorial Photoshop - Desain Cover CD dan Mockup

Studi Kasus Mendesain Mockup Buku Portfolio

Di sini saya akan menunjukkan beberapa tahapan proses kerja yang dilakukan ketika mendesain mockup buku portfolio untuk Vandelay Premier. Mockup ini dibuat dalam format PSD dan menggunakan fitur Smart Object dari Photoshop.

[hr]

Mencari Referensi

Vandelay Premier meminta mockup untuk buku portfolio bertipe landscape (memanjang) dengan ukuran 8.5 inchi × 5.5 inchi. Ukuran ini mungkin umum digunakan di Amerika namun tidak di Indonesia. Saya mencoba membuka koleksi buku di rumah, buku cerita anak memiliki ukuran yang mirip namun tidak sama persis.

Awalnya saya berencana membuat buku sendiri dengan ukuran tadi, namun menemukan bahwa buku brosur Hypermart ternyata tepat setengah ukuran ini. Jadi, saya ambil penggaris dan memotongnya.

Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio

Selanjutnya, saya atur posisi buku untuk referensi desain dan memfotonya. Tidak ada pencahayaan khusus, saya melakukannya di ruang tamu rumah.

Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio

[hr]

Desain di Photoshop

Di Photoshop, proses desain dimulai dengan men-trace setiap elemen buku menggunakan tool Pen lalu mengubahnya menjadi shape. Anda bisa menggunakan program vektor semacam illustrator jika lebih nyaman dengan kontrol tool vektor di sana. Agar mudah dibedakan, semua halaman menggunakan warna yang unik dan mencolok.

Studi Kasus Mendesain Mockup Buku Portfolio

Buat layer baru di atas halaman dan ubah menjadi Clipping Mask (Ctrl + Alt + G). Secara manual, lukis bayangan di bagian-bagian tertentu halaman.

Studi Kasus Mendesain Mockup Buku Portfolio

Ulangi ini pada setiap halaman.

Studi Kasus Mendesain Mockup Buku Portfolio

Buat juga halaman buku di sisi lainnya.

Studi Kasus Mendesain Mockup Buku Portfolio

Buat file baru dengan ukuran tepat satu halaman buku portfolio, 8.5 inchi × 5.5 inchi. Masukkan ke atas gambar dengan cara geser file langsung ke dalam kanvas untuk menyimpannya sebagai layer Smart Object.

Studi Kasus Mendesain Mockup Buku Portfolio

Lakukan transformasi (Ctrl + T). Klik kanan dan pilih Warp. Atur ukurannya agar desain halaman terlihat menempel pada halaman shape vektor yang telah kita buat. Simpan desain dalam bentuk Smarty Object ini agar berada di belakang bayangan di halaman kertas.

Studi Kasus Mendesain Mockup Buku Portfolio

Lakukan hal yang sama pada bagian lainnya.

Studi Kasus Mendesain Mockup Buku Portfolio

Tambahkan juga desain halaman sisi lainnya.

Studi Kasus Mendesain Mockup Buku Portfolio

Akhirnya, kita bisa menutupi latar dengan warna solid, misalnya putih.

Studi Kasus Mendesain Mockup Buku Portfolio

Tambahkan bayangan. Anda perlu melukis bayangan secara manual untuk memperoleh tampilan yang realistis. Anda tidak bisa mengandalkan Layer Style Drop Shadow atau sejenisnya.

Studi Kasus Mendesain Mockup Buku Portfolio

Setelah selesai, saya tambahkan tekstur pasir di belakang buku untuk menunjukkan pada klien kemungkinan-kemungkinan tampilan yang bisa dihasilkan oleh mockup ini.

Studi Kasus Mendesain Mockup Buku Portfolio

[hr]

Hasil Akhir

Ini adalah hasil akhir yang saya peroleh. Saya mendesain satu set mockup yang terdiri dari 5 tampilan.

Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio
Studi Kasus Mendesain Mockup Buku Portfolio

[hr]

Kesimpulan

Semoga dari studi kasus ini Anda bisa mempelajari langkah-lengkah pembuatan mockup di Photoshop. Untuk memahami lebih detail tentang mockup PSD, Anda bisa mencoba membongkar file-file mockup gratis di PSDfreemium.

Mendesain Mockup Majalah dengan InDesign dan Photoshop

Tutorial ini secara lengkap menunjukkan proses desain sebuah majalah secara lengkap. Dimulai dengan mendesain layout majalah majalah dengan InDesign, lalu membuat mockup-nya di Photoshop. Dengan mockup, majalah bisa ditampilkan secara nyata tanpa membuat tampilan fisiknya secara langsung. Tutorial ini ditulis ekslusif untuk Psdtuts+.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Mockup Majalah dengan InDesign dan Photoshop

[hr]

Sebagian Langkah dalam Tutorial

Dimulai dengan proses desain layout majalah di InDesign. Prosesnya sangat standar, menggunakan karakter panel, menambahkan gambar, menambahkan nomor halaman otomatis, dan semacamnya.

Mendesain Mockup Majalah dengan InDesign dan Photoshop
Mendesain Mockup Majalah dengan InDesign dan Photoshop
Mendesain Mockup Majalah dengan InDesign dan Photoshop
Mendesain Mockup Majalah dengan InDesign dan Photoshop

Selanjutnya, di Photoshop gambar majalah ditrace dengan tool Pen secara manual. Desain dari InDesign diekspor ke Photoshop lalu disimpan di atas salah satu halaman.

Mendesain Mockup Majalah dengan InDesign dan Photoshop
Mendesain Mockup Majalah dengan InDesign dan Photoshop
Mendesain Mockup Majalah dengan InDesign dan Photoshop
Mendesain Mockup Majalah dengan InDesign dan Photoshop

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Bank Account Book Mockup

This time, our freebie is a PSD mockup of a bank account book. This mockup is huge, 3072 px × 2304 px or 7 MP at 300 dpi. You can even print it commercially. This mockup works on Photoshop CS4 and above.

Bank Account Book Mockup

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/download/920/”%5DDownload PSD[/ilink] (3.5 MB)

[hr]

Instruction

In this short tutorial, I will show you how to edit the mockup.

Step 1

To edit the cover design, double click cover layer inside design group layer.

Bank Account Book Mockup

You may found a warning dialog box. Ignore it, just click OK.

Bank Account Book Mockup

Step 2

Paste your design here.

Bank Account Book Mockup

Step 3

Save and close the design file to automatically update the cover design.

Bank Account Book Mockup

Final Result

You can also add custom background above the Background layer.

Bank Account Book Mockup

ID Card PSD mockup

I designed this id card mockup about a months ago for an event. This is just a pro bono work, but I really enjoy doing it. No pressure and no client watching over my shoulder.🙂

This PSD is designed using Photoshop CS5. The Smart Object feature may not work in earlier version.

ID Card Mockup
ID Card Mockup

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/download/911/”%5DDownload PSD[/ilink] (4,3 MB)

[hr]

Instruction

In this short tutorial, I will show you how to edit this mockup.

Step 1

Double click layer double click here.

ID Card Mockup

You may find this dialog box. If you do, just click OK.

ID Card Mockup

Step 2

The ID card design is opened as a new file. Paste your design here.

ID Card Mockup

Final Result

Once you’re done with the design, save the file and close it. The ID card is automatically updated.

ID Card Mockup