Manipulasi Foto Diri dengan Bantuan Brush Custom

Dalam tutorial ini, saya akan menunjukkan beberapa teknik penting untuk memilih objek, membuat efek cepat dan menarik dengan brush custom, dan juga beberapa teknik lainnya. Kita akan menggunakan foto seorang model lalu memodifikasinya dengan kombinasi warna-warna dan elemen yang menawan.

Preview

Di bawah adalah hasil akhir tutorial ini.

Manipulasi Foto Diri dengan Bantuan Brush Custom
Lihat dalam ukuran besar. 1024 × 768 px.

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah, Mahir
  • Software yang Digunakan: Adobe Photoshop (Semua Versi)
  • Teknik yang Dipelajari: Layer Mask, Brush Custom, Seleksi dengan Channel Alpha, Modifikasi Vector Shape
  • Lama Pengerjaan: 1,5 jam

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Lanjutkan membaca Manipulasi Foto Diri dengan Bantuan Brush Custom

Iklan

Para Pahlawan Super dengan Sponsor Mereka

Para pahlawan super membutuhkan biaya besar untuk pengembangan teknologi mereka. Itu sebabnya, mereka biasanya berasal dari kalangan kaya seperti Bruce Wayne pemilik Wayne Enterprises atau Anthony Edward “Tony” Stark pemilik Stark Industries. Pahlawan super yang sudah super tanpa bantuan teknologi, semacam Superman dan Hulk, juga butuh biaya untuk pencitraan mereka. Kita-kira bagaimana jika para pahlawan super ini disponsori oleh perusahaan tertentu? Desainer Roberto Vergati Santos membuat ilustrasi setiap superhero dengan sponsornya yang cocok di Behance.

Menggambar iPhone 4 Realistik dengan Photoshop

Ini adalah tutorial terbaru saya untuk Design Instruct. Dalam tutorial ini, saya memperlihatkan cara menggambar iPhone dengan tampilan yang sangat realistik di Photoshop. Anda bisa membaca tutorial ini secara lengkap di sini. File PSD tutorial ini juga tersedia secara gratis.

[hr]

Preview

Di bawah adalah iPhone 4 yang akan dibuat dalam tutorial.

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini menjelaskan semua langkah dengan sangat detail. Secara umum, teknik yang digunakan adalah menggambar shape dengan Tool Shape dan Tool Pen, Layer Styles, dan menggambar manual dengan tool brush.

Membuat Kotak Software 3D Menggunakan Action

Tutorial ini terinspirasi dari action yang biasa dijual di Graphic River. Action itu secara otomatis bisa membuat berbagai objek 3D hanya dari gambar datar. Semua proses berlangsung hanya dalam beberapa detik. Baca lengkap tutorial pembuatan kotak software 3D menggunakan action di PSDtuts+.

Preview

Di bawah adalah produk jadi yang akan dibuat dalam tutorial.

tutorial-box-action-1.jpg

Penjelasan Teknik Professional dengan Detail

Melalui tutorial ini, Anda belajar teknik yang akan memungkinkan Anda membuat produk berupa action yang bisa dijual sebagai resource desain. Semua langkah dijelaskan dengan detail.

tutorial-box-action-3tutorial-box-action-2

Disertai dengan Proses Desain Cover 3D

Yang terpenting dari tutorial ini adalah pembuatan action. Walaupun begitu, untuk mempermudah pembaca saya juga membahas hingga pembuatan desain cover kotak software.

Link Tutorial

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

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)