Dalam tutorial ini, Anda akan mempelajari proses pembuatan ikon twitter berukuran 32×32 px berdetail tinggi. Proses pembuatan ikon kecil seperti ini tidaklah sulit, yang sangat diperlukan adalah kesabaran karena Anda akan bekerja dengan pixel yang ukurannya hanya sebesar debu.
Preview
Detail Tutorial
- Tingkat Kesulitan: Pemula
- Program yang Digunakan: Adobe Photoshop
- Materi Yang Dipelajari: Menggambar vektor, Layer Style
- Lama Pengerjaan: 15 menit.
Tips Mendesain Ikon Kecil
Mendesain ikon memerlukan ketelitian yang sangat tinggi karena kita bekerja dengan setiap pixel, satu per satu. Dalam proses ini, akan sangat membantu jika Anda bisa melihat gambar dalam perbesaran paling tinggi dan dalam ukuran 100%. Klik Window Arrange > New Window for File Name. Geser baris judul salah satu file hingga lepas dari jendela aplikasi utama Photoshop. Tekan Ctrl + 1 untuk melihat pada perbesaran 100% dan Ctrl + 0 untuk melihat pada perbesaran maksimal.
Dalam gambar di bawah, Anda bisa melihat setiap pixel dengan jelas pada perbesaran maksimal dan tampilan ikon dalam perbesaran 100%.
Tutorial
Langkah 1: Latar Ikon
Buat file baru berukuran 32×32 px. Buat rounded rectangle berukuran 24 x 24 px dengan Radius: 2 px. Untuk membantu mengukur, gunakan panel Info.
Anda bisa memastikan ukuran yang ditampilkan di panel Info dalam satuan pixel dengan membuka menu panel dan pilih Panel Options lalu pilih Ruler Units: Pixels.
Langkah 2
Beri Layer Style Gradient Overlay dan Stroke.
Langkah 3
Buat shape persegi di tengah rounded rectangle dengan ukuran 22 x22 px. Turunkan Fill layer ke 0%.
Beri Stroke berikut.
Langkah 4
Buat shape ellipse di bagian atas ikon. Ambil rounded rectangle yang tadi kita buat dan atur modenya ke Intersect. Turunkan Fill ke 0%.
Beri Gradient Overlay.
Langkah 5: T untuk Twitter
Aktifkan tool pen. Buat shape membentuk logo twitter. Prosesnya sederhana, Anda bisa menjiplak logo twitter dari google.
Langkah 6
Sekarang adalah bagian terpenting dalam desain ikon. Geser secara manual setiap titik path hingga diperoleh bentuk yang tajam. Jika Anda melewatkan tahap ini, ikon yang diperoleh akan buram.
Di bawah, Anda bisa melihat path logo twitter sebelum dan setelah proses editing.
Langkah 7
Beri sedikit Drop Shadow untuk menambah kontras logo dengan latar.
Langkah 8
Klik File > Save for Web atau Ctrl + Shift + Alt + S untuk menyimpan ikon ke format web. Pilih tipe file PNG-24 dengan mengaktifkan transparansi.
Hasil Akhir
Di bawah adalah hasil akhir ikon yang kita peroleh. Ikon ini transparan dan bisa disimpan di atas berbagai macam latar. Dalam contoh di bawah, saya juga menggunakan pola Pixel Patterns dari PSDfreemium di latar.
Saya harap Anda belajar teknik baru di tutorial ini. Jika menyukai tutorial ini, jangan lupa untuk ikut menyebarkan melalui tombol share atau like di bawah.
by desaindigital.com
No comments:
Post a Comment