모바일UI/UX 디자인 기본 및 실습 -2

모바일 UI 개념에 이어, 일러스트레이터로 주어진 아이콘 이미지의 라인을 따는 작업을 했다.

이전 포스트: 모바일UI/UX 디자인의 기본

단축키를 많이 배워서 유익했다.

<실습 - 일러로 아이콘 만들기>

1. 새 파일 만들기 -  Ctrl + N

2. 표시단위 픽셀로 변경

- 상단메뉴 Edit > Unit > Stroke, Type, Asian Type을 모두 픽셀로 바꿔준다.

3. 라인을 따 올 이미지 드래그해서 넣기

- 투명도를 50으로 낮추고 작업중 움직이지 않도록 잠궈준다

4. 레이어 추가

(레이어 창이 없을 경우 Window > Layer에서 선택한다)

- 실 작업은 이 레이어에서.

5. 펜툴 선택

- 사이즈는 3px 로 작업

- 라인만 그려주기 때문에 채우기 색은 투명으로 바꾸어준다

- View > Smart Guide 를 켜준다

** 라인툴로 작업할 경우 두 선의 연결점을 붙여줘야하는데 지저분하고 번거로우므로 펜툴로 작업한다.

** 선 두개 붙이는 법: 흰색 화살표(점선택 가능. 검정화살표는 전체 선택)로 두 선의 연결점을 잡고 Ctrl + J

6. 그리기 시작

1) 집 모양 그리기

- 지붕: 그리드에 맞추어 그리지 않았을 경우, 흰 화살표툴로 아래 점 두개를 잡고  아래맞추기

- 집몸통: 왼쪽 그린 후 Alt로 복사> 마우스 오른쪽 Transform> Reflextion> 세로축

2) 전구 그리기

- 원툴로 머리통 그리기

- 둥근네모툴  선택 > 마우스 떼지 않은 상태에서 키보드 방향키로 둥근 정도를 조절

(위: 네모지게, 아래: 둥그러지게 왼: 극둥글 오: 극네모)

- 센터정렬

- Object> Expand: 선을 면화 시킴

- Pathfinder창 devide로 각 부분을 분리

- Ctrl + Shift + G 그룹 해제 후 그림 조정

- 필요없는 요소 삭제

- Ctrl + Y 로 라인만 디스플레이> 불필요한 선 삭제

3) 태그 라벨 그리기

- 펜툴 순서대로: 기본, 꼭지점 추가, 빼기, 방향전환

- 둥근네모툴로 사각형 그림

- 오른쪽 라인에 점 추가(도형의 중심점 맞추어서)

- 흰 화살표로 방금 추가한 점만 잡아서 오른쪽 이동

- 필요없는 점 삭제

- 원형툴로 가운데 그리기

- 회전하여 완성

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

Ctrl + J  두 점을 연결

Ctrl + Y  라인만 디스플레이

Ctrl + Shift + G  그룹 해제