Lưới (grid) trong thiết kế đồ hoạ là bộ đường kẻ ẩn chia khung thành cột, hàng và lề, để mọi chữ và hình trên ấn phẩm bám theo cùng một trật tự. Người xem không nhìn thấy lưới, nhưng cảm thấy được nó: ấn phẩm có lưới trông gọn, các thành phần như "biết chỗ đứng", còn ấn phẩm không lưới thường lệch vài pixel ở khắp nơi và trông vội.
Lưới càng quan trọng khi bạn làm hàng loạt, ví dụ một chuỗi bài đăng cho cửa hàng mỗi tuần, hay khi dùng AI tạo nhiều biến thể nhanh. Không có lưới, mỗi bài một kiểu và cả trang mạng xã hội của khách trông như do mười người làm. Bài này đi qua các loại lưới phổ biến, cách dựng lưới cho khung vuông và khung dọc, và cách AI có thể giúp bạn kiểm độ bám lưới.
Lưới đến từ đâu và vì sao vẫn dùng
Lưới đã có trong nghề sắp chữ sách từ rất lâu, nhưng nó trở thành một phương pháp được viết thành hệ thống nhờ các nhà thiết kế Thuỵ Sĩ giữa thế kỷ 20. Cuốn "Grid Systems in Graphic Design" của Josef Müller-Brockmann, xuất bản năm 1981, vẫn là sách nhập môn nhiều trường thiết kế dùng. Phong cách đó nhấn vào trật tự, rõ ràng, chữ không chân và nhiều khoảng trắng.
Lý do lưới sống sót qua mọi đợt đổi công cụ rất thực tế. Thứ nhất, nó giúp bạn ra quyết định nhanh hơn: thay vì đắn đo đặt ảnh lệch trái bao nhiêu, bạn chỉ cần chọn ảnh chiếm mấy cột. Thứ hai, nó tạo đồng bộ giữa các trang, các bài, các kích thước. Thứ ba, nó dễ bàn giao: một người khác mở file ra là biết hệ thống, không phải đoán ý bạn.
Thời có AI, lý do thứ ba càng nặng ký. Khi khách hay đồng nghiệp dùng công cụ tự động để tạo thêm biến thể từ mẫu của bạn, chính lưới là thứ giữ cho các biến thể đó còn trông như cùng một nhà.
Bốn loại lưới hay dùng và việc hợp với từng loại
Không phải ấn phẩm nào cũng cần lưới phức tạp. Bảng dưới so bốn loại thường gặp, đi từ đơn giản tới chi tiết.
| Loại lưới | Cấu tạo | Hợp với | Lưu ý |
|---|---|---|---|
| Lưới khối (một vùng) | Một vùng nội dung lớn bao bởi lề | Sách văn bản dài, ảnh bìa đơn giản, bài đăng một câu | Đơn giản nhưng phải chọn lề cẩn thận, lề là thứ duy nhất tạo nhịp |
| Lưới cột | Chia chiều ngang thành nhiều cột bằng nhau, giữa các cột có khoảng cách cột | Tờ rơi, trang tạp chí, trang web, bài đăng nhiều thông tin | Thành phần có thể chiếm một hay nhiều cột, linh hoạt nhất |
| Lưới module | Cột giao với hàng, tạo các ô bằng nhau | Bộ ảnh sản phẩm, thực đơn nhiều món, bộ bài đăng dạng thẻ | Cần tính chiều cao hàng, dễ cứng nhắc nếu ô quá nhỏ |
| Lưới phân cấp | Các vùng kích thước khác nhau theo tầm quan trọng nội dung, không đều | Trang chủ web, ấn phẩm có một hình chủ đạo | Khó dựng hơn, dễ thành không lưới nếu thiếu quy tắc |
Với người mới, lưới cột là điểm khởi đầu tốt nhất. Hầu hết bài đăng mạng xã hội làm ổn với lưới bốn hoặc sáu cột; trang web thường dùng lưới mười hai cột vì mười hai chia hết cho hai, ba, bốn và sáu, cho phép bố cục hai, ba hay bốn khối mà không phá lưới.
Dựng lưới cho khung bài đăng vuông và dọc
Dưới đây là cách dựng lưới cột cho khung bài đăng. Con số chỉ là ví dụ giả định để dễ hình dung; kích thước khuyến nghị của từng nền tảng thay đổi theo thời gian, nên bạn kiểm lại hướng dẫn hiện hành trước khi làm bộ mẫu cho khách.
- Xác định khung: ví dụ giả định một khung vuông 1080 x 1080 điểm ảnh và một khung dọc 1080 x 1350.
- Đặt lề ngoài: ví dụ 80 điểm ảnh mỗi cạnh. Lề quá hẹp khiến chữ dính mép, dễ bị giao diện ứng dụng che; lề rộng trông sang hơn nhưng bớt chỗ cho nội dung.
- Chia vùng còn lại thành sáu cột với khoảng cách cột 24 điểm ảnh. Phần mềm thiết kế phổ biến đều có chức năng tạo lưới theo số cột, bạn không cần tự tính tay từng đường.
- Thêm hàng ngang nếu cần lưới module, ví dụ chia chiều cao thành sáu hàng cùng khoảng cách.
- Đặt thử ba tầng thông tin lên lưới: tiêu đề chiếm bốn đến sáu cột, ảnh chiếm phần còn lại, chi tiết nằm gọn trong hai cột dưới cùng.
- Dùng cùng lề và cùng khoảng cách cột cho khung dọc, chỉ thêm hàng. Như vậy bộ mẫu vuông và dọc vẫn trông là một họ.
- Lưu lưới thành mẫu dùng chung, đặt tên rõ ràng để lần sau và người khác dùng lại được.
Mẹo nhỏ: đặt các thành phần quan trọng tránh xa mép dưới và mép phải của khung dọc, vì giao diện ứng dụng hay chèn nút, tên tài khoản, chú thích ở đó. Đây là "vùng an toàn" mà nhiều bài đăng bị cắt chữ vì quên.
Lưới và ảnh do AI tạo: cách để hai thứ khớp nhau
Ra lưới trước, ra ảnh sau. Nếu bạn tạo ảnh AI trước rồi mới tìm chỗ đặt chữ, bạn sẽ luôn phải chiều theo ảnh. Làm ngược lại: dựng lưới, đánh dấu vùng dành cho chữ, rồi mới viết câu lệnh tạo ảnh có chủ thể nằm ở đúng các cột còn lại.
Mô tả vị trí bằng ngôn ngữ đơn giản. Công cụ tạo ảnh hiểu kém các con số lưới, nhưng hiểu khá tốt các mô tả như "chủ thể ở một phần ba bên phải, nửa trái là nền trơn sáng". Phần viết câu lệnh tạo ảnh chi tiết có ở trang AI Hình Ảnh; ở đây chỉ cần nhớ mục đích là để ảnh nhường chỗ cho lưới.
Cắt ảnh theo cột, không cắt theo cảm giác. Khi đưa ảnh vào, cho mép ảnh chạm đúng đường cột hoặc chạy tràn ra mép khung. Ảnh dừng lơ lửng giữa cột là lỗi dễ thấy nhất của một bố cục không lưới.
Nhờ AI soi độ bám lưới. Bạn có thể đưa ảnh chụp màn hình bản thiết kế đã bật đường lưới lên trợ lý AI và hỏi: "Liệt kê các thành phần không bám theo đường cột, và chỗ nào khoảng cách giữa các khối không đều." Cách này hữu ích khi bạn đã nhìn bản thiết kế quá lâu. Nhớ che tên khách, giá và thông tin chưa công bố trước khi đưa lên.
Ví dụ giả định: lưới sáu cột cho bài đăng của quán bún
Hình dung một quán bún cá ở Cần Thơ nhờ bạn làm bài đăng đều đặn mỗi tuần: món mới, ưu đãi cuối tuần, ảnh không khí quán, thông báo nghỉ lễ. Đây là ví dụ giả định, nhưng rất gần với việc mà nhiều designer tự do nhận hằng tháng. Nếu mỗi bài bạn bố cục lại từ đầu, sau một tháng trang của quán sẽ có bốn kiểu khác nhau và bạn mất gấp đôi thời gian.
Cách làm có lưới: dựng một lưới sáu cột, sáu hàng cho khung dọc, rồi định sẵn ba "khuôn" dựa trên cùng lưới đó. Khuôn món mới cho ảnh món chiếm bốn hàng trên, tên món và mô tả nằm ở hai hàng dưới. Khuôn ưu đãi đảo lại, con số ưu đãi chiếm khối lớn bên trái, ảnh thu nhỏ bên phải. Khuôn thông báo chỉ có chữ, nằm trong bốn cột giữa, hai cột hai bên để trống. Ba khuôn trông khác nhau đủ để người xem không chán, nhưng cùng lề, cùng khoảng cách, cùng vị trí tên quán nên vẫn rõ là một nhà.
Khi có lưới và khuôn, việc dùng AI cũng gọn hơn. Bạn biết trước ảnh món cần tỉ lệ nào, chủ thể nằm ở đâu, nên viết câu lệnh tạo ảnh nền hoặc chọn ảnh chụp thật đều nhanh. Người phụ việc hoặc chính chủ quán cũng có thể tự thay chữ trong khuôn mà không làm vỡ bố cục, và bạn dành thời gian cho phần cần gu hơn.
Khi nào được phá lưới
Lưới là công cụ, không phải hàng rào. Nhiều ấn phẩm đẹp có một thành phần cố tình phá lưới: một hình sản phẩm tràn qua hai vùng, một chữ số to nằm lệch hẳn khỏi cột, một dải màu cắt ngang. Điều kiện để phá lưới hiệu quả là phần còn lại phải bám lưới chặt. Người xem chỉ thấy cái lệch là có chủ ý khi mọi thứ khác đều thẳng hàng.
Một quy tắc thực dụng: mỗi ấn phẩm phá lưới tối đa một lần, và thứ phá lưới nên là tầng một của phân cấp. Nếu bạn phá lưới cho một chi tiết phụ, nó sẽ giành sự chú ý của thông tin chính.
Cũng có lúc lưới cần thay chứ không phải phá. Khi bạn thấy mình phải "lách" lưới ở gần như mọi bài trong bộ mẫu, ví dụ vì khách hay có tiêu đề dài, thì lưới ban đầu đã chọn sai. Quay lại tăng số cột, giảm lề, hoặc chuyển sang lưới module có ô lớn hơn. Một bộ mẫu tốt sau vài tuần dùng thường sẽ được chỉnh lưới ít nhất một lần, và đó là chuyện bình thường.
Lỗi hay gặp khi mới dùng lưới
Người mới dùng lưới thường mắc những lỗi giống nhau. Danh sách này giúp bạn tự soát trước khi gửi bản thiết kế.
- Lưới quá nhiều cột cho khung nhỏ. Mười hai cột trên khung bài đăng vuông tạo các cột quá hẹp, chữ trong một cột chỉ được hai ba tiếng. Với khung nhỏ, bốn đến sáu cột là đủ.
- Lề trong và lề ngoài lẫn lộn. Khoảng cách từ chữ tới mép khung và khoảng cách giữa các cột nên là hai giá trị có quan hệ rõ, ví dụ lề gấp ba khoảng cách cột, thay vì mỗi chỗ một kiểu.
- Chữ bám lưới nhưng ảnh thì không. Người mới thường căn chữ cẩn thận nhưng thả ảnh tuỳ ý. Ảnh là khối lớn nhất, lệch là lộ rõ nhất.
- Bỏ qua chiều dọc. Lưới cột chỉ lo chiều ngang. Khoảng cách giữa tiêu đề, đoạn chữ và ảnh theo chiều dọc cũng nên theo một bội số chung, nếu không trang vẫn có cảm giác lộn xộn.
- Không lưu lưới vào mẫu. Lưới dựng cho một bài rồi bỏ đi thì mất hết lợi ích đồng bộ. Lưu nó vào mẫu và thư viện dùng chung.
- Nghĩ lưới làm thiết kế cứng. Lưới chỉ quy định chỗ bám, không quy định bạn phải lấp đầy mọi ô. Các ô để trống chính là khoảng trắng có tổ chức.
Nếu bạn làm việc cùng người lập trình hoặc người làm giao diện web, thống nhất lưới từ đầu sẽ tiết kiệm rất nhiều vòng sửa. Phần giao diện có danh mục riêng trên trang, nhưng tư duy lưới ở đây dùng chung cho cả hai.
Câu hỏi thường gặp
Thiết kế bài đăng mạng xã hội có cần lưới không?
Một bài đăng lẻ có thể làm tốt mà không dựng lưới chính thức, nhưng một chuỗi bài đăng cho cùng thương hiệu thì nên có. Lưới giúp các bài trông cùng họ khi người xem lướt trang của khách, và giúp bạn làm bài mới nhanh hơn vì không phải quyết định lại vị trí mọi thứ mỗi lần.
Nên chọn bao nhiêu cột cho lưới?
Tuỳ kích thước khung và lượng thông tin. Khung bài đăng nhỏ thường dùng bốn đến sáu cột, tờ rơi khổ lớn hơn dùng sáu đến tám, trang web dùng mười hai cột vì dễ chia thành hai, ba, bốn khối. Bắt đầu ít cột rồi tăng dần khi thấy thiếu linh hoạt.
Khoảng cách cột nên rộng bao nhiêu?
Khoảng cách cột phải đủ để hai khối chữ cạnh nhau không bị đọc dính vào nhau. Một cách ước lượng hay dùng là bằng hoặc lớn hơn chiều cao một dòng chữ thân bài. Quan trọng hơn con số là dùng nhất quán một giá trị trong cả bộ mẫu.
Công cụ AI có tự tạo lưới được không?
Một số phần mềm thiết kế có tính năng gợi ý bố cục tự căn chỉnh thành phần, và có thể giúp bạn dựng nhanh lưới khởi đầu. Tính năng này thay đổi theo phiên bản, nên kiểm lại trong công cụ bạn đang dùng. Dù vậy, quyết định số cột, lề và khoảng cách vẫn nên do bạn chốt theo nội dung.
Lưới và quy tắc một phần ba khác nhau thế nào?
Quy tắc một phần ba chia khung thành ba phần mỗi chiều để đặt chủ thể của ảnh lệch khỏi tâm, chủ yếu dùng trong chụp và cắt ảnh. Lưới trong thiết kế đồ hoạ là hệ thống chi tiết hơn để đặt cả chữ lẫn hình. Hai thứ dùng chung được: một lưới sáu cột chứa sẵn các đường một phần ba.