Wajib Banget Kamu Baca Jika Ingin Desain Ikon Kamu Lebih Unik dan WOW!!

Ikon adalah bagian integral dari desain kami. Mereka adalah isyarat visual untuk menunjukkan berbagai tindakan, dan mereka dapat memberikan identitas unik pada suatu produk. Tetapi terlalu sering kita memilih untuk merayakan kepentingan mereka dengan mengunduh set ikon yang sama dan membuat setiap ikon untuk setiap situs web terlihat kurang lebih sama. Betapa cara memperlakukan sesuatu yang begitu penting.

Untuk mengatasi masalah ini, saya telah membuat panduan untuk membantu desainer menambahkan kedalaman visual ke ikon mereka dan membuatnya unik untuk produk yang mereka wakili. Tutorial ini sebagian besar terinspirasi oleh desain Google Material yang berpengaruh.

gambar

Prinsip Desain Material Google

Seperti yang dikatakan Google , “materi adalah metafora.” Ini meminjam isyarat visual dari dunia fisik dan menciptakan bahasa visual baru untuk membakukan semua antarmuka mereka. Prinsip-prinsip Desain Material dapat diakses dan dapat dengan cepat diterapkan untuk meningkatkan daya tarik antarmuka dan pengalaman pengguna.

1. Gunakan Bentuk Geometris Sederhana dan Warna Tebal

gambar

Tren desain datar terinspirasi Desain Material, yang juga didasarkan pada bentuk datar dasar. Pilih dengan hati-hati bentuk mana yang paling mewakili elemen yang digambarkan ikon.

2. Tambahkan Kedalaman Dengan Bayangan Halus

gambar

Drop shadow adalah cara yang bagus untuk menipu mata dan memberi kesan mendalam pada desain Anda, karena itu menstimulasi efek cahaya yang dilemparkan pada suatu objek.

Perhatikan bahwa cahaya alami sering disimulasikan berasal dari sudut kiri atas.

3. Gunakan Nuansa Warna untuk Mengganti Drop Shadows

gambar

Setiap warna digunakan dalam berbagai warna untuk mensimulasikan kedalaman visual. Misalnya, dalam ikon Gmail, Anda dapat melihat bahwa berbagai warna merah digunakan untuk bentuk M, dan warna abu-abu yang lebih gelap digunakan di bawah tutup amplop.

Bagaimana Anda Dapat Melakukannya Juga: Demo Langkah-demi-Langkah

Kami akan menerapkan versi disederhanakan dari gaya Desain Material, dan untuk setiap ikon, kami hanya akan menggunakan tiga warna dengan warna yang sama dan menjaga bayangan tetap datar dan pendek, alih-alih efek “bayangan panjang” yang umum.

Sumber daya

  • Periksa ikon gratis lengkap yang ditetapkan dari Google di sini .

Mari kita mulai.

1. Ikon Baut

gambar

Hancurkan ikon asli menjadi dua, dan buat bagian atas tampak terangkat. Anda dapat mencapai ini dengan membuat efek bayangan di persimpangan dua bentuk. Gunakan tiga warna kuning – lebih terang di bagian atas, yang lebih gelap di bagian bawah, dan pertahankan bayangan paling gelap untuk bayangan.

2. Ikon Obrolan

gambar

Pada ikon asli, kami memiliki petunjuk tentang efek bayangan di celah antara dua gelembung, di situlah Anda akan membuat bayangan.

Pada bentuk yang lebih rendah, pilih titik yang membentuk sudut kanan di celah, dan gerakkan ke atas ke kiri hingga Anda membentuk sudut kanan di sudut kiri atas.

Gandakan gelembung atas dan gerakkan salinan ke bawah dan ke kanan. Pilih salinan dan bentuk gelembung bawah, gunakan “Pathfinder” untuk membuat divisi, dan pertahankan hanya persimpangan dengan salinan Anda sebelumnya.

Sekarang Anda dapat menerapkan tiga warna biru dan memberikan yang paling terang di atas, paling gelap di tengah, dan yang paling gelap ke bawah.

3. Periksa Tandai Ikon

gambar

Kami akan membuat efek kertas terlipat.

Gandakan ikon, dan hapus dua poin tambahan di paling kanan atas, lalu di paling kiri untuk mendapatkan dua bagian.

Gandakan flip kiri, dan pindahkan di atas yang kanan.

Perpotongan dua bentuk untuk menciptakan efek bayangan. Kemudian aplikasikan tiga warna sambil mempertahankan yang paling gelap untuk bayangan, kedua-gelap untuk bagian panjang, dan warna lebih terang untuk bagian atas.

4. Ikon Bendera

gambar

Mulailah dengan membulatkan tepi, lalu ekstrak pangkal bendera.

Untuk membuat efek lipat, lacak dua garis yang memotong secara diagonal. Menggunakan “Pathfinder,” bagi bentuk bendera dengan garis-garis, dan terapkan tiga warna hijau ke bendera sambil menjaga abu-abu dasar.

5. Ikon Hati

gambar

Gandakan ikon hati.

Isolasi bagian kiri bentuk.

Lacak garis diagonal ke bawah, datang dari titik kanan atas.

Tumpang tindih bentuk yang dihasilkan dengan hati, lalu gerakkan ke kanan untuk mengurangi bentuk bayangan. Oleskan tiga warna pink Anda.

6. Ikon Pegunungan

gambar

Kesenjangan kosong di dalam ikon asli menunjukkan di mana kita dapat menempatkan bayangan.

Buat dua bentuk segitiga dari setiap pick.

Pindahkan salinan yang lebih kecil ke kanan, dan ekstrak persimpangan yang dihasilkan sebagai bentuk bayangan.

Oleskan tiga warna cokelat dengan menjaga yang paling terang ke kiri, yang paling terang ke dua untuk segitiga besar, dan yang paling gelap untuk bayangan di tengah. Terapkan beberapa radius sudut untuk melunakkan hasilnya.

7. Ikon Orang

gambar

Pilih dan gandakan bagian bawah orang tersebut ke kiri. Sejajarkan salinan itu dengan orang di sebelah kanan. Sekarang, pilih tiga bentuk yang tumpang tindih, dan terapkan alat “Divide” dari panel “Pathfinder”. Sekarang, terapkan warna untuk menyelesaikan.

8. Ikon Floating Square

gambar

Pilih bentuk yang lebih rendah, dan gerakkan titik tengah-atas ke atas hingga terlihat seperti berlian.

Gandakan bentuk berlian atas, dan pindahkan salinan ke bawah 10 atau 20 px.

Pilih dua bentuk yang lebih rendah, dan terapkan alat “Divide” dari panel “Pathfinder”.

Dari bentuk berpotongan yang dihasilkan, hanya simpan dua bagian yang lebih rendah, dan hapus poin tambahan apa pun.

Bungkus dengan menerapkan tiga warna merah sambil menetapkan yang paling gelap di tengah.

9. Ikon Huruf

gambar

Dengan “Direct Selection Tool (A),” pilih titik kedua yang lebih tinggi dari bentuk amplop.

Tambahkan titik di segmen ke kanan menggunakan “Pen Tool.”

Sekarang Anda memiliki titik tambahan, Anda dapat membentuk kembali ruang negatif itu agar terlihat seperti kertas dengan mengangkat dua titik atas dan memindahkannya ke kanan dan kiri seperti yang ditunjukkan.

Pilih semuanya, dan terapkan pembagian dari panel “Pathfinder”. Pisahkan bentuk kertas atas dari amplop, lalu duplikat bagian amplop di atas kertas untuk memotong bentuk bayangan sebelum menerapkan tiga warna biru.

10. Ikon Kue

gambar

Isolasi versi duplikat dari bagian bawah kue.

Persempit lebarnya dengan menggerakkan tepi kiri dan kanan ke dalam.

Pindahkan bentuk yang dihasilkan di atas ikon asli, dan perpanjang titik yang lebih tinggi untuk tumpang tindih bentuk lapisan gula.

Buat pembagian dari semua bentuk yang tumpang tindih dengan “Pathfinder,” dan hapus poin tambahan di samping dasar kue sempit yang Anda buat sebelumnya.

Lengkapi kue Anda dengan mengoleskan oranye terang ke lapisan gula dan lilin, warna yang lebih gelap ke pangkalan, dan oranye yang lebih gelap untuk bentuk api dan tepi bayangan.

Tingkatkan Tampilan dan Rasa Set Ikon Anda

Membuat ikon dengan gaya Material dapat dicapai dengan kesederhanaan. Anda hanya perlu kombinasi yang baik dari bentuk geometris yang bijaksana, nuansa warna yang berani, dan efek drop shadow.

Berita baiknya adalah, Anda bahkan tidak perlu membuat semua ikon dari awal, seperti yang kami lakukan di tutorial ini. Anda dapat mulai dari ikon gratis dan datar yang ada, dan menerapkan teknik sederhana yang baru saja Anda pelajari.

Saya ingin melihat apa yang dapat Anda pikirkan. Jangan ragu untuk membagikan komentar dan ikon khusus Anda.

sumber: toptal.com

Latest articles

12.6k Followers
Follow

Related articles