Gunakan Kembang Api untuk membuat detail indah pada ikon

Pada artikel ini, kami menggunakan perangkat lunak Fireworks untuk membuat beberapa detail pada gambar ikon yang sudah jadi untuk membuat ikon lebih halus dan indah!

Ada dua hal utama yang perlu diperhatikan ketika menggunakan Fireworks (selanjutnya disebut FW) untuk desain ikon:

Pertama, FW berfokus pada desain web dan tidak cocok untuk membuat beberapa efek PS yang terlalu rumit. Anda dapat menantikan filter PS FW CS5;
Kedua, metode pengeditan FW mirip dengan AI. Jika Anda terbiasa bekerja di lingkungan peneduh piksel seperti PS, Anda dapat mengabaikan tutorial ini.

Selanjutnya, mari kita langsung ke intinya. Mari kita salin ikon yang relatif standar untuk penjelasannya, yang akan memudahkan semua orang untuk memahaminya.

Gambar di bawah ini adalah sekumpulan ikon yang dibuat oleh desain eico dalam negeri terkenal. Objek yang ingin kita salin adalah ikon amplop yang dibingkai dalam gambar. Izinkan saya menjelaskan sebelumnya bahwa karena tema tutorialnya, kami akan menambahkan beberapa detail pada ikon ini, sehingga hasil akhir penyalinan kami akan berbeda dengan gambar aslinya.

Langkah 01

Gunting ikon yang ingin Anda salin sebagai referensi dan kunci layernya. Panel jalur FW saya di sini diekstraksi dari Fireworks CS4, tetapi tidak berdampak pada operasi selanjutnya karena saya menggunakan semua fungsi yang disertakan dalam CS3.

Langkah 02

Gunakan alat Rounded Rectangle untuk menggambar persegi panjang membulat mirip dengan gambar sampel, gunakan empat titik kontrol sudut membulat untuk menyesuaikan radius sudut membulat, lalu tekan Ctrl+Shift+G untuk memecah bentuknya.

Kemudian salin persegi panjang bulat pertama, gunakan alat panah putih untuk memindahkan satu piksel ke empat arah, dan buat dua persegi panjang bulat seperti yang ditunjukkan pada gambar (perhatikan bahwa delapan node di sudut membulat diproses dengan panah putih, mereka harus menjadi selaras).

Kita tidak bisa menggunakan Stroke untuk menambahkan batas luar pada persegi panjang, karena batas virtual akan mematikan Anda. Jika persegi panjang bulat yang Anda gambar dengan alat Rounded Rectangle memiliki tepi virtual non-Stroke, sebarkan titik-titiknya, pilih Jalur dengan alat panah hitam, dan klik Round Points to Pixels di panel Path untuk mengembalikan semua titik dari jalur tersebut .

Langkah 03

Salin persegi panjang bulat besar dan letakkan di lapisan atas. Gunakan panah putih dan tombol Shift+panah untuk mendapatkan segitiga terbalik. Kemudian salin. Isi segitiga terbalik atas dengan gradien Linear; isi segitiga terbalik bawah dengan warna coklat solid dan atur bulu-bulu 1px.

Langkah 04

Gunakan panah putih untuk memilih simpul yang ditampilkan di tengah, lalu gunakan tombol panah pada keyboard untuk menurunkan dua piksel agar amplop terlihat lebih panjang (karena satu ikon di sini tidak dibatasi oleh gaya keseluruhan).

Langkah 05

Balikkan segitiga terbalik berisi gradien yang digambar sebelumnya secara vertikal, buat salinan dan letakkan hubungan posisinya seperti yang ditunjukkan pada gambar di bawah. Kedua segitiga terbalik dipisahkan sedikit lebih dari 1 piksel dari atas ke bawah. Anda dapat menggunakan alat panah putih untuk memilih empat titik di atas segitiga terbalik berwarna coklat tua, dan menyeret mouse dengan garis bantu untuk memindahkan titik ke atas 0,3~0,5 piksel. Ini akan membuat warna coklat tua tampak kurang buram terlebih dahulu (dan kemudian Sekali lagi, hentikan ide menggunakan Stroke untuk border secepat mungkin, ini bukan photoshop).

Langkah 06

Perhatikan bahwa ada sorotan di atas ikon pada gambar contoh, dan ini bukan sorotan piksel tunggal yang umum (sorotan 1 piksel di atas sorotan sekitar dua piksel lebih terang daripada 1 piksel di bawah), jadi Anda dapat mempertimbangkan untuk menggunakan radiator elips seperti Ellipse.

Kami memilih dan menyalin persegi panjang bulat bawah dua kali. Setelah memindahkan posisinya, kami mendapatkan dua persegi panjang bulat 2px satu sama lain. Kami menggunakan metode pengurangan dua jalur persegi panjang untuk mendapatkan jalur baru, dan mengisinya dengan Ellipse (putih 0 -100 transparansi), dan terakhir atur mode overlay jalur sorotan ini ke Overlay.

Langkah 07

Tambahkan sorotan 1px ke bawah.

Langkah 08

Hasil saat ini seperti gambar di bawah ini. Mari kita istirahat dan minum teh. Selanjutnya kita akan menambahkan detailnya.

Langkah 09

Dengan mengubah latar belakang menjadi putih untuk sementara, kita dapat melihat bahwa karena bulu-bulu yang digunakan pada segitiga terbalik sebelumnya, beberapa piksel sedikit meluap dari kedua sisi amplop.

Ada dua metode untuk memproses piksel-piksel ini. Salah satunya adalah Ratakan sebagai Bitmap, dan yang lainnya adalah menutupi sambil mempertahankan jalurnya. Saya lebih suka yang terakhir karena ini mempertahankan jalurnya dan dapat diedit nanti jika perlu di bawah:

Langkah 10

Mari kita kembali ke latar belakang gelap. Apakah Anda merasa sisi amplop agak datar? Mari gunakan isian Bar atau Radial untuk menambahkan beberapa efek.

Langkah 11

Selanjutnya, tambahkan highlight satu piksel pada segitiga atas dan bawah amplop. Karena pengoperasian pengurangan jalur (Punch Path, Anda dapat menemukannya di menu Modify – Combine Paths) telah berulang kali dibahas sebelumnya, saya tidak akan menjelaskannya. di sini, seperti yang ditunjukkan di bawah ini:

Langkah 12

Dengan cara yang sama, tambahkan sorotan pada segitiga di bawah.

Langkah 13

Karena latar belakangnya berwarna lebih gelap, kita dapat mempertimbangkan untuk menambahkan cahaya. Di sini kami tidak menggunakan proyeksi atau filter pendaran FW, tetapi menggunakan Path Mengapa? Karena lebih mudah dikendalikan, hanya preferensi pribadi. Kita bisa membuat persegi panjang bulat baru yang 1px lebih besar di bagian atas, bawah, kiri dan kanan dari persegi panjang bulat bawah amplop, tanpa bulu-bulu, dan dengan transparansi 30.

Langkah 14

Kemudian tambahkan highlight 1px di bawah.

Langkah 15

Pada titik ini, ikon pada dasarnya sudah selesai, dan sekarang kita memasuki tahap pemolesan. Kami memilih semua lapisan dan "menyalinnya", lalu dengan cepat tekan Ctrl+Alt +Shift+Z untuk meratakan lapisan menjadi bitmap, lalu atur mode overlay ke Overlay dan transparansi ke 60, sehingga kita dapat melihat saturasinya. ikon. Derajat dan kontras telah ditingkatkan. Ini adalah metode favorit pribadi saya untuk pemolesan cepat, tetapi ini tidak dapat diterapkan setiap saat. Terkadang Anda harus menggunakan filter bawaan FW secara manual untuk menyesuaikan parameter seperti kurva, kontras, dan saturasi.

Menyelesaikan

Efek akhir (segitiga di bawah amplop menggunakan Path sebagai proyeksi)