Steven Snell, pemilik situs Vandelay Design dan pendiri Designm.ag, sekarang mendirikan situs penyedia resource bagi para desainer, Vandelay Premier. Saya beruntung menjadi salah kontributor awal untuk pembuatan mockup PSD. Tutorial kali ini akan memperlihatkan pembuatan mockup laptop untuk Vandelay Premier.
Di tutorial ini kita akan menggunakan tool-tool sederhana seperti tool rectangle, rounded rectangle, dan pen untuk menggambar sebuah laptop. Anda diharapkan sudah mengenal dasar-dasar penggunaan vektor di Photoshop.
Preview
Sebelum mulai lihat terlebih dahulu gambar laptop yang akan kita buat. Laptop ini berdasarkan pada model Acer Aspire yang saya miliki di rumah dengan disertai sedikit modifikasi. Klik pada gambar untuk melihat versi besar gambar ini, klik di sini untuk melihat resource ini di Vandelay Premier.
Langkah 1
Mulai dengan membuat file baru berukuran 1500×1200 px. Gambar sebuah kotak di tengah kanvas menggunakan tool rounded rectangle dengan radius 15 px. Area ini akan menjadi tempat layar laptop.
Langkah 2
Beri layer styles Bevel and Emboss untuk memberi kesan 3D dan Gradient Overlay agar warna laptop tidak terlalu datar.
Langkah 3
Ambil screenshot dari layar dengan menekan tombol PrintScreen lalu paste ke atas area tadi. Jika Anda ingin menggunakan gambar pastikan proporsinya sesuai dengan resolusi layar. Berhubung projek ini untuk Vandelay Design, saya ambil saja screenshot situsnya.
Langkah 4
Beri Inner Shadow pada layar. Ini akan memberikan kesan kedalaman sehingga gambar tidak terkesan ditempel begitu saja.
Langkah 5
Sekarang membuat bagian depan laptop. Mulai dengan menggambar sebuah persegi lalu beri Gradient Overlay dari abu ke putih.
Langkah 6
Aktifkan tool direct selection, pilih kedua titik di bagian bawah dan lakukan transformasi agar keduanya mendekat.
Langkah 7
Klik bagian tengah sisi bawah persegi dengan tool pen untuk menambah titik baru lalu geser ke bawah.
Langkah 8
Di belakang persegi, gambar sebuah rounded rectangle dengan warna abu-abu tua.
Langkah 9
Sekali lagi buat sebuah persegi di bawah lalu transformasi bagian bawahnya. Beri Gradient Overlay seperti terlihat di bawah.
Langkah 10
Buat sebuah persegi di bagian atas. Lakukan transformasi perspektif hingga diperoleh bidang datar untuk keyboard.
Langkah 11
Dari google image cari gambar layout keyboard. Anda akan mendapatkan banyak gambar hanya dengan keyword “US keyboard layout”. Dengan tool rectangle, buat shape yang menutupi semua tombol-tombol keyboard.
Langkah 12
Seleksi semua path yang dihasilkan lalu copy dan paste ke atas gambar laptop.
Langkah 13
Lakukan proses transformasi hingga bentuk keyboard seperti di bawah.
Langkah 14
Aktifkan layer style Bevel and Emboss untuk memberi efek 3D dan sedikit Stroke untuk memberi garis di sekeliling keypad.
Langkah 15
Buat lagi persegi dan lakukan transformasi hingga bentuknya mengelilingi keyboard. Turunkan Fill layer ke 0% dan beri Bevel and Emboss.
Langkah 16
Dengan tool rectangle buat bentuk touchpad.
Langkah 17
Lakukan proses transformasi hingga touchpad menempel pada bidang dan beri layer styles berikut.
Langkah 18
Untuk memberi kesan 3D, buat seleksi di pojok laptop dan isi dengan putih. Turunkan opacity ke 50% dan beri gaussian blur agar terlihat lembut. Ulangi proses ini pada pojok satu lagi.
Langkah 19
Buat beberapa shape rounded rectangle di sisi bawah laptop. Lakukan transformasi skew hingga bentuknya terlihat menempel pada bidang. Ulangi pada bagian satu lagi. Shape ini akan menjadi ventilasi pembuangan udara panas.
Langkah 20
Untuk memberi kesan 3D, buat lagi highlight dengan melukis putih di pojok bawah laptop. Turunkan opacity ke 50% agar tetap terlihat lembut.
Langkah 21
Buat shape hingga membentuk garis di bagian depan laptop. Gunakan warna abu-abu gelap.
Langkah 22
Dengan tool pen, tambah dua titik pada garis. Di antara kedua titik ini, tambah lagi dua titik lalu geser ke bawah. Lihat gambar di bawah untuk referensi.
Langkah 23
Beri layer style Bevel and Emboss agar diperoleh tampilan 3D pada shape tadi.
Langkah 24
Di atas shape gambar garis hitam untuk memperkuat perbedaan bahan bagian atas dan bawah.
Langkah 25: Menggambar Slot Audio
Sekarang kita membuat lubang untuk audio. Mulai dengan membuat lingkaran abu-abu dan beri Bevel and Emboss.
Langkah 26
Sekali lagi, buat lingkaran lebih kecil di dalam lingkaran tadi dan beri Bevel and Emboss.
Langkah 27
Duplikasi lubang ini dua kali.
Langkah 28
Gambar sebuah rounded rectangle lalu lakukan transformasi skew hingga bentuknya terlihat seperti menempel pada bidang depan laptop. Beri layer style Color Overlay dan Outer Glow dengan warna sama untuk menghasilkan kesan lampu menyala. Layer style stroke akan memberi kesan 3D.
Langkah 29
Ulangi proses ini untuk membuat lampu berikutnya, hanya saja gunakan warna yang berbeda.
Langkah 30: Menggambar Engsel Layar
Gambar shape berbentuk setengah tabung seperti di bawah dan beri Gradient Overlay putih ke hitam.
Langkah 31
Duplikasi shape tadi dan beri layer style Gradient Overlay, kali ini gunakan warna bergantian putih dan abu-abu seperti di bawah. Turunkan opacity Gradient Overlay dan ubah fill layer ke 0%. Ini akan menambahkan gradasi baru pada shape dan memberi kesan metalik.
Langkah 32
Buat lagi shape seperti tadi tadi sedikit lebih panjang. Gunakan warna hitam. Ini akan memberi kesan bagian belakang engsel sehingga terlihat 3D.
Langkah 33
Ambil seleksi shape hitam yang tadi kita buat dengan memilihnya lalu tekan Ctrl + Enter. Buat layer baru lalu isi dengan hitam dan beri Gaussian Blur. Ini menjadi bayangan engsel pada layar.
Langkah 34
Ulangi langkah-langkah tadi untuk membuat bentuk setengah tabung yang lebih besar.
Langkah 35
Badan laptop menempel pada engsel, tentu saja kita perlu membuat bayangan lagi. Buat seleksi persegi, isi dengan hitam dan beri gaussian blur. Turunkan opacity layer bayangan ke 50%.
Langkah 36: Webcam
Buat sebuah rounded rectangle di atas layer. Warna yang digunakan tidak jadi masalah. Beri Bevel and Emboss lalu turunkan fill layer ke 0%.
Langkah 37
Pembuatan lensa webcam sebetulnya tidak sulit. Kita tinggal menumpuk beberapa lingkaran dengan warna yang sedikit berbeda. Lihat gambar di bawah untuk referensi warna yang saya gunakan.
Langkah 38
Di sebelah lensa kita buat juga sebuah ikon kamera. Mudah sekali kita tinggal membuat sebuah rounded rectangle. Di atasnya tambah lagi rounded rectangle dan beri transformasi perspektif. Di tengah, buat sebuah lingkaran dengan mode subtract.
Langkah 39
Walaupun sudah cukup membentuk laptop, saya masih ingin memperbaiki beberapa detail kecil. Salah satunya menambah kedalaman layar. Buat shape persegi mengelilingi layar lalu beri layer style Bevel and Emboss. Turunkan fill layer ke 0%.
Langkah 40
Ubah shape tadi ke seleksi. Buat layer baru lalu lukis sisi atas seleksi menggunakan brush lembut dengan warna hitam. Anda bisa melihat dalam gambar di bawah bahwa sekarang area layar terlihat lebih dalam. Coba bandingkan dengan laptop di bawahnya yang tidak dilukis hitam di bagian atas dan bawahnya.
Bagian atas dan bawah layar dilukis hitam
Bagian atas dan bawah layar kosong
Langkah 41: Membuat pantulan cahaya
Gandakan shape bentuk layar dan hapus semua layer stylenya. Dengan tool pen buat shape seperti di samping. Ubah mode shape ke intersection. Beri Gradient Overlay hitam ke putih. Ubah blend mode layer ke Screen untuk mempertahankan hanya warna terangnya.
Langkah 42
Turunkan opacity layer ke 20%.
Langkah 43: Bayangan di keyboard
Dari pantulan di atas kita mengetahui bahwa ada sumber cahaya di kanan atas. Dengan kondisi ini, pasti layar meninggalkan bayangan juga pada keyboard di bawahnya. Lukis bayangan seperti di bawah.Ambil seleksi dari bentuk shape bidang keyboard dan beri layer mask. Turunkan opacity bayangan ke 10%.
Langkah 44: Kaki Laptop
Buat dua buah shape rounded rectangle hitam dan simpan seperti di bawah. Ulangi proses ini untuk sisi satu lagi.
Langkah 45: Bayangan
Pertama, kita buat warna hitam kecil tepat di bawah kaki laptop. Sekali lagi, menggunakan brush dengan opacity lebih rendah (30%), buat bayangan hitam yang lebih besar.
Langkah 46
Buat seleksi elips di bagian bawah laptop. Isi dengan hitam lalu beri gaussian blur yang cukup besar.
Langkah 47: Latar dan Lantai
Pembuatan latar di sini tidak rumit. Saya ingin menggunakan warna abu-abu agar desain bisa tetap fokus pada laptop. Buat saja gradasi radial dari abu-abu ke putih pada Background.
Langkah 48
Tekan Ctrl + J untuk menggandakan Background. Lakukan transformasi (Ctrl + T) dan ubah ukurannya hingga seperti di bawah.
Langkah 49
Terakhir, saya tambahkan juga adjustment layer Hue/Saturation dan mengaktifkan Colorize. Geser nilai Hue dan Saturation untuk mengubah warna latar tanpa merusak gambar aslinya.
Hasil Akhir
Akhirnya, inilah hasil akhir yang kita peroleh. Klik pada gambar untuk melihat gambar dalam ukuran lebih besar. Jika Anda ingin memperoleh file PSD mockup laptop ini, silakan bergabung menjadi anggota di Vandelay Premier seharga $9 per bulan. Anda tidak akan hanya memperoleh file ini tapi juga semua resource yang tersedia.
mantap! detail sekali bg, hampir tak ad yg ketinggalan..nice!
Terima kasih.
Like and realy like this mas ., ada beberapa tehnik yang baru saya tahu
Begitu ya? Menurut saya, secara teknik ini semua biasa saja, sangat dasar.
wow, great job!
ini dia tutorial photoshop bhs indonesia yg paling ok..
sangat realistis…
di tunggu tutorial lainnya
#praktek dulu ah…
Di situs ini tutorial baru biasanya publish setiap minggu. Tunggu saja.
wOw, keren abz tutorx mas jep. smua tutor yg mas share bnr” brkualitas + realistis, keep share mas jep …
Terima kasih. Di situs ini tutorial baru publish setiap minggu.
sama” mas…
Ia mas, sya tw mas. sya emg pnggemar posting” mas jeprie, jdi sya slalu brkunjung k’blog mas untuk update posting. Posting mas emg kren” BGT, sya jg ad plajari buku hsil tulisan mas. Bner” mmbntu sya blajar, thx mas jep …
wah, keren mas jeprie..
tapi touchpad nya kelihatan kecil mas..
Ini pengaruh perspektif. Saya tidak menggunakan referensi laptop langsung jadi memang mungkin salah.
Photoshop emang powerfull untuk manipulasi image.
Mas Jeprie, boleh usul nggak? keberatan nggak mas, kalau tutorialnya bisa kita download, dalam bentuk PDF misalnya.
Maksudnya biar bisa dipelaari offline dan awet, terima kasih sebelumnya Mas.
Saya tidak berniat menyediakan tutorial dalam bentuk download PDF. Menurut perkiraan saya, berpotensi mengurangi trafic situs ini. Jika untuk pribadi, silakan saja dibuat sendiri dan sebaiknya tidak didistribusikan.
Nanti, saya berencana memonetisasi situs ini. Bisa lewat iklan atau mungkin membuat keanggotaan, yang pasti target sekarang memperbesar trafic situs.
Ops, rupanya harus menjadi anggota di Vandelay Premier.
Tutorial ini memang berdasarkan pada projek mockup dengan Vandelay Premier.
Nice!!! Detil sekali…
wow….!!!
mau dunk yang lainnya…..
ada lagi gak????
Lihat saja tutorial yang lainnya.
Terima kasih atas tutorialnya mas Jeprie. Anak saya -Yudhis- sudah mencobanya dan berhasil. Kami mendokumentasikan kegiatan belajarnya di sini: http://bit.ly/d82hcJ
Senang belajar di Desain Digital ini.. ^_^
Sama-sama, saya penasaran juga dengan karyanya yang lain.
nice tutorial. sedikit koreksi, ukuran touchpadnya sepertinya agak kekecilan mas
Terima kasih. Menggambar laptop ini memang tidak menggunakan referensi foto. Ada beberapa hal yang perlu diperbaiki.
bagus…
tapi bisa minta diajarkan sekalian yang dalam bentuk 3D gitu.
trus di “render” muter-muter.
laptopnya buka-tutup.
trus bisa disimpan jadi movie.
lagi pengen bikin mockup 3D ipad 3 nih.
bisa nggak ya …?