Làm thế nào để Xây dựng nền móng cho trang HTML5 và CSS3 của bạn - núm vú

Thông thường, bạn muốn một hình nền để trang trải toàn bộ trang trên trang web HTML5 và CSS3 của bạn. Điều này có thể khó hơn có vẻ như bởi vì bạn không biết trang này sẽ lớn như thế nào trong trình duyệt của người dùng.

Tồi tệ hơn, hình ảnh lớn có thể chiếm một lượng lớn không gian và làm chậm trải nghiệm của người dùng. Giải pháp chung là sử dụng một hình ảnh lát gạch được thiết kế để lặp lại trong nền. GIMP có một số công cụ rất hữu ích để xây dựng hình ảnh gạch.

Nhớ lại rằng thuộc tính CSS lặp lại nền cho phép bạn chỉ định cách một nền lặp lại. Cài đặt mặc định lặp lại nền vô hạn trong cả trục X và Y. Bạn cũng có thể thiết lập nền để lặp lại theo chiều ngang (repeat-x), theo chiều dọc (repeat-y), hoặc không ở tất cả (không lặp lại).

Mục đích của một nền lát gạch là làm cho một đồ họa tương đối nhỏ điền vào toàn bộ trang và trông giống như một hình ảnh lớn hơn. Bí mật là tạo ra hình ảnh nên rất khó để nhìn thấy nơi mà hình ảnh lặp lại. Dưới đây là một cách để tạo ra một nền lát gạch trong GIMP. Tất nhiên, bạn có thể áp dụng kỹ thuật này cho các mục đích của riêng bạn.

1. Tạo một hình ảnh mới.

   Kích thước của hình ảnh của bạn là rất quan trọng. Hình ảnh nhỏ hơn hiệu quả hơn nhiều để tải xuống, nhưng mô hình này rõ ràng hơn nhiều. Bắt đầu với 256 by 256 pixels.

2. Tạo một mẫu ngẫu nhiên.

   Bạn có thể sử dụng kỹ thuật lọc Plasma hoặc thử một kỹ thuật tương tự bằng cách chọn Filters → Render → Clouds → Cloud khác biệt. Bộ lọc Sự khác biệt Mây tạo ra một hình ảnh màu xám nhưng với một số tùy chọn thú vị. Tùy chọn Tileable tạo ra một mẫu đã sẵn sàng để gạch ngói. Chơi với các tùy chọn này cho đến khi bạn nhận được một cái gì đó thú vị.

3. Điều chỉnh độ tương phản.

   Để có hiệu quả tốt nhất, bạn muốn có sự phân bố tương đối đồng đều các giá trị từ ánh sáng tới bóng tối. Cách dễ nhất để làm điều này là thông qua công cụ bình thường hóa tự động (Màu sắc → Tự động → Chuẩn hóa).

4. Chọn một gradient.

   Bạn sẽ thêm màu cho mẫu của bạn bằng kỹ thuật được gọi là gradient mapping . Sử dụng hộp thoại Gradient (Windows → Hộp thoại có thể gắn được> Gradient) để chọn một gradient. Màu tối hơn trên bản đồ hình ảnh của bạn với màu ở bên trái của gradient, và màu sắc nhẹ hơn ánh sang bên trái. Bạn có thể điều chỉnh màu sắc, vì vậy đừng lo lắng nếu màu sắc không chính xác theo ý bạn muốn.

5. Sử dụng công cụ Gradient Map (Màu sắc ➪ Bản đồ ➪ Bản đồ Gradient) để ánh xạ màu sắc của gradient lên mô hình đám mây của bạn.

6. Xóa hình ảnh để kiểm tra tính dập.

   Cách dễ nhất để xem liệu hình ảnh gạch đẹp là để bù đắp hình ảnh.Thao tác này sẽ đặt các cạnh ở giữa để bạn có thể thấy hình ảnh sẽ trông như thế nào khi nhiều bản sao nằm cạnh nhau. Mở hộp thoại Offset bằng cách chọn Layer → Transform → Offset. Hộp thoại Offset có một nút x / 2, y / 2 tiện dụng. Nhấp vào nút để xem hình ảnh của bạn trông như thế nào.

7. Làm sạch hình ảnh nếu cần.

   Nếu bạn chọn tùy chọn Tileable khi bạn xây dựng hình ảnh đám mây, hình ảnh mới sẽ trông đẹp. Nếu không, bạn có thể có một số đường nối có thể nhìn thấy. Sử dụng công cụ Smudge and Clone để dọn dẹp những đường may này nếu cần. Áp dụng công cụ Offset một lần nữa để kiểm tra xem đường may của bạn có đẹp không.

8. Áp dụng bộ lọc để có được hiệu ứng mà bạn muốn.

   Bạn có thể muốn tô màu cho hình ảnh của mình hoặc làm mờ một chút để che đi bất kỳ hiện vật nào của cuộc dọn dẹp của bạn. Hãy nhớ rằng hình nền nên cực kỳ tối hoặc tối cực với độ tương phản rất thấp nếu bạn muốn có văn bản dễ đọc.

9. Kiểm tra hình ảnh bằng cách lưu hình ảnh ở định dạng XCF và một định dạng thân thiện với web (như PNG), xây dựng một trang đơn giản bằng cách sử dụng hình ảnh làm nền và nạp trang vào trình duyệt của bạn để đảm bảo nó theo cách bạn mong đợi.