Tutorial Illustrator: Menciptakan Ikon Baterai Transparan

Minggu, 24 Juni 2018

Judul:

Membuat Ikon Baterai Transparan

Oleh: Bill Labus
Software: Adobe Illustrator
Lama Pengerjaan: - Jam
Level: Menengah
Sumber: Design Tutsplus
File Bahan: -

Intro:

Pada Tutorial ini, kita akan menciptakan detail ikon dari baterai menyerupai yang dipakai Iphone touch. Warna “Bahan bakar” baterai sanggup diganti menyerupai level “bahan bakar”, mengakibatkan ikon sanggup dipakai untuk indikator baterai untuk aplikasi atau sekedar sebagai tipe grafik apapun dalam design.

Membuat Ujung Logam Baterai

Langkah 1

Kita akan mulai dengan menciptakan sebuah Dokumen gres dan mengisinya dengan wana hitam penuh. Anda sanggup menciptakan ukuran apapun sesuka Anda, milik saya 600 x 400px.

Sekarang kita mempunyai dokumen, mari kita mulai dengan menciptakan ujung logam pada tamat battery. Mulai dengan menggambar sebuah bidang menyerupai gambar dibawah. Warna gradien dari kiri ke kanan ialah 90% abu-abu, putih dan hitam. Sebagai tambahan, beri obyek 1px Feather dan rendahkan Opacity ke 75%.

Langkah 2

Copy (Cmd/Ctrl + C) obyek tersebut dan Paste in Front (Cmd/Ctrl + F). Lalu, geser jiplakan satu pixel ke kanan memakai tombol panah. Warna untuk Gradien dari kiri kenan ialah 80% Abu-abu, Hitam, dan 80% Abu-abu. Tambahan, tingkatkan Oppacity bidang ini menjadi 100% dan hapus Feather-nya dengan menariknya dari list dalam panel Appearance ke ikon daerah sampah dibawah.

Langkah 3

Untuk menambahkan beberapa pencahayaan pada sudutnya, gambarkan dua bidang menyerupai dibawah dengan Pen Tool (P). Isi keduanya dengan warna putih. Ganti Opacity pada bidang atas menjadi 75% dan belahan bawahnya 25%. Juga beri keduanya Feather 2px.

Langkah 4

Hal ini mungkin belum terbukti, tetapi kita kini akan menambahkan pantulan pada logam. Gambarkan sebuah bidang dengan Pen Tool (P) dan posisikan menyerupai dibawah. Warna kiri gradiennya ialah Putih dan kanannya Abu-abu 90%. Berikan bidang Feather 1px dengan baik.

Untuk pantulan bawah, gambarkan bidang lain menyerupai yang terlihat. Warna Gradien dari Putih ke Hitam dan Feather 1 px. Juga, rendahkan Opacity ke 50%.

Membuat Badan Transparan

Langkah 1
Sekarang kita akan mulai pada sesi transparan pada baterai. Mulai dengan menggambar bidang menyerupai yang ditunjukan dibawah dengan Pen Tool (P). Sekali tergambar, isi bidang dengan putih dan rendahkan Opacity ke 50%.

Cara gampang menggambar bentuk tersebut dengan menggambar setengahnya – membiarkan Path terbuka, kemudian Copy, Paste dan Reflect jiplakannya untuk menciptakan setengah belahan lainnya. Terakhir, hanya menghubungkan titik dengan Pen Tool (P). Hal ini juga memastikan bentuk menjadi simetris.

Langkah 2
Sekarang kita sanggup dengan gampang memakai warna hitam dan abu-abu pada bidang ini, tetapi kita akan memakai Opacity Mask. Ada sedikit pekerjaan lain untuk dilakukan, tetapi ini akan membantu kita mengganti background dibalik baterai kita dikala selesai. Untuk menciptakan Mask, Copy dan Paste bidang diatas aslinya. Buat Opacity kembali ke 100%, dan isi dengan gradien menyerupai dibawah. Slider kiri 50% Abu-abu dan kanan Hitam.

Langkah 3
Sekarang, pilih kedua bidang, kemudian pada sajian drop down di Panel Transparency pilih Make Opacity Mask. Saat Anda menciptakan Mask, Anda mungkin tidak melihat perubahan, tetapi ganti warna background Dokumen dan Anda akan melihat laba memakai Opacity Mask.

Langkah 4

Baik, kini mulai menambahkan beberapa cahaya dan pantulan untuk mengakibatkan beling terlihat transparan. Mulai dengan menggambar dua bidang menyerupai dibawah, Isi keduanya dengan putih dan rendahkan Opacity menjadi 75%. Feather beliau atas 2px dan di bawah 3,5px.

Langkah 5
Kita juga akan menambahkan Opacity Mask beliau atas pencahayaan. Paste sebuah jiplakan bidang atas di depannya, buat Opacity kembali 100%, dan hapus Feather-nya. Isi dengan gradien menyerupai dibawah, dari 75% Abu-abu ke hitam. Terakhir, buat Opacity Mask menyerupai sebelumnya.

Langkah 6
Kita Akan menambahkan pantulan lain pada beling semoga cocok dengan logam. Gambarkan sebuah bidang menyerupai dibawah, isi dengan putih, berikan 2px Feather, dan rendahkan Opacity menjadi 50%.

Langkah 7
Ikuti rutinitas kita untuk menambah Opacity Mask. Paster sebuah jiplakan diatas bidang aslinya dan isi dengan gradien, yang dimulai dari 15% Abu-abu sampai 85% Abu-abu (jangan lupa mengahpus Feather pada bidang).

Langkah 8
Sekali lagi buat Opacity Mask. Juga, sekali lagi buat Mask, ubah Blend Mode bidang ke Screen dalam panel Transparency.

Langkah 9
Sekarang Anda mungkin mendapat ilham dari bagaimana menciptakan pantulan kita. Kaprikornus gambarkan bidang lain untuk pantulan menyerupai terlihat dibawah, kemudian isi dengan putih. Kurangi Opacity menjadi 40% dan buat Feather 2px.

Langkah 10
Untuk jiplakan bidang gunakan Opacity Mask, pakai gradien 50% Abu-abu sampai hitam, menyerupai terlihat dibawah.

Langkah 11
Dan sekarang?Coba tebak. Buat Opacity Mask.

Langkah 12
Baik, pantulan terakhir kita! Sekali lagi gambarkan bentuk menyerupai dibawah, isi dengan Putih, rendahkan Opacity menjadi 50%, dan buat Feather menjadi 2px.

Langkah 13
Copy dan paste bidang untuk menciptakan Opacity Mask. Gunakan gradien dari putih ke Hitam untuk bidang ini.

Langkah 14
Dan untuk terakhir kalinya, buat Opacity Mask.

Duplikasi Ujung Logam
Langkah 1
Kita kini akan menambahkan ujung logam lainnya pada Baterai, yang cukup mudah, mengingat keduanya identik. Pilih bentuk yang menciptakan ujung belakang baterai, dan pergi ke Object > Transform > Reflect. Dalam jendela obrolan yang muncul, pilih Vertical untuk Axis dan Klik Copy. Tarik jiplakan dan cerminkan bidang ke sisi ujung lain baterai.

Langkah 2
Membuat kontak Positif pada baterai akan cepat dan mudah. Cukup pilih kesluruhan bentuk yang gres saja Anda gunakan untuk ujung baterai, kemudian Copy dan Paste in Front. Dengan keseluruhan terseleksi, Alt-Klik dan tarik ke atas atau bawah pada Center Handle dari grup untuk mengecilkan mereka secara vertikal. Anda mungkin juga ingin mengecilkannya secara horizontal sedikit.

Setelah Anda mendapat ukuran yang sesuai, atur mereka ke belakang (Cmd/Ctrl + Shift + [), kemudian bawa mereka Forward satu tingkat (Cmd/Ctrl + ]). Jika telah selesai , kontak seharusnya berada sempurna dibelakang ujung logam.

Membuat Cahaya Hijau Baterai
Langkah 1
Hal terakhir yang harus kita lakukan ialah menuntaskan baterai tersebut untuk menambahkan beberapa perak oval untuk menampilkan belahan dalam kaca. Gambarkan dua bidang menyerupai yang ditunjukan dibawah (atau gambarkan satu dan Copy dan Paste). Isi salah satunya ke kanan dengan warna putih dankurangi Opacity menjadi 25%, dan isi satunya di kiri dengan hitam dan kurangi opacity menjadi 50%. Tambahan, ubah Blending Mode yang kiri enjadi Overlay. Terakhir, beri Feather keduanya dengan 3,5 px.

Langkah 2
Sekarang kita akan berkerja pada elemen terakhir design, “bahan bakar” (energi baterai). Gambarkan sebuah bidang dengan Pen tool (P) menyerupai dibawah. Anda sanggup menciptakan level energi sesuka Anda, dan warna apapun sesuka Anda. Saya menentukan 2/3 penuh dan memakai gradien hijau.

Langkah 3
Setelah Anda mendapat pandangan yang Anda inginkan untuk “bahan bakar”, letakan ke belakang. Lalu, bawa kedepan dua kali sehingga berada sempurna di depan layer utama, tetapi dilakang pantulan.

Langkah 4
Terakhir, jiplak perak oval di ujung kiri beling dan tarik ke sudut “bahan bakar”, kemudian ganti warnanya menjadi Putih.

Langkah 5
Untuk menuntaskan Design, tambahkan beberapa pencahayaan pada belahan logam dari baterai dengan menggambar oval dan mengisinya dengan Putih. Berikutnya, tambahkan Feather pada mereka dan kurangi Opacity-nya.

Langkah 6
Tambahan, tambahkan sebuah Outer Glow pada bentuk “bahan bakar” (Effect > Stylize > Outer Glow). Pastikan Blending Mode pada Screen. Anda ingin warna cahaya cocok dengan warna materi bakar. Untuk materi bakar hijau saya, saya memakai hijau lemon untuk cahaya (#19FF00). Buat Opacity 75% dan Blur 11px.

Nyalakan! Anda telah selesai!
Inilah! Anda kini mempunyai ikon baterai yang sanggup dipakai pada design apapun yang Anda perlukan dan bahkan sebagai grafik yang sanggup dimodifikasi untuk animasi interaktif atau aplikasi. Saya harap Anda mendapat beberapa tekhnik yang berkhasiat dan ilham dari tutorial ini.