만들어볼 내용
아까와 같이 a버튼 누르고 iphone7 화면을 만들어준다.
네이밍을 잘하자...
상단 네비게이션
상단 루트네비게이션을 만든 후
아까 색상 그대로 해주자.
title 넣어주기
대부분 만드는 UI들이 위와같이 UI Design template을 통해 바로 가져와 사용가능하다.
listView
상단의 header 부분을 복사한 후
아래에 복사해준다
fill은 없애고 가늠을 위해서만 사용
구분선을 만들고
얼굴 사진이 들어갈 placeholder
이름부분을 넣어주고
아래 채팅내용 미리보기를 위한 텍스트는 두께를 줄이고 색상을 조금 더 옅게
시간부분 추가
대략적인 모습이 완성되었다. 이제 listView를 여러개 복사해야하는데 일일이하면
귀찮아지니 플러그인을 설치하자.
https://www.invisionapp.com/craft
위 링크로 접속 후 이메일 입력 후 craft를 다운받는다.
craft에서 install를 누른 후 restart sketch
다시 리스트뷰를 선택 후 오른쪽 설치된 craft(보이지 않으면 상단 craft에서 toggle pannel)
에서 duplicate메뉴 그 후 약 9개정도를 선택해준다.
shift + cmd + 클릭으로 모든 이름을 다 선택해보자
이름도 한번에 다 수정할 수 있다.
이번에는 사진들을 전부 선택 후 web을 누른 후
좋아하는 가수나 배우이름 혹은 애니메이션 케릭터등을 입력 후 아무 사진이나 클릭하면
자동으로 들어가게된다.
하단푸터
텍스트를 4개 만든 후
잘 정렬하여주자.
아까만든 로고를 다시 가져와 fill색상을 없애고 border만 텍스트와 색상을 일치시켜준 후
border width는 0.5
원을 두개 만든 후
아래 원을 cmd + 클릭 그 후 최 하단 anchor point를 눌러 delete 시켜주자
두개를 합쳐준 후 아까와같이 border 0.5
보관함의 경우는 별표를 설정의 경우는 원형을 넣어주자(너무길어져서 ... 생략)
필자처럼 구지 아이콘을 만들필요 없이 이미 구현되어있는 이미지를 사용하거나 백터파일을 사용하는게 좋다(ex. fontawesome)
cmd + shift를 누른 상태에서 원형들 선택 후 delete
