Menggambar Avatar 8 Bit di Photoshop

Avatar 8 bit saat ini sedang populer. Bermula dari posting desainer Inggris, Harry Harrison, di Dribbble yang kemudian menyebar luas hingga menjadi startup EightBit.Me. Dalam tutorial ini, saya akan menunjukkan cara menggambar avatar bergaya 8 bit di Photoshop. Secara teknik, tutorial ini tidak rumit, hanya menggunakan tool paling dasar yaitu seleksi marquee persegi.

Preview

Berikut adalah avatar 8 bit yang akan kita buat.

thumbnail.jpg
tutorial-photoshop-avatar-8-bit-39

Detail Tutorial:

  • Tingkat kesulitan: Dasar, Menengah
  • Lama pengerjaan: 20 menit
  • Program: Photoshop
  • Materi yang Dibahas: Penggunaan Grid, Dasar Seleksi, Pembuatan Pola

Resource yang Dibutuhkan

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

Tutorial

Langkah 1: Mengatur Grid Kanvas

Buat file baru berukuran 400 x 640 px. Kita mulai dengan mengatur grid kanvas. Grid tidak muncul dalam hasil akhir karya. Grid hanya berfungsi sebagai garis bantu saja.
Klik Edit > Preferences (Ctrl + K). Di bagian Guides, Grid, and Slices isikan Gridline every 100 pixels dengan Subdivisions 5. Setting ini akan menghasilkan grid berukuran 100 px yang dibagi dalam 5 bagian.

tutorial-photoshop-avatar-8-bit-01.jpg

Langkah 2

Klik View > Show Grid untuk menampilkan Grid. Klik View > Snap to > Grid agar setiap gambar yang kita buat tepat menempel pada grid.

tutorial-photoshop-avatar-8-bit-02.jpg

Langkah 3: Kepala

Aktifkan tool marquee persegi dan buat seleksi berukuran 4×4 dengan posisi seperti di bawah.

tutorial-photoshop-avatar-8-bit-03.jpg

Langkah 4

Tahan Shift lalu seleksi 3 kotak di bawahnya. Ini akan menambahkan seleksi baru pada seleksi sebelumnya.

tutorial-photoshop-avatar-8-bit-04.jpg

Langkah 5

Buat layer baru. Pastikan untuk selalu melakukan proses ini agar setiap elemen avatar berada dalam layer terpisah.
Isi warna depan dengan #e6b787 lalu tekan Alt + Delete untuk mengisi seleksi dengan warna tersebut.

tutorial-photoshop-avatar-8-bit-05.jpg

Beri layer style Gradient Overlay agar warnanya tidak terlalu datar.

tutorial-photoshop-avatar-8-bit-06tutorial-photoshop-avatar-8-bit-07

Langkah 6

Seleksi dua kotak di bawah. Isi seleksi dengan hitam, turunkan opacity layer ke 10%. Ini akan menjadi bayangan dagu pada leher.

tutorial-photoshop-avatar-8-bit-08.jpg

Langkah 7

Seleksi beberapa kotak di atas dan isi dengan hitam untuk rambut.

tutorial-photoshop-avatar-8-bit-09.jpg

Langkah 8

Untuk sementara, kita perlu mengubah setting grid. Kembali ke kotak Preferences, ubah Subdivisions ke 20.

tutorial-photoshop-avatar-8-bit-10.jpg

Langkah 9

Dengan cara yang sama seperti di rambut, buat kaca mata.

tutorial-photoshop-avatar-8-bit-11.jpg

Langkah 10

Untuk kali ini, sembunyikan Grid dengan menekan Ctrl + H. Dengan tool pencil 1 px buat mata, hidung, dan mulut.

tutorial-photoshop-avatar-8-bit-12.jpg

tutorial-photoshop-avatar-8-bit-13.jpg

Langkah 11

Selesai dengan pembuatan kaca mata dan detail mata, hidung, dan mulut, kembalikan setting grid ke nilai sebelumnya. Tekan Ctrl + H untuk mengembalikan Grid.
Sekarang kita akan membuat jenggotnya. Untuk ini, kita membutuhkan pola. Buat file baru berukuran 6 x 12 px. Perbesar dengan tool zoom hingga ke tampilan maksimal lalu buat dua persegi hitam dengan ukuran dan posisi seperti terlihat di samping.

tutorial-photoshop-avatar-8-bit-14.jpg

Langkah 12

Klik Edit > Define Pattern untuk menyimpan gambar sebagai pola.

tutorial-photoshop-avatar-8-bit-15.jpg

Langkah 13

Seleksi bagian janggut. Klik Edit > Fill. Pilih Use Pattern dan ambil pola yang tadi kita simpan.

tutorial-photoshop-avatar-8-bit-16.jpg

Langkah 14

Ubah blend mode layer janggut ke Multiply dengan Opacity 10%.

tutorial-photoshop-avatar-8-bit-17.jpg

Langkah 15

Seleksi kepala lalu lukis hitam di bagian atas dagunya dengan brush hitam lembut beropacity rendah.

tutorial-photoshop-avatar-8-bit-18.jpg

Langkah 16

Buat seleksi untuk baju dan isi dengan #7a617a.

tutorial-photoshop-avatar-8-bit-19.jpg

Langkah 17: Baju

Buat shape persegi dengan lebar 1 grid. Putar hingga membentuk lengan avatar.

tutorial-photoshop-avatar-8-bit-20.jpg

Ulangi proses ini untuk membuat lengan bagian bawah dan tangan.

tutorial-photoshop-avatar-8-bit-21.jpg

Langkah 18

Seleksi sebagian tangan lalu klik ikon Add Layer Mask agar bagian itu tersembunyi.

tutorial-photoshop-avatar-8-bit-22.jpg

Langkah 19

Hapus sebagian baju karena lengannya berada di samping.

tutorial-photoshop-avatar-8-bit-23.jpg

Langkah 20

Dengan langkah yang sama seperti di atas, buat baju dalam.

tutorial-photoshop-avatar-8-bit-24.jpg

Langkah 21

Buat juga satu kolom hitam untuk dasi.

tutorial-photoshop-avatar-8-bit-25.jpg

Langkah 22

Buat sebuah kotak berukuran satu grid. Putar 45 derajat. Potong sebagian dengan menambahkan shape persegi di atasnya dalam mode Subtract.

tutorial-photoshop-avatar-8-bit-26.jpg

Langkah 23

Ambil tool pencil dan lukis garis 45 derajat untuk kerah avatar.

tutorial-photoshop-avatar-8-bit-27.jpg

Langkah 24

Avatar ini terlalu datar. Untuk memperbaikinya, kita membutuhkan tekstur. Saya menggunakan tekstur Fabric Pattern dari WeGraphics. Tekstur ini tidak gratis, Anda harus membelinya. Jika mau tekstur gratis, coba cari di DeviantArt. Tambahkan Layer Style Pattern Overlay pada layer baju dengan pola Fabric Pattern dari WeGraphics.

tutorial-photoshop-avatar-8-bit-28.jpg

Langkah 25

Ulangi proses pada bagian lengan.

tutorial-photoshop-avatar-8-bit-29.jpg

Langkah 26: Celana

Dengan cara yang sama seperti di atas, buat celana avatar.

tutorial-photoshop-avatar-8-bit-30.jpg

Tambahkan Layer Style berikut. Sama seperti baju, saya menggunakan pola Fabric Pattern dari WeGraphics.

tutorial-photoshop-avatar-8-bit-32
tutorial-photoshop-avatar-8-bit-31

Langkah 27: Kaki

Buat kakinya. Sederhana saja, hanya beberapa kotak hitam.

tutorial-photoshop-avatar-8-bit-33.jpg

Langkah 28: Sabuk

Sabuk sama sederhananya dengan kaki. Hanya berupa kotak hitam, putih, dan hitam.

tutorial-photoshop-avatar-8-bit-34.jpg

Langkah 29: Bayangan

Tentu saja kita membutuhkan bayangan. Buat seleksi ellipse tepat di bawah kedua kaki. Isi dengan hitam lalu haluskan dengan memberinya filter Gaussian Blur (Filter > Blur > Gaussian Blur). Untuk bayangan tubuh avatar, ulangi proses yang sama namun dengan seleksi ellipse yang lebih besar.

tutorial-photoshop-avatar-8-bit-35.jpg

Langkah 30: Latar

Menggunakan tool brush hitam lembut beropacity rendah, lukis sisi luar kanvas.

tutorial-photoshop-avatar-8-bit-36.jpg

Langkah 31: Menambah Noise

Tahan Ctrl lalu klik semua layer hingga tubuh avatar terpilih.

tutorial-photoshop-avatar-8-bit-37.jpg

Langkah 32

Buat layer baru lalu isi seleksi dengan putih. Klik Filter > Noise > Add Noise. Langkah ini akan menambahkan titik hitam ke dalam gambar.

tutorial-photoshop-avatar-8-bit-38.jpg

Langkah 33

Terakhir, ubah blend mode layer noise ke Multiply. Ini akan menyembunyikan semua pixel putih dan menyisakan noise di atas avatar.

tutorial-photoshop-avatar-8-bit-39.jpg

Hasil Akhir

Tutorial ini sangat sederhana, tidak ada teknik rumit. Yang bisa kita pelajari dari sini, tidak perlu teknik rumit untuk menghasilkan karya yang unik dan menarik. Yang paling penting adalah kreativitas dan kemauan Anda untuk bereksperimen.

tutorial-photoshop-avatar-8-bit-39.jpg

Download Link

Download File PSD

Iklan

12 thoughts on “Menggambar Avatar 8 Bit di Photoshop

  1. Baru dengar tuh “avatar 8”
    Bisa jadi eksperimen ekspresi baru nih buat bahan ngedesain ๐Ÿ˜€
    thank’s tutornya mudah dipelajari dengan beberapa trik sederhana yang mantap ๐Ÿ™‚

  2. wah kalo gamer pasti ga asing lagi sama istilah 8-bit (nitendo) atau 16-bit (sega) dsb!
    bagus-bagus mas Jeprie tutorialnya, saya baru seminggu nih ngikutin blognya, salam kenal, sukses selalu!

  3. Pertama kali saya liat avatar 8 bit ini di PP twitternya @poconggg pake kacamata dan kaos dalam belang meraih putih kayak penjual sate dari madura, hehe…
    Hasilnya jadi manteb nih tutorialnya mas…

  4. Terima kasih dhany.
    Biasanya mereka menggunakan EightBit.Me, bisa langsung mengganti avatar twitter. Ini juga bisa dibuat jadi avatar twitter kalau mau. Tinggal mengubah setting profile secara manual.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s