Mendesain Pixel Perfect dengan Photoshop

Dalam desain web atau ikon, hasil akhir akan dilihat dalam pixel sehingga kita harus bisa mengontrol setiap pixel yang digunakan. Masalahnya, Photoshop tidak dirancang untuk desain berbasis pixel tapi lebih condong pada desain cetak yang lebih bergantung pada resolusi. Akibatnya, Photoshop menangani satu pixel dengan cara yang kadang aneh. Di artikel ini, saya akan tunjukkan beberapa tips untuk menghasilkan desain pixel perfect dengan Photoshop.
[hr]

Teknik 1: Menggunakan Dua Jendela



Teknik pertama adalah dengan melihat file dalam dua ukuran perbesaran. Satu jendela dalam perbesaran 100% untuk melihat hasil akhir dan satu lagi dalam resolusi lebih besar agar bisa bekerja dengan akurat hingga ke pixel terdekat.
Untuk melakukan teknik ini klik View > New Window for [nama_file]. Geser baris judulnya untuk memisahkan jendela file sehingga bisa dilihat bersamaan dengan jendela yang lain. Tekan Ctrl + 1 untuk menampilkan file dalam perbesaran 100%. Teknik ini saya perlihatkan dalam tutorial Mendesain Ikon Twitter 32 × 32 px.

Mendesain Pixel Perfect dengan Photoshop


[hr]

Teknik 2: Snap to Pixels


Anda bisa mengaktifkan fitur Snap to Pixels pada tool Rectangle dan Rounded Rectangle. Dengan fitur ini semua shape yang Anda buat akan tepat pada grip pixel sehingga tidak akan ada sisi-sisi buram.

Mendesain Pixel Perfect dengan Photoshop


Mendesain Pixel Perfect dengan Photoshop


[hr]

Teknik 3: Menggunakan Grid 1 px


Buka Preferences Photoshop (Ctrl + K) lalu di bagian Guides, Grid & Slices isikan Gridline Every: 10 pixels dan Subdivisions: 10. Setting ini akan menghasilkan grid berjarak tepat 1 px. Ubah Style grid ke Dots agar tampilan grid tidak terlalu mengganggu.

Mendesain Pixel Perfect dengan Photoshop


Pastikan untuk mengaktifkan Snap to Grid agar setiap objek secara otomatis menempel pada grid.

Mendesain Pixel Perfect dengan Photoshop


Mendesain Pixel Perfect dengan Photoshop
Tampilan shape rounded rectangle dengan grid kanvas 10 px.


[hr]

Teknik 4: Menggeser 1 px


Setiap kali tombol panah ditekan (istilahnya nudging), Photoshop akan menggeser objek sejauh 1 px pada layar. Artinya, dalam perbesaran 200% Photoshop akan menggeser 0,5 px. Untuk mencegah pergeseran yang tidak tepat, lakukan nudging pada hanya pada perbesaran 100%. Untuk mempercepat, Anda bisa membuka jendela baru dengan perbesaran 100% dan mengaktifkannya setiap kali akan melakukan nudging.

Mendesain Pixel Perfect dengan Photoshop