프리코스-1

1. 피그마 아이콘 만들기

• 30x30 원 만들기
• 그 옆에 30x60 사각형 만들어 이어 붙이기
• 두 도형을 드래그 후 오른쪽 상단에 Union버튼을 클릭 하면 두개의 레이어가 하나의 레이어로 합쳐진다.

• 레이어 선택 후 단축키 I를 누르면 스포이트가 생기는데 원하는 색상을 클릭하면 색을 가져올 수 있음
  (왼쪽 아이콘 만들 때는 Fill에 F24E1E 직접 입력해서 했는데 두번째 실습 때는 옆에 있어서ㅎㅎ 스포이트로 해봄)

• 레이어 선택 후 복제해서 이동(단축키option+드래그) 후 마우스 우클릭 해서 Flip horizontal 클릭해서 좌우 반전
  그다음 스포이트로 색상 변경

• 복제 - 이동 - 스포이트로 색상변경
• 새로 60x60 원 만들기 - 스포이트로 색상 가져오기

• 원 복제해서 가져오기 - 30x30 사각형 만들어 겹치기 - 두 레이어 드래그 해서 오른쪽 상단 Union 눌러 합치기 - 스포이트로 색상 변경

피그마 아이콘 완성

---

 

2. 장바구니 아이콘 만들기

UX/UI 디자인을 하다보면 아이콘을 직접 만들어야 하는 사항이 생긴다.

아이콘을 제대로 만들기 위해 아이콘 키 라인을 제작해야 한다.

→ 일관된 비율을 가진 아이콘을 제작할 수 있다.

눈대중으로 해버리면 대충 봤을땐 맞는 것 같아도, 화면 안에 담겼을 땐 어디는 작고 어디는 커보이는 현상이 발생하기 때문

 

구글 아이콘 가이드를 활용하여 장바구니 아이콘을 만들어보자

아이콘 사이즈는 가로세로 24 DP로 권장

• 24x24 프레임 만들기
• Layout guide 클릭해서 size 1, 격자무늬 색상을 블랙으로 변경

• Stoke 에서 두께를 0.1로 변경
• Fill 에서 마이너스 클릭
  -> 안에 컬러가 없어지고 스트로크만 남음
• Corner radius에 1을 적용시켜 끝이 둥글게

• 복제해서 상하는 한 칸씩 더 크게, 좌우는 한 칸씩 더 작게 만들면 세로변이 더 넓은 직사각형 완성

 

• 복제해서 끝에 나타나는 곡선 상태에서 Shift를 누른 상태로 로테이트 시켜주면 가로 직사각형 완성

• 지름20 원을 만들고 Stoke 에서 두께를 0.1로 변경, Fill 값 빼주기

• 복제해서 10x10 크기로 줄인 후 중앙에 맞게 배치
  기본 규격 가이드라인 완성

모바일 중심 작업을 할 때는 4배수 8배수를 지켜서 디자인 하는 것이 유리하다

• Line툴을 이용해 선을 그어주고 두께를 0.1로 변경, 색상은 파랑, 선의 투명도는 30%

• option+shift + 방향키를 눌러 4칸 옆으로 복제이동

• commend+D 단축키로 동일한 규칙으로 복제

• 라인 선택 후 command+D 복제

• 가로 방향으로 로테이트 시켜주면 가로 세로 선 완성

• 왼쪽 끝에 있는 선을 복제해서 끌고 가서 양쪽 대각선 완성

• 라인을 전부 선택 후 command+G 눌러서 그룹핑 후 간섭되지 않게끔 계층 상 밑으로 옮겨준다.
  
  

강의 보면서 카트 아이콘 완성
(카트 만드는 과정은.. 따라하느라 바빠서 캡쳐를 못했다.. 다시 하려니 귀찮...아서^^; 완성본만 올림)

 

개인적으로 아이콘 키 라인 만들기가 더 어려웠던 것 같다

카트 아이콘도 처음에 어려워 보였지만 하다보니 이해가 되면서 쓱쓱 재밌게 마무리했다.

도형 툴로 카트모양을 만들 수 있는게 신기하당ㅎㅎ

그림체가 필요하지 않은 아이콘이라면 플러그인을 이용해서 가져오면 되지만

내가 직접 편집해야 하는 상황에서는 편집 모드를 응용해서 아이콘을 제작해주면 된다.

도형 툴과 편집모드를 익숙하게 다뤄보기 위해선 마음에 드는 아이콘을 그려보는 연습 해보기!