기계적 인조 인간

어도비 xd를 html로 내보내는 방법

therunofsummer

therunofsummer

차례:

Anonim

Adobe XD는 이전 웹 개발 경험없이 환상적인 웹 사이트 디자인을 쉽게 만들 수있는 놀라운 디자인 도구입니다. Photoshop에서 디자인의 PSD 파일을 가져 와서 눈길을 끄는 웹 사이트 UI를 만들 수 있습니다.

이러한 디자인은 개발자가 웹 사이트를 바라는 방식을 이해하고 개발자가 좀 더 쉽게 개발 프로세스를 진행할 수 있도록 도와줍니다. 그러나 소프트웨어에서 디자인을 내보낼 수있는 방법은 제한적입니다.

XD 파일로 저장하도록 선택할 수 있으며 개발자가 이미 자신의 시스템에 소프트웨어를 설치했거나 각 대지를 개별 PNG 파일로 내보낼 수 있기를 바랍니다.이 PNG 파일은 약간 불편할 수 있습니다.

또한

실물 크기 모형 및 철골 프레임을 만들기위한 베스트 3 디자인 도구

고맙게도 아트 보드를 HTML 파일로 내보낼 수있는 편리한 타사 플러그인이 있는데, 그 내용은 제가 이야기 할 내용입니다. 그러나 우리가 그것에 도달하기 전에, 당신이 알아야 할 것이 있습니다.

참고: 이 방법을 사용하여 생성 된 HTML 파일은 완전한 웹 페이지의 기반으로 취급되지 않아야합니다. 이 방법은 기능적인 웹 사이트 개발 프로세스가 아닌 개발자와 설계를 쉽게 공유 할 수있는 방법 일뿐입니다.

플러그인을 사용하여 Adobe XD 파일을 HTML로 내보내기

이제 막 벗어 났으므로 필요한 간단한 플러그인을 다운로드 한 다음 Adobe XD 파일을 HTML로 내보내는 간단한 단계를 따르십시오.

1 단계: 소프트웨어의 왼쪽 상단 모서리에있는 햄버거 메뉴 버튼을 클릭하십시오.

2 단계: 맨 아래로 스크롤 한 다음 플러그인 옵션을 클릭하십시오. 메인 메뉴 오른쪽에 새로운 플러그인 패널이 열립니다.

3 단계: 플러그인 패널에서 플러그인 발견 옵션을 선택하십시오.

4 단계: 다음 페이지에서 HTML을 검색 한 다음 웹 내보내기 플러그인 옆에있는 설치 버튼을 클릭하십시오.

필요한 플러그인을 설치했으면 HTML로 내보내려는 프로젝트를 열고 다음 단계를 계속하십시오. 이 기사에서는 온라인에서 찾은 무료 Adobe XD 아트 보드를 사용하게 될 것입니다.

5 단계: 내보낼 대지를 클릭하여 선택합니다.

6 단계: 이제 메뉴 버튼을 클릭하고 플러그인 패널로 이동 한 다음 새 웹 내보내기 플러그인 설정에서 대지 내보내기 옵션을 선택합니다.

동일한 창에서 편집 한 마지막 대지 또는 여러 대지를 내보낼 지 선택할 수도 있습니다.

7 단계: Artboard 내보내기 팝업에서 파일 이름을 추가 한 다음 폴더 내보내기 옵션 옆에있는 작은 폴더 아이콘을 클릭하여 파일을 저장할 폴더를 선택하십시오.

8 단계: 이제 내 보낸 파일에 외부 스크립트, 스타일 시트 또는 대체 글꼴을 추가하려는 경우 동일한 창에 추가 할 수 있습니다.

9 단계: 크기 옵션 옆의 빈 공간에 값을 입력하여 출력 HTML 파일의 크기를 선택할 수 있습니다.

10 단계: 프로젝트가 올바르게 확장되도록하려면 각 옵션 옆에있는 상자를 선택하여 동일한 창에서 다양한 크기 조정 설정을 선택할 수도 있습니다.

11 단계: 또한 옵션 옆에있는 상자를 선택하여 키보드 탐색, 자동 새로 고침 등과 같은 추가 설정을 선택할 수 있습니다.

12 단계: 모든 설정을 완료했으면 파란색 내보내기 버튼을 클릭하기 만하면됩니다. 대지는 이전에 선택한 대상 폴더에 HTML 파일로 나타납니다.

동일한 창에서 해당 정보를 개발자와 공유하려는 경우 아트 보드의 CSS 및 마크 업을 복사 할 수도 있습니다.

다시 한 번 말하지만, 수출 된 HTML을 결코 완전한 기능의 웹 사이트를 개발하는 데 사용할 수는 없습니다. 현재로서는 Adobe XD 프로젝트를 웹에 직접 게시 할 수있는 방법이 없으며 Adobe 포럼에 대한 여러 토론에 따라 곧있을 수 없습니다.

Adobe XD는 코드없이 초기 디자인을 만들 수있는 프로토 타입 도구 일뿐입니다. 디자인을 준비하고 나면 Dreamweaver와 같은 플랫폼을 사용하여 디자인을 웹 사이트로 변환 할 수 있습니다. 그러나이를 위해서는 이전 웹 개발 경험이 필요하거나 그렇지 않은 사람을 고용해야합니다.

또한

#디자인

우리의 디자인 기사 페이지를 보려면 여기를 클릭하십시오.

Adobe XD 파일을 HTML로 내보내기

이제 Adobe XD 파일을 HTML로 내보내는 방법을 알게되었으므로 개발자 나 클라이언트와 아트 보드를 쉽게 공유 할 수 있습니다. 그리고 호환성 문제에 대해 걱정할 필요가 없습니다. 플러그인을 바로 설치하고 아트 보드 내보내기를 쉽게 시작할 수 있습니다.

다음 기사 : 자신 만의 HTML 웹 사이트를 작성하고 작성하는 방법을 배울 수있는 몇 가지 무료 양방향 웹 사이트에 대한 다음 기사를 확인하십시오.