물이 채워진 유리 텍스트 - 포토샵에서 애니메이션 제작

투명도와 움직임을 결합한 물이 채워진 유리 텍스트는 인상적인 효과를 줍니다. 광고 배너나 소셜 미디어 그래픽과 같은 디지털 프로젝트에 이상적이며, Photoshop을 사용하여 이 외관을 만들고 애니메이션화할 수 있습니다. 레이어 스타일, 마스크 및 타임라인 애니메이션을 사용하여 당신의 텍스트는 현실적인 물 채움과 부드러운 움직임으로 눈길을 끌 것입니다. 이 튜토리얼에서는 애니메이션 효과가 적용된 물이 채워진 유리 텍스트를 단계별로 보여드리겠습니다. 시작해볼까요? 당신의 텍스트에 생명을 불어넣어보세요!

1. 새 문서

우리는 2090 x 1000 Px 크기의 새 문서를 생성하는 것으로 시작합니다.

그런 다음 배경 이미지를 찾기 위해 sxc.hu 웹 사이트로 이동합니다. "1327434"를 검색란에 입력하면 이 원본 이미지를 찾을 수 있습니다.

그런 다음 해당 이미지를 클릭한 후 Photoshop 문서로 드래그합니다.

필요에 따라 이미지를 약간 넓게 조정해야 할 수도 있습니다 (Ctrl+T), 작업 영역에 잘 맞게 만들기 위해.

2. 텍스트 생성

이제 효과를 적용할 텍스트를 작성합니다. 이를 위해 색상 #dbdbdb, 크기 300 Px 및 글꼴 "FutonCondensed"을 Bold로 사용합니다. 다른 굵은 글꼴을 사용해도 괜찮습니다. 메인 포인트는 물이 잘 보이도록 충분한 공간이 필요하다는 것입니다.

텍스트 레이어를 복제하여 각각의 레이어 이름을 변경합니다. 아래쪽 레이어는 "아래", 위쪽 레이어는 "위"로 이름을 지어줍니다.

3. "아래" 레이어에 대한 레이어 스타일

"아래" 레이어를 더블 클릭하여 다음 레이어 스타일을 추가하십시오:

• 드롭 섀도우:

• 내부 그림자:

• 평탄한 각도와 높임 효과:

중간 결과:

• 평탄한 각도와 높임 효과 - 윤곽:

중간 결과 ("위" 레이어가 미리 꺼져 있어야 함):

"위" 레이어에서는 채우기 불투명도를 0%로 설정하여 나중에는 레이어 스타일만 표시되도록 합니다.

그런 다음 오른쪽으로 약간 이동하여 "위" 텍스트 레이어를 더블 클릭하고 다음 레이어 스타일을 설정합니다.

• 내부 그림자:

중간 결과:

• 평평한 모서리 및 레리프:

중간 결과:

• 평평한 모서리 및 레리프 - 윤곽선:

중간 결과:

5. 물 텍스트로 채우기

이제 사각형 도구를 선택합니다…

… 그리고 텍스트의 아랫부분을 덮는 직사각형 모양을 그려줍니다.

색상은 #4594ab여야 합니다. 이 새로운 레이어는 "아래"와 "위" 텍스트 두 레이어 사이에 위치해야 합니다.

6. 첫 번째 앵커 포인트 설정

이제 앵커 포인트 추가 도구를 선택합니다…

… 그리고 각 글자 외곽에 앵커 포인트를 설정해줍니다.

7. 물결 만들기

그 후에 글자 내부에 더 많은 앵커 포인트를 추가해줍니다.

직접 선택 도구를 사용하여 이를 각각 위아래로 약간씩 움직여 물결이 형성되도록 합니다. 너무 많은 포인트가 있는 경우 앵커 포인트 삭제 도구로 다시 제거할 수 있습니다.

중간 결과:

8. 윤곽선 제거

다음으로 사각형 레이어를 레스터화; 새로운 레이어를 만든 다음 아랫쪽 레이어를 숨기고, 복사본을 우클릭하여 레이어 레스터화를 선택합니다.

Ctrl 키를 누른 상태로 "아래" 텍스트 레이어의 레이어 팔레트에서 아이콘을 클릭하여 텍스트 주변에 선택을 생성합니다.

그런 다음 Ctrl+Shift+I를 눌러 선택 영역을 반전시키고, 물 형태 복사본을 다시 선택한 다음 Delete를 눌러줍니다. 그런 다음 아랫쪽 물 형태 레이어를 숨겨줍니다.

9. 물에 대한 레이어 효과 추가

그런 다음 레이어 효과를 위해 물레이어를 더블클릭하여 실제 물 텍스처를 더해줍니다.

• 그림자:

중간 결과:

• 안쪽 그림자:

중간 결과:

• 평평한 가장자리와 조각:

중간 결과:

다음 설정은 물의 질감을 제공합니다:

• 구조:

• 광채:

중간 결과:

물이 약간 어두워졌으므로 색상 오버레이를 추가할 것입니다. 더 밝은 색상이 너무 평면적으로 보이지 않게하기 위해 채우기 방식도 변경할 것입니다. 다음과 같은 정보가 있습니다:

• 색상 오버레이:

중간 결과:

• 그라데이션 오버레이:

중간 결과:

중간 결과 확대:

나머지 텍스트가 회색이 아니라 유리 용기처럼 보이도록하기 위해 "하단" 레이어로 이동하여 색상 강도 를 0%로 설정합니다.

최종 결과:

10. 변형: 파란색조 변경

여기서 텍스트를 좀 더 최적화하려면 무엇을 할 수 있는지 몇 가지 작은 수정 사항을 통해 알려드리고자 합니다. 레이어 팔레트에서 색조/채도 조정 레이어를 추가하여 물의 파란색조를 변경할 수 있습니다…,

해당 워터폼 레이어에서 이 레이어로 이동하여 알트 키를 누른 채로 클릭하여 이 하단 레이어에만 효과가 적용되도록 마스킹을 만듭니다.

조절기를 약간만 조절하면 물에 더 깊이감을 줄 수 있습니다.

11. 변형: 물 애니메이션

또 다른 방법은 물 레이어를 복제하는 것입니다 (이전에 클리핑 마스크를 적용한 뒤에 Alt + 클릭하여). 그런 다음 평면화 된 모서리와 릴리프를 두 번 클릭하여 레이어 스타일 설정에 들어갑니다.

그런 다음 구조로 이동하고 깊이를 280%로 조절합니다. 그러면 물의 움직임이 약간 변합니다.

그런 다음 물 레이어를 다시 복제하여 구조를 두 번째로 변경합니다 …

… 그리고 깊이값을 470%로 설정합니다.

다음으로 창>애니메이션으로 이동하여 애니메이션 패널을 엽니다.

그런 다음 아래에 표시된 아이콘을 클릭하여 프레임 보기로 이동합니다:

이제 2회 클릭하여 아래에 표시된 아이콘을 클릭하여 2개의 추가 프레임을 만듭니다.

다음으로 첫 번째 프레임을 클릭하여 선택합니다:

그런 다음 아래에 있는 두 개의 물 레이어를 숨기고 클리핑 마스크가 적용된 상단 레이어만 표시되도록합니다.

그런 다음 두 번째 프레임을 클릭하고 상하 물 레이어를 숨기고 중간 레이어만 표시합니다. 색조-채도 조정 레이어도 함께 이동합니다.

이제 세 번째 프레임에도 동일한 작업을 수행하여 하단 물 레이어만 표시됩니다. 그런 다음 3개의 프레임을 모두 선택하고 초를 0.2로 설정합니다.

왼쪽에서 한 번 옆의 삼각형을 클릭하고 무제한을 선택하여 애니메이션이 한 번만 재생되는 것이 아니라 계속 반복되도록 합니다.

재생 버튼을 클릭하면 물의 움직임을 볼 수 있습니다. 이제 이를 GIF 파일로 저장할 수 있습니다. 파일>웹 및 장치에 저장을 통해 저장할 수 있습니다.

여기서 GIF를 선택하고 저장을 클릭합니다.

전체를 보려면 파일을 브라우저로 끌면됩니다. 거기에서 재생됩니다. 그럼 이것으로 끝입니다. 본 워크샵이 즐거우셨기를 바랍니다. 아래에서 우리의 애니메이션 최종 결과물을 다시 확인할 수 있습니다: