Thêm bóng đổ cho ảnh

Công cụ Thêm bóng đổ cho ảnh nâng bất kỳ bức ảnh nào khỏi trang bằng bóng mềm, đáng tin — hoàn toàn trong trình duyệt của bạn. Tải lên ảnh, ảnh chụp màn hình, logo hoặc PNG cắt sẵn, kéo nguồn sáng để đặt góc, rồi tinh chỉnh độ mờ, độ lan, độ đục và màu. Trên PNG trong suốt, bóng được dựng từ kênh alpha của ảnh, nên sản phẩm hoặc nhãn dán đổ bóng theo đúng đường viền của nó chứ không phải hình chữ nhật. Xuất PNG với nền trong suốt, JPG trên nền màu đặc hoặc chuyển màu, hoặc sao chép mã CSS box-shadow tương ứng. Không có gì được tải lên — ảnh của bạn không bao giờ rời thiết bị.

Ba con số tạo nên bóng: độ lệch, độ mờ và độ lan

Hầu như mọi bóng xấu đều do sai một trong ba số này. Độ lệch là khoảng bóng bị đẩy ra khỏi chủ thể — nó cho người xem biết ánh sáng ở đâu và vật nổi cao bao nhiêu. Độ mờ là độ mềm của mép: độ mờ nhỏ đọc như ánh sáng cứng, trực tiếp (nắng, đèn flash), độ mờ lớn đọc như ánh sáng khuếch tán (ngày u ám, softbox). Độ lan phóng to hoặc thu nhỏ hình bóng trước khi áp dụng độ mờ, đó là cách bạn có hào quang nặng hoặc bóng hơi cụp vào dưới vật.

Cách thêm bóng đổ cho ảnh

1. Tải ảnh của bạn lên: Kéo một bức ảnh vào hộp tải lên hoặc nhấn để chọn. Không có gì được tải lên — tệp được đọc thẳng vào trình duyệt của bạn.
2. Đặt nguồn sáng: Kéo mặt trời trên bàn Nguồn sáng. Bóng đổ về phía đối diện, và kéo xa tâm hơn sẽ đẩy bóng ra xa hơn. Phím mũi tên cũng dùng được.
3. Tạo hình bóng: Chọn kiểu — Đổ, Xếp lớp, Dài hoặc Phát sáng — rồi đặt Độ mờ, Độ lan, Độ đục và màu bóng.
4. Chọn nền: Giữ Trong suốt cho PNG, hoặc tô màu đặc hay chuyển màu. Đệm thêm thêm khoảng thở quanh kết quả.
5. Tải xuống hoặc sao chép: Lưu PNG hoặc JPG ở kích thước gốc, nửa hoặc 2× — hoặc sao chép CSS đã tạo để dùng lại cùng bóng trên một phần tử web.

Bóng theo chủ thể, không theo hộp

Hầu hết công cụ bóng trực tuyến vẽ một hình chữ nhật phía sau tệp của bạn. Điều đó ổn với ảnh thường, nhưng sai với ảnh sản phẩm cắt sẵn, logo hoặc nhãn dán: chai tròn không nên đổ bóng vuông. Công cụ này đọc kênh alpha của ảnh và dựng bóng từ silhouette thực, nên vùng trong suốt không có bóng. Tải lên PNG trong suốt và bạn sẽ thấy ghi chú xanh xác nhận. Với ảnh mờ đục thông thường, silhouette đơn giản là hình chữ nhật của bức ảnh — được bo trước nếu bạn đặt bán kính góc.

Nên dùng kiểu bóng nào?

Vì sao dùng phần trăm, không dùng pixel

Mọi thanh trượt ở đây là phần trăm cạnh ngắn hơn của ảnh. Độ mờ 9% trông giống nhau trên thumbnail 400 px và ảnh 4000 px, nên preset bạn thích vẫn đúng khi đổi sang ảnh lớn hơn — không cần tính lại. Công cụ vẫn hiện giá trị pixel tương đương bên cạnh thanh độ mờ và trong bảng CSS, khi bạn cần số thực.

Mẹo cho bóng đáng tin

Ảnh của tôi có riêng tư không?

Có. Không giống trình chỉnh sửa trực tuyến tải ảnh của bạn lên máy chủ để xử lý, công cụ này chạy toàn bộ trong trình duyệt web của bạn bằng HTML5 canvas. Ảnh của bạn không bao giờ rời thiết bị, không có gì được lưu trữ, và không cần tạo tài khoản. Đóng tab và ảnh biến mất.

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

Công cụ bóng đổ này có miễn phí và riêng tư không?

Có. Công cụ hoàn toàn miễn phí và chạy toàn bộ trong trình duyệt web của bạn bằng HTML5 canvas, nên ảnh của bạn không bao giờ được tải lên bất kỳ máy chủ nào và vẫn ở trên thiết bị của bạn. Ảnh tải xuống không có hình mờ và không cần đăng ký.

Bóng có theo hình dạng của PNG trong suốt không?

Có. Bóng được dựng từ kênh alpha của ảnh, nên sản phẩm cắt sẵn, logo hoặc nhãn dán đổ bóng theo đúng đường viền của nó chứ không phải hình chữ nhật. Nếu ảnh là ảnh mờ đục thông thường, silhouette là hình chữ nhật của ảnh, tùy chọn có góc bo tròn.

Làm sao để giữ nền trong suốt?

Đặt nền thành Trong suốt và tải xuống PNG. Chỉ bóng và chủ thể được vẽ, nên bạn có thể thả kết quả lên bất kỳ màu nào sau. JPG không thể lưu độ trong suốt, nên xuất JPG sẽ tô nền trắng.

Độ mờ và độ lan khác nhau thế nào?

Độ mờ làm mềm mép bóng, làm bóng tan dần theo khoảng cách. Độ lan phóng to hoặc thu nhỏ chính hình bóng trước khi được làm mờ, nên độ lan lớn với độ mờ nhỏ cho hào quang cứng, còn độ lan nhỏ với độ mờ lớn cho đám mây mềm.

Vì sao bóng của tôi bị cắt ở mép ảnh?

Bóng cần chỗ bên ngoài bức ảnh. Công cụ này tự thêm đệm từ độ lệch, độ mờ và độ lan, và bạn có thể thêm nữa bằng thanh Đệm thêm. Nếu bạn xuất JPG lên nền màu, chính phần đệm đó là nơi bóng đáp xuống.

Tôi có thể lấy CSS cho cùng bóng đó không?

Có. Bảng CSS hiện quy tắc box-shadow và filter drop-shadow sẵn để dán, khớp với cài đặt hiện tại, tính bằng pixel đo trên ảnh của bạn. Sao chép để cho phần tử web cùng vẻ mà không cần xuất tệp.

Tài nguyên bổ sung

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Alpha compositing — Wikipedia