티스토리 뷰
Shape tools
Shapes make up the majority of your layers in any given design. Use the following shape tools as your building blocks:
Rectangle 사각형
You can access these tools from the Shape tools menu in the toolbar. Click the arrow next to the Rectangle to open the menu.
- 선택하세요 도구 모음에서 사각형R 도구를 선택하거나, 를 누르세요 .
- 완벽한 정사각형, 원, 다각형을 만들려면 드래그할 때 길게 누르세요 Shift.
- Option/ 키를 누르고 있으면 Alt중앙에서 모양을 만들고 크기를 조절할 수 있습니다.
- Shift두 가지 동작을 수행하려면 와 Option/ 키를 Alt동시에 누르세요 .
모양의 각 모서리에는 핸들이 있으며, 이를 통해 원하는 대로 모양의 크기를 조절할 수 있습니다
둥근모서리 만들기
Figma에는 둥근 모서리를 만드는 두 가지 기능이 있습니다.
- 모서리 반경: 두 선이 만나는 모서리를 둥글게 만듭니다. 이를 사용하여 모서리가 둥근 모양을 만듭니다.
- 모서리 매끄럽게 하기: 둥근 모서리를 조정하여 연속적인 곡선을 만듭니다. 이 설정을 사용하여 "squircles"를 만듭니다.
- 레이어를 선택하세요.
- 픽셀 값을 입력하세요 오른쪽 사이드바의 모서리 반경 필드 또는 커서를 그 위에 올려놓으세요.아이콘을 클릭한 다음 왼쪽으로 드래그하면 줄어들고 오른쪽으로 드래그하면 늘어납니다.
모서리 반경과 매끄러움을 적용할 수 있는 항목은 다음과 같습니다.
- 프레임
- 사각형, 다각형, 별
- 닫힌 모양인 벡터 네트워크
- 사각형을 포함하는 부울 연산
독립적인 모서리 설정(사각형 및 프레임만 해당)
- 업데이트할 사각형이나 프레임을 선택하세요.
- 딸깍 하는 소리 오른쪽 사이드바에 독립적인 모서리가 있습니다 .
- 모서리 반경 세부 정보 패널 에서는 다음을 수행할 수 있습니다.
- 각 모서리에 대한 픽셀 값을 입력하세요
- 딸깍 하는 소리숫자 변수를 적용 하려면 4개의 모서리 반경 필드에 변수를 적용합니다 .
- 슬라이더를 사용하여 모서리 매끄러움을 조정합니다.
모서리 매끄러움 조정
코너 반경을 적용할 수 있는 모든 모양에 코너 매끄러움을 적용할 수 있습니다. 코너 반경과 달리 코너 매끄러움을 전체 모양에만 적용할 수 있습니다.
- 업데이트할 레이어를 선택하세요.
- 오른쪽 사이드바에서 디자인 패널을 엽니다 .
- 클릭하세요 모서리 반경 패널을 열려면 독립 모서리 아이콘을 클릭하세요 .
- 슬라이더를 사용하여 모서리 매끄러움을 조정하거나 클릭하여 iOS 모서리 매끄러움을 iOS 기본값인 60%로 설정합니다.
Line
선 도구 를 사용하면 모든 방향으로 선을 만들 수 있습니다. 선은 디자인 내의 콘텐츠를 나누거나 CSS 테두리를 시뮬레이션하는 효과적인 방법입니다.
- 선택하세요 모양 도구에서 선L 도구를 선택하거나 .
- 캔버스의 한 지점을 클릭하고 원하는 방향으로 드래그하여 선을 만드세요.
- 오른쪽 사이드바의 Stroke 섹션 에서 모양을 변경할 수 있습니다 . 여기에는 색상, 위치, 굵기, 스타일, 끝점 팁 또는 캡이 포함됩니다.
점선 생성
대시의 길이와 대시 사이의 간격을 모두 지정할 수 있습니다.
- 선을 그리거나 선택합니다.
- 오른쪽 사이드바의 Stroke 섹션 에서 다음을 선택하세요.고급 스트로크 설정 메뉴를 엽니다 .
- 대시 와 간격 필드 에 원하는 길이를 입력하세요 .
화살표
화살표 도구 를 사용하면 일방 및 양방향 화살표를 그릴 수 있습니다. 화살표 끝점의 팁이나 캡을 사용자 정의할 수 있습니다.
- 모양 도구 메뉴에서 화살표 도구를 선택 하거나 단축키를 사용하세요 ⇧ Shift L.
- 캔버스의 한 지점을 클릭하고 원하는 방향으로 드래그하여 화살표를 만드세요.
Ellipses and circles 타원과 원
- 모양 도구 메뉴에서 타원O 도구를 선택하거나, [o]를 누릅니다 .
- 캔버스에서 한 지점을 선택하고 원하는 방향으로 드래그하여 타원을 만듭니다. 모양의 치수는 레이어 아래에 파란색으로 표시됩니다.
- 타원 주위에는 파란색 경계 상자가 있고, 각 모서리에 핸들이 있습니다. 이를 통해 모양의 크기를 조정할 수 있습니다.
타원 도구를 사용하여 반원, 파이 차트, 링, 도넛 및 반원형 링과 같은 다른 모양을 만듭니다.
Polygon 다각형
다각형 도구 를 사용하면 여러 개의 직선으로 이루어진 닫힌 모양을 그릴 수 있습니다. 다각형 도구의 기본 모양은 삼각형이지만, 개체에 점을 추가하여 사용자 정의 다각형을 만들 수 있습니다.
- 삼각형 모양 메뉴에서 다각형 도구를 선택합니다.
- 캔버스에서 위치를 선택하고 드래그하여 다각형을 만듭니다. 모양의 치수는 개체 아래에 파란색으로 표시됩니다.
- 모양 주위의 파란색 경계 상자에는 각 모서리에 핸들이 있습니다. 이를 통해 원하는 대로 모양의 크기를 조정할 수 있습니다.
- 폴리곤 레이어를 두 번 클릭하여 Edit object 모드 로 들어갑니다 . 이를 통해 폴리곤에 추가 포인트를 추가하고 각 포인트를 개별적으로 조작할 수 있습니다.
- 다각형의 모서리도 둥글게 만들 수 있습니다. 반경이 표시될 때까지 모서리의 핸들 위에 마우스를 올려놓습니다 . 핸들을 클릭하고 개체의 중앙으로 드래그하여 모서리를 둥글게 만듭니다.
Polygons and bounding boxes
다각형, 이 경우 삼각형을 그릴 때 모양을 둘러싼 파란색 경계 상자가 모양의 바닥 아래에 있는 것을 눈여겨보셨을 겁니다.
이렇게 하면 폴리곤에 추가 포인트가 추가될 때 경계 상자가 일관된 모양이나 크기를 유지할 수 있습니다. 경계 상자를 모양의 실제 경계에 맞추려면 모양을 평평하게 만들 수 있습니다.
모양을 마우스 오른쪽 버튼으로 클릭하고 '평평하게 하기'를 선택 하거나 키보드 단축키를 사용하세요.
- 윈도우: Ctrl +E
Star
별 도구는 별 모양으로 배열된 폴리곤을 만듭니다. 별 레이어를 만들면 기본값은 10개의 변이 있는 5개의 꼭짓점이 있는 별입니다.
- 모양 도구 메뉴에서 별 도구를 선택합니다 .
- 캔버스에서 위치를 선택하고 원하는 방향으로 드래그하여 별을 만드세요
이제 별을 조작하는 데 사용할 수 있는 핸들이 세 개 생겼습니다.
- 카운트 : 별에 몇 점이 있는지. 최소값은 3이고 최대값은 60입니다
- 비율 : 별의 중심에서 안쪽 점까지의 거리. 이는 별의 지름의 백분율로 표현됩니다
- 반경 : 별의 점을 둥글게 만들 수 있습니다.
[예제] 일러스트레이션 만들기
주제 : 모양, 색상, 그룹, 레이어 구성, 프레임
최종 그림이 다음과 같도록 단계별로 따라 해 보자.
- 병 만들기
- Ellipse 도구, Rectangle 도구 및 그룹을 사용하여 병을 만들 것입니다.
- 캔버스에 하나의 타원과 두 개의 사각형을 추가할 것입니다.
- 타원을 추가하려면: 타원 도구를 선택하거나 [O]를 누르고 캔버스를 클릭합니다.
- 사각형을 추가하려면: 사각형 도구를 선택하거나 [R]을 누르고 캔버스를 클릭합니다.
- 도형크기를 조절고 모양을 정리하자
- 타원: 200 W x 200 H
- 직사각형 1: 100 W x 100 H
- 직사각형 2: 120 W x 40 H
- 120 x 40 직사각형에서는 병의 가장자리가 너무 날카롭게 보이지 않도록 모서리를 둥글게 만들어야 합니다.
- 도형을 정렬 : 도형을 배치한 후 모든 도형을 선택하고 디스플레이 탭의 가로 중심 정렬 설정을 사용하여 모든 것이 멋지고 중앙에 배치되었는지 확인
- 도형의 그룹화 : Ctrl + G : 레이어를 함께 그룹화하여 작업을 단순화할 수 있습니다. 그룹을 사용하면 레이어를 결합하여 단일 개체처럼 취급할 수 있습니다.
- 여러 레이어를 그룹화하려면 해당 레이어를 선택하고 단축키를 사용합니다.
- 맥OS: 커맨드 + G
- 윈도우: 컨트롤 + G
- 왼쪽 사이드바의 레이어 패널에 "Group 1"이라는 하나의 레이어만 표시되는 것을 알 수 있습니다. 레이어 이름 지정은 Figma에서 정리된 상태를 유지하는 또 다른 좋은 방법입니다. 레이어를 두 번 클릭하고 이름을 "Bottle"으로 바꿉니다.
- 병에 색을 입혀 봅시다. 병을 선택하고 오른쪽 사이드바에서 채우기 설정을 클릭하여 색상 선택기를 엽니다. 이 튜토리얼에서는 색상 코드 #DEDCF9 사용합니다.
팁: 캔버스를 클릭하고 커서를 끌어 모양을 추가할 수도 있습니다. 도형의 크기를 조정할 때 아래쪽 가장자리 아래에 도형의 크기가 표시됩니다.
Shift : 모양을 드래그하는 동안 누르고 있으면 완벽한 사각형과 원을 만들 수 있습니다.
마법의 물약을 만드세요
- Ellipse 도구를 사용하여 캔버스에 타원을 추가하고 175 x 175로 크기를 조정합니다.
- Edit object 설정을 사용하여 물약이 병 안에서 출렁이는 것처럼 보이게 할 것입니다.벡터 편집 모드에서 타원의 위쪽 점을 클릭하고 아래쪽으로 드래그합니다.
- 타원을 선택하고 도구 모음에서 개체 편집을 클릭하여 벡터 편집 모드로 들어갑니다. 벡터 편집 모드를 사용하면 전체 모양을 변경하지 않고 개체의 개별 점을 조작할 수 있습니다.
타원 도구를 사용하여 거품 추가
- 타원 도구를 드래그하여 여러 개의 작은 거품을 만듭니다. 모두 같은 크기일 필요는 없지만 병 안에 들어갈 수 있을 만큼 충분히 작은지 확인하십시오. 6 x 6 및 12 x 12 타원을 혼합하여 사용했습니다. 계속 진행하기 전에 타원의 채우기를 좀 더 다채로운 것으로 변경해야 합니다. 우리는 색상 코드를 #985DF6 사용했습니다.
- 병에 거품을 넣었으면 모든 거품 타원과 더 큰 물약 타원 위로 커서를 드래그하고 바로 가기를 사용하여 그룹화합니다.
- 레이어의 이름을 "Potion"으로 바꾸고 클릭하여 잠금
코르크 마개 만들기
- 사각형 도구를 사용하여 코르크를 만듭니다.
- 캔버스에 사각형을 추가하고 75 x 75로 크기를 조정합니다. 디자인 탭의 모서리 반경 설정을 사용하여 사각형의 모서리를 25로 둥글게 만듭니다.
- 사각형의 채우기를 #CE856C로 변경하고 레이어 이름을 "Cork"로 바꿉니다. 병의 가장자리로 드래그하십시오.
레이어 정리
- 코르크가 병 위에 있는 것을 원하지 않으므로 왼쪽 사이드바에서 레이어를 재정렬해야 합니다. 레이어의 순서는 개체가 캔버스에 표시되는 방식을 결정합니다.
- "코르크"레이어를 "병"레이어 아래로 이동하여 코르크의 윗부분 만 표시하도록합시다. 이렇게 하면 병 안에 있는 것처럼 보이는 데 도움이 됩니다. "Cork"레이어를 선택하고 "Bottle"레이어 아래로 드래그합니다. 레이어를 이동한 후 을 클릭하여 잠급니다.
눈부심 선 추가
약이 거의 완성되었습니다. 눈에 띄도록 눈부심 선을 추가하기만 하면 됩니다.
- 캔버스에 두 개의 사각형을 추가하고 그 중 하나는 20 x 10으로, 다른 하나는 40 x 10으로 크기를 조정합니다. 디자인 탭의 모서리 반경 설정을 사용하여 두 사각형의 모서리를 20으로 반올림합니다.
- 두 사각형의 채우기를 모두 #F2F2FF로 변경합니다. 병의 가장자리로 옮깁니다. 두 사각형을 모두 선택하고 바로 가기를 사용하여 그룹화합니다.
- 레이어의 이름을 "Glare"로 바꾸고 잠급니다.
프레임에 일러스트레이션을 추가
- 모든 것이 선택되면 마우스 오른쪽 버튼을 클릭하고 프레임 선택을 선택
- 새 레이어의 이름을 "마법 물약"으로 바꿉니다.
Export
일러스트레이션을 내보내려면 "Magic Potion" 레이어를 선택하고 오른쪽 사이드바의 내보내기 설정을 사용하여 디자인을 내보냅니다.
- Total
- Today
- Yesterday