Ngôn ngữ
English English Vietnamese (Tiếng Việt) Vietnamese (Tiếng Việt) Chinese (简体中文) Chinese (简体中文) Portuguese (Brazil) (Português do Brasil) Portuguese (Brazil) (Português do Brasil) Spanish (Español) Spanish (Español) Indonesian (Bahasa Indonesia) Indonesian (Bahasa Indonesia)
Công Cụ Tạo Khoảng Cách Cho Ảnh

Công Cụ Tạo Khoảng Cách Cho Ảnh

Thêm khoảng cách tùy chỉnh xung quanh ảnh với nền trong suốt. Hoàn hảo để tạo icon, logo ứng dụng và thumbnail với khoảng cách đồng nhất.

Công Cụ Tạo Khoảng Cách Cho Ảnh là gì?

Công Cụ Tạo Khoảng Cách Cho Ảnh là công cụ chạy trên trình duyệt giúp thêm khoảng cách đồng nhất xung quanh ảnh của bạn với nền trong suốt hoặc có màu. Dù bạn đang tạo icon ứng dụng, logo hay thumbnail, công cụ này đảm bảo khoảng cách chuyên nghiệp, đồng nhất mà không cần tải file lên bất kỳ máy chủ nào.

Icon Ứng Dụng

Icon iOS và Android yêu cầu tỷ lệ khoảng cách cụ thể để hiển thị chuyên nghiệp trên mọi thiết bị.

Favicon

Icon nhỏ cần không gian để dễ nhận diện ở kích thước nhỏ trên tab trình duyệt.
Lề đồng nhất đảm bảo logo hiển thị đúng trong các ngữ cảnh và nền khác nhau.

Thumbnail Thương Mại Điện Tử

Ảnh sản phẩm trông chuyên nghiệp hơn với khoảng cách đồng nhất và kích thước chuẩn hóa.

Ai Nên Sử Dụng Công Cụ Này?

Công cụ này được thiết kế cho nhà thiết kế, lập trình viên và người sáng tạo nội dung cần chuẩn bị ảnh với khoảng cách đồng nhất:

Lập Trình Viên Ứng Dụng

Tạo bộ icon cho nhiều nền tảng với tỷ lệ khoảng cách đồng nhất.

  • Icon iOS và Android
  • Nhiều biến thể kích thước
  • Yêu cầu theo từng nền tảng

Nhà Thiết Kế Đồ Họa

Chuẩn bị các biến thể logo và tài sản thương hiệu với khoảng cách chuyên nghiệp.

  • Chuẩn bị file logo
  • Chuẩn hóa tài sản thương hiệu
  • Xuất nhiều định dạng

Quản Lý Thương Mại Điện Tử

Chuẩn hóa ảnh sản phẩm để trình bày catalog đồng nhất.

  • Thumbnail sản phẩm đồng nhất
  • Hỗ trợ xử lý hàng loạt
  • Khoảng cách đồng nhất

Người Sáng Tạo Nội Dung

Tạo thumbnail và đồ họa mạng xã hội với lề chuyên nghiệp.

  • Thumbnail YouTube
  • Đồ họa mạng xã hội
  • Thương hiệu kênh
File Của Bạn Được Bảo Mật: Mọi xử lý ảnh diễn ra hoàn toàn trong trình duyệt của bạn bằng JavaScript và Canvas API. Ảnh không bao giờ rời khỏi thiết bị của bạn, không có xử lý trên máy chủ và chúng tôi không thu thập dữ liệu sử dụng hay lưu trữ ảnh của bạn. Bạn thậm chí có thể sử dụng công cụ này offline sau khi tải trang lần đầu.
Table of Contents

Cách Sử Dụng Công Cụ Tạo Khoảng Cách Cho Ảnh

Thêm khoảng cách cho ảnh rất đơn giản. Làm theo các bước sau để tạo ảnh có khoảng cách chuyên nghiệp trong vài phút:

1

Tải Ảnh Lên

Bạn có ba cách tiện lợi để thêm ảnh:

  • Kéo và thả - Chỉ cần kéo file ảnh vào vùng tải lên
  • Nhấp để duyệt - Nhấp vào vùng tải lên để mở trình duyệt file
  • Dán từ clipboard - Nhấn Ctrl+V (hoặc Cmd+V trên Mac) để dán ảnh đã sao chép

Định dạng hỗ trợ: PNG JPG WebP GIF

2

Đặt Kích Thước Canvas

Chọn kích thước cuối cùng cho ảnh đầu ra:

  • Nhấp vào kích thước có sẵn (512×512, 256×256, 128×128, v.v.)
  • Hoặc nhập kích thước tùy chỉnh vào ô chiều rộng và chiều cao
  • Bật Khóa Tỷ Lệ để giữ tỷ lệ khung hình khi thay đổi một chiều
3

Điều Chỉnh Khoảng Cách

Kiểm soát khoảng trống xung quanh ảnh của bạn:

  • Sử dụng thanh trượt để điều chỉnh nhanh (0-50%)
  • Nhập giá trị chính xác vào ô nhập liệu
  • Chuyển đổi giữa đơn vị phần trăm (%) hoặc pixel (px)
4

Cấu Hình Tùy Chọn Bổ Sung

Chế Độ Khớp

Chọn cách ảnh khớp trong vùng có khoảng cách:

  • Contain - Khớp toàn bộ ảnh, có thể để lại khoảng trống
  • Cover - Lấp đầy vùng, có thể cắt bớt phần ảnh
  • Fill - Kéo giãn để lấp đầy hoàn toàn

Độ Trong Suốt & Hiệu Ứng

  • Nền Trong Suốt - Bật cho icon PNG với nền trong suốt
  • Cắt Vùng Trong Suốt - Tự động xóa các cạnh trong suốt hiện có trước khi thêm khoảng cách mới
  • Tô Màu Icon - Thay thế vùng trong suốt bên trong icon bằng màu đặc (hữu ích cho icon có vùng trong suốt bên trong)
  • Bo Góc - Thêm góc bo tròn cho ảnh (0% = góc vuông, 50% = bo tròn hoàn toàn)
  • Chế Độ Chất Lượng - Sử dụng "Pixelated" cho pixel art để giữ cạnh sắc nét
5

Định Vị và Xoay

  • Kéo ảnh trên canvas để di chuyển tự do
  • Nhấp nút Căn Giữa để đặt lại vị trí
  • Sử dụng nút Xoay để xoay 90° hoặc 180°
  • Bật Hiện Đường Dẫn để hiển thị đường căn giữa
6

Tải Xuống

Khi hài lòng với kết quả:

  • Chọn định dạng xuất ưa thích (PNG, JPG hoặc WebP)
  • Điều chỉnh chất lượng cho định dạng JPG/WebP
  • Nhấp Tải Xuống để lưu ảnh

Tính Năng

Kích Thước Canvas Linh Hoạt

Chọn từ các kích thước có sẵn phổ biến hoặc nhập kích thước tùy chỉnh lên đến 4096×4096 pixel.

  • Kích thước có sẵn nhanh
  • Kích thước tùy chỉnh
  • Tùy chọn khóa tỷ lệ

Khoảng Cách Theo Phần Trăm hoặc Pixel

Đặt khoảng cách theo phần trăm kích thước canvas để có khoảng cách tỷ lệ, hoặc sử dụng giá trị pixel chính xác.

  • Phạm vi 0-50%
  • Kiểm soát pixel chính xác
  • Xem trước thời gian thực

Tự Động Cắt Cạnh Trong Suốt

Tự động phát hiện và xóa khoảng cách trong suốt hiện có từ ảnh nguồn của bạn.

  • Phát hiện cạnh thông minh
  • Khoảng cách chính xác
  • Kết quả sạch sẽ

Nhiều Chế Độ Khớp

Ba chế độ khớp cho bạn quyền kiểm soát cách ảnh được đặt trong vùng có khoảng cách.

  • Contain - Hiển thị toàn bộ ảnh
  • Cover - Lấp đầy toàn bộ vùng
  • Fill - Kéo giãn để khớp

Tô Màu Vùng Trong Suốt

Thay thế pixel trong suốt bên trong ảnh bằng màu đặc trong khi giữ nguyên khoảng cách bên ngoài.

  • Tô màu vùng trong suốt bên trong
  • Chọn màu tùy chỉnh
  • Giữ nguyên khoảng cách bên ngoài

Bo Góc

Thêm góc bo tròn cho ảnh từ 0% (góc vuông) đến 50% (tròn hoàn toàn cho ảnh vuông).

  • Phạm vi bán kính 0-50%
  • Góc mượt mà
  • Tùy chọn hình tròn

Định Vị Tự Do

Kéo ảnh đến bất kỳ đâu trên canvas để đặt vị trí tùy chỉnh với đường dẫn căn giữa để căn chỉnh.

  • Kéo để định vị
  • Đường dẫn căn giữa
  • Nút căn giữa nhanh

Hỗ Trợ Xoay

Xoay ảnh theo bước 90 độ mà không cần trình chỉnh sửa ảnh riêng.

  • 90° theo/ngược chiều kim đồng hồ
  • Lật 180°
  • Không mất chất lượng

Chế Độ Chất Lượng

Chọn giữa render "Smooth" cho ảnh hoặc chế độ "Pixelated" cho pixel art với cạnh sắc nét.

  • Làm mịn anti-aliasing
  • Pixelated cho đồ họa retro
  • Giữ cạnh sắc nét

Xử Lý Hàng Loạt

Xử lý nhiều ảnh cùng lúc với cùng cài đặt và tải xuống dưới dạng file ZIP.

  • Tải lên nhiều ảnh
  • Cài đặt đồng nhất
  • Tải xuống ZIP

Nhiều Định Dạng Xuất

Xuất dưới dạng PNG (trong suốt), JPG (kích thước nhỏ hơn) hoặc WebP (nén hiện đại) với kiểm soát chất lượng.

  • PNG với độ trong suốt
  • JPG cho ảnh
  • Nén WebP

Lưu Cài Đặt

Tùy chọn của bạn được tự động lưu và khôi phục khi bạn quay lại để thuận tiện.

  • Tự động lưu cài đặt
  • Khôi phục khi quay lại
  • Quy trình làm việc nhất quán

Câu Hỏi Thường Gặp

Những định dạng ảnh nào được hỗ trợ?

Bạn có thể tải lên ảnh PNG JPG WebPGIF. Để xuất, bạn có thể chọn giữa PNG (tốt nhất cho độ trong suốt), JPG (kích thước file nhỏ hơn cho ảnh) và WebP (định dạng hiện đại với khả năng nén tuyệt vời).

Kích thước ảnh tối đa tôi có thể xử lý là bao nhiêu?

Canvas hỗ trợ kích thước lên đến 4096×4096 pixel. Ảnh rất lớn có thể mất nhiều thời gian xử lý hơn tùy thuộc vào khả năng thiết bị và bộ nhớ khả dụng của bạn.

Tính năng Cắt Vùng Trong Suốt hoạt động như thế nào?

Khi được bật, công cụ sẽ quét ảnh của bạn để tìm ranh giới của các pixel không trong suốt. Sau đó nó coi vùng này là nội dung ảnh thực tế, bỏ qua bất kỳ khoảng cách trong suốt hiện có nào. Điều này hữu ích khi ảnh nguồn của bạn đã có các cạnh trong suốt không đều mà bạn muốn xóa trước khi áp dụng khoảng cách mới, đồng nhất.

Sự khác biệt giữa Contain, Cover và Fill là gì?

Contain

Hiển Thị Toàn Bộ Ảnh

  • Hiển thị ảnh hoàn chỉnh
  • Giữ tỷ lệ khung hình
  • Có thể hiển thị nền ở hai bên
  • Tốt nhất cho: Icon, logo
Cover

Lấp Đầy Toàn Bộ Vùng

  • Lấp đầy hoàn toàn vùng có khoảng cách
  • Giữ tỷ lệ khung hình
  • Có thể cắt bớt phần ảnh
  • Tốt nhất cho: Thumbnail, nền
Chế độ Fill: Kéo giãn ảnh để khớp chính xác vùng có khoảng cách. Điều này có thể làm méo ảnh nếu tỷ lệ khung hình khác nhau. Sử dụng khi kích thước chính xác quan trọng hơn việc duy trì tỷ lệ.

Khi nào tôi nên sử dụng chế độ chất lượng Pixelated?

Sử dụng chế độ Pixelated cho:

  • Pixel art và đồ họa game retro
  • Ảnh phong cách 8-bit hoặc 16-bit
  • Bất kỳ ảnh nào bạn muốn giữ cạnh sắc nét, rõ ràng khi phóng to
  • Icon độ phân giải thấp cần duy trì độ rõ nét

Đối với ảnh chụp, minh họa và đồ họa hiện đại, sử dụng chế độ Smooth để có anti-aliasing tốt hơn và vẻ ngoài tự nhiên.

Tôi có thể xử lý nhiều ảnh cùng lúc không?

Có! Chuyển sang Chế độ Hàng loạt bằng cách sử dụng nút chuyển đổi ở đầu công cụ. Bạn có thể tải lên nhiều ảnh và tất cả sẽ được xử lý với cùng cài đặt (kích thước canvas, khoảng cách, chế độ khớp, v.v.). Tải xuống tất cả dưới dạng file ZIP tiện lợi.

Điều này hoàn hảo để tạo bộ icon hoặc chuẩn hóa ảnh sản phẩm cho catalog thương mại điện tử.

Ảnh của tôi có được tải lên máy chủ không?

100% Bảo Mật: Không, mọi xử lý diễn ra cục bộ trong trình duyệt của bạn bằng JavaScript và Canvas API. Ảnh của bạn không bao giờ rời khỏi thiết bị, chúng tôi không lưu trữ hay theo dõi bất kỳ file nào của bạn, và không có xử lý trên máy chủ. Bạn thậm chí có thể sử dụng công cụ này offline sau khi tải trang lần đầu.

Tại sao ảnh tải xuống của tôi trông khác với bản xem trước?

Mẫu ô cờ bạn thấy trong bản xem trước đại diện cho độ trong suốt - nó không phải là phần của ảnh thực tế. Đây là cách tiêu chuẩn để hiển thị các vùng trong suốt trong trình chỉnh sửa ảnh.

Nếu bạn xuất dưới dạng PNG với độ trong suốt được bật, các vùng ô cờ đó sẽ hoàn toàn trong suốt trong file cuối cùng. Nếu bạn xuất dưới dạng JPG, các vùng đó sẽ được tô màu trắng (hoặc màu nền bạn chọn) vì JPG không hỗ trợ độ trong suốt.

Tôi có thể hoàn tác thay đổi không?

Không có nút hoàn tác, nhưng bạn có thể nhấp nút Đặt Lại để bắt đầu lại với ảnh mới. Cài đặt của bạn (kích thước canvas, khoảng cách, chế độ khớp, v.v.) sẽ được giữ nguyên, vì vậy bạn chỉ cần tải lên ảnh mới.

Vì mọi xử lý đều tức thì và không phá hủy, bạn có thể tự do điều chỉnh cài đặt và xem kết quả theo thời gian thực mà không lo mất ảnh gốc.

Tại sao ảnh của tôi bị mờ?

Nếu bạn đang làm việc với pixel art hoặc ảnh nhỏ, chuyển Chế Độ Chất Lượng sang "Pixelated" để ngăn anti-aliasing và duy trì cạnh sắc nét.

Đối với ảnh thông thường, một số độ mờ có thể xảy ra khi phóng to đáng kể. Để tránh điều này:

  • Sử dụng ảnh nguồn có độ phân giải cao hơn
  • Tránh phóng to hơn 200% kích thước gốc
  • Xuất ở cài đặt chất lượng cao nhất cho định dạng JPG/WebP

"Tô Màu Icon" làm gì?

Tô Màu Icon thay thế các pixel trong suốt nằm bên trong vùng nội dung ảnh của bạn bằng màu đặc. Điều này hữu ích khi bạn có icon với vùng trong suốt bên trong (như logo có phần xuyên thấu) mà bạn muốn tô màu trắng hoặc màu khác.

Quan trọng: Nó chỉ ảnh hưởng đến các vùng trong suốt trong ranh giới ảnh - khoảng cách bên ngoài vẫn trong suốt. Điều này cho phép bạn tạo icon đặc trong khi duy trì nền trong suốt.

Ví dụ trường hợp sử dụng: Bạn có logo với các phần cắt trong suốt ở giữa. Bật "Tô Màu Icon" để làm cho các phần cắt đó trở thành màu trắng đặc trong khi giữ khoảng cách bên ngoài trong suốt để icon hiển thị đúng.

Bo Góc hoạt động như thế nào?

Thanh trượt Bo Góc thêm góc bo tròn cho ảnh của bạn:

0% - Góc vuông 0%
25% - Bo tròn nhẹ 25%
50% - Tròn hoàn toàn (cho ảnh vuông) 50%

Bán kính được tính theo phần trăm của chiều nhỏ hơn của ảnh. Ở 50%, ảnh vuông sẽ trở thành hình tròn hoàn toàn.

Lưu ý: Bán kính chỉ ảnh hưởng đến chính ảnh - vùng khoảng cách nền vẫn là hình chữ nhật. Điều này tạo ra ảnh bo tròn trên nền trong suốt hoặc có màu.
Kích thước khung
px
px
Lề
10%
Tùy chọn
0%

Kéo thả ảnh vào đây

hoặc nhấp để chọn / Ctrl+V để dán

PNG, JPG, WebP, GIF

Kéo thả ảnh hoặc Ctrl+V để dán từ clipboard
Sử dụng Cắt Vùng Trong Suốt để tự động cắt các cạnh trong suốt hiện có
Bật Nền Trong Suốt cho icon và logo
Sử dụng Tô Màu Icon để thay thế các vùng trong suốt bên trong icon bằng màu đặc
Điều chỉnh Bo Góc để tạo icon bo tròn
Kéo ảnh trên canvas để di chuyển tự do
Sử dụng Chế độ Hàng loạt để xử lý nhiều ảnh cùng lúc
Mọi xử lý đều thực hiện cục bộ - ảnh không bao giờ rời khỏi thiết bị của bạn
Muốn biết thêm? Đọc tài liệu →
1/9
Bình luận 0
Để lại bình luận

Chưa có bình luận nào. Hãy là người đầu tiên!

Không tìm thấy? Tự tạo công cụ với AI
Bắt đầu gõ để tìm kiếm...
Đang tìm kiếm...
Không tìm thấy kết quả
Hãy thử tìm với từ khóa khác