😶 아이콘 잘 만드는 방법
- 구글에서 제공하는 Material 참고하기
- 간단하게 그리는 것이 좋음
- 디테일이 많이 들어가면 알아보기 힘듦
- Look and Feel 통일
- 코드화 시 에러 방지를 위해 수치 정수로 기입
룩 앤드 필(Look and feel)은 마케팅, 브랜딩, 상표화와 같은 분야와 제품의 내용에 쓰이는 용어로,
사용자의 제품 체험과 겉모양, 인터페이스의 주된 기능을 나타낸다.이를테면, 문서에서 룩 앤드 필은 그래픽 레이아웃(문서 크기, 색, 글꼴 등)과 문체를 일컫기도 한다.
기기 환경에서 룩 앤드 필은 제품 라인의 제어, 디스플레이의 일관성을 일컫기도 한다.
💻 실습 - 심볼 아이콘 만들기
1. Frame 안에 원 그리기
Clip content가 체크되어 있으면 그림처럼 Frame 내부의 요소가 잘려보인다.
즉, 프레임 바깥으로 나간 것들은 보여지지 않는다(마스크 효과랑 비슷함)
2. radius로 둥글게
- radius 효과를 주고 corner smoothing을 조절하면 티는 잘 안 나지만 이렇게 스무스해지는 것을 확인할 수 있음
3. Outline stroke 적용
자 요렇게 아이콘이 완성되었으면 잊지 말고 해야할 일! ➡️ Outline stroke shift + cmd + o
4-1. Flatten 적용
Flatten으로 적용해서 그룹화하고 느낌표 색만 바꾸면 짜잔
4-2. Union 적용 예시
문서 모양의 아이콘은 사이즈나 모양 수정하기 편리하게 Union으로 결합했다.
➡️ 바깥 Rectangle을 Stroke 처리하고 안의 Line 세 개를 Union으로 묶음
💻 실습 - 심볼, 텍스트 조합 아이콘 만들기
1. 텍스트에 Outline stroke
Text에 Outline stroke를 적용하면 각각 Vector로 나뉘는 것을 볼 수 있다(pass handle도 생성됨)
4K 그룹을 해제하고 계속해 보자.
2. Snap to pixel grid
상단 메뉴의 quick actions를 통해 pixel을 검색하면 Snap to pixel grid가 있음
이거 체크 해제하면 pixel 값을 소수점으로 설정 가능
쟌 ~ 요렇게 좀 더 정확하게 중앙으로 오게 설정이 되었다.
3. Flatten 적용
아이콘이니까 하나로 묶어주자.
상점 모양 아이콘
1. 틀 만들기
- 직사각형 5개 만들고 밑 라인만 radius 2 적용
- 완성되기 전에는 수정이 필요할 수 있으므로 Union으로 결합
shift+x로 반전Outline stroke적용
2. 그룹화
직사각형 그리고 두 개의 개체 선택 후에 Subtract로 어닝 부분 살리기
어닝의 주름 부분 union으로 그룹화
텍스트도 만들어서 stroke 처리하고 좌측에 화살표 있는 애들(Union, Subtract, Union) Flatten 적용
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
