Tambahkan penggaris dan garis panduan gaya Photoshop.
Tambahkan penggaris dan garis panduan gaya Photoshop. Alat ini memberikan presisi tingkat piksel untuk memastikan tata letak dan keselarasan elemen pada halaman web Anda benar-benar akurat.
Penggaris presisi dengan tanda setiap 50 piksel berjalan di sepanjang tepi atas dan kiri viewport. Penggaris ini ikut bergulir bersama halaman dan menunjukkan posisi piksel yang akurat relatif terhadap titik asal halaman (0,0). Tanda garis kecil ada pada interval 10px dengan label setiap 50px.
Klik dan tarik dari penggaris horizontal untuk membuat panduan horizontal, atau dari penggaris vertikal untuk panduan vertikal. Garis panduan akan menempel (snap) ke posisi kursor dan menunjukkan koordinat piksel pastinya (misal, y: 200px). Tarik untuk reposisi, klik dua kali untuk menghapus.
Ketika dua garis panduan paralel ditempatkan, jarak piksel di antara keduanya dihitung secara otomatis dan ditampilkan dengan label bracket penghubung. Tempatkan dua panduan horizontal sejauh 120px dan lihat label "120px" muncul di antara keduanya.
Garis panduan horizontal berwarna biru, panduan vertikal berwarna merah — memudahkan Anda membedakannya secara sekilas saat banyak garis ditempatkan. Setiap panduan menunjukkan posisinya dalam lencana label kecil.
Penggaris dan panduan dirender sebagai overlay transparan yang tidak memengaruhi DOM, tata letak, atau JavaScript halaman. Anda tetap dapat mengeklik elemen halaman di bawahnya. Overlay hanya menangkap klik pada penggaris dan handle panduan.
Tempatkan garis panduan sebanyak yang Anda butuhkan — tidak ada batasan. Buat grid pengukuran lengkap dengan panduan horizontal dan vertikal yang menandai setiap titik keselarasan penting pada halaman.
Mockup menyatakan header setinggi 80px dan konten dimulai pada 120px dari atas. Tempatkan panduan horizontal pada posisi tersebut dan verifikasi secara instan apakah halaman yang diimplementasikan sesuai dengan spesifikasi desain.
Tempatkan panduan pada bagian atas dan bawah elemen yang berulang (kartu, item daftar, bagian) untuk memverifikasi bahwa semuanya memiliki spasi yang identik. Celah yang tidak konsisten antar item akan langsung terlihat jelas.
Tempatkan panduan vertikal pada tepi kiri judul, lalu periksa apakah teks paragraf, tombol, dan gambar di bawahnya sejajar pada garis yang sama. Ketidakselarasan meski hanya beberapa piksel akan terlihat jelas terhadap panduan.
Tempatkan dua panduan vertikal pada tepi kiri dan kanan elemen untuk mengukur lebarnya. Tempatkan dua panduan horizontal untuk tinggi. Jarak yang dihitung otomatis memberikan Anda dimensi piksel yang tepat.
Tempatkan panduan vertikal pada lebar breakpoint umum (768px, 1024px, 1280px) dan ubah ukuran browser untuk memeriksa apakah elemen mengalir (reflow) dengan benar pada setiap breakpoint. Panduan tetap diam sebagai titik referensi visual.
Buka dok mengambang DevSuite Pro dan klik ikon Penggaris Halaman. Penggaris dengan akurasi piksel akan muncul di sepanjang tepi atas dan kiri viewport.
Klik dan tarik dari penggaris atas untuk menempatkan garis panduan horizontal, atau dari penggaris kiri untuk panduan vertikal. Garis akan mengikuti kursor dan berhenti di posisi piksel saat Anda melepaskannya.
Setiap garis panduan menunjukkan posisi pikselnya (misal, y: 200px). Saat dua panduan paralel ditempatkan, jarak di antara keduanya akan ditampilkan secara otomatis dengan label bracket.
Tarik garis panduan mana pun untuk memindahkannya ke posisi baru — label jarak akan diperbarui secara real-time. Klik dua kali pada garis panduan untuk menghapusnya dari halaman.
Klik ikon Penggaris Halaman lagi untuk menyembunyikan semua penggaris dan panduan. Posisi panduan Anda akan tersimpan jika Anda mengaktifkannya kembali dalam sesi yang sama.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
