YouTube 비디오 자습서

게임 시작 화면용 애니메이션 복고풍 픽셀 아트

26,401

babeoded

소개

안녕하세요! 제 이름은 히라 카르마첼라입니다. 이번 기회에 Clip Studio Paint를 사용하여 게임 시작 화면용 애니메이션 복고풍 픽셀 아트를 만든 경험을 공유합니다.

이 게시물이 CSP를 사용하여 픽셀 아트와 복고풍 디자인을 만들고자 하는 분들에게 흥미로운 팁이 되기를 바랍니다.

레트로 디자인 소개

레트로는 70~90년대 유행하는 디자인 스타일입니다. 레트로는 오래 전부터 알려진 빈티지 스타일과 다릅니다. 레트로 스타일은 그 시대에 현대적이고 심지어 미래적인 느낌을 줍니다. 레트로의 독특한 특징은 네온 컬러라고도 불리는 보다 반짝이는 컬러의 선택에서 확인할 수 있습니다. 디스코, 파티, 스포티한 라이프스타일의 부상과 함께 시대에 발전된 레트로 디자인 스타일.

같은 시대에 비디오 게임은 픽셀 아트로 알려진 저해상도 그래픽으로 개발되었습니다. 이것은 레트로 스타일로 픽셀 아트를 만드는 방법에 대한 팁을 만드는 데 흥미가 있습니다.

픽셀 아트를 위한 캔버스 설정

시작하자! CLIP STUDIO PAINT를 열고 새 캔버스를 만듭니다. 우리가 만들 최종 작업은 1280px x 720px이지만 픽셀 아트를 만들려면 해당 크기의 10%만 생성하면 됩니다. 따라서 필요한 캔버스 크기는 128x72픽셀입니다.

다음으로, 픽셀을 더 쉽게 그릴 수 있도록 그리드를 설정해야 합니다. 보기 > 그리드로 이동합니다.

이제 캔버스에서 볼 수 있습니다. 그러나 여전히 그리드 크기를 조정해야 합니다. 보기 > 격자/눈금자 설정으로 이동합니다. 원점을 중심으로 하고 Gap(D)과 Number of divisions을 1로 설정합니다.

레트로 색 구성표

픽셀 컴파일을 시작하기 전에. 먼저 레트로 스타일에 맞는 색상 팔레트를 만들어야 합니다. 팔레트로 만들 새 레이어를 만들고 레이어 이름을 "레트로 팔레트"로 지정합니다.

그런 다음 도구 상자에서 전경색을 두 번 클릭하여 색상 설정을 엽니다. 우리가 만들 첫 번째 색상은 "Hot Pink"입니다. HEX 필드에 코드 "ff69b4"를 입력합니다. 그런 다음 캔버스에 브러시를 칠합니다.

아래는 우리가 필요로 하는 레트로 팔레트의 색상입니다.

나머지는 여전히 표준 팔레트 패널에서 사용할 수 있는 흑백이 필요합니다.

픽셀 아트를 위한 도구 설정

확인! 특별한 설정으로 픽셀 아트를 만드는 데 사용할 수 있는 몇 가지 도구가 있습니다. 첫 번째 도구인 선, 곡선 및 모양 도구와 같은 "도형 도구"를 사용하여 정확한 픽셀 개체를 만들 수 있습니다.

그림 도구를 사용하여 픽셀 아트를 만들려면 앤티 앨리어싱 기능을 꺼야 합니다. 앤티 앨리어싱은 디지털 이미지 개체 주변의 샘플 픽셀 색상을 추가하고 조작하여 디지털 이미지 개체의 가장자리를 매끄럽게 만드는 기능입니다.

물론 앤티 앨리어싱을 사용하면 픽셀 아트가 좋아 보이지 않습니다. 따라서 왼쪽의 도구 속성 패널에서 이 기능을 비활성화해야 합니다. 앤티 앨리어싱 섹션에는 여러 수준이 있으며 "없음"을 선택합니다.

두 번째 도구는 "펜 도구"와 하위 도구 마커 및 도트 펜 유형을 사용할 수 있습니다. 이 유형의 펜은 1px 두께의 선 그리기를 생성하므로 유기적 픽셀 개체를 쉽게 만들 수 있습니다.

세 번째 도구는 "채우기 도구"를 사용하여 픽셀 필드를 쉽게 채울 수 있습니다. 다른 레이어를 참조하더라도 겹치는 필드를 채울 수 있도록 다른 레이어 참조 유형을 선택합니다. 그런 다음 도구 속성에서 영역 크기 조정을 선택 취소합니다. 이 기능은 픽셀 개체에 노이즈를 생성하는 앤티 앨리어싱과 거의 유사합니다.

네 번째 도구는 물론 작업에서 불필요한 픽셀을 지우는 "지우개 도구"가 필요합니다. 흔적을 남기지 않고 픽셀을 지우려면 벡터 유형을 선택하십시오.

확인! 나머지는 필요에 따라 다른 도구를 사용할 수 있습니다.

레트로 배경

이제 픽셀 잔치를 합시다. 우리는 우리가 만들 스플래시 화면의 배경을 물론 복고풍 스타일로 만드는 것으로 시작합니다.

1px 두께의 선으로 캔버스를 하늘과 땅을 나누는 수평선으로 나눕니다.

다음으로 "스포이드 도구"를 사용하여 이전에 만든 레이어 팔레트에서 색상을 가져옵니다. 하늘은 자수정 색으로, 땅은 카마인으로 채웠습니다.

이제 새 레이어를 만들고 유명한 복고풍 디자인의 전형인 일몰 개체를 만들 것입니다. 타원 모양 도구를 사용하여 모양이 비례하도록 키보드의 "Shift" 키를 누른 상태에서 원을 만듭니다.

지우개 도구를 사용하여 석양에 줄무늬를 만듭니다. 저처럼 패턴을 따라하시면 됩니다.

이제 새 레이어를 다시 만들고 배경을 산 실루엣 이미지로 장식합니다. 검은색 선 도구를 사용하여 일몰 이미지의 오른쪽과 왼쪽에 산을 그립니다.

산을 검은색으로 채운 다음 레이어 불투명도를 50%로 변경합니다.

새 레이어를 만들고 일몰 앞 건물의 실루엣 이미지를 추가합니다. 이번에는 도트 펜을 사용합니다.

몇 개의 다채로운 픽셀을 조명으로 사용하여 건물의 이미지를 장식합니다.

이제 지면 영역으로 이동하여 새 레이어를 만들어 지면 위에 메쉬를 만듭니다. 이번에도 Turquoise Blue 색상의 선 도구를 사용하여 정확한 디자인을 만듭니다.

원근감을 위해 한 점에 대각선으로 놓인 선을 그립니다.

이 레이어를 복사한 다음 편집 > 변형 > 수평 뒤집기로 이동합니다. 캔버스에서 대칭이 되도록 메쉬를 배치합니다. 그런 다음 메쉬 레이어와 복사본을 선택하고 레이어 > 선택한 레이어 병합으로 이동합니다.

이제 메쉬 이미지를 생성하기 위해 만들어진 대각선을 가로질러 수평선을 만듭니다.

복고풍 거리 환경

다음으로 환경에 대한 개체를 만듭니다. 레트로한 거리 분위기를 연출해 드립니다. 간단합니다. 도로의 왼쪽과 오른쪽 어깨에 도로 표시와 야자수 줄을 만들 것입니다.

환경 개체의 레이어를 수집할 레이어 폴더를 만듭니다. 새 레이어를 만들어 경로를 만듭니다.

이제 이미지에서 경로를 형성하는 모양의 교차점을 Electric Yellow로 채웁니다. 레이어 불투명도를 50%로 변경합니다.

새 레이어를 만들어 도로 표시를 만듭니다. 선 도구를 사용하여 흰색 도로 표시를 만듭니다.

다음으로 야자수를 만들기 위해 또 다른 새 레이어를 만듭니다. 도트 펜 도구를 사용하여 만듭니다. 좌우 대칭이 되도록 합니다.

레트로 자동차 개체

확인! 이제 메인 모델을 생성할 차례입니다. 레트로 자동차 개체에 대한 새 레이어를 만듭니다. 도트 펜을 사용하여 그립니다.

자동차 레이어 위에 새 레이어를 만들고 검정색을 사용하여 자동차 모델 표면에 그림자를 만듭니다. 레이어 불투명도를 50%로 변경합니다. 그런 다음 레이어를 자동차 레이어와 병합합니다.

보완으로 새 레이어의 차 아래에 그림자를 만듭니다. 레이어 불투명도를 50%로 변경합니다.

애니메이션 프로세스

이제 장면에 생명을 불어넣을 때입니다. 애니메이션을 적용할 두 부분, 즉 거리 환경과 건물의 조명이 있습니다.

이를 위해 타임라인 패널을 준비합니다. 창 > 체크 표시 타임라인으로 이동합니다. 화면 하단에 타임라인 패널이 나타납니다.

타임라인 패널에서 새 타임라인을 클릭합니다. 그러면 새로운 타임라인 설정이 나타나며 타임라인 이름을 입력합니다. 프레임 속도와 재생 시간을 24로 설정합니다. 장면과 샷은 1번, 분할선은 6번으로 설정합니다. 그런 다음 이미지 보간을 Hard Edges로 변경합니다.

애니메이션을 만들려면 애니메이션 셀에 연결될 특수 레이어가 포함된 애니메이션 폴더가 필요합니다.

이를 위해 새 애니메이션 폴더를 클릭합니다. 그러면 레이어 패널의 상단에 애니메이션 폴더가 나타납니다. 폴더 이름을 "애니메이션"으로 바꿉니다. 현재 애니메이션 폴더는 비어 있습니다. 컴파일하고 애니메이션 셀이 되도록 만든 모델을 처리해야 합니다.

레트로 자동차에서 배경 레이어까지 모든 모델 레이어를 선택합니다. 레이어 팔레트를 제외하고 맨 아래에 저장할 수 있습니다. 그런 다음 레이어 > 폴더 만들기로 이동하고 레이어를 삽입합니다. 그러면 선택한 모든 레이어가 하나의 폴더에 수집됩니다. 폴더 이름을 "Compilation"으로 바꿉니다.

Compilation 폴더를 복사하고 복사 폴더의 이름을 "cel_01"로 바꿉니다. 그런 다음 레이어> 레이어 변환(H)으로 이동하여 cel_01 폴더가 단위 레이어로 변경됩니다. cel_01 레이어를 Animation 폴더로 드래그합니다.

타임라인 패널에서 선택한 각 프레임에 대해 빨간색으로 표시된 프레임 번호 1을 선택한 다음 셀 지정을 클릭합니다. 셀에 연결할 레이어를 선택하라는 메시지가 표시됩니다. cel_01을 선택합니다.

다음 셀을 만들려면 같은 작업을 수행합니다. Compilation 폴더를 복사한 다음 복사본의 이름을 "cel_02"로 바꿉니다. 단위 레이어로 변환되기 전. 모션의 환상을 만들기 위해 이 폴더의 일부 모델을 변환해야 합니다.

이제 cel_02 폴더에서 도로 표시 레이어를 선택합니다. 도로 마커가 캔버스 아래쪽을 향해 전진하는 것처럼 보이도록 이미지를 편집할 것입니다. 특정 부분의 픽셀을 삭제하거나 추가하기만 하면 됩니다.

도로 표시가 이동함에 따라 야자수도 캔버스 아래쪽으로 이동해야 합니다. 논리적인 관점에서 볼 때 뷰에 접근하는 개체는 더 크게 보입니다. 따라서 이동함에 따라 야자수를 확장해야 했습니다.

야자수 레이어를 선택한 다음 편집 > 변형 > 자유 변형으로 이동합니다. 왼쪽의 도구 속성에서 보간 방법 설정을 단단한 가장자리로 변경하여 크기 조정으로 인해 픽셀 노이즈가 발생하지 않도록 합니다.

이제 건물 레이어를 선택하고 조명이 깜박이는 것처럼 보이도록 조명 장식을 변경합니다.

다음으로 cel_02 폴더를 선택합니다. 레이어 > 레이어 변환(H)으로 이동합니다. cel_02 레이어를 Animation 폴더로 드래그합니다. 타임라인에서 프레임 번호 3을 선택한 다음 셀 지정을 클릭합니다. cel_02를 선택합니다. 이 애니메이션에서는 24개의 재생 시간 동안 2프레임마다 셀을 설정합니다.

타임라인에서 프레임 번호 3을 선택한 다음 셀 지정을 클릭합니다. cel_02를 선택합니다.

이 애니메이션에서는 24개의 재생 시간 동안 2프레임마다 셀을 설정합니다.

다음 셀에 대해 연속 변환을 변경하여 동일한 작업을 수행하여 모션 환상을 생성하도록 하십시오.