Bài viết này được dịch máy
Xem bản gốc
Tôi đã viết một hướng dẫn chi tiết
Hướng dẫn mọi người cách tạo mô hình một hình ảnh hoặc hình ảnh giới thiệu sản phẩm
Và hướng dẫn cách sử dụng để chỉnh sửa hình ảnh được tạo từ trang web

Nếu bạn không thể chờ đợi quá trình xây dựng, bạn có thể xem tại đây: mp.weixin.qq.com/s/uQQ7R8rBUXZ...
Bạn cũng có thể tham khảo bài viết này từ Orange: x.com/oran_ge/status/191721521...
Chúng tôi sẽ sử dụng DeepSeek-Prover-V2 làm ví dụ để giới thiệu trang web đã tạo. Như tôi đã nói trước đây về Vibe Coding, kết quả lần được tạo ra rất quan trọng, vì vậy chúng ta cần chuẩn bị một số thứ.
Đầu tiên là bài báo hoặc blog giới thiệu về mô hình:
Nếu bạn muốn giới thiệu bản cập nhật sản phẩm, bạn cần tải lên tài liệu. Nếu là bài báo thì PDF là đủ. Nếu đó là blog, chỉ cần chọn toàn bộ nội dung trang web và lưu lại.

Mẹo:
Dựa trên thông tin chính của tài liệu phát hành mô hình, hãy giúp tôi tạo màn hình hiển thị trang web động bằng tiếng Trung sử dụng thiết kế trực quan theo phong cách Bento Grid tương tự như PPT họp báo của Apple. Các yêu cầu cụ thể là:
1. Cố gắng hiển thị toàn bộ thông tin trên một trang, với bối cảnh trắng, chữ và màu nút đen nguyên chất, và #4D6BFE là màu nổi bật.
2.
Nhìn chung, kết quả của lần đầu tiên hiện đã tốt. Nếu không có vấn đề gì, bạn chỉ cần chụp ảnh màn hình có diện tích hiển thị lớn nhất.
Nhưng thường có một số vấn đề nhỏ, chẳng hạn như vấn đề bố cục khi tiêu đề không đi kèm với thẻ và đường viền, hoặc các thẻ ở một phần nhất định không chiếm hết không gian, chẳng hạn như Deepseek của tôi gặp vấn đề này.
Vấn đề này làm cho AI
Bản thảo thiết kế tinh chỉnh Figma Đầu tiên, chúng ta cần tìm tệp html plug-in Figma cốt lõi. ĐẾN. thiết kế mà chúng ta sẽ sử dụng lần . Chỉ cần nhấn biểu tượng được khoanh tròn trên thanh Tab bên dưới trong bất kỳ tệp Figma nào và tìm kiếm.

Sau đó chúng ta nhập địa chỉ web cần nhập. Nếu bạn không có, bạn có thể sử dụng Youware để triển khai, sau đó nhấn nút Nhập.
Sau khi nhập, bạn sẽ được yêu cầu chọn các tùy chọn khác. Chỉ cần bật tất cả các công tắc ngoại trừ những công tắc không được phép bật. Sau đó, trong phần cài đặt phông chữ Font Mappings, bạn cần chọn phông chữ thay thế. Nếu trang web của bạn có tiếng Trung, tôi khuyên bạn nên đổi thành Pingfang SC.


Sau đó, bạn có thể thấy trang web đã nhập, là một bản vẽ hoàn chỉnh và cũng có phần điều hướng phía dưới của Youware. Có nhiều phần ở đây mà chúng ta không cần, vì vậy bạn chỉ cần chọn phần này và xóa nó.
Sau khi xóa thanh tab vô dụng, chúng tôi thấy rằng không có nội dung nào trong Iframe và nội dung thực tế nằm trong Iframe với hộp màu đỏ và không có tỷ trọng.


Cuối cùng, chúng ta sẽ thực hiện những thay đổi của mình
Đầu tiên, chúng ta muốn thêm một thẻ vào tiêu đề. Lúc này, chúng tôi đã chọn và thấy rằng chiều rộng của tiêu đề rộng hơn chiều rộng cộng lại của tất cả các thẻ bên dưới, vì vậy trước tiên chúng tôi thay đổi chiều rộng của chúng thành 1472px.




Cuối cùng, chúng ta thực hiện bước cuối cùng trước khi xuất. Có một số vấn đề với phần lề xung quanh toàn bộ thẻ. Phía bên trái và bên phải rất rộng, còn phía trên và phía dưới rất hẹp. Chúng tôi muốn chúng giống nhau. Lúc này chúng ta chỉ cần chọn layer html-Body, sau đó thay đổi khoảng cách của phần khung màu đỏ thành đồng nhất là 32.
Sau đó thay đổi chiều rộng html-Body tại đây để phù hợp với nội dung.
Cuối cùng, Iframe hàng đầu



Nếu bạn muốn thêm đường viền chuyển màu vào hình ảnh như hình tôi đã giới thiệu ở trên, bạn có thể sử dụng công cụ như postspark (postspark.app/screenshot).

Vâng, vậy là hết hướng dẫn tạo hình ảnh ngày hôm nay.
Cuối cùng, bạn có thể nộp bài tập về nhà của mình trong phần bình luận hoặc các nền tảng khác @ tôi
Từ Twitter
Tuyên bố từ chối trách nhiệm: Nội dung trên chỉ là ý kiến của tác giả, không đại diện cho bất kỳ lập trường nào của Followin, không nhằm mục đích và sẽ không được hiểu hay hiểu là lời khuyên đầu tư từ Followin.
Thích
Thêm vào Yêu thích
Bình luận
Chia sẻ
Nội dung liên quan




