Cách tạo hệ thống lưới tùy chỉnh trong Photoshop

Lưới là một cách tiếp cận phổ biến để xây dựng trang web. Lưới giúp cho các phần giữ đúng tỷ lệ. Một vài ví dụ về framework CSS Grid là 960.gs hoặc Skeleton. Tuy nhiên, một trong những hạn chế của việc sử dụng framework lưới là người dùng sẽ kém linh hoạt hơn.

Người dùng bị ràng buộc với thông số kỹ thuật của framework, và trong nhiều trường hợp, điều đó có thể không phù hợp với yêu cầu trang web cụ thể.

Trong bài đăng này, Quantrimang.comsẽ chỉ cho bạn cách tạo lưới tùy chỉnh cho cả CSS và Photoshop. Để làm cho quá trình này dễ dàng, bài viết sẽ sử dụng một số công cụ. Hãy cùng tìm hiểu chi tiết trong phần đây nhé!

Cài đặt GuideGuide

Trước tiên, bạn cần cài đặt GuideGuide, một tiện ích mở rộng Photoshop để tạo các đường chuẩn, được chỉ định cụ thể để tạo lưới dễ dàng hơn. Để có thể cài đặt GuideGuide, cần ít nhất là Photoshop CS4.

Tiện ích mở rộng Photoshop có thể được cài đặt thông qua Adobe Extension Manager, như sau.

Tính toán kích thước lưới

Trước khi thiết lập các đường chuẩn trong Photoshop, ta cần tính toán kích thước lưới, bao gồm tổng chiều rộng, chiều rộng cột, số cột và khoảng cách giữa các cột. Chúng có thể được thực hiện dễ dàng bằng cách sử dụng công cụ Gid Calculator của Heroku.com (tham khảo tại: http://gridcalculator.dk/).

Trong ví dụ này, bài viết chỉ định tổng chiều rộng là 1000px, khoảng cách giữa các cột là 30px và số lượng cột là 10. Công cụ này sau đó sẽ tự động tạo chiều rộng nội dung thực tế cũng như chiều rộng cột thích hợp.

Bạn cũng có thể tải xuống lưới CSS được tạo.

Tạo lưới

Đã đến lúc quay lại với Photoshop. Chuyển đến menu Window > Extensions để hiển thị bảng điều khiển GuideGuide trong thanh bên Photoshop. Sau đó, tạo một canvas Photoshop mới và đặt chiều rộng của khung theo Fulll Width - trong trường hợp này là 1000px.

Điền vào các trường trong bảng điều khiển GuideGuide - Column Gutter, Column Widthvà Column Numbers - theo các trường trong Grid Calculator.

Sau đó, trong bảng điều khiển GuideGuide, chuyển đến tab Sets. Trong tab này, bạn sẽ tìm thấy Outline được đặt trước để tạo các đường chuẩn ở cạnh của canvas.

Mọi thao tác đã hoàn thành và đây là lưới tùy chỉnh, sẵn sàng để sử dụng khi thiết kế trang web.

Ngoài ra, bạn có thể thêm nhiều chỗ trống ở bên trái và bên phải của canvas bằng cách tăng thêm chiều rộng của nó, sau đó thêm hình chữ nhật trong các layer mới để tạo một trình trợ giúp trực quan cho các cột trong lưới.

Chúc bạn thực hiện thành công!