Tạo Mockup Điện Thoại
Công cụ tạo mockup điện thoại ghép bất kỳ ảnh chụp màn hình nào vào khung thiết bị chân thực, biến một tấm ảnh thường thành hình ảnh chỉn chu, sẵn sàng trình bày chỉ trong vài giây. Đây là lựa chọn hoàn hảo để giới thiệu một ứng dụng, một website hay một ý tưởng thiết kế mà không cần mở Photoshop hoặc lùng sục plugin Figma.
Chọn trong năm loại thiết bị — iPhone, Android, iPad, MacBook và Màn hình máy tính — mỗi khung được vẽ với tỉ lệ chuẩn xác cùng những chi tiết y như thật như Dynamic Island, camera đục lỗ, khía webcam và chân đế laptop hay màn hình. Thêm nền màu đơn, chuyển sắc hoặc trong suốt, tinh chỉnh khoảng đệm rồi xuất ảnh PNG sắc nét.
Cách dùng công cụ tạo mockup điện thoại
Tải ảnh chụp màn hình lên
Kéo thả một ảnh vào vùng tải lên, bấm để duyệt file, hoặc nhấn Ctrl+V (Cmd+V trên Mac) để dán từ bộ nhớ tạm. Hỗ trợ cả PNG, JPG và WebP.
Chọn thiết bị
Chọn iPhone, Android, iPad, MacBook hoặc Màn hình trên thanh công cụ. Ảnh chụp màn hình tự động được ghép vừa khung, sau đó hãy chọn màu thiết bị từ bảng màu thay đổi theo từng thiết bị.
Tạo kiểu cho nền
Chuyển giữa nền Màu đơn (bộ chọn màu cùng tám mẫu có sẵn), Chuyển sắc (tám mẫu có sẵn) hoặc Không nền để xuất trong suốt. Sau đó kéo thanh trượt Khoảng đệm để định khoảng cách quanh thiết bị.
Tải PNG về
Bấm Tải PNG để lưu một mockup độ phân giải cao kết xuất ở mức 3x, sẵn sàng cho danh sách trên app store, bản trình bày, bài đăng mạng xã hội hay portfolio của bạn.
Tính năng
Năm loại thiết bị
Đóng khung ảnh chụp màn hình trong iPhone, điện thoại Android, iPad, MacBook hay màn hình máy tính, mỗi loại đều có tỉ lệ chân thực.
Chi tiết thiết bị y như thật
Dynamic Island, camera đục lỗ Android, chấm camera iPad, khía webcam cùng bản lề MacBook, và cổ với chân đế màn hình.
Tùy chọn màu theo thiết bị
Mỗi thiết bị có bảng màu riêng — đen, bạc, xanh dương, vàng gold, trắng, xanh lá, midnight và xám không gian — để khớp thương hiệu của bạn.
Nền màu đơn
Dùng bộ chọn màu cho mọi sắc độ hoặc chạm vào một trong tám mẫu có sẵn, từ chàm và xanh trời đến ngọc lục bảo, hổ phách và xám đá.
Nền chuyển sắc
Chọn trong tám mẫu chuyển sắc có sẵn — chàm-tím, hoàng hôn, đại dương, ngọc lục bảo và hơn nữa — cho hình ảnh tiếp thị thật bắt mắt.
Xuất nền trong suốt
Chọn nền Không nền để xuất PNG trong suốt, lý tưởng để chồng lên slide hoặc ghép vào các thiết kế khác.
Khoảng đệm điều chỉnh được
Kéo thanh trượt khoảng đệm để thêm hoặc bớt khoảng trống quanh khung thiết bị, từ sát mép đến lề rộng rãi.
Ghép ảnh thông minh
Ảnh chụp màn hình được co giãn và canh giữa theo kiểu cắt lấp đầy khung, nên mọi tỉ lệ khung hình đều lấp gọn màn hình thiết bị.
PNG độ phân giải cao
Bản xuất kết xuất ở mức 3x cho kết quả sắc nét, phù hợp với màn hình retina, ảnh chụp trên app store và in ấn.
Kéo thả, bấm chọn hoặc dán
Thêm ảnh chụp màn hình theo cách bạn thích — kéo thả một file, bấm để duyệt, hoặc dán thẳng từ bộ nhớ tạm.
Câu hỏi thường gặp
Làm sao để ghép ảnh chụp màn hình vào mockup điện thoại?
Tải ảnh chụp màn hình lên bằng cách kéo thả vào vùng tải lên, bấm để duyệt hoặc dán bằng Ctrl+V. Sau đó chọn iPhone hoặc Android, ảnh sẽ tự động được ghép vừa bên trong khung thiết bị. Chọn màu và nền, rồi tải PNG về.
Hỗ trợ những thiết bị nào?
Năm loại thiết bị: iPhone (có Dynamic Island), điện thoại Android (camera đục lỗ), iPad, MacBook và màn hình máy tính. Mỗi khung được vẽ bằng mã với tỉ lệ chuẩn xác cùng những chi tiết riêng của từng thiết bị.
Tôi có thể tải lên những định dạng ảnh nào?
Ảnh PNG, JPG và WebP đều dùng được. Mọi ảnh chụp màn hình hay file ảnh thông thường từ thiết bị hoặc bộ nhớ tạm của bạn đều có thể thả vào một mockup.
Tôi có xuất được mockup PNG nền trong suốt không?
Có. Chọn tùy chọn nền Không nền để xuất một PNG trong suốt hoàn toàn. Điều này tiện lợi khi bạn muốn đặt mockup lên trên slide, các thiết kế khác hoặc một nền tùy chỉnh.
Ảnh xuất ra có độ phân giải bao nhiêu?
PNG được kết xuất ở mức 3x độ phân giải bản xem trước, cho ra ảnh sắc nét phù hợp với màn hình retina, ảnh chụp trên App Store và in ấn chất lượng cao. Kích thước pixel chính xác tùy thuộc vào thiết bị bạn chọn và khoảng đệm bạn đặt.
Tại sao ảnh chụp màn hình của tôi bị cắt khi đặt vào thiết bị?
Công cụ dùng cách co giãn lấp đầy khung để phủ kín hoàn toàn màn hình thiết bị, nên nếu ảnh chụp màn hình của bạn có tỉ lệ khung hình khác với thiết bị, một số mép sẽ bị cắt để giữ ghép gọn. Để có kết quả tốt nhất, hãy dùng ảnh chụp màn hình có tỉ lệ khung hình gần với thiết bị đích.
Ảnh của tôi có được tải lên máy chủ không?
Không. Mọi thứ chạy cục bộ ngay trên trình duyệt của bạn bằng HTML Canvas API. Ảnh của bạn không bao giờ rời khỏi thiết bị và không được lưu trữ hay truyền đi bất cứ đâu.
Tôi có dùng mockup cho mục đích thương mại được không?
Có. Các khung thiết bị là những hình khối cách điệu được vẽ bằng mã — không phải ảnh chụp hay tài sản có nhãn hiệu — nên bạn có thể tự do dùng những mockup tạo ra trong cả dự án cá nhân lẫn thương mại.
Chưa có bình luận nào. Hãy là người đầu tiên!