Trình tạo mockup thiết bị

Giới thiệu về Trình tạo mockup thiết bị

Trình tạo mockup thiết bị đặt ảnh chụp màn hình vào khung thiết bị thật: iPhone với Dynamic Island, điện thoại Android, iPad, MacBook Pro, cửa sổ trình duyệt với dải tab và thanh địa chỉ, hoặc màn hình máy tính để bàn trên chân đế. Mỗi khung được vẽ đúng tỷ lệ màn hình thực của thiết bị đó, nên những gì bạn xuất ra chính là hình ảnh chụp màn hình sẽ trông như trên phần cứng. Khung được vẽ trên canvas ngay trong tab trình duyệt của bạn, nghĩa là ảnh chụp màn hình của ứng dụng chưa phát hành hay bảng điều khiển nội bộ không bao giờ rời khỏi máy.

Ba khung được dùng nhiều nhất

Khung là lối tắt cho người đọc: nó cho họ biết ngay họ đang nhìn ứng dụng điện thoại, trang web hay công cụ máy tính để bàn, trước khi đọc một chữ nào trong ảnh chụp màn hình.

Thước đo cắt: phần hầu hết công cụ mockup bỏ qua

Màn hình thiết bị có hình dạng cố định. Màn hình iPhone là 1179 nhân 2556, khoảng 9:19.5, và hầu như không có gì bạn chụp đúng kích thước đó. Hầu hết trình tạo mockup lặng lẽ phóng ảnh cho đến khi phủ kín màn hình rồi bỏ phần tràn mép, nên bạn mới biết đáy bảng giá đã mất sau khi đã đăng.

Công cụ này đo thay vì cắt im lặng. Ở chế độ Lấp đầy màn hình, thước đo dưới các nút khớp báo đúng phần trăm ảnh chụp màn hình mà khung đang ẩn, và thanh chuyển từ xanh sang đỏ khi con số tăng. Nếu cao hơn mức bạn muốn, có hai cách thoát:

• Trượt. Thanh trượt dịch cửa sổ hiển thị theo trục đang tràn, nên bạn có thể giữ header, phần giữa hoặc footer thay vì chấp nhận cắt giữa tâm.
• Vừa toàn bộ. Ảnh chụp màn hình được phóng cho đến khi mọi pixel nằm trong màn hình, và các dải còn lại được tô bằng màu bạn chọn. Không gì bị cắt, đổi lại là các dải nhìn thấy được ở trên và dưới, hoặc trái và phải.

Quy tắc hay: dưới khoảng 8% bị cắt thì người đọc không nhận ra, 8% đến 25% vẫn ổn nếu bạn đã trượt để giữ chủ thể, và trên 25% bạn nên chụp lại đúng tỷ lệ khung hình của thiết bị hoặc chuyển sang Vừa toàn bộ.

Khung nào, và độ phân giải bao nhiêu

Ảnh chụp màn hình ở các kích thước pixel đó hoặc lớn hơn vẫn sắc nét ở mọi kích thước xuất. Ảnh nhỏ hơn bị phóng to, và thứ đầu tiên mất đi là khử răng cưa trên chữ nhỏ trong ảnh chụp màn hình.

Cách dùng Trình tạo mockup thiết bị: từng bước

1. Thêm ảnh chụp màn hình: thả PNG hoặc JPG vào khung tải lên, nhấp để chọn tệp, hoặc nhấn Ctrl+V để dán thẳng từ clipboard.
2. Chọn khung thiết bị: iPhone, Android, iPad, MacBook, Trình duyệt hoặc Màn hình. Khung điện thoại và máy tính bảng cũng chuyển giữa dọc và ngang.
3. Kiểm tra thước đo cắt: nếu bị ẩn quá nhiều, kéo thanh trượt hoặc chuyển sang Vừa toàn bộ để không mất gì.
4. Tạo kiểu cho khung: đặt màu khung, nền, đệm, bóng và ánh lóa. Trên khung trình duyệt, nhập tiêu đề tab và địa chỉ riêng.
5. Xuất: chọn kích thước xuất, rồi Tải PNG để lưu mockup hoặc Sao chép ảnh để dán vào bài đăng.

Mẹo thực tế

• Chụp đúng tỷ lệ khung hình của thiết bị khi có thể. Cửa sổ trình duyệt đổi kích thước thành 1179 nhân 2556 trước khi chụp làm thước đo cắt đọc 0% và mockup khớp từng pixel.
• Dùng khung trình duyệt khi URL quan trọng. Nhập tên miền của bạn vào thanh địa chỉ đưa thương hiệu vào ảnh mà không cần chú thích.
• Giữ đệm từ 6% đến 12%. Ít hơn thì thiết bị chạm mép bài đăng; nhiều hơn thì màn hình trở nên khó đọc trong feed.
• Khớp màu khung với ảnh chụp màn hình. Space Black dưới ảnh chế độ tối, Silver hoặc Titan dưới ảnh sáng; chrome trình duyệt tự theo cùng lựa chọn đó.
• Giảm ánh lóa với màn hình nhiều chữ. Ánh nhẹ đọc như kính, ánh mạnh đọc như ảnh stock và che nội dung của bạn.
• Xuất trong suốt cho slide. Nền KHÔNG cho thiết bị nổi cùng bóng đổ, sẵn sàng thả lên bất kỳ deck hay phần hero nào.

Quyền riêng tư

Mọi thứ diễn ra trong tab trình duyệt qua HTML5 canvas API. Ảnh chụp màn hình của bạn được đọc từ object URL cục bộ, vẽ vào khung, và mã hóa thành PNG bởi chính trình duyệt. Không có ảnh nào được tải lên, lưu trữ hay truyền đi, và sau khi trang đã tải công cụ vẫn chạy mà không cần kết nối mạng.

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

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

Không. Các khung thiết bị được vẽ bằng HTML5 canvas API ngay trong tab trình duyệt của bạn, và ảnh chụp màn hình được đọc từ object URL cục bộ. Không có gì được gửi đi đâu cả, nên mockup của ứng dụng chưa phát hành, bảng điều khiển nội bộ hay công việc khách hàng vẫn ở trên máy bạn. Sau khi trang đã tải, công cụ vẫn chạy mà không cần kết nối mạng.

Có những khung thiết bị nào?

Sáu khung: iPhone với Dynamic Island, điện thoại Android với camera đục lỗ, iPad Pro, MacBook Pro với notch và đế, cửa sổ trình duyệt với dải tab và thanh địa chỉ, và màn hình máy tính để bàn trên chân đế. Mỗi khung dùng đúng tỷ lệ màn hình thực của thiết bị đó, nên mockup tạo ở đây khớp với hình ảnh chụp màn hình sẽ trông như trên phần cứng.

Ảnh chụp màn hình của tôi không cùng hình dạng với màn hình thiết bị. Điều gì xảy ra?

Đó chính là việc của thước đo cắt. Lấp đầy màn hình phóng ảnh chụp màn hình cho đến khi phủ kín toàn bộ màn hình, cắt phần tràn ra mép, và thước đo cho biết đúng phần trăm bị ẩn. Thanh trượt sau đó dịch cửa sổ hiển thị theo trục bị cắt để bạn giữ được phần quan trọng. Vừa toàn bộ phóng ảnh chụp màn hình cho đến khi toàn bộ nằm trong màn hình và đệm các dải còn lại bằng màu bạn chọn, nên không mất gì.

Ảnh chụp màn hình nên có độ phân giải bao nhiêu?

Khớp với thiết bị bạn đang đóng khung: 1179 nhân 2556 cho iPhone, 1080 nhân 2400 cho điện thoại Android, 1668 nhân 2388 cho iPad, 3024 nhân 1964 cho MacBook, 1440 nhân 900 cho cửa sổ trình duyệt và 2560 nhân 1440 cho màn hình máy tính. Ảnh bằng kích thước đó hoặc lớn hơn vẫn sắc nét. Ảnh nhỏ hơn vẫn dùng được, nhưng bị phóng to và mép mềm sẽ lộ quanh chữ.

Tôi có thể xuất thiết bị trên nền trong suốt không?

Có. Chọn mẫu nền KHÔNG và phần đệm quanh thiết bị được xuất dạng alpha thay vì màu, trong khi khung, màn hình và bóng đổ vẫn được vẽ. Tải PNG giữ độ trong suốt đó, đúng thứ bạn cần khi mockup sẽ đặt lên slide, phần hero hoặc trang có nền riêng hiện xuyên qua.

Tại sao khung trình duyệt lại chuyển sang tối?

Chrome trình duyệt theo màu khung bạn chọn. Chọn Space Black thì dải tab, thanh công cụ và thanh địa chỉ chuyển sang giao diện tối để mockup khớp với ảnh chụp màn hình chế độ tối; bất kỳ màu khung sáng hơn nào cũng cho giao diện sáng. Tiêu đề tab và địa chỉ là các trường văn bản thường, nên bạn có thể đưa tên sản phẩm và tên miền của mình vào ảnh.

Công cụ hình ảnh:

• Thêm đường kẻ vào ảnh
• Thêm văn bản vào hình ảnh
• ⬛ Máy tính Tỉ lệ Khung hình Mới
• Cắt ảnh hình tròn Mới
• Trình tạo Collage
• Trình tạo Nối các Chấm
• Trình Xem và Xóa Dữ Liệu EXIF Mới
• Lật ảnh GIF
• Lật ảnh
• Trình tạo GIF
• Công cụ pixel hóa ảnh
• Bộ nén hình ảnh Phổ biến
• Công cụ cắt ảnh
• Trình nâng cao hình ảnh
• Trình điều chỉnh kích thước ảnh
• Công cụ Xoay Ảnh Phổ biến
• Công cụ chia ảnh Phổ biến
• Trình chuyển đổi hình ảnh sang nghệ thuật ASCII Mới
• Trình truy vết ảnh sang SVG Mới
• Trình Tạo Ảnh Placeholder / Lorem Picsum Mới
• 📷 OCR Chuyển Ảnh Thành Văn Bản Phổ biến
• Máy tính kích thước in và độ phân giải (DPI/PPI)
• Trình tạo ảnh bo góc Mới
• Công cụ làm đẹp ảnh chụp màn hình Mới
• Trình tạo mockup thiết bị Mới
• Thêm bóng đổ cho ảnh Mới
• Thêm viền vào ảnh Mới