작성한 상세한 튜토리얼 사람들에게 이러한 원 이미지 모델 또는 제품 소개 홍보 이미지를 생성하는 방법을 가르쳐줌 Figma를 사용하여 웹페이지에서 생성된 이미지를 수정하는 방법도 함께 알려줌

공사가 진행되는 것을 기다릴 수 없다면 여기에서 확인할 수 있습니다: mp.weixin.qq.com/s/uQQ7R8rBUXZ...

Orange의 다음 내용도 참조할 수 있습니다: x.com/oran_ge/status/191721521...

웹 페이지 생성 DeepSeek-Prover-V2를 예로 들어 보겠습니다. 제가 Vibe Coding에 대해 이전에 말했듯이, 처음 생성된 결과는 중요하기 때문에 몇 가지를 준비해야 합니다. 첫 번째는 모델의 논문 또는 소개 블로그입니다. 제품 업데이트를 도입하려면 문서를 업로드해야 합니다. 종이라면 PDF로 하면 됩니다. 블로그인 경우, 웹페이지의 모든 콘텐츠를 선택하여 저장하기만 하면 됩니다.

팁: 모델 릴리스 문서의 주요 정보를 바탕으로 Apple의 기자 회견 PPT와 유사한 Bento Grid 스타일의 시각적 디자인을 사용하여 중국어 동적 웹 페이지 디스플레이를 생성하는 데 도움을 주세요. 구체적인 요구 사항은 다음과 같습니다. 1. 모든 정보를 한 페이지에 표시하도록 하세요. 배경은 흰색, 텍스트와 버튼 색상은 검은색으로 하고, 강조색은 #4D6BFE로 하세요. 2.

일반적으로 1세대의 결과는 이때쯤이면 이미 좋습니다. 문제가 없다면 가장 큰 디스플레이 영역으로 스크린샷을 찍으면 됩니다. 하지만 사소한 문제도 종종 발생합니다. 예를 들어, 제목에 카드와 테두리가 없거나, 특정 부분의 카드가 모든 공간을 차지하지 않는 등 레이아웃 문제가 있을 수 있습니다. 예를 들어, 제 Deepseek에는 이런 문제가 있습니다. 이 문제는 AI를 만듭니다

Figma 미세 조정 디자인 먼저, Figma 플러그인의 핵심 HTML을 찾아야 합니다. 에게. 이번에 우리가 사용할 디자인입니다. Figma 파일 아래의 탭 막대에서 동그라미로 표시된 아이콘을 클릭하고 검색하세요.

그런 다음 가져올 웹 주소를 입력합니다. 해당 소프트웨어가 없으면 Youware를 사용하여 배포한 후 가져오기 버튼을 클릭하면 됩니다. 가져온 후에는 다른 옵션을 선택하라는 메시지가 표시됩니다. 켜서는 안 되는 스위치를 제외한 나머지 스위치를 모두 켜세요. 그런 다음 글꼴 매핑 글꼴 설정에서 대체 글꼴을 선택해야 합니다. 웹 페이지에 중국어가 포함되어 있는 경우 Pingfang SC로 변경하는 것이 좋습니다.

그러면 가져온 웹 페이지를 볼 수 있는데, 이는 완전한 도면판이며, Youware의 하단 탐색 기능도 있습니다. 여기에는 필요 없는 부분이 많으므로 이 부분을 선택하여 삭제하면 됩니다. 쓸모없는 탭 바를 삭제한 후, Iframe에 콘텐츠가 없다는 것을 발견했습니다. 실제 콘텐츠는 빨간색 상자와 두께가 없는 Iframe에 있었습니다.

마지막으로 우리는 변화를 만들 것입니다 먼저, 헤더 제목에 카드를 추가하고 싶습니다. 이때 헤더의 너비가 아래에 있는 모든 카드의 너비를 합친 것보다 더 넓다는 것을 발견하여 먼저 너비를 1472px로 변경합니다.

마지막으로 내보내기 전 마지막 단계를 수행합니다. 카드 전체의 여백에 몇 가지 문제가 있습니다. 왼쪽과 오른쪽은 매우 넓고, 위쪽과 아래쪽은 매우 좁습니다. 우리는 그것들이 똑같기를 바랍니다. 이때는 html-Body 레이어만 선택하고, 빨간색 프레임 부분의 간격을 균일하게 32로 변경해 주면 됩니다. 그런 다음 여기에서 html-Body 너비를 변경하여 콘텐츠에 맞게 조정합니다. 마지막으로, 상단 Iframe

위에 보여드린 것과 같은 이미지에 그라데이션 테두리를 추가하고 싶다면 postspark(postspark.app/screenshot)와 같은 도구를 사용하면 됩니다.

오늘의 이미지 생성 튜토리얼은 여기까지입니다. 마지막으로, 여러분의 숙제를 댓글란이나 다른 플랫폼 @ me에 제출해 주시기 바랍니다.