Mendesain Ikon Twitter 32×32 px — Pixel Perfect

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.

Posted in: