เพิ่มไม้บรรทัดและเส้นนำแบบ Photoshop
ไม้บรรทัดและเส้นนำแบบ Photoshop
Precise rulers with tick marks at ทุก 50 pixels run along the top and left edges of the viewport. The rulers scroll with หน้า and show accurate pixel positions relative to หน้า origin (0,0). Tick marks at 10px intervals with labels at ทุก 50px.
Click and drag from the horizontal ruler to create a horizontal guide, or from the vertical ruler for a vertical guide. Guides snap to the cursor position and show their exact pixel coordinate (e.g., y: 200px). Drag to reposition, double-click to remove.
When two parallel guides are placed, the pixel distance between them is โดยอัตโนมัติ calculated and displayed with a connecting bracket and label. Place two horizontal guides 120px apart and see "120px" labeled between them.
Horizontal guides are blue, vertical guides are red — making it easy to distinguish them at a glance when multiple guides are placed. แต่ละ guide shows its position in a small label badge.
Rulers and guides are rendered as a transparent overlay that doesn't affect หน้า's DOM, layout, or JavaScript. You can still click through to interact with page elements. The overlay only captures clicks on the rulers and guide handles.
Place as mใดก็ได้ guides as you need — there's no limit. Create a complete measurement grid with horizontal and vertical guides marking ทุก significant alignment point บนหน้า.
The mockup says the header is 80px tall and the content starts at 120px from the top. Place horizontal guides at those positions and ทันที verify whether the implemented page matches the design specifications.
Place guides at the top and bottom of repeated elements (cards, list items, sections) to verify they all have identical spacing. Inconsistent gaps between items become immediately obvious.
Place a vertical guide at a heading's left edge, then check if the paragraph text, buttons, and images below align to the same line. Misalignments of even a few pixels are visible against the guide.
Place two vertical guides at an element's left and right edges to measure its width. Place two horizontal guides for height. The auto-calculated distance gives you the exact pixel dimensions.
Place a vertical guide at common breakpoint widths (768px, 1024px, 1280px) and resize the browser เพื่อตรวจสอบ whether elements reflow correctly at each breakpoint. The guides stay fixed as visual reference points.
เปิด DevSuite Pro dock ลอย and click the Page Ruler icon. Pixel-accurate rulers appear along the top and left edges of the viewport.
Click and drag from the top ruler to place a horizontal guide line, or from the left ruler for a vertical guide. The guide follows your cursor and snaps to the pixel position where you release.
แต่ละ guide shows its pixel position (e.g., y: 200px). When two parallel guides are placed, the distance between them is โดยอัตโนมัติ displayed with a labeled bracket.
Drag ใดก็ได้ guide to move it to a new position — the distance labels update แบบเรียลไทม์. Double-click a guide to remove it from หน้า.
คลิก Page Ruler icon again to hide all rulers and guides. Your guide positions are preserved if you reactivate during the same session.
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ
