40. Futuring AI (+ Cables.gl)
Cables.gl를 이용해 움직이는 키비주얼 만들기
Futuring AI 툴킷을 아예 pdf 문서로 만들어 보려고 합니다.
늘 다른 사람들은 어떻게 작업하는지 궁금했었는데,
제 자신의 디자인 과정 만이라도 다른 분들과 공유하려고 합니다.
Futuring AI 툴킷이 궁금하다면?
Futuring AI 키트는 여기서 -> https://www.figma.com/community/file/1412068473007705286/futuredrill-futuring-ai-kit
Futuring AI 과정을 설명한 글은 여기서 -> https://futuredrill.stibee.com/p/53/
컨셉 정하기
손으로 소스를 만드는 것에서부터 시작
포토샵으로 새롭게 만들기
소스에서 질감을 입히기
키비주얼 자체가 너무 밋밋해서 패턴을 입히면 조금 살아날까? 싶어서 패턴을 입혔는데 영 따로 노네요.
약간 뱀 같기도 하고? 제가 원하는 미래 이미지와는 전혀 다릅니다.
어떻게 하면 좋을까 싶어서 형광 느낌이 나는 색을 입혀봤는데 오?! 맘에 듭니다.
이 방향으로 밀고 나가면 될 것 같습니다.
미래라는 주위에 맞게 색다른 질감 입히기
우연히 갖고 온 이미지인데 돌려서 보니 소문자 'a' 같습니다.
제가 생각할 때 이번 프로젝트는 미래를 다루고 있지만 결국 현재에 우리가 무엇을 해야 할까?를 찾을 수 있는 툴킷입니다. 그럼 의미에서 소문자 'a'는 지금 또는 시작을 의미할 수 있는 좋은 모티프가 됩니다.
두 개만 놔두니 너무 밋밋해서 무엇을 더 조합하면 좋을까? 생각을 하다가 방향성을 나타낼 수 있는 화살표 이미지를 추가했습니다. 결국 '방향성'이 중요하다는 의미에서 화살표 머리 부분에 나름 포인트를 두었습니다.
최종 결과
cables.gl를 통해서 variation 만들기
새로운 툴을 써서 디자인 작업을 해보려고 합니다.
https://cables.gl/home라고 하는 노드 기반의 비주얼 작업을 할 수 있는 도구입니다.
이 도구를 알게 된 건 한 6개월 정도 되었는데 드디어 써보네요.. ㅎ
우선 처음에는 예제를 이용해서 작업을 해보았습니다.
출처 : https://cables.gl/examples
출처 : https://cables.gl/examples/Example%3A%20PixelDifference
이 작업이 제 작업과 잘 맞아 보입니다.
예제를 복사해서 이리저리 만져보고 있는데 상당히 복잡하네요.
만져보다가 핵심이 되는 이미지를 바꿀 수 있는 부분을 찾았습니다.
Image라는 이름으로 되어 있을 것 같았는데 오히려 Texture라는 이름의 노드였습니다.
핵심으로 보자면 Texture 노드를 통해서 여러 이미지를 입력으로 사용할 수 있습니다.
그리고 그 이미지들을 DrawImage노드에서 합성하고 그 결과가 ImageCompose 노드로 들어갑니다.
위의 이미지들은 하나의 이미지를 사용하면서 배경색을 바꿔보면서 만들었습니다.
사용하는 이미지에 따라 느낌이 많이 달라지네요.
조금씩 만져보면서 제가 원하는 이미지가 나오도록 수정했습니다.
하나씩 과정을 자세히 적고 싶은데 노드 기반이라 값이 조금만 달라져도 이미지가 완전히 달라져서 각 단계를 분리시키는 게 쉽지 않네요 ㅜㅜ
대략 제가 원하는 느낌이 나왔습니다.
동영상으로 보면 자연스러운 느낌이 드는데 움직이지 않으니 영 어색하네요...
마음에 드는 최종 이미지를 export 하여 사용하려고 합니다.
찾아보니 RenderAnim이라는 노드가 있네요.
Start를 누르면 제가 만든 움직이는 영상을 이미지로 저장해 줍니다.
.
.
.
.
.
최종 결과물
