Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain ikon. Di bawah adalah sebagian langkah dalam tutorial tersebut.

Link Tutorial

Related posts:

• Mendesain Ikon Apple iCloud
• Menggambar Ikon Polaroid Vintage di Photoshop
• Menggambar iPad 2 Realistik di Photoshop
• Menggambar Ikon Bola Dunia dengan Photoshop
• Menggambar Communicator Star Trek

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini sederhana dan cocok bagi para pemula. Di bawah adalah beberapa langkah dalam tutorial.

Link Tutorial

Related posts:

• Menggambar Ikon Kentang Goreng dengan Photoshop
• Membuat Desain Interface Menu Bergaya Apple
• Menggambar iPad 2 Realistik di Photoshop
• Mendesain Ikon Twitter 32×32 px — Pixel Perfect
• Mendesain Interface Video Player Minimalis dan Futuristik

Preview

Detail Tutorial

• Tingkat Kesulitan: Pemula
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Menggambar Vektor, Layer Style
• Lama Pengerjaan: 20 menit

Resource yang Dibutuhkan

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

• 26 Repeatable Pixel Patterns dari PSDfreemium

Tutorial

Langkah 1

Buat sebuah shape lingkaran dengan warna #222222.

Klik ganda layer. Di kotak dialog Layer Style aktifkan Drop Shadow, Bevel and Emboss, dan Gradient Overlay dengan setting seperti di bawah.

Berikut adalah hasil yang diperoleh. Perhatikan bahwa dalam desain ini kita menggunakan sumber cahaya dari kanan atas. Ingat ini untuk memperoleh tampilan yang konsisten dan realistik.

Langkah 2

Gandakan shape lingkaran yang tadi kita buat dengan menekan Ctrl + J. Buang semua Layer Styles yang digunakan dengan menggeser ke atas ikon tempat sampah. Ubah warna lingkaran menjadi #464545. Lakukan proses transformasi dengan menekan Ctrl + T. Perkecil lingkaran hingga perbandingannya seperti terlihat di bawah.

Langkah 3

Beri Layer Style Bevel and Emboss dan Gradient Overlay.

Inilah hasil yang kita peroleh saat ini.

Langkah 3

Duplikasi kembali lingkaran dan ubah warnanya menjadi #d4d2c5. Perkecil ukuran lingkaran. Buang semua Layer Style.

Beri Inner Shadow, Inner Glow, Bevel and Emboss, dan Gradient Overlay.

Inilah hasil yang diperoleh.

Langkah 4

Sekali lagi, duplikasi lingkaran. Ubah warnanya ke #e3e1cf. Perkecil dan buang semua Layer Style.

Beri Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay, Pattern Overlay, dan Stroke.

Dalam pilihan Pattern, gunakan pola pixel dari PSDfreemium.

Ini hasil yang diperoleh.

Langkah 5

Langkah selanjutnya adalah menggambar highlight dan shadow pada di bagian dalam speaker. Untuk ini, kita perlu menggambar secara manual. Buat seleksi segitiga menggunakan tool lasso polygon.

Langkah 6

Buat layer baru lalu isi seleksi dengan putih. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan memasukkan highlight ke dalam shape lingkaran terakhir. Hapus seleksi dengan menekan Ctrl + D. Haluskan highlight dengan filter Gaussian Blur (Filter > Blur > Gaussian Blur).

Langkah 7

Lanjutkan melukis highlight dan shadow hingga diperoleh hasil seperti di samping.

Langkah 8

Ingat bahwa sumber cahaya kita ada di kanan atas. Untuk memberi kesan bahwa area cekung, kita perlu memberi bayangan di sisi kanan atas.

Langkah 9

Turunkan Opacity bayangan hingga 20%.

Langkah 10

Buat lingkaran berwarna #191919 di bagian tengah speaker.

Beri Drop Shadow dan Gradient Overlay.

Gunakan gradasi radial dari putih ke hitam. Ketika kotak dialog ini aktif klik geser pada kanvas untuk menggeser pusat gradasi sedikit ke kanan atas.

Langkah 11

Buat layer baru lalu lukis highlight tambahan di atas lingkaran. Pastikan posisi highlight tidak tepat di tengah tapi sedikit di kanan atas, sesuai dengan posisi sumber cahaya.

Langkah 12: Baut

Tampilakn ruler dengan menekan Ctrl + R. Klik dan geser dari ruler ke atas kanvas untuk menambah guide. Simpan guide di tengah dan sisi terluar speaker.

Langkah 13

Gandakan lingkaran dasar speaker –yang kita buat di Langkah 1– dan ubah warnanya ke #5e5e5e.

Langkah 14

Tambahkan shape rounded di posisi jam 12. Di baris pilihan, atur mode path ke Intersect.

Langkah 15

Lakukan proses transformasi dan duplikasi dengan menekan Ctrl + Alt + T. Tahan Alt lalu geser titik pusat transformasi ke titik tengah speaker.

Langkah 16

Putar path 45°. Anda bisa melihat bahwa sekarang yang diputar adalah path baru bukan path asli.

Langkah 17

Sekarang tekan Ctrl + Shift + Alt + T. Shortcut ini akan mengulangi proses duplikasi pada path terpilih. Hasilnya kita memiliki path baru berjarak 45°.

Langkah 18

Beri Bevel and Emboss.

Langkah 19

Buat lingkaran kecil di atas shape yang tadi kita peroleh. Beri Layer Style Drop Shadow dan Gradient Overlay. Lingkaran ini akan menjadi baut speaker.

Langkah 20

Gandakan lingkaran ke atas shape yang lain.

Langkah 21

Aktifkan tool pencil dengan ukuran brush 1 px. Lukis tanda plus hitam di atas setiap baut.

Inilah hasil yang diperoleh.

Langkah 22

Aktifkan tool brush berukuran 2 px. Lukis highlight putih di sisi kanan atas tanda plus. Ingat, kita menyimpan highlight di sisi kanan atas sesuai dengan posisi sumber cahaya.

Hasil yang diperoleh.

Langkah 23

Buat shape baru terdiri dari dua buah lingkaran dengan pusat sama. Ubah mode path lingkaran terdalam menjadi Subtract. Hasilnya adalah bentuk cincin.

Klik ganda layer dan aktifkan Drp Shadow, Outer Glow, Bevel and Emboss, dan Gradient Overlay.

Hasil yang diperoleh.

Langkah 24: Latar

Ubah warna depan dan warna belakang menjadi #7a4e0d dan #66440c. Aktifkan latar, klik Filter > Texture > Fibers.

Hasil Akhir

Di bawah adalah bentuk speaker yang kita peroleh. Dalam prosesnya, kita memaksimalkan penggunaan Layer Style. Dengan cara ini, speaker bisa diperbesar atau diperkecil tanpa menurunkan kualitasnya.

Download Link

Related posts:

• Menggambar Ikon Pensil dengan Adobe Illustrator
• Menggambar Hard Disk Eksternal Realistik
• Menggambar Laptop dengan Photoshop
• Draw Sky Scenery in Cartoon Style
• Menggambar Avatar 8 Bit di Photoshop

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam proses desain ikon. Di bawah adalah beberapa langkah dalam tutorial.

Link Tutorial

Tutorial ini ditulis ekslusif untuk Psdtuts+.

Related posts:

• Menggambar Ikon Polaroid Vintage di Photoshop
• Menggambar Ikon Kentang Goreng dengan Photoshop
• Mendesain Ikon Apple iCloud
• Menggambar Blackberry Torch dengan Photoshop dan Illustrator
• Menggambar Kamera Digital Realistis

Preview

Ini adalah hasil akhir ikon yang akan kita peroleh.

Detail Tutorial

• Tingkat Kesulitan: Pemula
• Software yang Digunakan: Adobe Photoshop
• Alat yang Digunakan: Kertas putih, Scanner, Pensil HB, dan Pensil 2B
• Teknik yang Dipelajari: Channel Alpha, Proses Scan
• Lama Pengerjaan: 20 menit

Tutorial

Langkah 1: Persiapan

Mulai dengan mencari logo twitter untuk referensi. Simpan gambar ke dalam satu file lalu cetak.

Langkah 2: Mulai Menggambar

Siapkan kertas putih kosong, pensil HB, dan pensil 2B. Secara manual, mulailah menggambar ikon. Anda bisa menggambar langsung atau menjiplak referensi yang telah kita siapkan. Jika menjiplak, saya sarankan Anda untuk menggambar di atas kaca. Tidak perlu alat khusus, kaca jendela juga cukup.

Jangan khawatir dengan detail. Tujuan kita memang menghasilkan gambar yang alami dan sangat mengesankan gambar tangan manual. Di bawah, saya juga menulis beberapa teks follow us on yang ternyata tidak digunakan dalam hasil akhir ikon ini.

Langkah 3

Ingat bahwa gambar ini bukan hasil akhir ikon. Kita masih akan mengeditnya di Photoshop. Anda bisa lihat di sini, gambar burung yang saya buat tidak seimbang dengan logo twitter. Namun, ini tidak menjadi masalah karena kita bisa menyesuaikan ukurannya di Photoshop.

Secara umum, gambar ini digambar dengan pensil HB. Untuk memberi kesan gradasi warna, bagian bawah digambar ulang dengan pensil 2B yang memberi hasil lebih gelap.

Langkah 4

Scan gambar dalam resolusi tertinggi. Pastikan untuk selalu melakukan proses scanning di resolusi tertinggi. Dalam proses scanning akan selalu ada penurunan kualitas. Mungkin ada goresan yang hilang, bagian yang kurang gelap, atau ada warna yang hilang. Resolusi tertinggi akan memaksimalkan hasil yang diperoleh. Selain itu, proses editing juga lebih mudah dilakukan di resolusi tinggi. Di bawah adalah hasil scan.

Anda bisa membandingkan tampilan hasil scan dalam tampilan 100% dan 25%. Dalam ukuran 100%, gambar terlihat buruk dan cacat. Namun, dalam tampilan lebih kecil terlihat cukup rapi.

Logo Twitter pada perbesaran 100%.

Gambar burung twitter pada perbesaran 100%.

Tampilan perbesaran 25%.

Langkah 5: Logo Twitter

Langkah selanjutnya adalah memperjelas goresan pensil. Seleksi logo twitter lalu tekan Ctrl + J untuk menduplikasinya ke layer baru. Tekan Ctrl + L untuk menjalankan perintah Levels. Geser panah hitam dan abu ke tengah hingga goresan pensil makin jelas.

Langkah 6

Buat file dengan ukuran 400 x 300 px. Ambil logo twitter hasil scan dan perkecil ukurannya. Seperti bisa Anda lihat di bawah, logo ini terlihat semakin jelas setelah diperkecil. Namun, garis luar logo terlihat kurang jelas.

Langkah 7

Kembali lagi ke gambar hasil scan. Seleksi garis terluar logo menggunakan tool lasso.

Langkah 8

Gunakan perintah Levels (Ctrl + L) untuk memperkuat kontras.

Di bawah, Anda bisa melihat perbandingan garis luar logo sebelum dan setelah proses pengeditan.

Langkah 9

Sekali lagi, simpan gambar logo ke atas file berukuran 400 x 300 px. Kali ini, garis luar logo terlihat lebih jelas.

Langkah 10: Burung

Lakukan proses yang sama untuk gambar burung. Seleksi burung, duplikasi ke layer baru, dan perjelas dengan perintah Levels (Ctrl + L).

Langkah 11

Simpan gambar burung ke dalam file 400 x 300 px.

Langkah 12: Menyiapkan Transparansi Ikon

Ikon ini belum selesai. Di titik ini, ikon tidak transparan dan memiliki latar putih. Ada cara mudah untuk menghasilkan transparansi ikon ini, yaitu dengan channel alpha.

Buka panel Channels. Lihat terlebih dahulu channel Red, Green, dan Blue yang tersedia. Cari channel dengan kontras paling tinggi.

Langkah 13

Di antara ketiga channel ini, ternyata channel Blue paling kontras. Gandakan channel Blue dengan menariknya ke atas ikon New Channel. Balikkan warna channel dengan perintah Image > Adjustments > Invert (Ctrl + I). Saat ini, ikon akan berwarna putih sementara latarnya hitam.

Langkah 14

Tahan Ctrl lalu klik channel alpha untuk mengubahnya menjadi seleksi. Sembunyikan layer lain kecuali Background, buat layer baru lalu isi seleksi dengan hitam.

Langkah 15

Sembunyikan semua layer. Anda bisa melihat bahwa saat ini ikon kita sudah transparan.

Langkah 16: Menyimpan Ikon

Klik File > Save Image for Web (Ctrl + Shift + Alt + S). Pilih tipe file PNG-24 dan pastikan transparansi aktif.

Langkah 17

Seperti inilah tampilan ikon ketika disimpan di atas latar bertekstur.

Langkah 18: Mengubah Tipe Goresan

Ikon ini aslinya dibuat dengan pensil. Namun, kita bisa mengubahnya menjadi goresan ballpoint. Buat adjustment layer Solid Color berwarna biru. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask.

Hasil Akhir

Seperti Anda lihat, cara manual tidak akan pernah mati. Saat ini, Anda praktis hampir bisa melakukan semua hal secara digital. Kondisi ini membuat cara manual memiliki kesan yang lebih unik.

Download Link

Related posts:

• Cara Mudah Desain Ikon Glossy
• Membuat Ikon Berita dengan Adobe Illustrator
• Membuat Illustrative Lettering dari Tulisan Tangan
• Membuat Gambar Sketsa dari Foto
• Menggambar Ikon Pensil dengan Adobe Illustrator

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam proses desain ikon. Di bawah adalah beberapa langkah dalam tutorial.

Link Tutorial

Tutorial ini ditulis ekslusif untuk Psdtuts+.

Related posts:

• Menggambar Ikon Kentang Goreng dengan Photoshop
• Menggambar Communicator Star Trek
• Menggambar Ikon Bola Dunia dengan Photoshop
• Menggambar Blackberry Torch dengan Photoshop dan Illustrator
• Mendesain Ikon Apple iCloud