메인페이지UI제작

01. 튜토리얼 UI 제작

2. 텍스트 툴( )로 ‘MUSIC BOX’를 입력하고 글꼴은 Lovelo Line, 크기는 60으로 설정해 아트보드의 밝은 부분에 배치한다. ‘채우기’ 색상은 #FFFFFF, ‘테두리’ 색상은 #FF00AA, 테두리의 ‘크기’는 1로 지정하면 네온사인 같은 느낌을 만들 수 있다

3. 선택한 이미지가 아트보드에 나타나지 않는다. 이미지를 보기 위해 툴 패널에서 아 트보드 툴( )을 선택하고 옵션 창에서 같은 크기의 새 아트보드를 추가한 후 + 를 누르면 ‘Review’ 이미지가 나타난다

4.이미지의 크기를 줄여 아트보드 상단에 배치한다. 이미지 아래에 텍스트 툴( )로 ‘01’, ‘02’, ‘03’을 입력하고 색상은 #BEBEBE로 설정한 후 ‘01’의 색상만 #DD00FF로 변경 한다. 숫자 텍스트 아래에 ‘First Step’을 추가로 입력하고 ‘01’과 같은 색상으로 채운다

5.텍스트 툴( )로 텍스트 영역을 만든 후 ‘First Step’에 대한 내용을 입력한다. 아트보 드 하단에 사각형 툴( )과 텍스트 툴( )을 이용해 다음으로 가는 ‘Next ▶’ 버튼 을 만든다

6.아트보드이름을 선택하고 + 를 누른후 + 를 누르면아트보드가바로옆 에복제된다. 복제된아트보드의이미지를삭제하고unDraw에서‘Start building’ 이미지를가져와 첫번째이미지와 크기를같게조절하고동일한위치에 배치한다.

7.사각형 툴( )과 텍스트 툴( )을 이용해 하단 부분을 반으로 나눈다. 왼쪽 사각 형에 돌아가기 버튼인 ‘◀ Prev’를 만들고 색상을 #D980E6으로 변경한다. 2단계이므 로 텍스트 ‘02’의 색상을 변경하고, ‘First Step’을 ‘Second Step’으로 수정한다.

8.같은 방법으로 3단계 페이지도 만든다. 튜토리얼의 마지막 단계이므로 ‘Next ▶’ 버튼 대신 끝남을 나타내는 ‘Done’ 버튼으로 변경한다

9. + <0>을 눌러 모든 아트보드가 한 번에 보이도록 한 후, 상단의 메뉴에서 [프 로토타입]을 클릭해 프로토타입 화면으로 전환한다