5. 피그마 기초 기능 익히기

1. 도형 만들기, 그리고 우측 패널 기능들 익히기

 

-> 원하는 도형 클릭 후 캠퍼스 위에 놓으면 도형이 생성된다.

-> 생성된 도형 선택 후 우측 패널에서 설정 수정이 가능하다.

 

 

-> X, Y 는 도형의 위치값이다.

-> W, H 는 도형의 가로, 세로 길이이다.

-> 우측의 비율 고정 버튼을 통해 가로, 세로의 비율을 고정한 채 도형의 크기를 변경하는 것도 가능하다.

 

 

 

 

-> 각 모서리를 둥글게 조절할 수 있다.

-> 모든 모서리를 같은 값으로 조절할 수도 있지만, 각각의 모서리를 다른 수치를 줄 수도 있다. 

 

 

 

 

 

 

 

 

-> 레이어 설정을 변경할 수 있다.

#자주 사용하지 않는다.

-> 눈 모양 아이콘을 눌러 해당 레이어를 숨길 수 있다.

-> 레이어를 숨겨서 이 레이어가 없을 시 어떻게 보이는지 확인한다.

 

 

 

 

 

 

-> 색을 설정할 수 있다.

-> + 버튼을 통해 여러가지 색을 추가할 수 있다.

-> 어떤 색을 사용할 지 모르겠을 때, 여러가지 색을 추가해서 하나씩 적용해보며 선택할 수 있다.

-> 또는 투명도를 적용해가며 맞는 색을 찾아볼 수 있다.

-> 자주 사용하는 색은 style 에 등록해둘 수 있다.

 

 

 

-> 외곽선을 설정할 수 있다.

-> + 버튼을 통해 여러가지 색을 추가할 수 있다.

-> 안쪽선일지, 바깥선일지 선택할 수 있다.

-> 선의 굵기를 설정할 수 있다.

-> 한쪽 모서리만 선을 적용할 수도 있다.

 

 

 

-> 여러 이펙트들을 적용할 수 있다.

-> 뒤 챕터에서 심도있게 다룰 예정. 

 

 

 

 

---

2. 트랜스폼 및 오브젝트 이동 관련 기능들과 단축키 익히기

 

 

---

3. 정렬, 분배, Tidy up, 그리고 Smart Selection 기능

 

 

-> 여러 오브젝트들을 정렬해주는 기능.

 

 

 

-> Smart Selection : 오브젝트간의 위치를 바꾸는 기능.

-> 순서를 바꾸려는 오브젝트들을 모두 선택한 후에, 위치를 바꿀 오브젝트의 중앙을 잡고 드래그하여 다른 오브젝트의 위치로 옮기면 오브젝트간의 위치를 바꿀 수 있다.

 

 

-> Tidy up : 간격 조정과 정렬을 한 번에 해주는 기능.

-> 많은 오브젝트가 있을 때, 오브젝트 간의 간격을 조정하고 오브젝트들을 정렬해준다.

 

 

 

 

---

4. 텍스트 만들기

 

-> 상단의 T 버튼을 누르거나, 단축키 T 를 통해서 텍스트를 만들 수 있다.

-> 드래그하여 텍스트가 쓰일 공간을 지정할 수 있다.

=> 이 영역은 오브젝트와 같은 의미로 사용된다. (하나의 오브젝트가 된다.)

 

 

-> Auto Height : 작성한 텍스트에 맞게 텍스트의 영역의 높이가 자동으로 조절된다. 

-> Auto Width : 작성한 텍스트에 맞게 텍스트의 영역의 길이가 자동으로 조절된다. 즉, 텍스트가 한 줄이 된다.

-> 그 밖에 폰트, 사이즈, 행간, 자간, 단락 간 간격 등을 설정할 수 있다.

 

 

 

 

 

 

---

5. 컬러 관련 기능 - 피커, 그라데이션

 

-> 그라데이션 적용 방법

-> Linear 를 선택한다.

-> 시작부분과 끝부분의 색을 설정하여 그라데이션을 설정한다.

 

-> 색상 피커 기능 : 단축키 I

-> 다른 오브젝트에서 원하는 색을 카피할 수 있다.

 

---

6. 이미지와 마스크 기능

 

-> 좌측 패널에서 Place Image 버튼을 눌러 이미지를 추가하거나, 이미지를 드래그 앤 드랍해서 추가할 수 있다.

=> 가급적이면 이미지는 기존 비율을 유지해서 사이즈를 조절한다.

=> 도형과 마찬가지로 우측 패널에서 여러 설정을 조절할 수 있다.

 

-> 포토샵만큼은 아니지만, 피그마에서도 사진 보정 기능을 제공하고 있다.

-> Crop 기능 : 이미지를 원하는 크기로 자를 수 있다.

 

-> 어떤 도형 안에 이미지를 넣고 싶을 때 : Mask 기능

-> 도형 위에 이미지를 겹쳐놓고, 우클릭 후 Use as Mask 버튼 클릭

 

---

7. 이펙트 이해하기

 

-> X/Y : X, Y 축으로 얼마나 그림자를 보여줄지

-> Blur : 그림자를 얼마나 흐려질지

-> Spread :  그림자를 얼마나 퍼뜨릴지

-> 불투명도 조절

 

-> 이미지 앞에 도형을 놓고 Background Blur 를 적용시킨다.

-> 도형의 불투명도를 조절하면, 뒤 이미지가 흐려진 것을 확인 할 수 있다.