Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis

Wacom Bamboo adalah salah satu alat desain terbaik yang saya miliki. Harganya memang mahal namun sangat membantu saya dalam menggambar objek-objek realistis. Selain menghemat waktu, Wacom juga membantu saya terhindar dari cedera pergelangan.

Dalam tutorial ini, saya mencoba bereksperimen dengan menggambar Wacom Bamboo dari sketsa vektor di Illustrator kemudian memberinya pencahayaan realistis di Photoshop. Tutorial yang dipecah jadi dua bagian ini ditulis ekslusif untuk PVM.garage.

Preview

Berikut adalah hasil akhir yang diperoleh.

final.jpg

Sebagian Langkah dalam Tutorial

Tutorial ini membahas secara detail proses menggambar Wacom Bamboo dalam dua tahap. Tahap pertama adalah menggambar rangka (wireframe) Wacom di Illustrator dan selanjutnya memberi detail di Photoshop hingga terlihat realistis.

Link Tutorial

Iklan

Memodifikasi Mobil Bergaya Racing Style di Photoshop

Modifikasi mobil merupakan proses yang rumit karena membutuhkan biaya besar dan cukup beresiko. Untuk menjamin kesuksesan hasil modifikasi, biasanya pemilik mobil mencoba terlebih dahulu di Photoshop.

Dalam tutorial ini, kita akan mengambil foto mobil dengan kamera saku biasa lalu memodifikasinya. Tutorial ini adalah hasil kolaborasi dengan Ardhy Moelya Zam-Zam dan ditulis ekslusif untuk Psdtuts+.

Preview

Berikut adalah hasil akhir yang diperoleh.

final.jpg

Sebagian Langkah dalam Tutorial

Tutorial ini didasarkan pada skenario nyata proses memodifikasi mobil. Diharapkan, pembaca bisa mencoba konsep tutorial ini pada mobilnya sendiri. Di bawah adalah beberapa langkah dalam tutorial.

modifikasi-mobil-1.jpg

Link Tutorial

Mendesain Blog Elegan Bag. 3 – PSD ke Theme WordPress

Melanjutkan tutorial slicing PSD desain blog elegan minggu lalu, kita akan mengubah hasil desain menjadi Theme WordPress. Di tutorial ini kita akan berkenalan dengan HTML5 dan beberapa efek CSS3 seperti box shadow, text shadow, dan rounded corner. Silakan klik di sini untuk membaca tutorial secara lengkap.

Preview

Di bawah adalah hasil akhir tutorial. Sedikit berbeda dengan mockup PSD awal karena ada penambahan widget di bagian footer. Klik gambar untuk melihat live demo-nya.

blog-elegan-3-1.jpg

Terima kasih kepada Aris yang telah meluangkan waktunya berbagi dengan komunitas DesainDigital.

Mendesain Blog Elegan Bag. 2 – Slicing

Tutorial ini adalah kelanjutan dari tutorial sebelumnya, Mendesain Blog Elegan dengan Photoshop. Di sini, kita akan menambahkan penanda featured post pada post dan melakukan proses slicing. Slicing adalah memotong desain gambar dari Photoshop untuk kemudian digunakan dalam markup XHTML/CSS.

Preview: Featured Post

Sebelum memulai proses slicing. Kita akan menambahkan penanda featured post di pojok post. Ini berlaku untuk menandai posting sticky di WordPress. Lihat terlebih dahulu hasilnya di bawah.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 1: Membuat Featured Post

Buka kembali file PSD yang kita buat di tutorial sebelumnya. Buat sebuah persegi dan beri jarak 3 px dengan kotak post.

Mendesain Blog Elegan Bag. 2 - Slicing

Lanjutkan membaca Mendesain Blog Elegan Bag. 2 – Slicing

Mendesain Blog Elegan dengan Photoshop

Dalam tutorial ini, kita akan membuat desain web bergaya elegan di Photoshop. Tidak ada banyak elemen yang digunakan di sini. Anda akan belajar banyak teknik, mulai dari membuat efek letterpress, membuat efek 3 dimensi pada bentuk, hingga membuat garis inset.

Preview

Sebelum mulai, lihat terlebih desain web yang akan kita buat. Klik gambar untuk melihatnya pada ukuran penuh.

Mendesain Blog Elegan dengan Photoshop

Resource Yang Dibutuhkan

Lanjutkan membaca Mendesain Blog Elegan dengan Photoshop

Menggambar Mac Pro G5

Saya bukan pengguna Mac, saya juga tidak berniat menggunakan produk dari Mac. Walaupun begitu, saya adalah salah satu dari jutaan penggemar desain revolusioner Mac. Di tutorial ini, saya akan memperlihatkan cara menggambar Mac Pro G5 di Photoshop. Klik disini untuk membaca tutorial lengkapnya di PV.M garage.

Hasil Akhir

Tutorial Menggambar Mac Pro G5

Tutorial ini sederhana

Teknik yang digunakan di tutorial ini sebetulnya hanya teknik-teknik sadar seperti penggunaan tool pen untuk membuat shape. Shape-shape yang dihasilkan lalu dilukis secara manual untuk memberi highlight dan shadow.

Tutorial Menggambar Mac Pro G5
Tutorial Menggambar Mac Pro G5

Membahas Beberapa Trik Unik

Di sini, saya juga memperlihatkan cara pembuatan pola untuk membuat bagian depan Mac Pro. Anda akan belajar juga cara pembuatan bayangan yang terlihat sangat realistik.

Tutorial Menggambar Mac Pro G5
Tutorial Menggambar Mac Pro G5
Download Source File

Create a Blackberry Torch Using Photoshop and Illustrator

Final Result

Create a Blackberry Torch Using Photoshop and Illustrator

Full of Details

Every steps is explained in details. No pixel is missing.

Create a Blackberry Torch Using Photoshop and Illustrator
Create a Blackberry Torch Using Photoshop and Illustrator

Plus Drawing Icon in Illustrator

All icons on Blackberry’s screen is made in Illustrator. This assure the best quality of the icons. Drawing icon in Illustrator is also easier in Illustrator, compared to Photoshop.

Create a Blackberry Torch Using Photoshop and Illustrator
Create a Blackberry Torch Using Photoshop and Illustrator

Drawing Tips

In this tutorial, you will also learn tips on manual drawing of a photo realistic object.

Create a Blackberry Torch Using Photoshop and Illustrator

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menggambar Blackberry Torch dengan Photoshop dan Illustrator

Hasil Akhir

photoshop-tutorial-menggambar-blackberry-torch-final.jpg

Penuh dengan Detail

Tutorial ini memperlihatkan proses pembuatan dengan sangat detail. Setiap goresan brush diperlihatkan secara lengkap.

photoshop-tutorial-menggambar-blackberry-torch-02photoshop-tutorial-menggambar-blackberry-torch-01

Plus Pembuatan Ikon di Illustrator

Semua ikon di layar Blackberry dibuat di Illustrator. Ini memastikan kualitas ikon tetap tajam. Selain hasilnya lebih bagus, proses pembuatan ikon di Illustrator lebih mudah daripada di Photoshop.

photoshop-tutorial-menggambar-blackberry-torch-04photoshop-tutorial-menggambar-blackberry-torch-03

Disertai Tips Menggambar

Dalam tutorial ini, Anda akan belajar banyak tips menggambar objek secara realistis.

photoshop-tutorial-menggambar-blackberry-torch-05.jpg

Link Tutorial

Menggabungkan Sketsa Ke Dalam Foto

Preview

Sebelum memulai tutorial ini. Lihat terlebih dahulu gambar yang akan kita buat.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Source File

Untuk mengikuti tutorial ini, silakan ambil gambar-gambar dari link berikut:

Langkah 1

Mulai dengan membuka gambar jembatan di Photoshop. Saya memilih gambar ini karena ada banyak detail di dalamnya sehingga lebih menarik ketika dijadikan sketsa.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 2

Ambil gambar tangan dan potong bagian yang tidak diperlukan.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 3

Warna tangan tidak cocok dengan gambar latar. Kita perlu sedikit memperbaikinya. Tambahkan Adjustment Layer Hue/Saturation dengan setting seperti berikut.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 4

Ambil gambar kertas dan simpan di atas tangan.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 5

Beri Adjustment Layer Hue/Saturation dengan setting berikut untuk mengubah kertas timah menjadi kertas biasa.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto
Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 6

Gandakan gambar jembatan. Simpan di atas kertas. Ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Hilangkan warna dengan perintah Desaturate (Shift + U).

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 7

Gandakan gambar jembatan lalu balikkan warna dengan menekan Ctrl + I. Masukkan kembali gambar ke dalam kertas dengan menekan Ctrl + Alt + G.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 8

Ubah blend mode layer menjadi Color Dodge. Ini akan mengubah gambar menjadi putih.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 9

Aktifkan Gaussian Blur untuk memunculkan sketsa.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 10

Anda bisa memperkuat sketsa dengan menggabungkan kedua layer, Ctrl + E, lalu menggandakan gambar teratas (Ctrl + J). Ubah blend mode layer ke Multiply. Jika dirasa sketsa yang diperoleh terlalu kotor, turunkan opacity layer teratas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 11

Seleksi jempol yang harusnya berada di atas gambar. Tekan Ctrl + J lalu simpan layer di atas kertas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 12

Buat layer baru di atas tangan lalu lukis bayangan lembut kertas pada tangan.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 13

Turunkan opacity layer sketsa yang bermode Normal hingga 15%. Ini akan memunculkan kembali bayangan dan highlight pada kertas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 14

Saya merasa sketsa ini terlalu rapi. Jadi, perlu sedikit dirusak. Aktifkan layer sketsa kedua, yang bermode Multiply, dan beri filter Angled Strokes.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 15

Klik ikon New Filter untuk menambah filter baru dan pilih Filter Grain.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 16

Sekarang lukis bayangan jempol pada kertas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 17

Bagian bawah kertas terlalu rapi, sangat tidak natural. Lukis hitam bagian itu menggunakan brush lembut.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 18

Saya juga merasa bahwa kertas menjadi terlalu polos, terlihat terlalu datar. Saya perlu memberinya lebih banyak highlight. Di sini, saya menggunakan teknik yang dijelaskan di tutorial Quick Tip Psdtuts+, silakan baca tutorialnya untuk referensi lebih lengkap.

Aktifkan tool gradient, pilih gradasi hitam ke putih dengan tipe reflected dan blend mode Difference. Buat beberapa gradient di atas layer baru.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 19

Ubah blend mode highlight dan shadow yang dihasilkan gradient menjadi Overlay dengan Opacity 34%.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Hasil Akhir

Saya harap Anda menyukai hasil akhirnya. Jika ada pertanyaan, jangan sungkan untuk bertanya di kolom komentar.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Membuat Tombol Download Glossy Berwarna Cerah (Plus Set Tombol Gratis)

Dalam tutorial ini, saya akan memperlihatkan pembuatan tombol download dengan tema glossy dan tampilan 3 dimensi. Tutorial ini akan membahas secara lengkap hingga ke pembuatan gambar transparan dalam format PNG-24. Semua elemen dalam tombol ini dibuat dari vector shape, ini membuat tombol bisa ditransformasi ke ukuran berapa pun tanpa menurunkan kualitasnya. Karena desain ini untuk web, kita akan bekerja dengan sangat akurat hingga ke detail 1 pixel. Semua ini diperlukan untuk mencapai desain yang pixel perfect.

[hr]

Preview

Sebelum mulai, lihat terlebih dahulu tombol download yang akan kita buat. Terlihat menarik? Lanjutkan dengan mengikuti tutorial di bawah.

Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Detail Tutorial:

  • Tingkat Kesulitan: Pemula.
  • Software yang Digunakan: Adobe Photoshop.
  • Materi yang Dibahas: Penggunaan Layer Style, Proses Transformasi, Menggambar Shape Vektor.
  • Lama Pengerjaan: 10 menit.

[hr]

Tutorial

Langkah 1: Bentuk dasar tombol

Aktifkan tool rounded rectangle, pilih radius 7 px lalu buat shape persegi seperti di bawah. Beri layer shape ini base. Saya menggunakan warna biru muda di sini, Anda bisa menggunakan warna apapun yang Anda suka. Tidak masalah. Kita bisa mengubahnya nanti.

Tambahkan layer style Gradient Overlay dengan setting seperti di bawah. Style ini akan memberi kesan menggelembung pada shape.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 2

Di dalam shape base tombol, buat lagi sebuah rounded rectangle kali ini dengan radius 5 px. Ubah fill layer ke 0%. Beri stroke berupa gradasi dari abu-abu ke putih, set blend mode ke Screen untuk mempertahankan hanya warna putih di bagian atas. Stroke seperti ini memberi efek sedikit bevel di bagian dalam tombol.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 3: Refleksi

Gandakan layer shape base lalu secara manual tambahkan path berbentuk gelombang. Pilih intersect path untuk memotong kedua path. Ubah fill ke 0%. Lihat gambar di bawah untuk referensi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 4: Ikon download

Buat sebuah shape lingkaran di sisi kiri tombol. Ubah Fill ke 0% dan Opacity layer 80%. Beri layer style

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 5

Di dalam shape lingkaran tadi, buat lagi sebuah shape lingkaran dan beri layer style Gradient Overlay dengan tipe radial. Klik dan geser pada gambar untuk menggeser pusat gradasi agar tidak tepat di tengah-tengah lingkaran.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 6

Aktifkan tool custom shape dan dari daftar shape pilih salah satu shape panah. Buat shape panah berwarna hitam di tengah lingkaran. Ubah fill ke 11% lalu tambahkan layer style Bevel and Emboss dan Stroke. Bevel and Emboss akan memberikan efek emboss atau cekung ke dalam sementara Stroke akan memperkuat highlight di bagian bawah dalam cekungan dan memperkuat kesan 3 dimensi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 7: Teks DOWNLOAD

Beri teks DOWNLOAD ke atas tombol. DI sini saya menggunakan font Arial Rounded karena terlihat menyatu dengan bentuk tombol. Teks besar biasanya akan lebih renggang dan ini tidak terlihat bagus ketika dibaca, ini salah satu konsep dasar dalam tipografi. Buka panel Character lalu perkecil tracking karakter hingga -25. Tambahkan layer styles Bevel and Emboss dan Gradient Over bertipe Gradient untuk memberi kesan teks cembung ke dalam.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 8: Menambah pita

Sekarang kita menambahkan pita yang bisa diisi dengan keterangan singkat. Buat shape berbentuk persegi. Dengan tool pen klik titik pojok kiri bawah untuk menghapusnya dan menghasilkan bentuk segitiga. Gandakan path segitiga, geser lima pixel ke kanan dan lima pixel ke atas. Pilih subtract path untuk mengurangi path sebelumnya.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 9

Tambahkan layer style Gradient Overlay bertipe radial. Geser posisi gradasi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 10

Zoom lebih dekat. Buat dua garis di sisi terluar pita dengan pensil 1 px berwarna putih. Tambahkan keterangan misalnya FREE dan putar 45 derajat. Simpan teks ke atas pita. Karena teks ini sangat kecil, agar mudah dibaca kita perlu memperbesar nilai tracking melalui panel Character.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 11

Saat ini, pita terlihat melayang. Buat layer baru di antara pita dan tombol. Buat garis hitam menggunakan brush lembut. Lakukan proses transformasi, klik kanan dan pilih Warp. Geser kotak tengah hingga bagian tengah garis terlihat melengkung. Turunkan opacuty layer ke 30%. Dengan tool eraser hapus bagian bayangan yang tidak dibutuhkan.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 12

Buat seleksi kotak di belakang pita dan isi dengan warna abu-abu gelap. Bagian ini menjadi bagian belakang pita.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 13: Bayangan tombol

Buat layer baru seleksi di bagian paling bawah. Buat seleksi ellipse memanjang di bawah tombol. Isi dengan hitam dan beri filter Gaussian Blur untuk menghaluskan bayangan.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 14: Mengubah warna tombol

Kita ingin agar tombol ini seflexibel mungkin, warnanya bisa diubah dengan mudah tanpa perlu melakukan editing rumit. Untuk ini kita akan menggunakan adjustment layer Hue/Saturation. Tambahkan adjustment layer Hue/Saturation di atas layer shape base.

Tambahkan juga adjustment layer Hue/Saturation di atas layer pita. Khusus yang ini, ubah menjadi clipping mask dengan menekan Ctrl + Alt + G. Dengan cara ini, Hue/Saturation hanya akan mempengaruhi warna pita.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 15

Jika kita ingin mengubah warna tombol, misalnya agar sesuai dengan color scheme situs, kita tinggal mengaktifkan adjustment layer Hue/Saturation, pastikan pilihan Colorize aktif lalu geser ketiga slider yang tersedia. Dengan mudah warna tombol dan pitanya akan berubah. Lihat hasil yang saya peroleh hanya dengan mengubah slider di kedua adjustment layer.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 16: Menyimpan sebagai ikon transparan

Langkah terakhir kita adalah menyimpan gambar sebagai ikon transparan. Sembunyikan Background lalu tekan Ctrl + Shift + Alt + S. Di pilihan yang muncul pilih Preset: PNG-24 dan aktifkan pilihan Transparency.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Hasil Akhir

Akhirnya, inilah desain yang kita peroleh. Perhatikan bahwa formatnya sudah transparan sehingga latar gambar tetap terlihat. Seperti biasa, di akhir tutorial ini saya menyediakan file source yang digunakan. Tersedia juga lima tombol dalam berbagai warna dengan format file PNG transparan yang bisa langsung Anda gunakan jika mau.

Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Download Link

[ilink style=”download” url=”http://dl.dropbox.com/u/7116487/desaindigital/tutorial/tombol-download-glossy-desaindigital.zip”%5DDownload File PSD[/ilink] (148 KB)