Advertisement
  1. Web Design
  2. Browser Extensions

Menyempurnakan dalam Browser: mendapatkan Pixel kesempurnaan dengan Inspektur Visual

by
Read Time:2 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Menjadi "pixel sempurna" adalah sesuatu yang menjadi kurang penting untuk web designer sekali kita semua telah menerima bahwa situs web dapat terlihat berbeda di layar yang berbeda dan perangkat. Tapi itu tidak berarti perhatian terhadap detail yang kurang diinginkan. Dalam tutorial ini saya akan memperkenalkan Anda ke alat (ekstensi Chrome) yang dapat membantu Anda mencapai kesempurnaan piksel dalam desain web Anda.

Memperkenalkan Visual Inspektur

Menggunakan Visual Inspektur

Pertama-tama, pergi ke www.canvasflip.com/visual-inspector untuk men-download ekstensi Chrome. Setelah terinstal, Anda akan diminta untuk mendaftar untuk sebuah account (gratis, tetapi upgrade tersedia dari $5 per pengguna, per bulan). Anda akan bangun dan berjalan!

Visual Inspector Chrome extensionVisual Inspector Chrome extensionVisual Inspector Chrome extension
Visual ekstensi Chrome Inspektur

Inspektur memungkinkan Anda untuk memilih setiap elemen pada halaman dan memeriksa sifat. Berikut adalah apa yang para Inspektur menunjukkan ketika kita memilih logo pada Tuts + homepage, misalnya:

VIsual Inspector logo selectVIsual Inspector logo selectVIsual Inspector logo select

Kita dapat melihat markup yang digunakan, dan berbagai kelas yang ditugaskan untuk elemen. Kita juga dapat melihat padding, perbatasan, dan gaya-gaya lain yang diterapkan. Kita dapat melihat gambar sumber dalam kasus ini, dan dengan menggulir ke bawah kita dapat lihat jauh lebih selain.

Ekspor

Pada tahap ini kita dapat mengekspor semua aset yang dapat kita lihat. File gambar, meskipun tidak dalam SVG format, sudah tersedia untuk mengambil. Bahkan teks dan gaya-gaya lain dapat diekspor ke JPG atau PNG dan dibawa ke aplikasi desain pilihan Anda, yang benar-benar berguna.

Pengukuran

Memindahkan mouse Anda di sekitar browser dan klik pada berbagai elemen akan mengungkapkan pengukuran dan perataan, ditentukan dan tersirat, membantu Anda mendapatkan ide yang solid dari mana segala sesuatu adalah dalam kaitannya dengan segala sesuatu yang lain- dan membantu Anda mencapai kesempurnaan piksel.

Mengubah dan menyimpan properti

Seperti dengan banyak inspeksi alat-alat lain untuk browser, Anda dapat mengubah properti dan gaya dari setiap elemen yang Anda suka. Namun dengan Visual inspektur, seperti Anda mungkin memeriksa, semua gaya pertimbengan dengan alat-alat visual (slider, warna pemetik dan seterusnya).

Setelah berubah, Anda dapat menekan tombol CSS Output untuk mengungkapkan gaya baru yang Anda buat.

Atau, Anda dapat menekan Sync perubahan pada Info tab dan suntingan Anda akan disimpan ke akun Anda. Hal ini memungkinkan Anda untuk meninjau kembali perubahan-perubahan di masa depan – sesuatu yang biasa browser Inspektur tidak memungkinkan untuk secara default.

Kesimpulan

Inspektur visual adalah alat yang hebat bagi mereka yang menikmati penyulingan dalam browser. Memeriksa apa yang sudah ada, membuat perubahan apa pun yang Anda inginkan, kemudian ekspor perubahan tersebut atau menyimpannya untuk nanti. Dan jika Anda meng-upgrade, Anda dapat berkolaborasi dengan anggota tim juga. Pergi dan memeriksa kemudian marilah kita tahu apa yang Anda pikirkan di komentar!

Pelajari lebih lanjut tentang kolaborasi untuk desainer

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.