Mendesain Ikon Twitter 32x32 px -- Pixel Perfect

Dalam tutorial ini, Anda akan mempelajari proses pembuatan ikon twitter berukuran 32x32 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


final.jpg

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-ikon-twitter-pixel-perfect-01.jpg


Tutorial


Langkah 1: Latar Ikon


Buat file baru berukuran 32x32 px. Buat rounded rectangle berukuran 24 x 24 px dengan Radius: 2 px. Untuk membantu mengukur, gunakan panel Info.

tutorial-ikon-twitter-pixel-perfect-02.jpg
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.

tutorial-ikon-twitter-pixel-perfect-03.jpg

tutorial-ikon-twitter-pixel-perfect-04.jpg

Langkah 2


Beri Layer Style Gradient Overlay dan Stroke.

tutorial-ikon-twitter-pixel-perfect-05.jpg

tutorial-ikon-twitter-pixel-perfect-06.jpg

tutorial-ikon-twitter-pixel-perfect-07.jpg

Langkah 3


Buat shape persegi di tengah rounded rectangle dengan ukuran 22 x22 px. Turunkan Fill layer ke 0%.

tutorial-ikon-twitter-pixel-perfect-08.jpg
Beri Stroke berikut.

tutorial-ikon-twitter-pixel-perfect-09.jpg

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%.

tutorial-ikon-twitter-pixel-perfect-10.jpg
Beri Gradient Overlay.

tutorial-ikon-twitter-pixel-perfect-11.jpg

tutorial-ikon-twitter-pixel-perfect-12.jpg

Langkah 5: T untuk Twitter


Aktifkan tool pen. Buat shape membentuk logo twitter. Prosesnya sederhana, Anda bisa menjiplak logo twitter dari google.

tutorial-ikon-twitter-pixel-perfect-13.jpg

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.

tutorial-ikon-twitter-pixel-perfect-14.jpg

tutorial-ikon-twitter-pixel-perfect-15.jpg

Langkah 7


Beri sedikit Drop Shadow untuk menambah kontras logo dengan latar.

tutorial-ikon-twitter-pixel-perfect-16

tutorial-ikon-twitter-pixel-perfect-17

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.

tutorial-ikon-twitter-pixel-perfect-18

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.

final

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. Tentu saja, saya harap Anda juga mengikuti saya di twitter.