본문 바로가기

Planning/UX/UI SKETCH INVISION

[SKETCH] 2. 간단한 디자인


[도형과 이미지]


방법1. 도형에 이미지 넣기

오른쪽 하단 - 컬러지정

컬러, 그라데이션, 앵귤러 그라데이션, 사진, 노이즈 등 효과가 있음.


방법2. 이미지를 도형모양을 만들기

이미지 오른쪽버튼 - Mask

마스킹 한 이미지 더블클릭하면, 마스킹되어있는 레이어 안에서 사진 크기 조절. 왼쪽 레이어바에서 특이한 모양 살피기.


방법3. 도형을 미리 만들어두고, 이미지를 마스크하는 방법.


[페이지개념]

* 왜 사용하는가?

실제 앱을 디자인하면, 너무 많은 화면이 필요하므로 페이지를 이용해 적절하게 카테고리화 하는 것이 좋음.


왼쪽 pages 옆에 +버튼을 누르면, 페이지 리스트가 보이게됨.

    한번 더 누르면, 페이지가 한개 더 추가됨.


[기본 컴포넌트를 활용하기]

* 왜 사용하는가?

애플이 가이드를 가지고 만들어 놓은 버튼의 사이즈를 참고해 커스터마이징하면, 훨씬 더 예쁘게 됨.


1. artboard 클릭하고 직접 그리지말고, 오른쪽 바에 iphone7사이즈를 선택함.

2. File - new form templete : 기본 컴포넌트 소스를 복사해서 가져올 수 있음. (왠만한 기본 아이폰 소스가 다 존재함)



*tip

1) radius : 곡률조정

2) 도형 우클릭 - lock layer : 그 도형은 배경처럼 더이상 선택되지 않음.

    해제하려면, 왼쪽 레이어에서 자물쇠를 풀어주면 됨.

3) 새로운 도형을 만들 때 : 도형을 여러개로 나누어 그리고, 맨 위에 union버튼을 누르면 1개의 도형으로 바뀜.

4) 앞/뒤로 보내기 : 상단 forward/backward 버튼 누르면 됨.

5) 스케치 확대해보면, 픽셀단위로 보이는 것을 확인할 수 있음.

'Planning > UX/UI SKETCH INVISION' 카테고리의 다른 글

[SKETCH] 1. 기본 이해  (0) 2017.09.18
UX/UI 화면 디자인 참고 사이트  (0) 2017.09.11
UX/UI 공부를 위한 Law  (0) 2017.09.11
SKETCH 학습 일정 정리  (0) 2017.09.11