UI 구성요소 만들기 - 체크박스/ 라디오박스/ 버튼/ 드롭다운

체크박스 + 라디오박스 + 버튼 + 드롭다운버튼 만들기

1. 체크박스

• 사이즈: 50px * 50px

• 사용툴: 포토샵

• Full, Line 각각의 On, Off를 제작

1) 새파일 만들기 Ctrl + N

도형 사각툴 선택후 클릭

 

2) 체크모양 만들기

- 사각툴 3px * 30px -> 체크 모양을 만든다

- Ctrl T로 왼쪽으로 돌린 후, 알트 복사. 오른 마우스로 Horizontal 반사

- 두 레이어를 잡고 아래 정렬

- Ctrl + E를 눌러 레이어를 합치기

- 흰 화살표(단축키 A)로 오른 두 점 잡고 길게 뽑아준다

 

3) Off 아이콘 만들기 

- 색상: 채도값이 2퍼를 넘지 않도록

 

좋은 사이트

https://dribbble.com/tags/checkbox

3. 버튼만들기 

(1) 긍정버튼에 포인트컬러 

포인트컬러: 유저가 긍정버튼을 클릭하도록 유도> 포인트 컬러를 준다. 

부정버튼색상: 긍정버튼색에서 왼쪽 대각선으로 내려가 채도를 낮추고 위로 올라가 조절

(2) 플랫 그라데이션 버튼

색상: S(Saturation), B(Brightness)는 그대로, 휴값만 바꾸어 그라데 상대색을 정한다.

각도: 120도 정도

오프 그라데버튼: 채도의 강도를 조절해 만든다.

 

오브젝트레이어의 오른쪽 끝을 더블클릭해 레이어스타일 옵션으로 들어간 후, Gradient Overlay에서 적용한다.

(참고: 포토샵 레이어 개념정리)

4. 토글버튼 만들기

• 종류: 사각, 둥근사각, 원형, 직선
(원형 토글: 둥근 사각으로 각을 크게 준다 (Radius > 가로세로값: 원형에 가까워짐))

• 사이즈: 80px * 40px 

• 내부도형사이즈: 30px * 30px
(ios 기준 최소클릭범위 40px...??? <- 찾아보기)

• 정렬
: 온버튼 왼쪽 여백 = 오프버튼 오른쪽 여백
: 온버튼 여백만큼 오프버튼에 가이드라인을 잡는다

• 결과물

5. 드롭다운메뉴/ 셀렉트박스

• 세로값: 최대 88px

• 폰트: 노토산스 28px Bold
- 크기는 주로 26, 28, 30사용 (아주최소 24)
- 형태는 모바일은 Sharp, 웹 Crisp(Smooth는 웹상에서 쓰면 좀 뿌얘짐)

• 삼각아이콘 크기: 24px * 18px

• Stroke: 웬만하면 Inside로 설정

• 결과물

: 

텍스트 입력 박스

1. 텍스트 크기 26px 이상

2. 공간배치

텍스트 입력 창 짝수로 그려야 함(88, 90. 92)

현재 입력하는 위치가 어디인지 명확히 나타내야 함
(On/Off 효과, Line/색채우기/테두리 등)

3. 여백

가로값이 넓으면 왼쪽 여백을 조금 더

세로값이 넓으면 위쪽 여백을 조금 더

폰트

1. 시스템폰트 

ex. 노토산스, 나눔고딕, 나눔바른고딕(모바일에 적합하나 종류가 제한적)... 

노토산스 추천. 폰트두께가 Thin부터 Extrabold까지 다양하나 Regular/Medium/Bold를 모바일에서는 사용 

ex. 돋움(짝수 크기로만 사용! 12px기본, 14, 16, 18 그리고 None 처리!)

2. 이미지폰트

ex. 윤고딕900(영문과 숫자는 다른 폰트를 사용하자) 외 유로폰트

타이포그래피

1. Serif와 Sans serif

1) Serif 꺾임이 있는 체

- 인쇄물의 가독성이 좋음 ex. 명조

2) Sans serif 꺾임이 없음

- 스크린에서 좋음 ex. 고딕

2. 대문자와 소문자

3. 폰트의 무게

Thin Light Regular Medium Bold Black(ExtraBold)

강이 있으면 약이 바로 아래에 옴. 위에 Black을 썼으면 아래에는 가벼운 폰트로 밸런스

4. 장체(Condensed)와 평체(Extended)

5. 자간(글자사이의 간격)

- 영문은 자간값을 주지 않는 것이 일반적(0또는 플러스)

- 한글폰트는 주로 -값을 줌

[오늘 배운 일러스트 단축키]

1. 오브젝트 색상 채우기★★★★★

레이어선택> Alt + Del(색채우기) / Ctrl + Del(배경색으로 채우기)

2. 가이드라인 제거

Ctrl + ;

(선택툴로 잡고 아예 밖으로 날려보내거나, View> Clear Guides)

3. 마우스 없이 텍스트에서 빠져나가기

Ctrl + Enter

4. 모든 영역 해제

Ctrl + Enter(활성화) -> Ctrl + D

(안 될 경우. 툴 맨 아래 마스크툴이 있는데 이게 선택된 경우임)

단축키 색 채우기: Alt + Backspace <<< 체크!!

[기타 팁]

1. 스냅 걸기

View> Snap To> Guides만 선택(먼저 None 한 후, Guides선택)

View> Show> Guides, Smart Guides 선택

2. 10px씩 이동

Shift + 화살표: 10px씩 이동함 

3. 특정픽셀만큼 이동

무브툴(페더값 0인지 꼭 확인)의 Fixed Size 활용

4. #666666

웹사이트에서 가장 가독성이 높은 폰트 컬러

높아지면 진해지고

낮아지면 여려짐