Tạo Mockup Điện Thoại, Laptop, Trình Duyệt

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

• 5 loại khung tự vẽ: điện thoại có đảo camera, điện thoại Android camera đục lỗ, máy tính bảng, laptop, cửa sổ trình duyệt
• Điện thoại và máy tính bảng xoay được dọc, ngang; khung có ba màu đen, bạc, trắng
• Cửa sổ trình duyệt sáng hoặc tối, gõ được địa chỉ trên thanh địa chỉ, chiều cao cửa sổ tự theo ảnh để hiện trọn trang dài
• Ảnh lệch tỉ lệ màn hình: chọn phủ kín (cắt phần thừa), hiện trọn ảnh (chừa viền) hoặc khớp bề rộng rồi cuộn tới đoạn cần khoe; công cụ báo phần trăm ảnh bị cắt
• Nền gradient 6 mẫu có sẵn hoặc tự chọn hai màu và hướng, nền một màu, nền trong suốt cho PNG
• Chỉnh lề quanh thiết bị, bo góc ảnh nền, độ đậm bóng đổ, nghiêng từ -15 tới 15 độ
• Dán ảnh bằng Ctrl+V hoặc Cmd+V, kéo thả, hoặc chọn file; ảnh chụp từ điện thoại tự xoay đúng chiều theo EXIF; ảnh rất lớn (trên khoảng 16 triệu điểm ảnh) được thu nhỏ một lần khi mở để chỉnh mượt
• Xuất PNG 1x và 2x, tự giảm tỉ lệ khi ảnh quá lớn để trình duyệt điện thoại không bị treo

Khi nào cần mockup thiết bị

Một ảnh chụp màn hình trần trụi đặt giữa bài viết trông giống ảnh báo lỗi hơn là ảnh giới thiệu sản phẩm. Khi đặt vào khung điện thoại hay laptop trên nền màu, người xem hiểu ngay đây là giao diện ứng dụng, website hay trang bán hàng và nó trông thế nào trên thiết bị thật. Dân thiết kế web dùng mockup để đưa vào portfolio và gửi khách duyệt giao diện; người làm marketing dùng cho bài đăng ra mắt tính năng, ảnh đầu bài blog, slide; lập trình viên dùng cho README, trang giới thiệu ứng dụng. Cách cũ là mở Photoshop, tìm file mockup PSD, dán smart object, xuất ảnh; nhiều file mockup lại dùng ảnh thiết bị có bản quyền. Ở đây bạn chụp màn hình, bấm Ctrl+V, chọn khung, tải PNG, mất chưa tới một phút.

Lợi ích khi sử dụng

• •Ảnh giới thiệu sản phẩm, portfolio trông chuyên nghiệp mà không cần Photoshop hay file PSD
• •Không lo bản quyền ảnh thiết bị: khung tự vẽ, không logo, không tên hãng trên khung
• •Nhanh: chụp màn hình, dán, tải ảnh trong vài thao tác
• •Ảnh không rời khỏi máy, hợp với giao diện chưa công bố hoặc có dữ liệu nội bộ
• •Nền trong suốt để ghép tiếp vào slide, banner, trang web
• •Dùng được trên điện thoại, máy tính bảng

Cách tạo mockup bằng công cụ

1. 1Chụp màn hình giao diện cần khoe vào bộ nhớ tạm (trên Windows bấm Windows + Shift + S, trên Mac bấm Cmd + Ctrl + Shift + 4), hoặc chụp trên điện thoại rồi chuyển file sang máy.
2. 2Bấm Ctrl+V (Cmd+V trên Mac) ở bất kỳ đâu trên trang, kéo thả ảnh vào khung xem trước, hoặc bấm Chọn ảnh chụp màn hình.
3. 3Chọn thiết bị trong danh sách. Với điện thoại và máy tính bảng, chọn Dọc hoặc Ngang. Với cửa sổ trình duyệt, gõ địa chỉ trang và chọn giao diện sáng hoặc tối.
4. 4Nếu ảnh không cùng tỉ lệ với màn hình, chọn cách đặt ảnh: phủ kín, hiện trọn ảnh hoặc khớp bề rộng, rồi kéo thanh Vị trí ngang, Vị trí dọc hoặc Cuộn dọc để chọn phần hiển thị.
5. 5Chọn nền gradient, một màu hoặc trong suốt; chỉnh lề, bo góc, bóng đổ, góc nghiêng cho vừa mắt.
6. 6Bấm Tải PNG 1x cho ảnh nhẹ hoặc Tải PNG 2x cho ảnh sắc nét trên màn hình độ phân giải cao. Kích thước ảnh xuất được ghi ngay dưới nút.

Chụp màn hình đúng tỉ lệ để vừa khít khung

Khung điện thoại có đảo camera dùng màn hình 393 x 852 điểm, đúng tỉ lệ ảnh chụp màn hình 1179 x 2556 px của các mẫu điện thoại 6,1 inch đời mới như iPhone 15, iPhone 16 bản thường. Ảnh chụp từ các máy này vào khung sẽ khít hoàn toàn, công cụ không phải cắt gì. Khung điện thoại Android dùng màn hình 412 x 915, tỉ lệ khoảng 9 : 20, khớp ảnh chụp 1080 x 2400 px của rất nhiều máy Android; ảnh 1080 x 2400 đặt vào khung này gần như không bị cắt (dưới 1%), còn đặt vào khung điện thoại có đảo camera thì bị cắt khoảng 2%. Khung máy tính bảng dùng màn hình 820 x 1180, khớp ảnh 1640 x 2360 px của iPad đời 10, iPad Air 11 inch. Khung laptop dùng màn hình 16 : 10 (1280 x 800), khớp ảnh 1440 x 900 hay 2560 x 1600 px; ảnh 2560 x 1664 px của MacBook Air 13 inch đời M2 hơi cao hơn nên bị cắt khoảng 4%. Khung trình duyệt nhận ảnh bất kỳ. Nếu muốn khoe giao diện website trên khung điện thoại, hãy mở chế độ thiết bị di động trong công cụ cho nhà phát triển của trình duyệt (F12, biểu tượng điện thoại), chọn cỡ 393 x 852 rồi chụp; ảnh desktop 1920 x 1080 nhét vào khung điện thoại dọc sẽ bị cắt tới khoảng 74% diện tích, gần như không đọc được.

Ảnh lệch tỉ lệ: phủ kín, hiện trọn hay cuộn

Ba chế độ đặt ảnh giải quyết ba nhu cầu khác nhau. Phủ kín màn hình phóng ảnh tới khi không còn khoảng trống, phần thừa bị cắt; hợp khi ảnh chỉ hơi lệch tỉ lệ, ví dụ ảnh Android vào khung kiểu iPhone. Hai thanh Vị trí ngang, Vị trí dọc chọn phần giữ lại: Vị trí dọc 0% giữ phần đầu ảnh, 100% giữ phần cuối. Công cụ ghi rõ đang cắt mất bao nhiêu phần trăm diện tích để bạn biết có nên đổi khung hay không. Hiện trọn ảnh thu ảnh lại cho vừa, chừa hai dải đen (hoặc trắng với trình duyệt sáng) ở hai bên hay trên dưới; hợp khi mọi chi tiết đều quan trọng. Khớp bề rộng giữ ảnh rộng đúng bằng màn hình, ảnh dài hơn thì như đang cuộn trang: thanh Cuộn dọc 0% là đầu trang, 100% là cuối trang. Chế độ này hợp với ảnh chụp toàn trang (full page screenshot) dài vài nghìn điểm ảnh khi bạn muốn khoe một đoạn giữa trang, ví dụ bảng giá, trong khung điện thoại.

Khung cửa sổ trình duyệt: thanh địa chỉ, sáng tối, trang dài

Khung trình duyệt vẽ một cửa sổ bo góc 12 điểm ảnh, thanh tiêu đề cao 52 điểm ảnh có ba chấm điều khiển cửa sổ, nút lùi, nút tiến và ô địa chỉ. Bạn gõ tên miền vào ô Địa chỉ trên thanh trình duyệt, chữ hiện ngay trên khung; địa chỉ quá dài sẽ được rút gọn bằng dấu ba chấm để không tràn. Giao diện tối đổi thanh tiêu đề và ô địa chỉ sang màu xám đậm, hợp với ảnh chụp trang dùng chế độ tối. Bề rộng màn hình cửa sổ là 1280 điểm ảnh. Mặc định chiều cao là 800 (tỉ lệ 16 : 10); khi bật Chiều cao cửa sổ theo ảnh, chiều cao được tính theo tỉ lệ ảnh, tối thiểu 360 và tối đa 4000 điểm ảnh. Ví dụ ảnh chụp toàn trang 1440 x 6000 px cho chiều cao 1280 x 6000 / 1440 = 5333, vượt mức tối đa nên giữ 4000; cửa sổ khi đó cao 4052 điểm ảnh tính cả thanh tiêu đề, ảnh xuất 1x với lề 120 là 1520 x 4292 px. Phần trang còn lại dùng thanh Cuộn dọc để chọn đoạn hiển thị.

Kích thước ảnh xuất 1x và 2x được tính thế nào

Ảnh xuất 1x có kích thước bằng khung thiết bị cộng lề hai bên. Khung điện thoại có đảo camera rộng 429 và cao 888 điểm ảnh (màn hình 393 x 852, viền 14 mỗi bên, thêm 4 điểm ảnh mỗi bên cho nút cạnh máy). Với lề mặc định 120, ảnh 1x là 429 + 240 = 669 x 888 + 240 = 1128 px; ảnh 2x là 1338 x 2256 px. Khung Android là 444 x 947, ảnh 1x 684 x 1187 px. Máy tính bảng dọc 868 x 1228, ảnh 1x 1108 x 1468 px. Laptop 1531 x 894 tính cả đế, ảnh 1x 1771 x 1134 px. Khi nghiêng, ảnh phải rộng ra để chứa khung xoay: điện thoại nghiêng 10 độ với lề 120 cho ảnh 817 x 1190 px. Bản 2x có số điểm ảnh gấp bốn, sắc nét trên màn hình Retina và điện thoại, nhưng nặng hơn. Trình duyệt trên điện thoại thường không vẽ được canvas trên khoảng 16 triệu điểm ảnh, nên khi ảnh 2x vượt mức đó công cụ tự giảm tỉ lệ và ghi chú trong thông báo; trên máy tính giới hạn được nới lên 60 triệu điểm ảnh.

Nền, bóng đổ, bo góc, nghiêng: phối thế nào cho đẹp

Nền gradient làm thiết bị nổi bật mà không tranh chỗ với nội dung màn hình. Chọn tông nền tương phản với giao diện: giao diện nhiều màu trắng hợp nền đậm như Tím than, Đêm; giao diện tối hợp nền sáng như Xám nhạt, Vàng nắng. Hướng gradient 135 độ (từ trên trái xuống dưới phải) là kiểu phổ biến nhất. Nền trong suốt dùng khi bạn sẽ ghép mockup vào slide, banner hay trang web có nền riêng; lúc đó bóng đổ vẫn được giữ dưới dạng điểm ảnh bán trong suốt. Bóng đổ khoảng 30 đến 50 cho cảm giác thiết bị nằm trên mặt phẳng; trên 70 hợp với nền sáng. Bo góc ảnh nền 16 đến 32 làm ảnh mềm hơn khi đăng lên mạng xã hội hay chèn vào bài viết. Góc nghiêng 5 đến 8 độ tạo cảm giác động cho ảnh đầu bài; nghiêng quá 10 độ thì chữ trên màn hình khó đọc. Lề quanh thiết bị: 80 đến 160 với ảnh đăng mạng xã hội, 0 khi chỉ cần thiết bị với nền trong suốt.

Bản quyền và nhãn hiệu: vì sao khung được tự vẽ

Nhiều bộ mockup trên mạng dùng ảnh chụp hoặc ảnh dựng 3D của thiết bị thật, kèm điều khoản giới hạn mục đích sử dụng; một số còn giữ nguyên logo hãng trên mặt lưng hay viền máy. Logo và hình dáng sản phẩm là tài sản trí tuệ của hãng sản xuất; dùng chúng trong ảnh quảng cáo có thể gây hiểu nhầm rằng sản phẩm của bạn được hãng bảo trợ. Công cụ này vẽ mọi khung bằng hình học đơn giản: hình chữ nhật bo góc, hình viên thuốc cho đảo camera, chấm tròn cho camera, hình thang bo góc cho đế laptop, ba chấm màu cho cửa sổ. Không có ảnh thiết bị nào được nhúng, không có chữ hay logo của hãng nào trên khung. Tên iPhone, iPad, MacBook trong danh sách chỉ dùng để mô tả kiểu dáng giúp bạn chọn đúng khung, và là nhãn hiệu của chủ sở hữu tương ứng. Ảnh bạn xuất ra thuộc về bạn; nội dung màn hình trong ảnh vẫn phải là thứ bạn có quyền sử dụng.

Mẹo làm mockup đẹp cho portfolio và bài ra mắt sản phẩm

Dọn màn hình trước khi chụp: tắt thông báo, đặt pin đầy hoặc ẩn thanh trạng thái, dùng dữ liệu mẫu thay cho tên khách hàng thật, đặt giờ đẹp như 9:41. Chụp ở độ phân giải gốc của máy, đừng chụp qua ứng dụng nhắn tin vì ảnh bị nén. Với website, chụp ở cỡ khung nhìn chuẩn (393 x 852 cho điện thoại, 1440 x 900 cho laptop) bằng công cụ cho nhà phát triển để ảnh khít khung. Một bộ ảnh giới thiệu thường gồm ba ảnh cùng nền: laptop cho giao diện máy tính, điện thoại dọc cho giao diện di động, cửa sổ trình duyệt cho một trang cụ thể. Giữ cùng màu nền, cùng lề, cùng độ bóng giữa các ảnh để bộ ảnh trông đồng bộ. Ảnh đăng Facebook, LinkedIn nên xuất 2x rồi để nền tảng tự thu nhỏ; ảnh chèn web nên xuất 1x rồi nén bằng công cụ giảm dung lượng ảnh, hoặc tạo nhiều cỡ bằng công cụ tạo ảnh responsive srcset trên website.

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

Từ khóa liên quan

• tạo mockup online
• mockup điện thoại
• mockup iphone online
• mockup laptop
• mockup macbook online
• mockup trình duyệt
• browser mockup
• device mockup
• mockup website
• tạo mockup từ ảnh chụp màn hình
• ghép ảnh vào khung điện thoại
• khung điện thoại png
• khung iphone png
• screenshot mockup
• mockup ipad online
• mockup ứng dụng điện thoại
• mockup giao diện web
• làm đẹp ảnh chụp màn hình
• tạo ảnh portfolio web
• mockup miễn phí
• mockup nền trong suốt
• mockup android