Adobe Stock과 XD를 사용하여 웹 사이트 프로토타입에서 인터랙티브한 사진을 신속하게 만들 수 있습니다.

고해상도의 도시 파노라마 사진 찾기

Adobe Stock에서 확대하더라도 해상도가 유지되는 큰 도시 파노라마 사진을 검색합니다. 이미지를 Creative Cloud 라이브러리에 저장하면 XD에서 액세스할 수 있습니다.

interactive-images-step1_900x506

XD 아트보드에 고해상도 사진 배치

파노라마 사진을 XD의 홈 아트보드로 가져옵니다. 레이아웃에서 사진이 최대한 표시되도록 사진의 크기와 위치를 조정합니다.

interactive-images-step2_900x506

XD에서 레이아웃 복제 및 크기 조정

XD에서 아트보드를 복제하고 텍스트, 레이블, 내비게이션 버튼의 변경 사항 등 추가 레이어를 표시한 다음 특정 지역에 해당하는 부분이 확대되도록 도시 사진의 크기와 위치를 변경합니다.

interactive-images-step3_900x506

XD에서 전환 애니메이션 만들기

XD에서 프로토타입 작업 영역으로 전환하고 홈 아트보드에서 Battery Park 버튼을 선택합니다. 선택한 버튼의 링크를 두 번째 아트보드에 추가하고 전환 액션을 자동 애니메이트로 설정합니다. 링크 속성 패널에서 재생 시간을 2.5초로 설정한 다음 패널 밖을 클릭하여 변경 사항을 적용합니다.

XD 창의 오른쪽 상단에 있는 미리 보기 버튼을 클릭하여 디자인을 테스트해 봅니다.

interactive-images-step4_900x506

완성

프로토타입을 만들어 미리 보고 다양한 플랫폼에서 팀원과 공유해 보시기 바랍니다.

interactive-images-step5_900x506

Adobe Stock의 선별된 컬렉션에서 향후 프로젝트에 활용할 이미지를 찾아보십시오.

09/02/2020
이 페이지가 도움이 되었습니까?