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
Iklan

6 thoughts on “Mendesain Pixel Perfect dengan Photoshop

  1. Mungkin pertanyaan sederhana dari saya misalkan saya punya file .jpg dengan resolusi 600x800px size 300kb ingin saya kecilkan sizenya menjadi 50kb tapi resolusinya tetep 600x800px dg kualitas yg tidak begitu jauh dengan aslinya apa bisa mas.. Biar lebih ringan load blog nya saat ada gambar2 gitu…

  2. Belum paham dengan arti resolusi ya Mas Dani?

    Untuk menurunkan ukuran file gambar ada beberapa cara. Di Photoshop caranya dengan di-save ulang menggunakan perintah Save for Web & Devices (Ctrl + Shift + Alt + S). Di kotak dialognya turunkan nilai Quality. Tidak ada aturan pasti untuk nilai Quality yang ideal karena bergantung pada gambarnya. Untuk web, biasanya 60 sudah cukup dan maksimalnya 80.

    Dimensi gambar akan tetap 600 × 800 px karena tidak ada pixel yang dibuang.

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