Dalam tutorial ini, kita akan membuat icon rinci baterai yang sama dengan yang digunakan untuk sentuhan iPhone. Baterai "fuel" warna dapat diubah serta "fuel" tingkat, yang memungkinkan ikon yang akan digunakan untuk membuat baterai atau power meter untuk aplikasi, atau hanya sebagai grafis dalam setiap jenis desain.
1. Buat Logam Cap dari Baterai
Langkah 1
Kita akan mulai dengan membuat dokumen baru dan mengisinya dengan latar belakang hitam solid. Anda dapat membuat Anda ukuran apa pun yang Anda ingin, saya adalah 600 x 400px.
Sekarang bahwa kita memiliki dokumen kami, kami akan mulai dengan membuat tutup logam pada akhir baterai. Mulailah dengan menggambar bentuk, seperti yang ditunjukkan di bawah ini. Warna-warna dalam gradien dari kiri ke kanan adalah 90% abu-abu, putih, dan hitam. Selain itu, memberikan objek Feather 1px dan menurunkan Opacity menjadi 75%.
Langkah 2
Copy (Command + C) objek ini dan paste salinan langsung di depan (Command + F). Kemudian, menyenggol copy satu pixel ke kanan menggunakan tombol panah kanan. Warna-warna untuk gradien dari kiri ke kanan adalah 80% Gray, Black, dan 80% Gray. Selain itu, meningkatkan Opacity bentuk ini kembali ke 100%, dan menghapus bulu di atasnya dengan menyeretnya dari daftar di panel Penampilanke ikon tempat sampah kecil di bawahnya.
Langkah 3
Untuk menambahkan beberapa highlights ke tepi, menggambar dua bentuk seperti yang ditunjukkan di bawah ini dengan Pen Tool (P). Isi mereka berdua dengan warna putih. Ubah Opacity keadaan prima untuk 75% dan bentuk bawah 25%.Juga, memberikan baik bentuk Feather 2px.
Langkah 4
Ini mungkin tidak jelas dulu, tapi kita sekarang akan menambahkan refleksi untuk logam. Menggambar bentuk dengan Pen Tool (P) dan posisi itu seperti yang ditunjukkan di bawah ini. Warna kiri pada slider gradien putih dan warna yang tepat adalah 90% abu-abu. Berikan bentuk sebuah Feather 1px juga.
Untuk refleksi bawah, menggambar bentuk lain seperti yang ditunjukkan. Gradien berwarna putih menjadi hitam dan bentuknya memiliki Feather 1px. Juga, menurunkan Opacity menjadi 50%.
2. Buat Tubuh Transparan
Langkah 1
Sekarang kita akan mulai di bagian transparan dari baterai. Mulailah dengan menggambar bentuk di bawah ini dengan Pen Tool (P). Setelah ditarik, mengisi bentuk dengan warna putih dan menurunkan Opacity menjadi 50%.
Cara mudah untuk menggambar bentuk adalah untuk menarik satu setengah dari itu - meninggalkan jalan terbuka, maka, Copy, Paste, dan Mencerminkan salinan bentuk untuk membuat setengah lainnya. Akhirnya, hanya menghubungkan titik-titik dengan Pen Tool (P). Hal ini juga memastikan bahwa bentuk akhir akan simetris.
Langkah 2
Sekarang, kita hanya bisa menggunakan hitam ke abu-abu gradien pada bentuk ini, tapi kami akan menggunakan masker opacity gantinya. Ini sedikit lebih banyak pekerjaan untuk membuat, tetapi akan memungkinkan kita untuk mengubah latar belakang di balik baterai kita ketika kita sudah selesai. Untuk membuat masker, copy dan paste bentuk di depan aslinya. Bawa Opacity kembali hingga 100%, dan mengisinya dengan gradien seperti yang ditunjukkan di bawah ini. Slider kiri adalah 50% abu-abu dan slider kanan berwarna hitam.
Langkah 3
Sekarang, pilih kedua bentuk, maka dalam menu drop down pada panelTransparansi pilih Membuat Opacity Mask. Bila Anda membuat topeng, Anda mungkin tidak menyadari perubahan, tapi mengubah warna latar belakang dokumen dan Anda akan melihat keuntungan dari topeng opacity.
Langkah 4
Kita sekarang akan mulai menambahkan beberapa silau dan pantulan untuk membuat kaca terlihat transparan. Mulailah dengan menggambar dua bentuk seperti yang ditunjukkan di bawah ini. Isi mereka berdua dengan putih dan menurunkankekeruhan mereka sampai 75%. Feather atas satu per 2px dan bagian bawah satu per 3.5px.
Langkah 5
Kami juga akan menambahkan Topeng Opacity ke puncak atas. Tempel salinan keadaan prima di depan dirinya sendiri, membawa Opacity kembali hingga 100%,dan menghapus Feather nya. Isi dengan gradien seperti yang ditunjukkan di bawah ini, pergi dari 75% abu-abu sampai hitam. Akhirnya, membuat Masker Opacityseperti yang kita lakukan sebelumnya.
Langkah 6
Kami akan menambahkan refleksi lain untuk kaca untuk mencocokkan satu di logam. Menggambar bentuk seperti yang ditunjukkan di bawah ini, isi dengan putih, memberikan Feather 2px, dan menurunkan Opacity menjadi 50%.
Langkah 7
Ikuti rutin kami untuk menambahkan Topeng Opacity. Tempel salinan bentuk di depan asli dan mengisinya dengan gradien, yang pergi dari 15% sampai 85% abu-abu abu-abu (jangan lupa untuk menghapus Feather pada bentuk).
Langkah 8
Sekali lagi membuat Topeng Opacity. Juga, setelah Anda telah membuat topeng, mengubah bentuk ini Blending Mode untuk Layar di panel Transparency.
Langkah 9
Sekarang Anda mungkin mendapatkan ide tentang bagaimana untuk membuat refleksi kita. Jadi, menggambar bentuk lain untuk refleksi seperti yang ditunjukkan di bawah ini, kemudian mengisinya dengan warna putih. Turunkan Opacity untuk 40%dan Feather dengan 2px.
Langkah 10
Untuk salinan dari bentuk yang digunakan untuk masker opacity, gunakan 50% abu-abu untuk gradien hitam, seperti yang ditunjukkan di bawah ini.
Langkah 11
Dan sekarang? Anda menebak itu. Buat Mask Opacity.
Langkah 12
Baiklah, refleksi terakhir kami! Sekali lagi, menggambar bentuk di bawah ini, isi dengan putih, menurunkan Opacity untuk 50%, dan Feather dengan 2px.
Langkah 13
Copy dan paste bentuk untuk membuat Topeng Opacity. Gunakan putih untuk gradien hitam untuk bentuk.
Langkah 14
Dan untuk terakhir kalinya, membuat Topeng Opacity.
3. Gandakan Logam Cap
Langkah 1
Kita sekarang akan menambahkan tutup ujung logam lainnya ke baterai kami, yang cukup mudah, mengingat mereka berdua sama. Pilih semua bentuk yang membentuk tutup akhir, dan pergi ke Object> Transform> Reflect. Pada jendela dialog yang muncul, pilih tombol radio vertikal untuk Axis dan klik Copy. Tarik bentuk yang disalin dan tercermin ke ujung lain dari baterai.
Langkah 2
Membuat kontak positif pada baterai mudah dan cepat. Cukup pilih semua bentuk Anda hanya digunakan untuk tutup akhir logam, lalu copy dan paste di depan.Dengan mereka semua dipilih, Alt-klik dan drag pada bagian atas atau bawah pusat menangani kelompok untuk mengecilkan mereka secara vertikal. Anda juga mungkin ingin mengecilkan mereka horizontal sedikit juga.
Setelah Anda punya mereka ukuran yang tepat, mengirim mereka ke belakang(Command + Shift + [), dan kemudian membawa mereka maju satu tingkat(Command +]). Jika dilakukan dengan benar, kontak harus tepat di belakang tutup ujung logam.
4. Buat Green Battery Cahaya
Langkah 1
Hal terakhir yang harus kita lakukan untuk menyelesaikan baterai itu sendiri adalah untuk menambahkan beberapa potongan bulat untuk mewakili dalam ujung kaca.Menarik dua bentuk, seperti yang ditunjukkan di bawah ini (atau hanya mengambil satu dan copy dan paste). Isi satu di sebelah kanan dengan putih dan menurunkanOpacity menjadi 25%, dan mengisi satu di sebelah kiri dengan warna hitam dan menurunkan Opacity menjadi 50%. Selain itu, mengubah Blending Mode yang ada di sebelah kiri untuk Overlay. Akhirnya, Bulu kedua bentuk oleh 3.5px.
Langkah 2
Kita sekarang akan bekerja pada elemen terakhir dari desain, "fuel" (energi baterai). Menggambar bentuk dengan Pen Tool (P) seperti di bawah. Anda dapat membuat tingkat energi apa pun yang Anda ingin, serta warna apa pun yang Anda inginkan. Saya memilih dua-pertiga penuh dan menggunakan gradien hijau.
Langkah 3
Setelah Anda memiliki tampilan yang Anda inginkan untuk "fuel," kirimkan ke belakang. Setelah itu, membawanya ke depan dua kali sehingga langsung di depan lapisan transparan dasar, tapi di belakang refleksi.
Langkah 4
Akhirnya, salin hitam bulat sliver bentuk di tepi kiri kaca dan tarik ke tepi "fuel," kemudian mengubah warna mengisi ke putih.
Langkah 5
Untuk menyelesaikan desain, menambahkan beberapa highlights ke bagian logam dari baterai dengan menggambar oval dan mengisinya dengan warna putih.Selanjutnya, tambahkan Feather untuk mereka dan menurunkan kekeruhanmereka.
Langkah 6
Selain itu, menambahkan Outer Glow ke "fuel" bentuk (Effect> Stylize> Outer Glow). Pastikan Blending Mode diatur ke Screen. Anda akan ingin warna highlight untuk mencocokkan warna bahan bakar. Untuk hijau saya "fuel," saya menggunakan warna hijau lime cerah bagi cahaya (# 19FF00). MembuatOpacity 75% dan 11px Blur.
Anda sudah selesai!
Itu dia! Sekarang Anda punya ikon baterai yang dapat digunakan untuk desain apapun yang Anda butuhkan untuk, dan bahkan sebagai grafis dimodifikasi untuk animasi interaktif atau aplikasi. Saya harap Anda telah mendapatkan beberapa teknik yang berguna dan ide-ide dari tutorial ini.
Comments
Post a Comment