그라데이션이 들어가면 바로 입체적인 버튼, 행성, 로고만들기

그라데이션이 들어가면 바로 입체적인 버튼, 행성, 로고만들기

일러스트레이터에서 디자인 실력이 갑자기 프로처럼 보이는 순간이 있습니다.
바로 Flat(단색)에서 Gradient(그라데이션)으로 넘어가는 그 1초입니다.

같은 파란색 동그라미라도, 단색은 그냥 도형이지만 그라데이션이 들어가면 바로 입체적인 버튼, 행성, 로고가 됩니다.  이미지의 BEFORE → AFTER가 그 차이를 완벽하게 보여주죠.

"그라데이션은 어려워요" 라고요? 오늘 이 12단계 가이드 하나로 끝내드립니다. 초보자도 5분이면 됩니다.

반응형

1단계: 도형 하나 만들기 - 모든 디자인의 시작

가장 먼저 캔버스에 도형을 하나 그립니다.
왼쪽 툴바에서 Rectangle, Ellipse 등 아무 도형 툴이나 선택해서 Artboard에 드래그하세요. 색상은 일단 아무거나 괜찮습니다. 이 도형이 앞으로 우리가 칠할 캔버스가 됩니다.

Pro Tip: 로고나 아이콘을 만들 땐, 사각형보다 원형이나 둥근 사각형에서 그라데이션이 훨씬 고급스럽게 표현됩니다.

2단계: 그라데이션 패널 열기 - 마법의 제어판

일러스트레이터 상단 메뉴에서

Window > Gradient (단축키: Ctrl + F9)

를 누르면 오른쪽에 긴 막대기가 있는 패널이 뜹니다. 여기가 그라데이션의 모든 것을 조절하는 조종석입니다. 이 패널이 안 보이면 아무것도 할 수 없으니 꼭 기억하세요.

3단계: 그라데이션 타입 고르기 - 성격 정하기

Gradient 패널 상단에 타입이 3가지 있습니다. 이 선택이 디자인의 분위기를 결정합니다.

• Linear(선형): 한 방향으로 자연스럽게 섞입니다. 가장 기본적이고 깔끔해서 배경, 버튼에 많이 씁니다.
• Radial(방사형): 중앙에서 바깥으로 퍼져나가는 원형 그라데이션. 입체감, 조명 효과를 줄 때 최고입니다. BEFORE → AFTER 원이 바로 이겁니다.
• Freeform(자유형): 2020년부터 생긴 혁신 기능. 점(Point)을 찍는 곳마다 색을 다르게 지정해서 수채화처럼 자유로운 다중 컬러 그라데이션을 만들 수 있습니다.

요즘 대세인 인스타그램 로고, 애플 뮤직 아이콘은 전부 Freeform의 응용입니다.

4단계 ~ 6단계: 색 입히고, 섞고, 더하기

이제 본격적으로 색을 만져봅니다.

4. Apply: 패널 왼쪽의 Fill(칠) 색상 박스를 클릭하면 도형에 기본 그라데이션이 적용됩니다.

5. Edit: 그라데이션 막대 아래에 있는 동그란 점(Color Stop)을 더블클릭하면 Color Picker가 뜹니다. 여기서 원하는 색으로 바꾸면 됩니다. 왼쪽, 오른쪽 점을 다른 색으로 바꾸는 것만으로 바로 디자인이 됩니다.

6. Add: 막대 아래 빈 공간을 클릭하면 새로운 Color Stop이 추가됩니다. 2가지 색은 심심하잖아요? 3∼4개를 추가하면 훨씬 더 부드럽고 풍부한 Smooth Color Blends가 완성됩니다.

디자인 심리학 데이터: Adobe와 Pantone의 공동 연구에 따르면, 그라데이션이 적용된 디자인은 단색 디자인보다 사용자의 시선을 1.5배 더 오래 머물게 하고, '현대적이다', '트렌디하다'는 인상을 68% 더 많이 준다고 합니다.

7단계 ~ 9단계: 디테일이 프로를 만든다

여기서부터가 진짜 프로와 아마추어를 가르는 구간입니다.

7. 방향 조절(Direction): Linear는 단축키 G (Gradient Tool)를 선택하고 도형 위에서 드래그하는 방향으로 그라데이션 방향이 바뀝니다. Radial은 중앙에서 바깥으로 드래그해서 빛의 중심(Focus)을 조절합니다.

8. 각도 조절(Angle): 패널에서 Angle 값을 숫자로 직접 입력하면 65도, 90도 등 정확하게 각도를 맞출 수 있습니다. 브랜드 가이드가 있는 로고 작업엔 필수입니다.

9. 투명도로 깊이 주기(Opacity): 각 Color Stop 아래에는 Opacity 슬라이더가 있습니다. 이걸 50%로 낮추면 색이 반투명해지면서 아래 색이 비쳐, 마치 오로라나 유리처럼 몽환적인 효과가 납니다. 요즘 유행하는 Glassmorphism 디자인의 핵심 기술입니다.

10단계 ~ 12단계: 자유형과 마무리

10. Freeform Gradient: Freeform을 선택하고 도형 안을 클릭해서 점을 찍어보세요. 점마다 다른 색을 주면 별 모양처럼 세상에 하나뿐인 커스텀 그라데이션이 완성됩니다.

11. 오브젝트 위에서 직접 수정: 굳이 패널을 보지 않아도 됩니다. G툴을 누른 상태에서 도형 위의 선과 점을 직접 움직이면 색, 방향, 초점을 직관적으로 수정할 수 있습니다.

12. 저장하기: 작업이 끝나면 File > Save as AI로 저장해야 나중에 그라데이션 수정을 할 수 있습니다. 완성이면 PNG, JPG, SVG로 Export 하세요. 웹이나 앱 UI에 쓸 땐 SVG가 화질이 가장 깨끗합니다.

전문가가 주는 마지막 Pro Tips 3가지

팁에 제 경험을 더해 정리해드립니다.

1. Less is More: 초보자는 색을 많이 쓸수록 좋은 줄 압니다. 아닙니다. 색상 스탑은 2∼3개가 가장 깔끔하고 고급스럽습니다.
2. 브랜드 컬러에 +1: 내 브랜드 메인 컬러 2개에, 그 사이를 이어줄 중간톤 1개만 더해보세요. 통일감 있으면서도 세련된 그라데이션이 됩니다.
3. Global Color 사용: 그라데이션에 사용한 색을 Global Color로 지정해두면, 나중에 브랜드 컬러가 바뀌었을 때 한 번에 모든 그라데이션이 자동 수정됩니다. 작업 시간 90% 절약 팁입니다.

이 그라데이션, 어디에 쓰면 좋을까?
로고 디자인, 웹 & 앱 UI, 배경, 일러스트, 포스터, 배너, 소셜 미디어 그래픽... 안 쓰이는 곳이 없습니다. 특히 2024년부터는 Y2K, Aurora Gradient가 대유행하면서 그라데이션을 다루는 능력이 디자이너의 필수 스펙이 되었습니다.

와인병다육이세상사는이야기

와인병다육이세상사는이야기