그라데이션을 웹에서 메쉬 기반으로 쉽게 생성할 수 있는 사이트를 발견해서 여러분께 소개해 드리려고 해요. 생성한 그라데이션을 이미지, 비디오, 심지어 iframe 코드 형태로도 받을 수 있는데 회원가입도 필요없고, 완전히 무료랍니다.
사이트에 접속하면 왼쪽 패널에 여러 그라데이션 샘플이 준비되어 있습니다. 이 중 원하는 것을 선택해서 우측 패널에서 속성을 편집하는 방식으로 그라데이션을 생성할 수 있어요. 백지에서 시작하는 것보다는 샘플을 편집하면 더 빠르게 만들 수 있겠죠?
기본적인 편집은 메쉬 포인트를 드래그하기만 하면 되고, 포인트 색상을 변경하는 식으로 하면 됩니다. 필요 없는 포인트는 백스페이스키를 눌러서 지울 수 있어요. 중앙 상단의 Add Line을 누르면 새로운 메쉬 포인트를 추가할 수도 있습니다.
특히 레이디러너의 마음에 든 포인트는 요즘 그라데이션 트렌드 중 하나인 그레인 효과가 있다는 점이었어요! 입자의 강도나 사이즈를 조절해서 원하는 대로 만들 수 있습니다. 우측 패널의 'Effects' 속성에서 'Film Grain'을 선택하시면 돼요.
또 한 가지 재미있는 점은 커서를 따라오는 인터랙티브 효과도 구현할 수 있다는 점이었어요! 이 형태는 iframe 형식의 코드로 임베드하면 웹 환경에서 인터랙티브 효과를 적용할 수 있겠어요. 효과 종류도 여러 가지가 있으니 하나씩 테스트해보고 마음에 드는 걸로 고르면 됩니다.
애니메이션 옵션까지 있어서 그라데이션 비디오도 만들 수 있습니다. 메쉬 포인트 위치 변경이나 채도, 명도, Easing 옵션까지 있어서 제법 디테일한 애니메이션 편집이 가능합니다. 그라데이션 루프 비디오를 정말 쉽게 만들 수 있겠어요.
생성한 그라데이션은 우측 패널 하단의 'Export'에서 이미지 또는 비디오 옵션을 선택해 다운받거나, 'Embed Code'에서 iframe 형태의 코드를 받아 갈 수 있습니다. 아래 링크에서 ColorFlow를 직접 사용해 보세요!
