Noise Texture Generator - Tạo Texture Nhiễu, Grain PNG

Tính năng nổi bật

• Hai loại nhiễu canvas: nhiễu trắng (hạt rời như hạt phim) và value noise (mảng mịn, loang), chọn kích thước hạt hoặc kích thước mảng theo px
• Điều chỉnh mật độ hạt, cường độ tương phản, độ đục, chế độ đơn sắc hoặc nhiều màu, và seed để tạo lại đúng texture
• Tùy chọn lặp khít (tileable): mép phải nối liền mép trái, mép dưới nối liền mép trên, ghép bao nhiêu ô cũng không lộ đường nối
• Xem trước ngay trên nền màu đơn hoặc gradient với các chế độ hòa trộn normal, overlay, soft-light, multiply, screen
• Xuất PNG các khổ 64, 128, 256, 512, 1024 và 2048 px, sinh theo từng dải để trang không bị đơ với khổ lớn
• Đoạn CSS hai kiểu: dùng file ảnh (khuyên dùng) hoặc nhúng data URI, kèm cảnh báo khi data URI quá nặng
• Bản SVG feTurbulence với baseFrequency, numOctaves, seed, stitchTiles, xuất file SVG vài trăm byte

Vì sao nên tự tạo texture nhiễu thay vì tải ảnh grain có sẵn

Ảnh grain tải trên mạng thường có kích thước cố định, không lặp khít nên lộ đường nối khi làm nền lặp, và cường độ hạt không khớp với màu nền của bạn. Tự tạo texture cho phép bạn chọn đúng độ mịn, độ đậm và kích thước file phù hợp với trang web. Với nền gradient lớn, lớp nhiễu mỏng còn có tác dụng thực tế: nó phá vỡ các dải màu bị sọc (banding) thường thấy khi gradient trải rộng trên màn hình, vì mắt không còn nhìn thấy ranh giới rõ giữa hai mức màu liền nhau. Công cụ này tạo texture hoàn toàn trong trình duyệt, không tải ảnh của bạn lên đâu, và cho bạn thấy ngay kết quả trên chính màu nền sẽ dùng.

Lợi ích khi sử dụng

• •Nền phẳng trông có chiều sâu và chất liệu hơn mà không cần ảnh chụp
• •Giảm hiện tượng sọc dải màu trên gradient lớn
• •Texture lặp khít nên một file nhỏ phủ được cả trang rộng
• •Kiểm soát được dung lượng file bằng kích thước và mật độ hạt
• •Tạo lại đúng texture nhờ seed, thuận tiện khi chỉnh sửa về sau

Cách tạo texture nhiễu PNG

1. 1Chọn cách tạo: ảnh PNG từ canvas (kiểm soát chi tiết từng điểm ảnh) hoặc SVG feTurbulence (file siêu nhẹ, trình duyệt tự vẽ).
2. 2Với PNG, chọn loại nhiễu, kích thước ảnh và kích thước hạt; hạt 1 px cho cảm giác phim mịn, hạt lớn hơn cho cảm giác thô, cổ điển.
3. 3Chỉnh mật độ hạt, cường độ và độ đục; với lớp phủ tinh tế, độ đục khoảng 10% đến 40% thường là đủ.
4. 4Giữ tùy chọn lặp khít nếu texture sẽ được lặp lại làm nền, và chọn đơn sắc nếu không muốn hạt làm lệch màu nền.
5. 5Chọn màu nền hoặc gradient và chế độ hòa trộn ở phần xem trước để thử đúng bối cảnh sử dụng.
6. 6Tải PNG hoặc SVG về, rồi sao chép đoạn CSS dùng file ảnh; chỉ dùng bản data URI khi texture nhỏ.

Nhiễu trắng và value noise khác nhau thế nào

Nhiễu trắng gán cho mỗi hạt một giá trị ngẫu nhiên độc lập, hạt cạnh nhau không liên quan gì đến nhau, nên bề mặt trông lấm tấm đều như hạt phim hay giấy nhám. Khi tăng kích thước hạt, mỗi hạt là một khối vuông vài px cùng màu. Value noise thì đặt giá trị ngẫu nhiên tại các nút của một lưới thưa rồi nội suy mượt giữa các nút, cho ra các mảng sáng tối loang lổ như vân mây, vết ố hay bề mặt bê tông. Kích thước mảng chính là khoảng cách giữa các nút lưới. Số lớp chi tiết (octave) chồng thêm các lưới dày gấp đôi với biên độ giảm một nửa, để các mảng lớn có thêm chi tiết nhỏ bên trong. Để làm lớp grain tinh tế cho giao diện, nhiễu trắng hạt 1 px thường là lựa chọn phổ biến; value noise hợp với hiệu ứng chất liệu rõ hơn.

Texture lặp khít được tạo ra như thế nào

Với value noise, công cụ chia cạnh ảnh thành một số nguyên ô lưới và lấy chỉ số nút theo phép chia lấy dư, nên nút ở mép phải chính là nút ở mép trái. Nhờ vậy giá trị nhiễu tại điểm x cộng kích thước ảnh bằng đúng giá trị tại x, theo cả hai chiều, và khi ghép bốn ô cạnh nhau không có đường nối. Bộ kiểm thử của công cụ đo mức chênh lệch trung bình giữa cột cuối và cột đầu: khi bật lặp khít, mức chênh này tương đương mức chênh giữa hai cột liền nhau ở giữa ảnh; khi tắt, mức chênh ở mép lớn hơn hàng chục lần, tức sẽ lộ đường nối. Với nhiễu trắng, các khối hạt được chia đều trên cạnh ảnh nên khối cuối không bị cắt dở. Nếu kích thước ảnh không chia hết cho kích thước hạt, các khối chỉ lệch nhau tối đa 1 px, mắt thường không nhận ra.

Chọn chế độ hòa trộn cho lớp grain

Chế độ overlay và soft-light là hai lựa chọn hay dùng nhất cho lớp hạt xám: điểm sáng làm nền sáng lên, điểm tối làm nền tối đi, còn màu xám giữa gần như không đổi, nên màu tổng thể của nền được giữ nguyên. Soft-light cho hiệu ứng nhẹ hơn overlay. Multiply chỉ làm tối, hợp khi muốn nền trông cũ, bẩn nhẹ; screen chỉ làm sáng, hợp với nền tối muốn có hạt sáng lấp lánh. Normal đơn giản là phủ lớp hạt bán trong suốt lên trên, dễ đoán nhất nhưng dễ làm nền bị xám đi. Đoạn CSS xuất ra dùng background-blend-mode để hòa trộn texture với màu nền hoặc gradient của chính phần tử đó; thuộc tính này không ảnh hưởng tới chữ và các phần tử con bên trong.

Dung lượng file và vì sao cảnh báo data URI

Nhiễu về bản chất là dữ liệu ngẫu nhiên, mà dữ liệu ngẫu nhiên gần như không nén được, nên một texture nhiễu trắng hạt 1 px có thể nặng hơn nhiều so với ảnh chụp cùng kích thước sau khi nén. Nhét một chuỗi base64 dài hàng trăm KB vào file CSS khiến CSS phình to, trình duyệt phải tải và phân tích xong cả khối đó mới vẽ được trang, và ảnh không được cache riêng. Vì vậy công cụ hiển thị độ dài data URI, cảnh báo khi vượt 20 KB và cảnh báo mạnh khi vượt 100 KB. Cách tiết kiệm nhất là dùng texture nhỏ 128 hoặc 256 px lặp lại, giảm mật độ hạt để có nhiều điểm trong suốt, hoặc dùng bản SVG feTurbulence chỉ vài trăm byte. Với texture lớn, hãy tải file PNG về và tham chiếu bằng đường dẫn.

Khi nào dùng SVG feTurbulence

feTurbulence là bộ lọc có sẵn trong SVG, sinh nhiễu Perlin ngay khi trình duyệt vẽ. File chỉ vài trăm byte bất kể kích thước ô, nên rất hợp để nhúng data URI. baseFrequency càng cao hạt càng nhỏ, khoảng 0,6 đến 0,9 cho cảm giác hạt phim; numOctaves thêm lớp chi tiết nhưng làm trình duyệt vẽ chậm hơn. Kiểu fractalNoise cho hạt mịn, còn turbulence cho vân gợn như khói. Thuộc tính stitchTiles giúp mép ô khớp nhau khi lặp. Nhược điểm là mỗi trình duyệt tự tính nên hạt có thể trông hơi khác giữa các trình duyệt, và bộ lọc tốn công vẽ lại trên vùng lớn, nhất là trên máy yếu. Công cụ thêm một ma trận màu để đặt độ trong suốt cố định, nên độ đậm của hạt chỉ do thanh độ đục quyết định.

Mẹo dùng grain trong thiết kế giao diện

Lớp grain nên đủ nhẹ để người xem cảm nhận được chất liệu chứ không nhìn thấy từng hạt, thường ở độ đục thấp kết hợp overlay hoặc soft-light. Trên màn hình mật độ điểm ảnh cao, hạt 1 px trông rất mịn; nếu muốn hạt rõ hơn, tăng kích thước hạt thay vì tăng độ đục. Tránh phủ grain lên vùng chứa chữ nhỏ vì có thể làm giảm độ dễ đọc, nhất là với người có thị lực kém. Nếu dùng grain cho gradient lớn để giảm sọc màu, hãy xem thử trên vài màn hình khác nhau, vì hiện tượng sọc phụ thuộc vào độ sâu màu của màn hình. Khi xuất ảnh cho in ấn, texture tạo cho web có thể quá nhỏ, hãy chọn khổ lớn nhất và kiểm tra lại độ phân giải cần thiết với nhà in.

Giới hạn cần biết

Công cụ tạo nhiễu dạng vuông, chưa hỗ trợ khổ chữ nhật. Value noise dùng nội suy đơn giản trên lưới vuông nên đôi khi lộ nhẹ hướng ngang dọc của lưới khi mảng lớn và chỉ có một octave; tăng số octave sẽ giảm hiện tượng này. Khổ 2048 px với value noise nhiều màu và bốn octave cần vài giây để sinh trên máy tính thông thường, lâu hơn trên điện thoại. Kích thước file PNG phụ thuộc vào bộ nén của trình duyệt nên không đoán trước chính xác được, công cụ hiển thị dung lượng thật sau khi tạo. Bản SVG feTurbulence không đảm bảo giống hệt nhau giữa các trình duyệt, và chế độ hòa trộn background-blend-mode không có tác dụng trên trình duyệt quá cũ.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• noise texture png
• tạo texture nhiễu
• grain texture generator
• tạo hiệu ứng grain
• noise background css
• texture hạt phim
• seamless noise texture
• texture lặp khít
• tileable noise png
• grain overlay
• background-blend-mode overlay
• svg feturbulence noise
• svg noise generator
• giảm sọc gradient
• gradient banding fix
• film grain png
• noise texture online
• tạo nền nhiễu cho website
• value noise generator