기본_아이콘제작

1. iOS 아이콘 만들기 (소요시간15분)

- 기본 기능 활용 ( 도형, 그리드 , 추가, 빼기, 교차, 오버랩제외 기능)
- 내어보내기
- 아트보드 복사

1. 아트보드 생성 : 아이콘 사이즈-120*120

2. 선택 툴을 선택하고 아트보드의 이름을 더블클릭해 ‘Appicon’으로 변경

3. 아트보드의 이름 부분이 선택된 상태로 오른쪽 옵션 창의 ‘그리드’ 항목에서 [정사각형] 을 선택한다. ‘정사각형 크기’는 기본값인 8을 유지

4. 툴 패널에서 타원 툴( )을 선택하고 를 누른 채 W(너비)와 H(높이)가 88px인 원을 아트보드의 정중앙에 그린다. 이때 원의 상하좌우 여백은 그리드 두 칸 이다

5. 계속해서 타원 툴( )로 + 를 누른 채 W(너비)와 H(높이)가 56px인 원을 아트보드의 정중앙부터 그린다

툴 패널에서 선택 툴( )을 선택하고 화면 전체를 드래그해 두 원을 모두 선택한 후 오른쪽 옵션 창에서 오버랩 제외( )를 클릭한다

6. 오른쪽 옵션 창에서 ‘채우기’의 색상 상자를 클릭해 색상 패널이 열리면 ‘Hex’에 #FFB2B2를 입력해 색상을 설정한 후 색상 견본 저장( )을 클릭해 색상을 등록한다

7. 툴 패널에서 타원 툴( )을 선택하고 원 중앙에 지름이 34px인 원을 그린다. 오른쪽 옵션 창에서 ‘채우기’의 색상 상자를 클릭해 색상 패널을 열고 이전에 등록한 색상으로 채운다

8. 툴 패널에서 펜 툴( )을 선택하고 다음과 같이 세로가 긴 직사각형을 그린다.

툴 패널에서 선택 툴( )을 선택하고 직사각형 하단의 앵커 포인트를 클릭한 후 역 사다리꼴 형태가 되도록 안쪽으로 드래그한다.

9. 오브젝트를 모두 선택하고 오른쪽 옵션 창에서 가운데 정렬(가 로) ( )를 클릭한다

10. 사다리꼴만 클릭해 선택하 고 복사 후 하나는 축소한다.

11. 큰사다리콜과 큰원만 선택하여 뺴기 선탹

12. 남은 사다리꼴을 위로 이동하고, 흰색으로 채운다. 

13. 모든 선태 후 테투리 해제

14. 아트보드의 이름을 클릭해 아트보드 전체를 선택한다. ‘채우기’의 색상 상자를 클릭해 색상패널이 열리면 ‘Hex’를 #FB2172로 설정한다

15. Ctrl + <1> 을 눌러 실제 이미지의 크기를 보고, 아이콘의 무게감이나 형태가 잘 표 현되었는지 확인한다.

16. 왼쪽 상단의 [목록] 버튼( )을 클릭하고 [내보내기]-[모든 아트보드...]를 선택한다. iOS 앱 아이콘의 기본 크기인 @×2 크기로 제작했기 때문에 [에셋 내보내기] 대화상자 에서 ‘내보내기 대상’은 [iOS], ‘디자인 작업사양’은 [2×]로 설정한 후 [모든 아트보드 내 보내기]를 클릭한다. 지정한 폴더에 @x1, @x2, @x3의 png 파일이 저장된 것을 확인 할 수 있다.

---

추가1_아트보드 복사 - 같은 배율로 오브젝트 확대

1. 아이콘을 복사 해 하나 더 만든다.

2. 박스 120 * 120 만든다.

3. 아트보드 사이즈를 167 * 167로 만든다.

4. 박스와 모든 오브젝트를 드래그로 선택하고 사이즈를 아트보드 사이즈로 Shift + 드래그를 통해 같은 배율로 확대

5. 흰 박스 삭제

---

추가2_버튼만들기

1. 오브젝트 전체를 선택한다.

2. 구성요소로 추가 : Ctrl + K

3. 구성요소 > 옵션창 + 선택 > 마우스 오버 상태 추가

4. 마우스 오버상태에서 컬러 변경 해 보기

5. 기본상태로 돌아온 후   상단 미리보기 플레기 해 보고 확인

---

추가3. 스플래쉬 제작

1. 아트보드 복사 ctrl + d - iphon x (375 * 812)

2. 배경색 그라디언트 : 스포이드를 활용해서 이전 컬러를 적용 해 본다.

3. 아이콘을 가져와서 중간 정렬 : 아트보드 선택 후 붙이기

4. 타이핑 : ring ring 타이핑 해 보고 글자 툴을 이해한다. 

5. 글자 폰트를 패스로 전환 해 본다. : ctrl + 8 . (메뉴 오프젝트 > 패스로 변환)

6. 패스로 변경한 글자를 변경 해 보고 그라디언트를 적용 해 본다. 

7. 글자를 복사 후 붙이기를 해 본다. 이 후 라이브러리에서 오브젝트의 이름의 변경 해 본다. 

8. 레이어의 개념을 이해한다. 

9. 아래 글자에 흐림 효과를 줘 보고 이후 상하전환을 해서 그림자가 투영 된 것처럼 이동 해 본다. 

10. 패스를 이용하여 하트를 그리고 투명도를 조정해 본다.

11. 하트 선택 > 반복그리드 > 페이지 전체 > 여백 조정

12. 레이어에서 하트 반복그리드를 제일 밑으로 내려본다.  Ctrl + shift + ] or [의 이해