Kamis, 01 Desember 2011

Detail Tutorial Tingkat Kesulitan: Pemula, Menengah Software yang Digunakan: Adobe Illustrator Teknik yang Dipelajari: Penggunaan Guide, Type on A Path, Manipulasi Shape Sederhana. Lama Pengerjaan: 30 menit Tutorial Langkah 1: Menyiapkan Kanvas Mulai dengan membuat file baru. Tampilkan penggaris dengan menekan Ctrl + R. Geser dari penggaris ke tengah kanvas untuk membuat guide. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 2: Bentuk Dasar Logo Aktifkan tool ellipse (L). Tahan Shift + Alt lalu geser dari tengah kanvas untuk membuat sebuah lingkaran sempurna.. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 3 Aktifkan tool Star. Klik satu kali di atas kanvas untuk memunculkan kontak dialog tool Star. Isikan Points: 50 lalu klik OK. Hapus bintang yang dihasilkan karena kita tidak akan menggunakannya. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 4 Dengan langkah yang sama seperti pembuatan lingkaran tadi dan kombinasi tombol Ctrl, buat bintang di dalam lingkaran. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 5 Klik Effects > Stylize > Round Corners. Efek ini akan mengubah ujung tajam di bintang menjadi bentuk lingkaran. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 6 Buat lagi lingkaran lebih kecil di dalam. Di panel Stroke, aktifkan Dashed Line untuk menghasilkan garis putus-putus. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 7 Lagi, buat lingkaran lebih kecil. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 8 Buat lagi dua lingkaran lebih kecil. Atur Fill ke None dan isi Stroke dengan hitam. Atur Stroke lingkaran paling dalam menjadi 3 pt.. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 9 Ubah kedua lingkaran menjadi shape dengan cara klik Object > Expand. Mulai saat ini, mereka bukan lagi lingkaran dengan Stroke hitam tapi berbentuk cincin hitam. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 10 Buat sebuah kotak memotong bagian bawah lingkaran. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 11 Seleksi salah satu lingkaran dan persegi yang tadi kita buat. Buka panel Pathfinder dengan klik Window > Pathfinder. Klik ikon Minus Front. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Bentuk cincin akan terpotong. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 12 Lakukan hal yang sama dengan lingkaran satu lagi. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 13 Buat bintang di kedua sisi. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 14 Tambahkan teks 100 percent. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 15: Pita Buat shape persegi lalu seleksi dua titik di sisi bawah. Aktifkan tool Scale lalu geser ke tengah. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 16 Aktifkan tool pen. Klik bagian tengah sisi atas untuk menambah titik baru. Tahna Alt lalu geser kedua titik untuk mengubahnya menjadi titik lengkung. Seleksi kedua titik tadi dengan tool Direct Selection dan geser ke atas. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 17 Buat persegi, tambahkan titik baru di tengah sisi kiri lalu geser ke tengah. Simpan shape di belakang. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 18 Gambar sebuah segitiga dan simpan di antara kedua bagian pita. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 19 Seleksi bagian belakang pita. Klik kanan dan pilih Transform > Reflect. Pilih Vertical lalu klik Copy. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 20 Simpan shape hasil duplikasi ke sisi pita yang lain. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 21 Duplikasi bagian depan pita. Hapus sisi kiri, kanan, dan atas. Aktifkan tool Type on A Path lalu klik path untuk menambahkan teks. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 22 Simpan teks di atas pita. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Langkah 23 Terakhir, saya tambahkan satu lagi lingkaran di bagian luar logo. Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Hasil Akhir Dalam tutorial bagian kedua, kita akan mengimport path vektor logo yang diperoleh ke Photoshop lalu menghiasnya dengan layer style, pencahayaan, dan pola-pola agar terlihat modern. Judul Tutorial

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Illustrator
  • Teknik yang Dipelajari: Penggunaan Guide, Type on A Path, Manipulasi Shape Sederhana.
  • Lama Pengerjaan: 30 menit

Tutorial

Langkah 1: Menyiapkan Kanvas

Mulai dengan membuat file baru. Tampilkan penggaris dengan menekan Ctrl + R. Geser dari penggaris ke tengah kanvas untuk membuat guide.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 2: Bentuk Dasar Logo

Aktifkan tool ellipse (L). Tahan Shift + Alt lalu geser dari tengah kanvas untuk membuat sebuah lingkaran sempurna..
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 3

Aktifkan tool Star. Klik satu kali di atas kanvas untuk memunculkan kontak dialog tool Star. Isikan Points: 50 lalu klik OK. Hapus bintang yang dihasilkan karena kita tidak akan menggunakannya.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 4

Dengan langkah yang sama seperti pembuatan lingkaran tadi dan kombinasi tombol Ctrl, buat bintang di dalam lingkaran.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 5

Klik Effects > Stylize > Round Corners. Efek ini akan mengubah ujung tajam di bintang menjadi bentuk lingkaran.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 6

Buat lagi lingkaran lebih kecil di dalam. Di panel Stroke, aktifkan Dashed Line untuk menghasilkan garis putus-putus.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 7

Lagi, buat lingkaran lebih kecil.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 8

Buat lagi dua lingkaran lebih kecil. Atur Fill ke None dan isi Stroke dengan hitam. Atur Stroke lingkaran paling dalam menjadi 3 pt..
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 9

Ubah kedua lingkaran menjadi shape dengan cara klik Object > Expand. Mulai saat ini, mereka bukan lagi lingkaran dengan Stroke hitam tapi berbentuk cincin hitam.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 10

Buat sebuah kotak memotong bagian bawah lingkaran.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 11

Seleksi salah satu lingkaran dan persegi yang tadi kita buat. Buka panel Pathfinder dengan klik Window > Pathfinder. Klik ikon Minus Front.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop
Bentuk cincin akan terpotong.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 12

Lakukan hal yang sama dengan lingkaran satu lagi.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 13

Buat bintang di kedua sisi.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 14

Tambahkan teks 100 percent.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 15: Pita

Buat shape persegi lalu seleksi dua titik di sisi bawah. Aktifkan tool Scale lalu geser ke tengah.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 16

Aktifkan tool pen. Klik bagian tengah sisi atas untuk menambah titik baru. Tahna Alt lalu geser kedua titik untuk mengubahnya menjadi titik lengkung. Seleksi kedua titik tadi dengan tool Direct Selection dan geser ke atas.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 17

Buat persegi, tambahkan titik baru di tengah sisi kiri lalu geser ke tengah. Simpan shape di belakang.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 18

Gambar sebuah segitiga dan simpan di antara kedua bagian pita.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 19

Seleksi bagian belakang pita. Klik kanan dan pilih Transform > Reflect. Pilih Vertical lalu klik Copy.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 20

Simpan shape hasil duplikasi ke sisi pita yang lain.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 21

Duplikasi bagian depan pita. Hapus sisi kiri, kanan, dan atas. Aktifkan tool Type on A Path lalu klik path untuk menambahkan teks.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 22

Simpan teks di atas pita.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 23

Terakhir, saya tambahkan satu lagi lingkaran di bagian luar logo.
Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Hasil Akhir

Dalam tutorial bagian kedua, kita akan mengimport path vektor logo yang diperoleh ke Photoshop lalu menghiasnya dengan layer style, pencahayaan, dan pola-pola agar terlihat modern.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Dalam tutorial ini saya akan memperlihatkan cara menggambar sebuah ikon speaker di atas latar kayu. Ikon ini sangat sederhana, terbuat dari banyak bentuk lingkaran yang dikombinasikan dengan Layer Style.

Preview

Menggambar Ikon Speaker Memanfaatkan Layer Style

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:

Tutorial

Langkah 1

Buat sebuah shape lingkaran dengan warna #222222.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Klik ganda layer. Di kotak dialog Layer Style aktifkan Drop Shadow, Bevel and Emboss, dan Gradient Overlay dengan setting seperti di bawah.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 3

Beri Layer Style Bevel and Emboss dan Gradient Overlay.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Inilah hasil yang kita peroleh saat ini.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 3

Duplikasi kembali lingkaran dan ubah warnanya menjadi #d4d2c5. Perkecil ukuran lingkaran. Buang semua Layer Style.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Beri Inner Shadow, Inner Glow, Bevel and Emboss, dan Gradient Overlay.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Inilah hasil yang diperoleh.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 4

Sekali lagi, duplikasi lingkaran. Ubah warnanya ke #e3e1cf. Perkecil dan buang semua Layer Style.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Beri Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay, Pattern Overlay, dan Stroke.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Dalam pilihan Pattern, gunakan pola pixel dari PSDfreemium.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Ini hasil yang diperoleh.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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).
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 7

Lanjutkan melukis highlight dan shadow hingga diperoleh hasil seperti di samping.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 9

Turunkan Opacity bayangan hingga 20%.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 10

Buat lingkaran berwarna #191919 di bagian tengah speaker.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Beri Drop Shadow dan Gradient Overlay.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Gunakan gradasi radial dari putih ke hitam. Ketika kotak dialog ini aktif klik geser pada kanvas untuk menggeser pusat gradasi sedikit ke kanan atas.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 13

Gandakan lingkaran dasar speaker –yang kita buat di Langkah 1– dan ubah warnanya ke #5e5e5e.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 14

Tambahkan shape rounded di posisi jam 12. Di baris pilihan, atur mode path ke Intersect.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 15

Lakukan proses transformasi dan duplikasi dengan menekan Ctrl + Alt + T. Tahan Alt lalu geser titik pusat transformasi ke titik tengah speaker.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 16

Putar path 45°. Anda bisa melihat bahwa sekarang yang diputar adalah path baru bukan path asli.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 17

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

Langkah 18

Beri Bevel and Emboss.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 20

Gandakan lingkaran ke atas shape yang lain.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 21

Aktifkan tool pencil dengan ukuran brush 1 px. Lukis tanda plus hitam di atas setiap baut.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Inilah hasil yang diperoleh.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Hasil yang diperoleh.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 23

Buat shape baru terdiri dari dua buah lingkaran dengan pusat sama. Ubah mode path lingkaran terdalam menjadi Subtract. Hasilnya adalah bentuk cincin.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Klik ganda layer dan aktifkan Drp Shadow, Outer Glow, Bevel and Emboss, dan Gradient Overlay.
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Hasil yang diperoleh.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 24: Latar

Ubah warna depan dan warna belakang menjadi #7a4e0d dan #66440c. Aktifkan latar, klik Filter > Texture > Fibers.
Menggambar Ikon Speaker Memanfaatkan Layer Style

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.
Menggambar Ikon Speaker Memanfaatkan Layer Style

Tidak ada komentar:

Posting Komentar