Rabu, 22 Januari 2014

Mendesain Pixel Perfect

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

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

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.

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

Tidak ada komentar:

Posting Komentar