Cách Tạo Lưới Mô-đun

Mục lục:

Cách Tạo Lưới Mô-đun
Cách Tạo Lưới Mô-đun

Video: Cách Tạo Lưới Mô-đun

Video: Cách Tạo Lưới Mô-đun
Video: Hướng dẫn sử dụng lưới trong thiết kế logo cách điệu chữ 1 - Typography Logo Design #1 2024, Có thể
Anonim

Thật tiện lợi khi sử dụng lưới mô-đun khi phát triển một thiết kế hoặc tạo một hình ảnh phức tạp. Chúng đóng vai trò là cơ sở của bố cục, chia trang tính thành một số bước dọc và ngang xác định với khoảng cách giống nhau hoặc khác nhau.

Cách tạo lưới mô-đun
Cách tạo lưới mô-đun

Cần thiết

Viết chương trình Photoshop

Hướng dẫn

Bước 1

Tất cả các trình chỉnh sửa đồ họa hiện đại và các chương trình thiết kế web đều có lưới mô-đun tích hợp sẵn. Nếu bạn đang làm việc trong Adobe Photoshop, hãy bật màn hình lưới để dễ dàng sắp xếp các đối tượng hình ảnh và vị trí chính xác của chúng trên trang tính. Để thực hiện việc này, hãy chuyển đến mục menu Chỉnh sửa và di chuyển chuột qua chú thích Sở thích. Trong menu hiện ra, bạn chọn mục Guides, Grid & Slices (tùy theo phiên bản chương trình mà mục này có thể có tên khác nhau, chọn từ Grid).

Bước 2

Trong cửa sổ cài đặt mở ra, hãy đặt các thông số của lưới mô-đun. Trong vùng Lưới, chọn màu của các đường tạo thành các mục lưới và khoảng cách dòng. Nhấp vào "OK" và kiểm tra xem các thay đổi được thực hiện sẽ ảnh hưởng như thế nào đến sự xuất hiện của hình ảnh. Trong môi trường phát triển web Adobe DreamWeaver, lưới được bao gồm theo mặc định trong bố cục của trang bạn đang phát triển.

Bước 3

Bạn có thể thêm nhiều bảng khác nhau (mục lưới) với bất kỳ tập hợp hàng và cột nào bằng cách sử dụng mục Chèn bảng, cũng như chèn bảng mới vào ô, do đó tạo ra một mạng phức tạp để xây dựng các phần tử trang.

Bước 4

Bạn có thể tạo lưới mô-đun theo cách thủ công bằng cách sử dụng các kiểu CSS. Để thực hiện việc này, hãy sử dụng các công cụ #grid, Gridmaker, CSS Grid Builder, CSS Grid 1 KB, Gridr Buildrrr và các mô-đun khác. Ví dụ: đoạn mã sau tạo một lưới gồm bốn mô-đun có chiều rộng nhất định:.page-layout {margin-right: -5px; }.layout-box {float: left; lề: 0 5px 5px 0; }.lb-1 {width: 779px; } / * 100% * /. Lb-2 {width: 583px; } / * 75% * /. Lb-3 {width: 387px; } / * 50% * /. Lb-4 {width: 191px; } / * 25% * /

Bước 5

Sự hiện diện của lưới mô-đun giúp dễ dàng hơn cho cả nhà thiết kế mới và nhà phát triển web cũng như các bậc thầy có kinh nghiệm trong lĩnh vực này. Các dự án được tạo trên cơ sở lưới mô-đun dễ dàng chỉnh sửa và chuyển giao, rất thuận tiện cho khối lượng công việc lớn. Bạn cũng có thể dừng công việc bất cứ lúc nào và tiếp tục sử dụng tệp đã lưu.

Đề xuất: