[TIL 0413] [본캠프] 일러스트 3강 & 디자인 감각 훈련

📗[오늘의 학습 목표]

일러스트 3강 ~ & 디자인 감각 훈련 

📃[오늘의 학습내용 정리]

✅ 일러스트 3강

 

3-1 아이콘 디자인의 원칙

 

아이콘 → '정보 전달 시각적 상징'

 

[아이콘의 역할]

1. 네비게이션 기능

2. 인지 강화

3. 공간 절약

4. 브랜드 아이덴디티

 

[아이콘의 5가지 원칙]

1. 명확성 : 많은 사람들이 이해할 수 있도록 한다.

2. 가독성 : 명확한 형태를 인지 할 수 있도록 한다.

3. 정렬 : 무게 중심을 맞춘다.

4. 간결성 : 복잡한 것보다 단순화 한다.

5. 일관성 : 통일성 있게 만든다.

 

3-2 아이콘 디자인 프로세스

 

1. 아이콘 형식 결정 (선 or 면)

2. 아이콘 활용 결정 (아이콘을 어디에, 어떻게 쓰일 것인가?)

3. 유사 아이콘 리서치

4. 크기 규정, 그리드 활용

5. 디테일 원칙 세우기 

(Stroke 끝의 형태 결정 / Stroke 위치 결정 / Corner 곡률 결정)

 

3-3 라인 아이콘 디자인

 

view → Hide Bounding Box (선택 박스)

 

설정 → Use Preview Bounds (가장 바깥으로 선택 / 전체 크기를 알 수 있음.)

 

Ctrl + Y → 윤곽선 보기

Pixel Preview → 픽셀로 보기

 

3-4 솔리드 아이콘 디자인

Mak compound path →  하나의 오브젝트로 본다.

 

3-5 글래스모피즘 아이콘 디자인 (중요)

 

1. 반투명 유리질감

2. 화려한 배경

3. 얇은 테두리

4. 은은한 그림자

5. 시각적 계층

 

글래스모피즘 효과 방법

1. 배경 준비

2. 전체(배경 포함) 잡고 그룹

3. Ctrl + C / Ctrl + F 로 복사

4. 가우시안 블러 효과

5. 카드 만들고 클리핑 마스크

6. 직접선택툴로 선택 마스크에 흰색 컬러 삽입

7. 속성 들어가서 블러로 된 배경 투명도 90%

8. 스트로크 → 그라디언트 3개의 흰색으로만 하기 (자연스럽게) 0.4pt

9. 드롭 쉐도우 (보일 듯 말듯)

10. 카드 움직이기 → 배경, 마스크 안에 있는 배경 모두 잠금 → A로 카드 전체 선택 

       → 패스 잡고 움직이기

✏️[오늘을 돌아보며]

글래스모피즘 효과를 강의를 통해 배우는데 너무 이해가 안가서 온갖 유튜브 영상을 찾아 다녔다...

나한텐 이번 강의가 좀 어렵게 느껴졌다. ㅠㅠ 유튜브가 좀 쉬운 방법을 알려주었다.