Guides và Grid trong Photoshop: chia bố cục chuẩn từng pixel

Guides (đường gióng) và Grid trong Photoshop: bật thước, kéo đường gióng, New Guide đúng toạ độ, New Guide Layout chia 12 cột, Snap, Smart Guides, Lock và Clear Guides.

Trả lời nhanh: guides (đường gióng) trong Photoshop là các đường thẳng màu xanh nằm trên canvas, giúp bạn đặt ảnh và chữ thẳng hàng theo đúng toạ độ pixel nhưng không bao giờ in ra file. Bật thước bằng View > Rulers (⌘R) rồi kéo một đường từ thước vào canvas; muốn đặt chính xác thì dùng View > Guides > New Guide...; muốn chia cột cho cả trang thì dùng View > Guides > New Guide Layout.... Grid (lưới) bật bằng View > Show > Grid (⌘').

Thực hiện trên Photoshop 2026 (macOS), 01/11/2026. Tên menu giữ nguyên tiếng Anh như trên giao diện để bạn dễ tìm.

Ví dụ xuyên suốt bài: một bài đăng vuông 1080 × 1080 px cho workshop cắm hoa của "Tiệm hoa Sương Sớm" (thương hiệu mẫu do ColorME đặt ra cho bài, không phải cửa hàng thật). Chữ dùng font Be Vietnam Pro, một font có đủ dấu tiếng Việt. Kết quả cuối cùng và bản đang làm có đường gióng nằm cạnh nhau dưới đây.

Trái: bài đăng khi đang làm trong Photoshop, lưới 12 cột hiện rõ. Phải: file JPG xuất ra, các đường gióng không có trong file. Ảnh hoa cúc: Maria Lupan / Unsplash.

Guides, Grid và Smart Guides khác nhau thế nào?

Cả ba đều là "đồ phụ trợ" chỉ hiện trên màn hình. Trang trợ giúp của Adobe gọi guides là các đường non-printing (không in ra), nổi trên ảnh và có thể dời hoặc xoá bất cứ lúc nào.

• Guides do bạn tự đặt từng đường, ở đúng toạ độ bạn muốn. Đây là thứ dùng nhiều nhất khi dàn trang.
• Grid là lưới đều khắp canvas, khoảng cách do bạn đặt trong Settings. Hợp để căn các khối vuông, icon, hoạ tiết lặp.
• Smart Guides tự hiện khi bạn kéo một layer, báo cho biết mép hoặc tâm của nó đang thẳng hàng với layer nào.

Nếu bạn mới bắt đầu với Photoshop, nên đọc trước bài hướng dẫn Photoshop cho người mới để quen với layer và Move Tool. Định nghĩa ngắn của thuật ngữ này có trong thư viện ColorME: Guides là gì.

Bước 1: Bật thước với View > Rulers (⌘R)

Đường gióng được kéo ra từ thước, nên việc đầu tiên là bật thước. Vào View > Rulers hoặc bấm ⌘R (Windows: Ctrl+R). Thước hiện ở mép trên và mép trái cửa sổ ảnh, với số 0 nằm ở góc trên trái của canvas.

Menu View > Rulers, phím tắt ⌘R. Dấu tích cạnh Snap cho biết chế độ hút đang bật. (ảnh chụp màn hình: Photoshop 2026)

Đơn vị trên thước nên là pixel khi bạn làm ảnh cho mạng xã hội hay web. Nếu thước đang hiện cm hoặc inch, bài thước trong Photoshop hướng dẫn đổi đơn vị và đo khoảng cách.

Bước 2: Kéo đường gióng ra từ thước

Đặt chuột lên thước bên trái, giữ chuột và kéo vào canvas: một đường gióng dọc đi theo con trỏ. Kéo từ thước phía trên sẽ ra đường gióng ngang. Trong lúc kéo, Photoshop hiện một ô nhỏ ghi toạ độ, ví dụ X: 540,0 px, nên bạn biết đường đang ở đâu trước khi thả chuột.

Đang kéo đường gióng từ thước trái. Ô toạ độ ghi X: 540,0 px, đúng tâm của canvas rộng 1080 px. (ảnh chụp màn hình: Photoshop 2026)

Khi Snap đang bật, đường gióng tự "hút" vào các điểm đặc biệt như tâm canvas hay mép layer, nên rất dễ đặt đúng giữa. Cách kéo tay nhanh nhưng phụ thuộc độ phóng to của màn hình; khi cần một con số tuyệt đối chính xác, dùng bước 3.

Bước 3: Đặt đường gióng đúng toạ độ với New Guide

Vào View > Guides > New Guide.... Hộp thoại chỉ có ba thứ: hướng (Horizontal là đường ngang, Vertical là đường dọc), vị trí (Position) và màu. Trong ví dụ, ảnh hoa sẽ cao từ 60 px đến 620 px, nên chọn Horizontal và gõ 620 px để có đường mốc cho mép dưới của ảnh.

Hộp thoại New guide: Horizontal, Position 620 px, Color Cyan. Bấm OK là có đường ngang đúng ở y = 620. (ảnh chụp màn hình: Photoshop 2026)

Mẹo: nếu máy của bạn dùng dấu phẩy làm dấu thập phân, Photoshop cũng hiện số theo kiểu đó (như 540,0 px ở bước 2), nên khi cần số lẻ hãy gõ 0,5 thay vì 0.5.

Bước 4: Chia cột cho cả trang với New Guide Layout

Đây là lệnh đáng học nhất trong bài: thay vì kéo hàng chục đường gióng, bạn khai báo số cột, độ rộng rãnh giữa các cột (gutter) và lề, Photoshop tự vẽ cả bộ. Vào View > Guides > New Guide Layout... và nhập:

• Columns: Number 12, để trống Width, Gutter 24 px.
• Margin: tích ô Margin, nhập Top, Left, Bottom, Right đều 60 px.
• Để trống Rows, Center Columns và Clear Existing Guides (để giữ hai đường 540 px và 620 px đã tạo).

Hộp thoại New guide layout với 12 cột, gutter 24 px và lề 60 px bốn phía. Ô Preview đang bật nên canvas cập nhật ngay khi gõ. (ảnh chụp màn hình: Photoshop 2026)

Vì Width để trống, Photoshop tự chia phần còn lại. Bạn có thể tự kiểm tra: canvas rộng 1080 px, trừ hai lề 60 px còn 960 px; 12 cột có 11 rãnh × 24 px = 264 px; 960 − 264 = 696 px chia 12 cột được đúng 58 px mỗi cột. Chọn số sao cho chia hết như vậy giúp mọi đường gióng nằm trọn trên một pixel, không bị lệch nửa pixel. Các đường dọc đầu tiên vì thế nằm ở 60, 118, 142, 200, 224 px...

Đoạn quay màn hình dưới đây là toàn bộ thao tác: mở hộp thoại, nhập số, bấm OK, rồi kéo ảnh và tiêu đề vào lưới.

New Guide Layout 12 cột, sau đó kéo ảnh hoa và tiêu đề cho mép trái hút vào lề 60 px. (quay màn hình: Photoshop 2026, không có tiếng)

Sau khi bấm OK: 12 cột màu cyan, đường ngang ở lề trên, lề dưới và ở 620 px. Ảnh hoa nằm từ 60 đến 1020 px theo chiều ngang, 60 đến 620 px theo chiều dọc. (ảnh chụp màn hình: Photoshop 2026)

Bước 5: Bật Snap để layer tự hút vào đường gióng

Đường gióng chỉ thật sự có ích khi layer "hút" vào nó. Kiểm tra View > Snap (⇧⌘;) đang có dấu tích, và trong View > Snap To mục Guides cũng có dấu tích. Khi đó, dùng Move Tool kéo một layer lại gần đường gióng, mép layer sẽ nhảy vào đúng đường.

View > Snap To: Guides, Layers và Document Bounds đang được tích; Grid và Slices hiện mờ. (ảnh chụp màn hình: Photoshop 2026)

Trong ví dụ, ảnh hoa được kéo về góc trên trái và tự nằm đúng ở 60 px / 60 px; mép dưới của nó trùng đường 620 px đã tạo ở bước 3. Khối chữ "Workshop cuối tuần" bắt đầu ở cột 9, tức x = 60 + 8 × (58 + 24) = 716 px. Tiêu đề lớn nằm ở cột 1 đến cột 6, phần chữ nhỏ ở cột 9 đến cột 12, khoảng cột 7 và 8 để trống cho bố cục thoáng.

Smart Guides: đường hồng khi kéo layer

Smart Guides bật sẵn trong View > Show > Smart Guides. Khi bạn kéo một layer, Photoshop vẽ đường màu hồng (Magenta) mỗi khi mép hoặc tâm của nó thẳng hàng với một layer khác, kèm ô ghi quãng đường đã dời.

Kéo khối "Workshop" lên 12 px: đường hồng báo mép trên của nó đã thẳng hàng với mép trên tiêu đề "Cắm hoa Ikebana". (ảnh chụp màn hình: Photoshop 2026)

Guides và Smart Guides bổ sung cho nhau: guides giữ khung cố định của cả trang, Smart Guides giúp so từng cặp layer với nhau mà không cần thêm đường gióng.

Bật Grid và đổi khoảng cách lưới

Grid hiện qua View > Show > Grid hoặc phím ⌘' (Windows: Ctrl+'). Cùng menu Show có mục Guides (⌘;) để ẩn hoặc hiện đường gióng.

View > Show: Grid (⌘') chưa bật, bấm vào là hiện lưới; Guides (⌘;), Canvas Guides và Smart Guides đang được tích. (ảnh chụp màn hình: Photoshop 2026)

Khoảng cách lưới mặc định thường không hợp với ảnh cho màn hình. Đổi ở Photoshop > Settings > Guides, Grid & Slices.... Phần Grid có hai ô quan trọng:

• Gridline Every: khoảng cách giữa hai đường lưới đậm. Ví dụ dùng 90 và đơn vị Pixels, canvas 1080 px chia đúng 12 ô.
• Subdivisions: số ô nhỏ trong mỗi ô lớn. Đặt 3 thì mỗi ô nhỏ rộng 30 px.

Settings > Guides, Grid & Slices: Gridline Every 90 Pixels, Subdivisions 3. Cùng trang này đổi màu guide (Canvas: Cyan) và màu Smart Guides (Magenta). (ảnh chụp màn hình: Photoshop 2026)

Lưới 90 px (3 ô nhỏ mỗi ô) màu xám nằm dưới các đường gióng cột màu cyan. Lưới cũng là đồ phụ trợ, không in ra. (ảnh chụp màn hình: Photoshop 2026)

Khi cả grid và guides cùng hiện, màn hình khá rối. Thường bạn chỉ cần một trong hai: guides cho dàn trang theo cột, grid cho các thiết kế dạng ô đều.

Khoá và xoá đường gióng: Lock Guides, Clear Guides

Khi dùng Move Tool, bấm trúng một đường gióng thì sẽ kéo lệch nó thay vì kéo layer. Dàn khung xong, hãy khoá lại bằng View > Guides > Lock Guides (⌥⌘;). Muốn bỏ toàn bộ đường gióng để làm lại, chọn Clear Guides ngay bên dưới.

View > Guides: Lock Guides (⌥⌘;) và Clear Guides. Edit Selected Guides và Clear Selected Guides hiện mờ. (ảnh chụp màn hình: Photoshop 2026)

Xuất file: đường gióng không đi theo

Bạn không cần ẩn guides hay grid trước khi xuất. File xuất ra chỉ có nội dung các layer, không có đường gióng hay lưới. Đây là file JPG của ví dụ sau khi xuất:

Kết quả 1080 × 1080 px: ảnh và chữ bám đúng lưới 12 cột, lề 60 px. Thương hiệu mẫu, font Be Vietnam Pro. Ảnh hoa cúc: Maria Lupan / Unsplash.

Nếu cần làm cùng một bố cục cho nhiều kích thước (vuông, dọc, ngang), bài Artboard trong Photoshop hướng dẫn tạo nhiều cỡ và xuất một lần.

Phím tắt Guides và Grid trên macOS

Các phím trên đọc từ menu Photoshop 2026 trên macOS. Trên Windows, Adobe ghi Ctrl thay cho Command với các lệnh ẩn hiện grid và guides.

Đường gióng không hiện hoặc không hút: kiểm tra 3 chỗ

• View > Extras phải có dấu tích. Tắt Extras là ẩn cùng lúc guides, grid và đường viền vùng chọn.
• View > Show > Guides phải có dấu tích (⌘; để bật lại).
• Không hút: xem View > Snap và View > Snap To > Guides đều được tích.