안녕하세요.
Adobe Animate 시작하기 시리즈에 오신 것을 환영합니다.
지금까지 우리는 작업 영역을 관리하고 드로잉 툴을 사용하여 심볼을 만들고 표준 트윈을 만들고 동영상 클립을 만드는 방법들을 살펴보았습니다.
이번에는 Adobe Animate의 강력한 그래디언트 툴을 사용하여 아트웍을 업그레이드하는 방법을 살펴보겠습니다.
저는 개인적으로 그래디언트 툴을 자주 사용하는데요.
아트웍부터 인터페이스 디자인까지 다양합니다.
Animate의 그래디언트로 만든 인터페이스 디자인인데요.
이 인터페이스에는 애니메이션이 적용되어 있어요.
모터 애니메이션도 있습니다.
이 모터는 Animate에서 처음부터 하나씩 만든 것인데요.
3D처럼 보이지만 3D처럼 보이는 그래디언트를 적용한 것입니다.
이것은 펌프 애니메이션인데요.
이 펌프도 3D처럼 보이게 만드는 그래디언트를 사용하여 움직이게 만든 것입니다.
이것이 모두 그래디언트입니다.
비트맵을 벡터로 변환하려는 경우에도 그래디언트를 사용하는데요.
위의 이미지는 비트맵이고 비트맵을 축소 또는 확장하려면 Animate에서 그래디언트를 사용해 원본처럼 그대로 다시 그려야 합니다.
이 경우에도 많은 그래픽이 사용되었습니다.
이 점심 식판도 마찬가지로 Adobe Animate 2020의 그래디언트 툴을 사용해서 만든 것입니다.
이제 본격적으로 시작해보죠.
시작하기 전에 Animate 2020 애플리케이션에서 환경 결정을 몇 가지 변경해야 합니다.
편집 메뉴에서 환경 설정을 선택합니다.
Mac의 경우 Animate 메뉴에서 환경 설정이 됩니다.
PC의 경우 편집 메뉴에서 환경 설정, 환경 설정 편집이 되겠습니다.
여기에서 UI 모양을 편안에서 콤팩트로 변경합니다.
그러면 타임라인은 물론이고 툴의 간격들이 모두 좁아집니다.
다시 편집 메뉴에서 환경 설정, 전문가 환경 설정을 차례로 선택합니다.
그러면 이 공간도 더욱 좁아집니다.
마지막으로 이 시리즈의 첫 번째 동영상에서 만든 작업 영역을 살펴보죠.
이제 시작할 준비가 되었습니다.
이 배에는 그래디언트가 적용되어 있지 않습니다.
라이브러리로 이동해 배를 두 번 클릭, 즉 노크하여 편집 영역을 엽니다.
좌석 색상을 그래디언트로 바꿔보려고 합니다.
화면 상단에서 색상 패널을 엽니다.
여기를 보면 단색으로 되어 있는데요.
여기를 클릭하여 선형 그래디언트를 선택합니다.
그러면 그래디언트가 하단에 열립니다.
이때 두 개의 색상 정지점이 있는데 하나는 검은색으로 왼쪽에 있고 다른 하나는 흰색으로 오른쪽에 있습니다.
색상 정지점을 클릭하면 색상 정지점의 머리인 삼각형이 검은색이 되고 여기에는 선택된 색상이 표시됩니다.
흰색 선택기를 클릭하면 이 색상의 16진수 코드가 표시됩니다.
그리고 색상 정지점의 삼각형이 검은색으로 바뀝니다.
이 그래디언트는 색상 정지점이 두 개입니다.
색상 정지점을 더 추가하여 더 많은 색상을 추가하려면 이렇게 중간마다 클릭을 늘리고 여기에서 아무 색상을 두 번 클릭해 색상을 변경하면 새로운 그래디언트가 만들어집니다.
색상 정지점을 삭제하는 것도 추가하는 것과 마찬가지로 클릭하여 패널 아래로 버리는 것처럼 아래로 드래그하면 됩니다.
지금은 두 개만 있으면 됩니다.
이미 선택된 색상으로 그래디언트를 만들려고 합니다.
여기를 두 번 클릭하면 여기에는 216개 색상밖에 없어서 배에 적용된 갈색과 동일한 갈색과 이보다 진한 갈색을 선택하는 것이 어려워집니다.
이 패널 밖으로 드래그하고 이미 적용된 이 갈색을 선택합니다.
그런 다음 두 번째 색상 정지점도 마찬가지로 합니다.
그러면 그래디언트가 아니라 단색이 되는데요.
그래디언트로 만들기 위해 두 번째 정지점을 클릭합니다.
첫 번째도 상관없습니다.
그리고 색조, 채도 및 밝기에서 밝기를 선택하고 이 슬라이더를 드래그하여 현재 선택된 색상인 갈색을 진하게 만듭니다.
이제 갈색에서 진한 갈색으로 변하는 그래디언트가 완성되었어요.
이 패널을 닫고 페인트 통 툴을 선택합니다.
배를 클릭하여 그래디언트를 적용합니다.
또한 클릭한 다음 드래그하면 그래디언트의 방향이나 각도를 드래그하는 방향과 각도를 적용할 수 있고, 더 길게 또는 넓게 드래그할 수도 있습니다.
또한 그래디언트 변형 툴도 사용할 수 있는데요.
자유 변형 툴 바로 아래에 있어요.
단축키는 F 키입니다.
그래디언트 변형 툴은 매우 강력한 툴인데요.
그래디언트 안을 클릭하면 이처럼 중심점이 표시되는데 그래디언트가 적용되는 곳을 나타냅니다.
이제 바깥쪽을 잡고 그래디언트를 늘리거나 줄여가면서 배 안에 적용되는 그래디언트를 조정합니다.
위쪽은 그래디언트를 회전시켜 중심점을 드래그하여 적용합니다.
바깥쪽으로 늘려야 하겠습니다.
좋습니다.
배의 중심부는 색이 밝고, 앞쪽으로 갈수록 어두워집니다.
다시 한번 견본으로 이동해 이 정지점을 두 번 클릭합니다.
이번에는 배의 안쪽에 있는 색상을 선택합니다.
두 번째 정지점도 마찬가지로 하고, 명도를 사용해 어둡게 만듭니다.
좋습니다.
색상 패널을 닫고 다시 한번 페인트 통 툴을 사용해 배 안쪽을 채웁니다.
다시 한번 그래디언트 변형 툴을 선택하고 여기를 클릭합니다.
이쪽은 그렇게 나쁘지 않은데요.
이쪽도 클릭하여 그래디언트를 적용하고 약간 회전시켜 배 안쪽을 더 어둡게 만듭니다.
조금 작게 만든 다음 위쪽을 밝은 영역으로 만들고 배 안쪽으로 갈수록 어둡게 만들어 입체감을 표현합니다.
여기도 마찬가지로 약간 회전시켜 한 번 더 크기를 조정하고 회전시키고 중심점을 움직여 좁게 만들어 아래를 더욱 어둡게 만듭니다.
이렇게요.
이번에는 좌석에 적용해보죠.
먼저 색상 견본을 선택하고 두 번 클릭한 다음 색상을 선택합니다.
이미 사용 중인 색상이므로 훨씬 쉽게 작업할 수 있습니다.
이제 녹색에서 녹색으로 그라데이션이 만들어졌으므로 두 번째 색상 정지점을 클릭하고 명도 슬라이더를 아래로 낮춰 녹색을 어둡게 만듭니다.
명도 슬라이더는 검은색 또는 흰색을 추가하는 것이나 마찬가지입니다.
다시 페인트 통을 선택하여 그래디언트를 추가합니다.
그런 다음 그래디언트 변형 툴을 선택하고 미세 조정합니다.
회전하고 크기를 조금 줄입니다.
뒤로 갈수록 점점 어두워지는 것 같아요.
다시 회전하고 약간 크기를 조정합니다.
이렇게 하면 됩니다.
마지막으로 획을 지워야 하는데요.
그래디언트가 모두 적용되었으므로 배 하단의 획은 필요하지 않습니다.
따라서 삭제 키를 눌러 삭제합니다.
왼쪽 획도 마찬가지로 삭제하고 오른쪽의 획도 클릭해 삭제합니다.
좌석 뒤의 선도 보이지 않게 삭제합니다.
이 선도 마찬가지로 보이지 않게 삭제하고 여기도 삭제합니다.
이제 남은 것은 배의 상단 윤곽선인데요.
이것은 두 번 클릭해 모든 윤곽선을 선택합니다.
두 좌석과 배 윤곽선이 되겠습니다.
그런 다음 속성 패널에서 획 크기를 3 또는 4픽셀로 만듭니다.
그런 다음 밝은 색상을 배 위에 추가합니다.
이렇게 말이죠.
이렇게 함으로써 배의 상단에 가장자리가 만들어져 두께와 깊이를 표현할 수 있게 되었습니다.
다시 한번 테스트해보죠.
이렇게 3D에 근접한 모양의 배를 Adobe Animate의 그래디언트를 사용해 만들었습니다.
돛과 바다도 동일한 기법으로 업그레이드할 수 있는데요.
바다의 경우 두 개 이상의 색상 정지점을 사용하여 어두운 파랑과 밝은 파랑, 밝은 파랑에서 흰색으로 변화는 그래디언트를 만들거나 흰색에 알파 투명도를 적용할 수 있죠.
다음 영상에서 찾아뵙겠습니다.
