서론

안녕하세요. 이 튜토리얼에서는 4개의 레이어만으로 일러스트레이션에 투명한 물 효과를 만드는 매우 쉬운 방법과 이를 복제하여 애니메이션을 만드는 방법을 보여드리겠습니다.

비디오 튜토리얼

실제 단계를 보려면 비디오 튜토리얼을 확인하세요.

투명도의 기본 개념

무언가를 투명하게 보이게 하려면 레이어 불투명도를 100%에서 낮추기만 하면 됩니다.

그리고 레이어 모드를 사용하여 결과를 강화하세요.

(마음에 드는 모드를 선택하세요)

 

물처럼 보이게 하려면 중요한 추가 터치는 수면 반사와 그림자입니다.

 

이것이 물 투명도가 작동하는 기본 아이디어입니다. 이제 그림에 적용해 봅시다!!

수면 만들기 (또는 다운로드)

참고: 저는 이미 이 소재를 클립 스튜디오 에셋에 등록했습니다. 다운로드하여 바로 사용할 수 있습니다.

패턴을 만들려면:

 

새 파일을 만들고 펜 도구로 무작위 파도를 그립니다.

파도가 교차하는 부분에 추가 곡선을 그립니다.

(참고: 간단한 형태 구조로 만들려고 노력하세요)

 

그런 다음 잘라내어 끊김 없는 패턴 타일로 만드세요.

 

그림을 끊김 없는 패턴으로 바꾸는 방법에 대한 이전 튜토리얼을 확인하세요:

(또한 4부의 물 예시)

끊김 없는 패턴 두 가지 버전을 만드세요.

원본과 파란색 효과가 적용된 버전 (효과를 복제하고 블러 필터를 적용)

일반 타일과 빛나는 효과를 위한 블러 타일 (선택 사항).

사용하기 쉽도록 소재를 소재 라이브러리에 등록하세요.

작품에 적용 (애니메이션 없음)[클립 스튜디오 페인트 Pro/EX]

그림을 준비하세요.

그림 위에 새 레이어를 만들고 수위를 흰색으로 칠하세요.

라쏘 도구로 수위 아래를 선택하고 레이어 폴더를 선택한 다음 [Ctrl+X]로 잘라내고 [Ctrl+V]로 붙여넣으세요.

 

이렇게 하면 물 아래 부분에 대한 분할 폴더가 만들어집니다.

 

두 폴더 사이에 새 레이어를 만들고 그라데이션 도구로 채우세요.

(그라데이션 선택지를 선택한 다음 캔버스에 드래그하여 채우세요. 그라데이션 막대 위에 있는 색상 점을 클릭하여 자신만의 그라데이션을 사용자 지정할 수도 있습니다.)

 

불투명도를 조정하여 투명 효과를 만드세요.

수면 소재를 레이어 패널 (그라데이션 레이어 위)로 드래그하세요.

레이어 모드를 오버레이로 조정하여 더 빛나게 보이도록 하세요.

[선택 사항] 패턴의 블러 처리된 버전을 레이어 패널로 드래그하고 모드를 추가(발광)로 설정하면 더 빛나는 효과를 만들 수 있습니다.

(레이어 소재의 불투명도를 조절하여 부드럽게 만드세요)

 

[Shift]를 누른 상태에서 두 효과 레이어를 모두 선택한 다음 [Ctrl+t]를 눌러 가장자리를 변형하세요.

 

이 방법을 사용하면 두 가지 목표를 함께 조정할 수 있습니다.

 

모드를 자유 변형으로 설정하고 패턴의 모서리를 그림의 원근감에 맞춰 이동하세요.

 

Enter를 눌러 변형을 확정하면 쉽고 반짝이는 수면을 얻을 수 있습니다!

 

그림자 효과를 만들려면 블러 레이어 (블러 효과를 만들지 않은 경우 수면 레이어)를 복사하여 물 그라데이션 레이어 아래로 드래그하세요.

 

 

오브젝트 도구를 사용하고 약간 아래로 이동하세요.

그런 다음 레이어 속성에서 레이어 색상 효과를 색상을 어둡게 설정하고

레이어 모드를 선형 번으로 설정하세요.

 

그러면 쉬운 투명 효과를 얻을 수 있습니다.

애니메이션 시작!! 파도 애니메이션의 기본

파도의 움직임은 지면의 원근선과 관련이 있습니다.

기본적인 파도는 작게 시작하여 어느 지점에서 큰 파도가 되고, 파도가 커질수록 느려집니다.

 

여기에 시간에 따른 참조 애니메이션이 있습니다.

 

애니메이션용 파일 준비[클립 스튜디오 페인트 EX]

애니메이션용 새 캔버스를 만드세요. 여기서는 부드러운 움직임과 재생 시간 100을 위해 프레임 속도 24의 애니메이션 템플릿 (1920*1080)을 선택했습니다.

기본 애니메이션 폴더가 생성됩니다. 필요 없으므로 삭제하세요.

그림을 복사하여 캔버스에 놓으세요.

 

또한 용지 색상을 원본과 동일하게 설정하세요 (모래 색상).

 

레이어에 움직임을 추가할 것이므로, 원근 눈금자를 사용하여 움직임의 프록시를 만드세요.

 

원근 눈금자를 만들려면 선을 배치할 위치를 길게 클릭한 다음, 원근감에 맞춰 이동하세요. 두 개의 선이 하나의 원근점으로 모이게 됩니다.

 

원근감에 익숙하지 않다면, 캐릭터 아래의 직사각형 바닥을 상상한 다음, 각 원근점에 한 쌍의 선을 모으세요.

원근 눈금자는 활성화되면 보라색으로 나타납니다.

(비활성화되면 녹색으로 나타납니다)[기본 설정]

 

이전 부분과 같이 물 위와 아래 부분을 분리한 다음, 이전의 애니메이션 없는 이미지에서 했던 것처럼 그라데이션 레이어를 추가하세요.

>애니메이션 단계 1: 파도 거품 만들기

새 레이어 2개를 만들고 두 레이어 모두에 거품 선을 가로로 그리세요.

(저는 거품과 유사하게 질감 펜을 사용했습니다.)

 

참고: 원근 눈금자에 스냅을 비활성화해야 자유롭게 그릴 수 있습니다.

원근 눈금자 오브젝트 도구를 클릭한 다음, 도구 속성 패널에서 스냅을 비활성화하세요.

 

두 레이어 모두를 이미지 소재 레이어로 변환하세요.

자유 변형 모드의 오브젝트 도구를 사용하여 오브젝트의 모서리를 약간 조정하세요.

(이렇게 하면 레이어 키프레임 애니메이션에서 자유 변형 모드가 활성화됩니다.)

 

타임라인에서 레이어 키프레임을 활성화하세요.

오브젝트 도구를 사용하여 1프레임에서 파도의 시작 위치를 조정하세요.

부드러운 보간 키프레임을 사용하여 지수 곡선으로 부드럽게 애니메이션을 만드세요.

(기본적으로 첫 번째 노드에서 빠르게 움직이고 마지막 노드에 가까워질수록 느려지는데, 이는 파도 애니메이션에서 필요한 것과 일치합니다.)

 

마지막 프레임에서 더 크게 크기를 조정하고 원근선에 맞추세요 (오브젝트의 제어 테두리를 보려면 축소하세요).

[선택 사항]

파도를 디자인한 대로 시작은 빠르게, 끝은 느리게 움직이게 하려면

파도가 이미지 중앙에 도달하는 중간 프레임을 만드세요.

 

그리고 다이아몬드 아이콘을 약간 앞으로 드래그하여 해당 지점까지 걸리는 시간을 단축하세요.

첫 번째 파도가 완성되었습니다!

 

다른 파도 레이어로 단계를 반복하고 서로 겹치게 하세요.

 

이렇게 하면 파도 거품의 움직임이 만들어집니다.

 

참고: 타임라인의 특정 지점에서 레이어 불투명도를 조정하여 페이드 인 및 페이드 아웃 효과를 만드세요.

>애니메이션 단계 2: 수면 만들기

이 단계에서는 원근선을 사용하여 수면 레이어의 움직임을 돕습니다.

 

원근 눈금자 레이어를 선택하고 오브젝트 도구를 사용하여 눈금자를 조정하세요.

 

 

그런 다음 스냅을 켜세요 (도구 속성 패널에서).

수면 움직임의 가이드로 눈금자 레이어에 두 개의 직사각형을 그리세요.

시작점은 작고, 끝점은 물결이 움직이는 방식처럼 더 크고 넓게 퍼집니다.

 

오브젝트 변형 노드가 원근 눈금자에 스냅되지 않으므로 원근 움직임의 프록시를 그려야 합니다.

 

다음 단계는 수면 소재를 캔버스로 가져와 시작점에 맞게 조정하는 것입니다 (오브젝트 도구 사용).

 

 

레이어 키프레임을 활성화하고 첫 번째 프레임에 키프레임을 추가하세요.

이렇게 하면 첫 번째 프레임의 조정이 적용됩니다.

 

그런 다음 마지막 프레임을 선택하고 소재를 끝 위치로 조정하세요.

 

 

이렇게 하면 수면이 파도와 함께 움직입니다.

 

그런 다음 파도를 끝에서 약간 되돌리려면 마지막 키프레임 이전 위치에 키프레임을 추가하세요.

 

그런 다음 드래그하여 위치를 바꾸세요 (새 프레임을 마지막 프레임으로 이동).

수면의 레이어 모드와 불투명도를 조정하여 완성하세요.

>애니메이션 단계 3: 파도를 마스크하여 분리된 움직임 만들기

움직임을 더 자연스럽게 보이게 하려면 파도를 두 부분으로 분리하여 독립적으로 움직이게 하세요.

 

클립 스튜디오에서는 레이어에 마스크를 쉽게 만들고 레이어 안의 오브젝트와 별도로 애니메이션을 만들 수 있습니다.

 

여기 마스크 및 레이어 애니메이션의 개념이 있습니다.

 

오브젝트의 일부를 숨겨 파도가 움직일 때 겹치지 않도록 합니다.

 

 

수면의 레이어 키프레임을 다시 클릭하여 비활성화하세요.

 

 

 

파도의 한쪽을 선택하세요.

다른 부분을 위해 수면 레이어를 복제하세요.

그런 다음 레이어를 마우스 오른쪽 버튼으로 클릭하고 레이어 마스크 > 선택 범위 밖 마스크를 선택하여 마스크를 만드세요.

이렇게 하면 파도 뒤의 수면이 파도 뒤에서만 보이게 됩니다.

마스크의 반대쪽도 다른 마스크 쪽에 만드세요.

 

 

마스크를 마우스 오른쪽 버튼으로 클릭한 다음, 레이어에서 선택 > 선택 영역 만들기를 선택하세요.

 

 

그런 다음 이전에 복사한 레이어를 마우스 오른쪽 버튼으로 클릭하고 선택 영역으로 마스크를 만드세요.

이제 물의 두 부분이 분리되었습니다.

키프레임을 다시 활성화하면 레이어 마스크에도 키프레임을 설정할 수 있습니다.

마스크 크기를 300%로 조정하세요.

이렇게 하면 파도가 완전히 내려왔을 때 전체 캔버스를 덮게 됩니다.

 

(파란색 영역은 보이지 않는 영역입니다.)

 

마스크를 마우스 오른쪽 버튼으로 클릭하고 마스크 레이어 표시를 확인하여 보이지 않는 영역을 강조 표시하세요.

 

 

파도의 위치에 맞게 양쪽 마스크를 조정하세요.

(마스크를 조정하면 키프레임이 자동으로 생성됩니다.)

 

 

[중요!] 편집할 때 도구가 마스크에 활성화되어 있는지 확인하여 레이어 움직임에 영향을 주지 않도록 하세요.

결과 (여기서 수면의 불투명도와 움직임을 개별적으로 조정할 수 있습니다.)

>애니메이션 단계 4: 루프 만들기

처음에 타임라인 설정에 따라 되돌아오는 파도는 파도 애니메이션 뒤에 배치되었습니다.

참고: 혼동을 줄이기 위해 측면 이름을 지정했습니다.

상단 가장자리를 숨기면 초기 키프레임에서 하단 가장자리의 마스크가 아직 해당 지점에 도달하지 않았기 때문에 간격이 생길 것입니다.

이 이미지는 두 가장자리 모두 전체 타임라인 동안 나타나지 않았지만, 이렇게 나타날 것임을 보여줍니다.

상단 가장자리는 마지막 프레임까지 나타나지 않을 것이며,

하단 가장자리는 첫 프레임에 나타나지 않을 것입니다.

 

유일한 조건은 상단 가장자리의 첫 번째 키프레임을 하단 가장자리의 마지막 장면과 동일하게 만드는 것입니다.

 

 

따라서 하단 가장자리의 끝에 있는 뒤로 움직이는 동작을 상단 가장자리로 옮길 수 있습니다.

 

애니메이션이 동일한 이미지 소재의 움직임이므로, 하단 가장자리 끝에 있는 다이아몬드 아이콘을 마우스 오른쪽 버튼 > 복사를 통해 간단히 복사할 수 있습니다.

 

그런 다음 상단 가장자리의 첫 번째 노드를 마우스 오른쪽 버튼으로 클릭하고 붙여넣으세요.

(타임라인의 각 다이아몬드 아이콘은 오브젝트의 속성 정보를 포함합니다. 동일한 크기의 오브젝트를 사용하는 경우 속성 정보가 오류 없이 완전히 붙여넣어집니다.)

 

경고: 마스크의 속성은 전환의 속성을 대체할 수 없습니다. 올바른 레이어 노드를 복사했는지 확인하세요.

 

 

하단 가장자리의 최종 키프레임으로 단계를 반복하세요 (상단 가장자리 타임라인의 끝에 배치). 완료되면 종료 막대를 하단 가장자리의 마지막 키프레임으로 이동하세요.

 

애니메이션이 부드러운 루프로 나타날 것입니다.

[중요] 연결 프레임에 대해서도 불투명도 조정을 동일하게 설정해야 합니다.

 

참고: 파란색 봉투 막대 바깥에 있는 불필요한 키프레임을 정리하세요. 나중에 편집해야 할 때 혼동을 줄일 수 있습니다.

 

>애니메이션 단계 5: 수면 광택 및 그림자 추가

>> 수면 광택

 

애니메이션 없는 버전에서 했던 것처럼 블러 소재를 캔버스로 가져오세요.

 

아래 레이어를 복제하세요.

레이어의 레이어 키프레임을 비활성화한 다음, 마스크 아이콘을 블러 소재 레이어로 드래그하세요.

그런 다음 복사된 레이어를 제거하면 블러 소재에 동일한 레이어 마스크가 적용됩니다.

캔버스에서 한 모서리를 약간 이동하여 레이어 키프레임에서 자유 변형 모드를 전환하세요.

타임라인의 상단 바를 클릭하여 아래 레이어의 전체 키프레임을 선택하세요.

그런 다음 마우스 오른쪽 버튼을 클릭하고 복사를 선택하여 전체 타임라인을 복사하세요.

 

그런 다음 블러 소재 레이어를 선택하고 레이어 키프레임 활성화를 설정한 다음

타임라인을 삭제하세요.

 

그런 다음 첫 번째 프레임을 선택하고 이전에 복사한 타임라인을 붙여넣으세요.

이렇게 하면 완벽하게 겹쳐진 프레임을 얻을 수 있습니다. 레이어 모드를 추가 (발광)로 설정하고 결과에 만족할 때까지 불투명도를 조정하세요.

 

수면의 다른 부분에도 단계를 반복하세요.

 

>> 그림자

블러 레이어 2개와 파도 레이어 1개를 복사한 다음, 물 그라데이션 레이어 아래에 배치하세요.

소프트웨어가 추가 변형 다이아몬드 아이콘을 생성하는 것을 방지하기 위해 각 키프레임 다이아몬드 아이콘에서 레이어를 아래로 이동해야 합니다.

 

다이아몬드를 선택한 다음 오브젝트 도구를 사용하여 레이어를 캔버스 아래로 이동하세요.

 

 

변형 막대 (레이어 타임라인의 상단 막대)에 집중해야 합니다.

(따라서 블러 레이어의 첫 번째 키프레임과 마지막 키프레임을 아래로 이동합니다.)

(그리고 파도 레이어의 3개 키프레임을 아래로 이동합니다.)

3개 레이어의 레이어 모드를 곱하기로 변경하고 레이어 색상 효과를 더 어두운 색상으로 설정하세요.

이제 파도도 투명 효과를 갖게 될 것입니다.

참고: 그림자의 경우, 블러 레이어의 첫 번째 프레임이 하단 가장자리의 마지막 프레임과 동일한 위치와 불투명도를 가지고 있는지 확인하세요.

최종 마무리

루프가 완료되면 이제 다음과 같이 프레임을 편집할 수 있습니다:

 

>> 캐릭터와 물의 대비:

 

애니메이션 폴더를 만들고 물과 대비되는 캐릭터 부분에 흰색을 칠하세요.

루프 반복

 

>> 물 튀김:

 

다른 애니메이션 폴더를 만들고 물방울 스프레이 (에어브러시 보조 도구)를 물결에 적용하여 물 튀김을 만드세요.

 

그리고 파도가 도달할 때 바다표범에 추가 거품을 만드세요.

 

>> 캐릭터 조정:

 

오브젝트 도구로 캐릭터의 벡터 잉크를 조정하여 배경과 일치시키세요.

벡터 레이어 조작에 대한 자세한 내용은 이전 튜토리얼을 확인하세요:

캐릭터 폴더 위에 클리핑 마스크 레이어를 추가하여 조명 효과를 만드세요.

레이어 모드를 추가 (발광)로 설정한 다음 부드러운 에어브러시로 칠하세요.

 

 

이미지를 더 부드럽게 보이게 하려면 상단 레이어에 그라데이션 효과를 적용하세요.

최종 결과

이 기술이 여러분의 작업에 투명한 바다 애니메이션을 추가하는 데 도움이 되는 아이디어를 얻는 데 도움이 되기를 바랍니다!!

 

애니메이션을 즐기세요!!