쿠폰 디자인으로 피그마 기초 마스터하기
쿠폰 디자인을 만들면서 패스파인더 기능으로 쿠폰 도형을 만들고 적당한 문자와 아이콘을 배치한 후 완성된 디자인을 추출하는 과정을 배워봅시다. 소개한 과정을 기반으로 여러분이 만들고 싶은 다양한 쿠폰으로 응용해보세요.
쿠폰 모양 만들기
01 [Rectangle] 도구로 360x330, 210x330 크기의 사각형 두 개를 그립니다.
02 [Ellipse] 도구로 20x20 크기의 원을 한 개 그립니다. ➊ [Alt + Shift]를 누른 상태로 아래로 드래그해 일렬로 복사합니다. ➋ 그리고 [Ctrl + D]를 눌러 원이 총 10개가 되도록 복사합니다.
[Ctrl + D]는 직전에 복사한 간격과 방향을 그대로 반복해 요소를 복제합니다.
03 원 사이 간격을 맞추기 위해 모든 원을 선택하고 Layout 메뉴의 간격을 12px로 지정합니다. 원을 모두 선택하고 패스파인더의 [Flatten selection] 또는 오른쪽 마우스를 눌러 [Flatten]을 클릭해 하나로 합쳐줍니다.
04 ➊ 왼쪽 사각형의 왼쪽 선 끝에 원의 반이 걸칠 수 있도록 정렬합니다. 빨간색 지시선을 확인하며 중앙을 맞춰주세요. ➋ 나열한 원을 복사하여 오른쪽 사각형 오른쪽 끝에도 붙여줍니다.
05 왼쪽의 나열한 원과 사각형을 선택하고 패스파인더의 [ Subtract Selection]을 클릭합니다. 오른쪽도 똑같이 하여 쿠폰 모양을 만듭니다. 이때 원 레이어가 사각형 레이어보다 위에 있어야 합니다.
06 도형을 원하는 색상(#F954D5)으로 변경한 후 두 도형을 선택해 간격을 0으로 변경하여 붙입니다.
07 쿠폰에 들어갈 문자를 입력한 후 ➊ 각 위치별 레이어를 그룹화하고 이름을 붙여줍니다. 레이어 그룹화는 원하는 레이어를 모두 선택하고 오른쪽 마우스 [Group selection]을 클릭하면 됩니다. 작업 후 레이어 정리는 꼭 해주세요.
<1분 꿀팁> 다운로드 아이콘도 그려야 하나요?
이 실습에서는 도형에 익숙해지기 위해 직접 패스파인더를 이용해 도형을 처음부터 만들었지만 디자인에 익숙해지면 이미 만들어진 벡터 도형을 가져다 쓰는 일이 더 많을 겁니다. 플러그인을 활용하면 이미 만들어진 아이콘을 가져다 사용할 수 있습니다. 쿠폰에 사용한 다운로드 아이콘은 구글 머티리얼 아이콘Goole Material icons 플러그인을 사용했습니다.
08 마지막으로 ➊ ‘오른쪽’, ‘왼쪽’ 두 그룹을 모두 드래그해 선택한 후 ➋ 오른쪽 마우스 클릭 후 [Frame selection]을 클릭해 하나의 프레임으로 묶어줍니다. ➌ Export 메뉴에서 프레임을 PNG로 추출하면 여러분만의 쿠폰 이미지가 완성됩니다!
《콘텐츠 디자인은 피그마 with AI》에서 피그마를 활용한 기초부터 응용 심화까지 만나보세요!
교보문고: https://bit.ly/46qQn6t
예스24: https://bit.ly/3TW0Zmm
알라딘: https://bit.ly/3U0uTG1
