지난 영상에서는 그래디언트 툴로 배를 업그레이드하는 방법을 살펴보았는데요.
이번 영상에서는 Photoshop에서 간단한 번개 효과를 만든 다음 Creative Cloud Libraries를 통해 Animate로 가져와 색상 효과를 적용하는 방법을 살펴보겠습니다.
그러면 시작해보죠.
먼저 Animate에서 시작하겠습니다.
동영상에 사용할 번개를 만들려면 정확한 크기를 알아야 합니다.
동영상의 정확한 스테이지 크기를 살펴보죠.
수정 메뉴에서 문서를 선택하거나 Command + J를 누릅니다.
스테이지 크기가 640 x 480으로 되어 있죠.
따라서 우리가 만들 번개 크기는 적어도 스테이지 크기여야 합니다.
확인을 누르고 Photoshop으로 건너가 새 파일을 만듭니다.
파일 메뉴에서 새로 만들기를 선택합니다.
집에서도 간단하게 따라 할 수 있습니다.
스테이지 크기는 폭 700, 높이 500으로 하고 확인을 누릅니다.
파일은 적어도 스테이지 크기보다 약간 더 커야 합니다.
먼저 기본 색상을 설정합니다.
여기를 클릭하거나 D 키를 눌러 기본 색상을 검은색과 흰색으로 설정합니다.
그런 다음 그래디언트 툴을 선택하거나 G 키를 누릅니다.
현재 그래디언트는 검은색에서 흰색으로 되어 있습니다.
재확인하고 싶다면 여기를 클릭합니다.
여기도 검정에서 흰색으로, 검정에서 흰색으로 그래디언트입니다.
이제 확인을 누릅니다.
그래디언트를 스테이지의 왼쪽에서 오른쪽으로 드래그합니다.
그런 다음 필터 메뉴에서 필터, 렌더, 구름 효과 2를 선택합니다.
그런 다음 이미지 메뉴에서 조정, 반전 또는 Command + I를 누릅니다.
그런 다음 이미지 메뉴에서 조정, 레벨 또는Command + L을 누릅니다.
레벨 패널에서 회색 설정 포인트를 거의 오른쪽 끝까지 드래그합니다.
끝까지가 아닙니다.
약간 아래로 내리면서 번개와 구름이 보이도록 만듭니다.
이 정도면 아주 훌륭합니다.
결과가 마음에 들지 않으면 이 방법을 여러 차례 반복 수행합니다.
그러면 매번 번개처럼 결과도 약간씩 달라집니다.
확인을 누릅니다.
이제 Command + U를 누르거나 이미지 메뉴에서 조정, 색조/채도를 선택합니다.
여기 색상화 버튼을 클릭하고 하늘색에 가까운 파란색 색조를 추가합니다.
이 정도로 하고 확인을 클릭합니다.
번개가 완성되었습니다.
다음은 이 번개를 Animate로 보내야 합니다.
파일 메뉴에서 내보내기, 웹용으로 저장(레거시)을 선택한 다음 특정 파일로 저장하여 Animate에서 가져오기를 선택하고 파일을 찾아 여는 방법도 있죠.
그렇지만...
단계가 너무 복잡하잖아요?
더 간편하고 빠른 방법이 있죠.
라이브러리를 사용하는 겁니다.
Photoshop 창 메뉴에서 라이브러리 패널을 열면 Creative Cloud Libraries가 열립니다.
사전에 Animate CC 폴더를 만들어 놓았는데요.
아직 만들지 못한 경우 새 라이브러리를 쉽게 만들 수 있죠.
이 메뉴를 클릭한 다음 새 라이브러리 만들기를 클릭하면 됩니다.
라이브러리에 넣는 작업도 아주 쉽죠.
원하는 레이어를 라이브러리로 드래그하면 Creative Cloud Libraries에 동기화됩니다.
이동 툴을 선택한 다음 스테이지에서 라이브러리로 바로 드래그해도 되죠.
이렇게 해서 동영상에 사용할 번개 이미지가 두 개 생겼네요.
중복되는 요소를 버리고 정리하려면 대상을 클릭하고 휴지통을 눌러 삭제하면 됩니다.
CC Libraries의 장점은 Animate로 이동해서 윈도우 메뉴에서 CC Libraries를 열면 내 라이브러리에 있는 모든 것이 그대로 있어 모든 Adobe Creative Cloud 앱에서 액세스할 수 있다는 겁니다.
훌륭하죠.
그러면 번개 이미지를 선택하고 스테이지로 드래그합니다.
이때 가져오기 대화 상자가 열립니다.
기본값인 병합 비트맵 이미지로 가져올지, 이 상자를 클릭해 심볼 안에 넣을지를 선택해야 합니다.
동영상 클립 만들기를 선택하고 확인을 누릅니다.
좋습니다.
이제 동영상 클립 심볼 안에 포함된 이 번개 이미지가 스테이지에 표시되고 스테이지에는 배경이라는 새 레이어가 생겼습니다.
이 레이어가 배경인 이유는 Photoshop에서 이 레이어를 CC Libraries로 드래그했을 때 배경 레이어였기 때문인데요.
이름을 바꿔보죠.
두 번 클릭하고 Lightning으로 입력합니다.
그런 다음 boat 레이어 아래, sky 레이어 위로 드래그합니다.
하지만 이렇게 하면 이 레이어는 안내선의 영향을 받아 종속되죠.
이 레이어는 안내선의 일부가 아니므로 제가 의도하는 게 아닙니다.
따라서 마우스 오른쪽 버튼으로 클릭하고 속성을 선택한 다음 안내선에서 일반 레이어로 변경하고 확인을 누릅니다.
이제 더 이상 안내선이 아니라 일반 레이어가 되었습니다.
다른 방법으로 이 레이어를 sky 레이어 아래로 드래그한 다음 sky 레이어를 lightning 레이어 아래로 드래그해도 됩니다.
스테이지에서 번개 이미지를 클릭하고 정렬 패널을 열거나 Command + K를 누르고 스테이지로 정렬 상자에 체크 표시한 다음 여기에 있는 가로 가운데 정렬과 세로 가운데 정렬을 클릭합니다.
다음으로 라이브러리로 이동합니다.
여기를 보면 이 에셋을 CC Libraries에서 가져올 때 생성된 Background.psd Asset 폴더가 있고 Background라는 비트맵, 그리고 Background라는 새 심볼이 있는데요.
구분을 쉽게 하기 위해 Lightning으로 변경합니다.
이제 번개 효과를 만들 준비가 되었습니다.
먼저 첫 번째 키프레임을 드래그하겠습니다.
번개는 45프레임이나 2초 지점까지 시작하지 않으므로 키프레임을 이 지점까지 드래그합니다.
프레임 1에 빈 키프레임이 있고 타임라인을 따라가다가 프레임 45쯤에서 번개가 칩니다.
이제 섬광 효과를 추가해보겠습니다.
번개가 치면 흰 섬광이 뒤따라 나타나게 해보죠.
세 프레임쯤 뒤로 가서 마우스 오른쪽 버튼으로 클릭하고 키프레임 삽입을 선택합니다.
스테이지에 있는 인스턴스를 클릭해서 속성을 업데이트하고 색상 효과 섹션으로 가서 여기를 클릭하고 농도 색상을 흰색 100%로 변경합니다.
이렇게 하면 농도 효과를 직접 확인할 수 있는데요.
색상과 농도 비율을 추가할 수 있죠.
색상 효과는 캔버스 파일과 잘 어울리지 않기 때문에 가급적 사용하지 않는 것이 좋지만 흰색과 알파 투명도는 예외입니다.
이제 흰색이 적용되어 있죠.
두 프레임 동안 흰색이 이렇게 표시됩니다.
그런 다음 세 번째 프레임에 키프레임을 하나 더 추가합니다.
이번에는 마우스 오른쪽 버튼을 클릭하지 않고 새로운 키프레임 삽입 아이콘을 클릭합니다.
그러면 키프레임이 추가됩니다.
이 키프레임을 클릭하고 스테이지에 있는 인스턴스를 클릭하는 대신 새 속성 패널에 있는 개체 속성에서 농도를 없음으로 변경하여 번개가 다시 표시되도록 합니다.
번개가 치고 흰색 섬광이 나타나고 다시 번개가 칩니다.
번개를 조금 더 유기적으로 표현하고 싶은데요.
새로운 번개를 만들어 새 비트맵을 가져오고 싶지는 않고 기존에 만들어 놓은 번개를 변형해도 좋을 것 같습니다.
스테이지에서 번개를 마우스 오른쪽 버튼을 클릭하고 변형, 수평 뒤집기를 차례로 선택합니다.
그러면 번개가 다르게 표시되죠.
그런 다음 바로 다음 프레임에 키프레임을 하나 더 추가하여 번개 타이밍에 변화를 줍니다.
키프레임을 삽입하고 이번에는 개체 패널에서 농도를 다시 흰색으로 변경합니다.
이제 두 프레임은 번개, 두 프레임은 흰색 섬광, 그런 다음 한 프레임은 번개, 또 한 프레임은 흰색 섬광으로 구성됩니다.
여기를 마우스 오른쪽 버튼으로 클릭하여 빈 키프레임 삽입을 선택합니다.
이제 결과를 확인해보죠.
재생 버튼을 클릭하고 재생되는지 살핍니다.
나쁘지 않아요.
진짜 번개처럼 보이네요.
좋아요.
섬광을 하나 더 추가해보죠.
이번엔 섬광을 조금 더 길게 적용하겠습니다.
두 번 섬광이 나타난 다음 멈춥니다.
아마 이 지점에 키프레임을 추가해야겠죠.
이 경우 앞서 만든 키프레임을 선택합니다.
이 두 프레임을 선택하고 번개부터 흰색 섬광까지 네 개 프레임을 모두 선택해 클릭한 다음 Option 키를 누른 상태에서 이 번개를 클릭하여 프레임 75 정도까지 드래그합니다.
하지만 약간 다른 번개를 만들어야 하므로 번개 이미지를 클릭하고 스테이지에서 마우스 오른쪽 버튼으로 클릭하고 변형을 선택합니다.
이번에는 수직 뒤집기를 선택합니다.
이제 세 개의 다른 번개가 있는 것처럼 보입니다.
첫 번개 지점, 두 번째는 이 지점에서 치고 첫 번개와 다르죠.
세 번째 번개는 여깁니다.
재생해서 확인해보죠.
좋습니다.
번개가 한 프레임 더 길게 나타나면 유기적인 효과를 만들어낼 수 있을 것 같습니다.
이 번개는 두 프레임 동안 치고 그런 다음 이 지점에서 한 프레임 동안만 다시 칩니다.
이 번개는 세 프레임 동안 지속되게 만들어보죠.
커서를 타임라인 상단에 놓고 F5를 눌러 프레임을 삽입합니다.
이제 번개가 세 프레임 동안 지속되다가 흰색 섬광이 나타납니다.
결과를 확인해보죠.
훌륭합니다.
번개의 타이밍은 모두 다릅니다.
하늘에 길게 남아 있거나 빠르게 나타났다 사라지기도 하죠.
이제 의도한 대로 번개가 완성되었습니다.
한 가지가 더 남았습니다.
번개가 치기 전에 하늘이 어두워지는 모습을 만들어 보죠.
이를 위해 하늘 배경을 클릭합니다.
스테이지에서 클릭하면 비트맵으로 되어 있는데요.
이것을 심볼로 변환합니다.
스테이지의 하늘을 선택하고 수정 메뉴에서 심볼로 변환을 선택하고 Sky로 입력한 다음 확인을 누릅니다. sky 이름이 이미 사용되었다고 하면 이름에 대시를 추가합니다.
따라서 Sky 하나는 비트맵이고 또 하나는 심볼입니다.
확인을 누릅니다.
이제 하늘이 심볼로 변환되었으므로 색상 효과를 사용할 수 있습니다.
번개 치기 약 1초 전 지점이 좋을 것 같아요.
여기를 클릭하고 키프레임을 추가합니다.
이번에도 새 키프레임 버튼을 눌러 키프레임을 삽입합니다.
한 번의 클릭으로 키프레임을 추가할 수 있죠.
이제 타임라인을 따라 가다가 약 이 지점에 키프레임을 하나 더 추가하겠습니다.
두 키프레임 사이를 마우스 오른쪽 버튼으로 클릭하고 표준 트윈 만들기를 선택합니다.
그런 다음 농도를 변경하겠습니다.
농도를 변경하여 진한 회색으로 바꾸고 붙투명도를 낮춥니다.
유일한 단점은 캔버스 파일에 효과적이지 않다는 것입니다.
하지만 해결책은 있습니다.
바로 알파로 사용하면 되는데요.
하늘의 불투명도를 낮춥니다.
이러면 하늘이 밝아지게 되는데 우리가 원하는 게 아니죠.
하지만 하늘의 가시성을 끄면 흰색 배경이 표시됩니다.
그러면 이 배경을 더 어둡게 만들어보겠습니다.
수정 메뉴에서 문서를 선택하고 스테이지 색상을 진한 회색으로 변경한 다음 확인을 누릅니다.
이제 하늘의 가시성을 다시 켜고 알파 투명도를 낮추면 흰색이 사라지고 진한 회색 배경이 나타납니다.
이것을 조금 더 어둡게 만들어보죠.
좋습니다.
이제 어둡게 변하는 하늘이 완성되었습니다.
마치 구름이 모여드는 것처럼 보이다가 번개가 칩니다.
다시 앞에서 친 번개를 반복합니다.
번개가 치죠.
그리고 이 지점에서 하늘이 다시 밝아지게 하기 위해 sky 레이어를 선택한 상태에서 키프레임을 추가합니다.
타임라인을 따라가다가 여기에 키프레임을 하나 더 추가합니다.
두 키프레임 사이를 오른쪽 마우스 버튼으로 클릭하고 표준 트윈을 추가합니다.
그런 다음 두 번째 키프레임의 경우 개체 패널에서 알파에서 없음으로 변경합니다.
이제 맑은 하늘에서 어두운 하늘로 바뀌고 번개가 치고, 두 번째 번개가 치죠.
동영상을 테스트하여 확인해 보겠습니다.
그런데, 문제가 생겼습니다.
아시겠지만 흰색 섬광이 전혀 나타나지 않았는데요.
HTML5 캔버스로 내보내면 색상 효과가 제대로 지원되지 않기 때문입니다.
이 문제를 해결하는 한 가지 방법은 라이브러리에서 이 번개를 복제합니다.
Lightning copy라고 입력하고 속성 패널에서 이 심볼을 바꾸면 심볼을 번개 복사본으로 바꿀 수 있습니다.
다시 여기를 클릭하고 이 심볼을 여기에 있는 번개 복사본으로 바꿉니다.
그런 다음 스테이지에서 이쪽을 클릭하고 심볼을 번개 복사본으로 바꿉니다.
이제 Command+ Return을 눌러 확인합니다.
바로 이겁니다.
두 개의 인스턴스를 사용하여 이 문제를 해결했습니다.
다음 영상에서는 사운드를 추가하는 방법을 살펴보죠.
다음 시간에 다시 뵙겠습니다.
