brunch

매거진 아이콘을 위한 영감

라이킷 29 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 지성민 Mar 31. 2024

글래스모피즘 아이콘 피그마로 쉽게 제작해 보기(1)

제작 원리의 이해와 피그마 이펙트의 활용

100% 피그마만을 사용하여 완성도 있는 글래스모피즘 아이콘의 제작과정을 서술하도록 하겠습니다. 약간의 피그마 기능을 습득할 수 있으며, 어렵지 않습니다. 아마도요. 아래 4가지 과정을 거쳐서 제작해 보도록 하겠습니다.

1. Boolen Groups

2. Fill & Stroke

3. Background Blur

4. Drop Shadow & Show Behind Transparent Areas

먼저 해와 구름이 같이 있는 아이콘을 통해 설명드리겠습니다.

Step 1.

Boolen Groups

먼저 구름을 만들어 보겠습니다. 구름은 3개의 원과 하나의 사각형을 합치면 완성입니다. 먼저 구조는 아래와 같습니다.

4개의 도형으로 이루어진 구름의 구조

위의 4개의 도형을 한꺼번에 선택한 상태에서 상단 중앙의 Boolen Groups(사각형 두 개가 합쳐진 모양의 아이콘)의 오른쪽 확장 화살표를 클릭하여 Union Selection(영역 합치기)을 클릭하여 주세요.

선택한 Shape을 합치는 기능

그러면 도형이 합쳐지면서 아래와 같은 결과가 나옵니다.

구름 형태의 Shape

해(태양)는 빛의 파장 효과가 없는 동그라미 형태만 사용하도록 하겠습니다. 구름의 가로값의 절반 크기로 형태를 만들어 줍니다.

구름과 해의 기본 Shape

해와 구름에 색을 입혀보도록 하겠습니다. 단색을 입히면 아래와 같습니다.

구름과 해에 한 가지 색을 입힌 형태

Step 2.

Fill & Stroke

글래스모피즘의 완성도를 위해서는 약간의 리얼리티가 반영되어야 합니다. 구름과 해는 플랫 한 형태가 아닌 어느 정도 입체감을 지닌 형태입니다. 오브젝트의 앞에 다음과 같이 조명이 있다고 가정을 해보겠습니다. 오른쪽에서 보는 모습입니다.

스팟 조명을 가정한 경우, 빛의 출발점과 가까울수록 밝고 멀수록 어둡다.

위의 조명을 받은 부분을 표현하려면 빛과 가까운 중심부 쪽은 밝게, 주변 부분은 어둡게 배색을 지정해 주면 됩니다. 이때 Fill > Gradient > Radial을 사용하여 표현합니다. 아래 이미지와 같은 원리입니다.

조명을 표현한 원리 이해도

위의 원리가 반영된 해와 구름을 정면에서 보면 아래와 같습니다.

Radial 그라데이션을 활용한 미세한 조명효과

이 시점에서 유리를 더 유리처럼 보이기 위해 추가해야 할 것이 있습니다. 바로 유리의 두께인데요. 이 두께감은 간단하게 Stroke를 사용하면 됩니다. 먼저 원하는 두께감을 Stroke > Inside > 수치값 입력을 통해 지정해 줍니다.

두께감을 표현하는 Stroke 영역

이 Stroke의 배색처리를 해야 합니다. Gradient와 투명도를 조정하여 만들어줍니다. 이때 면의 조명효과와 동일하게 위쪽은 밝고 아래쪽은 어둡게 해 줍니다. 투명도는 선이 있다는 정도만 인식하도록 0에 가까운 수치로 조정해 주세요. 저는 Stroke의 투명도를 2% 주었습니다.

두께감이 적용되기 전(좌)과 적용 후(우)의 미세한 차이

Step 3.

Background Blur

이제 두 개의 오브젝트를 적절하게 겹쳐 보겠습니다.

두 개의 오브젝트를 겹친 형태

구름의 투명도를 조정하여 뒤의 해가 비치도록 해줍니다.

투명도를 조정하여 뒤의 해가 보이는 모습

구름을 선택한 후 Effects > Background Blur를 선택한 후 Effect Settings 아이콘(해 모양)을 클릭하여 원하는 값으로 조정해 줍니다. 이 과정은 앞의 유리를 통해 뒤의 사물이 흐려 보이는 원리를 적용한 것으로써 글래스모피즘의 가장 중요한 원리입니다.

구름 뒤의 물체가 흐리게 보이게 함으로써 유리의 느낌을 배가시켜 줍니다.

Step 4.

Drop Shadow & Show Behind Transparent Areas

이제 마지막 과정이 남았습니다. 구름은 해보다 앞으로 나와 있습니다. 이 느낌을 주기 위해 구름에 미세한 그림자를 적용해 보도록 하겠습니다. 먼저 구름은 이미 Background Blur라는 효과가 적용되어 있으므로 그림자 효과를 추가로 줄 수 없습니다. 구름 레이어를 복사하여 같은 위치에 붙여 넣기를 합니다. 그리고 더 뒤쪽 오브젝트(아래쪽 레이어) 해당 레이어에 효과를 Background Blur 대신 Drop Shadow로 바꾸어 줍니다.