Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Langkah 1


Mulai dengan membuat file baru berukuran 1500x1200 px. Gambar sebuah kotak di tengah kanvas menggunakan tool rounded rectangle dengan radius 15 px. Area ini akan menjadi tempat layar laptop.
Menggambar Laptop dengan Photoshop

Langkah 2


Beri layer styles Bevel and Emboss untuk memberi kesan 3D dan Gradient Overlay agar warna laptop tidak terlalu datar.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Langkah 4


Beri Inner Shadow pada layar. Ini akan memberikan kesan kedalaman sehingga gambar tidak terkesan ditempel begitu saja.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 5


Sekarang membuat bagian depan laptop. Mulai dengan menggambar sebuah persegi lalu beri Gradient Overlay dari abu ke putih.
Menggambar Laptop dengan Photoshop

Langkah 6


Aktifkan tool direct selection, pilih kedua titik di bagian bawah dan lakukan transformasi agar keduanya mendekat.
Menggambar Laptop dengan Photoshop

Langkah 7


Klik bagian tengah sisi bawah persegi dengan  tool pen untuk menambah titik baru lalu geser ke bawah.
Menggambar Laptop dengan Photoshop

Langkah 8


Di belakang persegi, gambar sebuah rounded rectangle dengan warna abu-abu tua.
Menggambar Laptop dengan Photoshop

Langkah 9


Sekali lagi buat sebuah persegi di bawah lalu transformasi bagian bawahnya. Beri Gradient Overlay seperti terlihat di bawah.
Menggambar Laptop dengan Photoshop

Langkah 10


Buat sebuah persegi di bagian atas. Lakukan transformasi perspektif hingga diperoleh bidang datar untuk keyboard.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 12


Seleksi semua path yang dihasilkan lalu copy dan paste ke atas gambar laptop.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 13


Lakukan proses transformasi hingga bentuk keyboard seperti di bawah.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 14


Aktifkan layer style Bevel and Emboss untuk memberi efek 3D dan sedikit Stroke untuk memberi garis di sekeliling keypad.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 15


Buat lagi persegi dan lakukan transformasi hingga bentuknya mengelilingi keyboard. Turunkan Fill layer ke 0% dan beri Bevel and Emboss.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 16


Dengan tool rectangle buat bentuk touchpad.
Menggambar Laptop dengan Photoshop

Langkah 17


Lakukan proses transformasi hingga touchpad menempel pada bidang dan beri layer styles berikut.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Langkah 20


Untuk memberi kesan 3D, buat lagi highlight dengan melukis putih di pojok bawah laptop. Turunkan opacity ke 50% agar tetap terlihat lembut.
Menggambar Laptop dengan Photoshop

Langkah 21


Buat shape hingga membentuk garis di bagian depan laptop. Gunakan warna abu-abu gelap.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 23


Beri layer style Bevel and Emboss agar diperoleh tampilan 3D pada shape tadi.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 24


Di atas shape gambar garis hitam untuk memperkuat perbedaan bahan bagian atas dan bawah.
Menggambar Laptop dengan Photoshop

Langkah 25: Menggambar Slot Audio


Sekarang kita membuat lubang untuk audio. Mulai dengan membuat lingkaran abu-abu dan beri Bevel and Emboss.
Menggambar Laptop dengan Photoshop

Langkah 26


Sekali lagi, buat lingkaran lebih kecil di dalam lingkaran tadi dan beri Bevel and Emboss.
Menggambar Laptop dengan Photoshop

Langkah 27


Duplikasi lubang ini dua kali.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 29


Ulangi proses ini untuk membuat lampu berikutnya, hanya saja gunakan warna yang berbeda.
Menggambar Laptop dengan Photoshop

Langkah 30: Menggambar Engsel Layar


Gambar shape berbentuk setengah tabung seperti di bawah dan beri Gradient Overlay putih ke hitam.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 32


Buat lagi shape seperti tadi tadi sedikit lebih panjang. Gunakan warna hitam. Ini akan memberi kesan bagian belakang engsel sehingga terlihat 3D.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Langkah 34


Ulangi langkah-langkah tadi untuk membuat bentuk setengah tabung yang lebih besar.
Menggambar Laptop dengan Photoshop

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%.
Menggambar Laptop dengan Photoshop

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%.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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%.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop
Bagian atas dan bawah layar dilukis hitam

Menggambar Laptop dengan Photoshop
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.
Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Menggambar Laptop dengan Photoshop

Langkah 42


Turunkan opacity layer ke 20%.
Menggambar Laptop dengan Photoshop

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%.
Menggambar Laptop dengan Photoshop

Langkah 44: Kaki Laptop


Buat dua buah shape rounded rectangle hitam dan simpan seperti di bawah. Ulangi proses ini untuk sisi satu lagi.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Langkah 46


Buat seleksi elips di bagian bawah laptop. Isi dengan hitam lalu beri gaussian blur yang cukup besar.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Langkah 48


Tekan Ctrl + J untuk menggandakan Background. Lakukan transformasi (Ctrl + T) dan ubah ukurannya hingga seperti di bawah.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

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.
Menggambar Laptop dengan Photoshop

Comments

  1. mantap! detail sekali bg, hampir tak ad yg ketinggalan..nice!

    ReplyDelete
  2. Like and realy like this mas ., ada beberapa tehnik yang baru saya tahu :)

    ReplyDelete
  3. Begitu ya? Menurut saya, secara teknik ini semua biasa saja, sangat dasar.

    ReplyDelete
  4. wow, great job! :D

    ini dia tutorial photoshop bhs indonesia yg paling ok.. :D

    sangat realistis...

    di tunggu tutorial lainnya ;)

    #praktek dulu ah...

    ReplyDelete
  5. wOw, keren abz tutorx mas jep. smua tutor yg mas share bnr" brkualitas + realistis, keep share mas jep ...

    ReplyDelete
  6. wah, keren mas jeprie..
    tapi touchpad nya kelihatan kecil mas..
    :)

    ReplyDelete
  7. Ini pengaruh perspektif. Saya tidak menggunakan referensi laptop langsung jadi memang mungkin salah.

    ReplyDelete
  8. Di situs ini tutorial baru biasanya publish setiap minggu. Tunggu saja.

    ReplyDelete
  9. Terima kasih. Di situs ini tutorial baru publish setiap minggu.

    ReplyDelete
  10. 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.

    ReplyDelete
  11. Ops, rupanya harus menjadi anggota di Vandelay Premier.

    ReplyDelete
  12. 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 ...

    ReplyDelete
  13. 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.

    ReplyDelete
  14. Tutorial ini memang berdasarkan pada projek mockup dengan Vandelay Premier.

    ReplyDelete
  15. wow....!!!

    mau dunk yang lainnya.....
    ada lagi gak????

    ReplyDelete
  16. Lihat saja tutorial yang lainnya.

    ReplyDelete
  17. 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.. ^_^

    ReplyDelete
  18. Sama-sama, saya penasaran juga dengan karyanya yang lain.

    ReplyDelete
  19. nice tutorial. sedikit koreksi, ukuran touchpadnya sepertinya agak kekecilan mas :D

    ReplyDelete
  20. Terima kasih. Menggambar laptop ini memang tidak menggunakan referensi foto. Ada beberapa hal yang perlu diperbaiki.

    ReplyDelete
  21. [...] wordpress. Bisa menggambar laptop di Photoshop bukan lagi skill yang hebat, semua bisa mengikuti tutorialnya dengan gratis. Skill yang dibutuhkan saat ini berbeda dengan lima tahun yang lalu. Anda harus terus belajar, [...]

    ReplyDelete
  22. [...] wordpress. Bisa menggambar laptop di Photoshop bukan lagi skill yang hebat, semua bisa mengikuti tutorialnya dengan gratis. Skill yang dibutuhkan saat ini berbeda dengan lima tahun yang lalu. Anda harus terus belajar, [...]

    ReplyDelete
  23. 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 ...?

    ReplyDelete

Post a Comment

Popular Posts