CodeKitHubCông Cụ Này Là Gì?
Công cụ tạo Facebook Story tái hiện giao diện dọc, toàn màn hình của một Story Facebook thật — vòng viền hồ sơ, tên và dấu thời gian ở đầu, ảnh nền hoặc dải màu gradient, chữ in đậm đè lên ảnh, cùng dải thanh trả lời ở phía dưới.
Tuyệt đối không được dùng để tạo bằng chứng giả, quấy rối hay bôi nhọ ai đó, hoặc giả mạo bài đăng hay Story thật của một người có thật — việc này có thể vi phạm pháp luật tùy theo quy định ở nơi bạn sinh sống.
Mọi thứ được tạo ngay trong trình duyệt của bạn bằng HTML Canvas API — không có gì được tải lên máy chủ.
Tại Sao Nên Dùng?
- Bạn đang làm meme định dạng Story đang thịnh hành trong nhóm chat và cần giao diện thật sự giống Story gốc, kèm thanh trả lời phía dưới, thay vì chỉ chỉnh sửa ảnh chụp màn hình một cách vụng về.
- Bạn thuyết trình ý tưởng tính năng Story mới cho ứng dụng startup trước nhà đầu tư và cần mockup dọc trông chuyên nghiệp mà không phải phát triển tính năng thật trước.
- Bạn làm tài liệu giảng dạy về mạng xã hội và muốn minh họa phong cách Story với chữ đè lên ảnh và dải gradient mà không dùng tài khoản cá nhân của học viên hay người khác.
- Bạn thêm ví dụ giao diện Story vào portfolio thiết kế đồ họa, và cần đúng tỷ lệ 9:16 như bản gốc mà không phải đo thủ công trong phần mềm thiết kế.
- Bạn muốn thử nhiều tổ hợp gradient nền và chữ đè lên ảnh trước khi chốt thiết kế cuối cho chiến dịch, và có thể tải xuống bao nhiêu lần tùy thích mà không giới hạn hay hình mờ gây phiền.
Cách Sử Dụng
- Đặt tên, dấu thời gian và màu avatar (hoặc tải ảnh lên).
- Chọn dải màu gradient cho nền, hoặc tải lên ảnh của riêng bạn.
- Gõ đoạn chữ sẽ hiển thị gần phía dưới Story.
- Theo dõi bản xem trước dọc cập nhật trực tiếp, rồi nhấn "Download PNG" để lưu ảnh.
Ví dụ
Đầu vào
Tên: "Sam Whitfield" · Thời gian: "4h" · Nền: dải màu từ xanh sang hồng · Chữ: "Sunday morning coffee ☕"Đầu ra
Một ảnh PNG 360×640 mang phong cách một Story Facebook thật: avatar có vòng viền hồ sơ, tên và dấu thời gian, nền phủ kín màn hình bằng dải màu gradient, chữ in đậm căn giữa, và thanh trả lời có biểu tượng trái tim ở phía dưới.Ảnh được vẽ ngay lập tức trên canvas xem trước trực tiếp và tải về chỉ với một cú nhấp chuột — không phải chờ đợi, không cần kết nối tới máy chủ.
Những gì bạn có thể tùy chỉnh
- Tên hồ sơ, dấu thời gian, và màu hoặc ảnh avatar.
- Nền: dải màu gradient hai màu hoặc ảnh tải lên.
- Đoạn chữ in đậm hiển thị gần phía dưới Story.
- Chi tiết bố cục khớp với phong cách hình ảnh thật của Story Facebook.
Sử dụng có trách nhiệm
Công cụ này ra đời để giúp việc tạo ra những hình ảnh mockup rõ ràng mang tính hư cấu trở nên dễ dàng hơn, phục vụ cho mục đích hài hước, kể chuyện và công việc thiết kế. Nếu bạn chia sẻ một hình ảnh được tạo bằng công cụ này, hãy cân nhắc thêm chú thích để người xem hiểu rằng đó không phải một Story thật.
Story vs. luồng bình luận vs. hồ sơ — khi nào dùng mockup nào
Facebook có nhiều định dạng nội dung với phong cách hình ảnh khác nhau, và trang này có công cụ riêng cho từng loại để đảm bảo độ chính xác.
| Định dạng | Hướng | Thời gian tồn tại trên Facebook thật |
|---|---|---|
| Story (công cụ này) | Dọc 9:16, toàn màn hình | Tự biến mất sau 24 giờ |
| Luồng bình luận | Cột rộng, có thể rất dài | Tồn tại vĩnh viễn cho đến khi bị xóa |
| Header hồ sơ | Ngang rộng với avatar chồng lên | Tồn tại vĩnh viễn, có thể đổi bất cứ lúc nào |
Câu Hỏi Thường Gặp
Dùng công cụ này có hợp pháp và đạo đức không?
Bản thân công cụ hoàn toàn hợp pháp khi dùng để giải trí, làm mockup, thuyết trình và công việc thiết kế. Điều không hợp pháp và không đúng đắn là dùng hình ảnh tạo ra để lừa dối ai đó. Vui lòng chỉ sử dụng cho mục đích rõ ràng là hư cấu hoặc minh họa.
Công cụ có tải nội dung của tôi lên đâu không?
Không. Mọi thứ bạn gõ hoặc tải lên đều lưu trong bộ nhớ trình duyệt và được vẽ trực tiếp lên phần tử canvas bằng JavaScript. Ảnh PNG được tạo ra và tải về ngay trên thiết bị của bạn — không có gì được gửi tới máy chủ.
Tôi có thể tải ảnh của riêng mình làm nền Story không?
Có — nhấn vào liên kết tải lên bên dưới "Video background" để dùng ảnh của bạn làm nền phủ kín màn hình thay vì dải màu gradient.
Công cụ xuất ảnh với kích thước bao nhiêu?
Ảnh PNG xuất ra có kích thước 360×640, tương ứng với tỷ lệ dọc 9:16 mà các Story Facebook thật sử dụng.
Tôi nên dùng công cụ này hay một công cụ tạo mockup Facebook khác?
Nếu bạn đang làm một Story dọc toàn màn hình, hãy dùng công cụ này. Nếu cần một luồng bình luận, hãy dùng Facebook Comment Generator; nếu cần cả một trang hồ sơ với ảnh bìa và tiểu sử, hãy dùng Facebook Profile Generator.
Thanh trả lời ở dưới cùng có thể nhập chữ tùy chỉnh, kiểu "Gửi tin nhắn" không?
Thanh trả lời được vẽ như một thành phần cố định mô phỏng giao diện thật của Facebook Story, nên chữ trên đó đã được đặt sẵn. Điều này giúp kết quả cuối luôn nhất quán với phong cách gốc mà bạn không cần tự chỉnh từng chi tiết nhỏ.
Nếu chữ đè lên ảnh của tôi quá dài thì có bị cắt mất không?
Chữ đè lên ảnh được thiết kế để tự động xuống dòng trong khu vực hiển thị, giống cách Facebook xử lý caption dài trên Story thật. Để có kết quả tốt nhất, hãy giữ câu chữ ngắn gọn như caption Story thông thường.
Tôi có thể tạo một loạt nhiều Story với phong cách hình ảnh nhất quán không?
Được — giữ nguyên tổ hợp màu gradient và cài đặt avatar, chỉ đổi chữ đè lên ảnh rồi tải PNG mới cho mỗi khung hình. Vì không giới hạn số lần tải, bạn có thể tạo cả một chuỗi Story cảm giác như cùng một câu chuyện.
Vòng viền avatar có đổi màu theo trạng thái, ví dụ Story đã xem chưa?
Không — vòng viền avatar trong công cụ này chỉ mang tính trang trí tĩnh, không mô phỏng trạng thái "đã xem" hay "chưa xem" như trên Facebook thật, vì điều đó nằm ngoài phạm vi của một bản mockup hình ảnh tĩnh.