Cara Membuat Ikon Menu Hamburger dan Pencarian Menggunakan PicsArt

Ikon Menu Hamburger

Pada sebuah website atau blog sering kita lihat ikon menu bergambar garis tiga. Istilah untuk ikon ini sering disebut "hamburger". Mungkin karena gambarnya seperti hamburger yaitu kue yang berlapis sayur, daging, dan roti. 

Ikon hamburger ini terdapat dalam kode Unicode, namanya trigram. Dalam penulisan kode CSS dipanggil dengan : before {content: '\ 2630'; }

Bagi Anda yang lebih suka hal yang simple tanpa dipusingkan dengan menghafal kode komputer, maka mendesain gambar sendiri menggunakan aplikasi sepertinya lebih dianjurkan.

Keuntungan dari membuat gambar ikon sendiri yaitu gambar lebih jelas dan tentunya lebih menarik. Selain itu kita tidak perlu takut jika gambar tidak mendukung di semua browser versi berapa pun. Kebalikannya jika kita menggunakan pengkodean, gambar yang dihasilkan terlalu kecil dan grafiknya bisa buram di beberapa browser. 

Dengan membuat gambar ikon sendiri, tentunya kita akan lebih puas, bisa atur warna, ketebalan, dll. Yakinlah ini hanya rumit di awal, untuk selanjutnya kita bisa gunakan gambar tersebut kapanpun kita mau. 

Untuk mendesain gambar ikon menu atau ikon hamburger, kita bisa menggunakan aplikasi PicsArt. Berikut langkah-langkahnya. 

1. Buka aplikasi PicsArt, klik tombol plus. 

2. Search gambar yang mau diolah. 

Jika ingin desain warna hitam, cukup input search gambar dengan kata kunci "black", maka akan muncul gambar yang tema nya hitam, tinggal pilih salah satunya. Di aplikasi PicsArt ini kita bebas menggunakan gambar yang ada, tanpa dipusingkan dengan hak cipta. 

3. Mulai buat stiker dengan gambar satu buah garis hitam. Sebelumnya saya sudah pernah buat tutorial cara buat stiker dengan PicsArt, bisa Anda lihat di sini . Pilih menu alat, pemotongan, lalu pilih model persegi dan atur jadikan persegi panjang, bisa atur warna pinggir dan ketebalannya, seperti gambar di bawah ini, lalu simpan. 

4. Buka editan baru, klik tombol plus, pilih paling bawah menu warna latar belakang pilih transparan. Tambahkan gambar, ambil gambar stiker tadi, lalu duplikat gambar, atur dan rapikan. 

Sehingga menghasilkan gambar seperti di bawah ini, simpan. Gambar menu hamburger sudah jadi, file yang dihasilkan berformat png dan ukuran file sangat ringan. Biasanya lebih kurang 100 kb saja bahkan di bawahnya. Jadi sangat relevan untuk dipakai sebagai ikon menu web, karena ukuran ringan tentu saja tidak mengganggu kecepatan loading. 

Ikon Pencarian

Langkah membuat ikon pencarian hampir sama dengan membuat ikon hamburger, sebagai berikut :

1. Klik tombol plus, cari gambar warna hitam polos dari menu pencarian

2. Buat stiker dengan gambar lingkaran dengan garis pinggir putih

U

3. Buat garis bantu lingkaran di dalam stiker menggunakan gambar lukis, pilih gambar lingkaran dan warna putih, menu samping kiri untuk pilihan warna. 

4. Jika garis bantu sudah terbentuk, lanjut klik panah atas. Lalu buka menu crop, buka pilihan.

 

5. Seleksi bagian dalam lingkaran dengan vektor berbentuk lingkaran atau bisa juga berbentuk kurva, lalu buang dengan gambar gunting di kiri atas, lanjut klik ceklis simpan gambar, sehingga menghasilkan stiker baru lingkaran donat. 

Sampai di sini gambar lingkaran sudah jadi, gambar kaca pembesar tapi belum ada tangkainya. 

6. Membuat tangkai, buka file baru klik tombol plus, pilih menu paling bawah, yaitu warna latar belakang, pilih transparan. Tambahkan gambar stiker donat tadi, atur posisi lingkaran donat ke kiri atas, supaya kita buat tangkainya arah kanan bawah. 

7. Pilih menu gambar kuas, lalu pilih gambar garis, atur ketebalannya dan atur warna putih untuk pinggir, dan hitam untuk isi. 

Buatlah gambar tangkai secantik menurut kita saja. Jika sudah jadi berarti gambar sudah selesai. Simpan gambar tersebut, gambar ikon pencari siap digunakan untuk kapan pun. 

Demikian saja tutorial cara membuat ikon hamburger dan ikon pencarian menggunakan aplikasi PicsArt. Selamat mencoba dan semoga bermanfaat ya. 😊