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

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 32×32 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.

Iklan

15 thoughts on “Mendesain Ikon Twitter 32×32 px — Pixel Perfect

  1. OOT,saya adalah manusia type yg suka ingin tahu,pun demikian dgn photoshop,yo nggak ahli2 banget,yg bisa dan jika harus berkumpul dengan berbagai kalangan minimal yambung ketika di ajak ngobrol,termasuk soal design…

    dan blog mas Jeprie juga termasuk salah satu rujukan,karena saya belum berniat menjadi profesional di bidang design seperti mas Jeprie makanya artikel di blog ini hanya saya jadikan media belajar dan referensi…

  2. Yang di bawah artikel itu lebih besar pak. Sepertinya 64×64 px. Ini setengahnya, 32×32 px. Ada yang lebih kecil, 24×24 px bahkan 16×16 px. Ikon facebook di sebelah tombol Like itu ukurannya 16×16 px.

    Pembuatan ikon seperti ini tidak rumit, tapi yang berat adalah mengedit detailnya. Harga per set ikon detail seperti ini cukup mahal pak. Helveticon: $279. Socialiconized: $6,99.

    Dalam desain ikon tidak perlu tahu banyak teknik, yang penting sabar ketika bekerja dengan detail-detailnya.

  3. Situs ini memang ditujukan untuk media belajar dan referensi terutama buat saya pribadi dan bagi para pengunjung yang mungkin tertarik.

  4. mantebh mas jeprie.. gimana kalo huruf “t” nya diganti sama gambar burung.. sepertinya sekarang sedang populer di kalangan icon designer..hehe

  5. Biasanya dalam satu set ada puluhan ikon. Semua ikon ini harus terlihat jelas, bisa dikenali, dan tetap tajam walaupun ukurannya sangat kecil.

    Tidak ada teknik khusus, yang penting sabar mau menggeser pixel sedikit-sedikit.

  6. Silakan lihat icon-icon kecil lainnya. Padding sebesar ini tidak jadi masalah. Kadang dibutuhkan untuk mempermudah pengaturan jarak antar ikon.

    Sebagai contoh, icon-icon kecil di situs ini juga memiliki padding yang cukup besar. Tidak harus semua space diisi oleh pixel.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s