애니메이션 픽셀 아트 코인을 만드는 방법

동전 그리기

우리는 16x16 픽셀 크기로 동전을 만들 것 입니다. 이것은 오래된 픽셀 아트 게임의 표준이었습니다. 그리기 시작하자.

1 단계

Adobe Photoshop에서는 16x16px 보다 큰 새 파일을 만들어 작업 할 수있는 충분한 공간을 제공합니다 . 400x300 픽셀을 예로 들어 보겠습니다 .

500 % 이상 확대하십시오 (100 %의 배수로 설정하는 것이 바람직 함). 우리는 매우 긴밀하게 작업 할 것입니다. 진행 상황을 확인합니다. 동일한 파일에 대해 새 창 ([창]> [정렬]> [새 창] ...) 을 열고 축소하거나 다시 창 대신 창간에 전환 할 수 있습니다.

페더 링 이나 앤티 앨리어싱 없이 타원형 마키 도구를 사용하여 원을 그립니다 .

이러한 설정을 사용하여 16x16 픽셀을 선택하십시오 .

2 단계

페인트 통 도구로 원하는 검정색 또는 매우 어두운 그늘로 선택 물을 채 웁니다 . 선택 (선택> 수정> 계약) 을 1 px 씩 계약 하고 결과를 삭제하십시오. 당신은 원형 개요를 얻습니다!

3 단계

내부 원에 대해 위의 단계를 반복하여 바깥 쪽 원과 접촉하는 것을 부끄러워하지 마십시오 . 이 경우 14x14 픽셀 입니다.

그 결과로 생긴 원이 너무 작아 보였기 때문에 편집했습니다.

4 단계

실제 픽셀 별 작업의 경우 연필 도구 를 사용하여 1 픽셀 크기 및 일반 모드로 설정 합니다.

그것으로 우리는 동전의 중간에 모양을 그릴 것입니다. 우리는 실제로 작업 할 12x12 픽셀 밖에 가지고 있지 않으므로 모양이 너무 복잡 할 수 없습니다. 특히 우리가 구호 효과를 줄 수있을만큼 매우 두툼하게 만들려고하기 때문에. 나는 더하기 기호를 선택했다.

5 단계

새로운 색상 (눈에 띄는 색상은 현재는 효과가 있습니다)을 사용하여 구호 효과를 강조 표시합니다. 일반적으로 빛은 위쪽에서부터 나오며 일반적으로 왼쪽에서 오는 빛을 선호하므로 기호가 위쪽 및 왼쪽 가장자리에서이 음영을 얻습니다.

6 단계

릴리프 효과의 어두운 가장자리를 검정색으로 유지하고 지우개 도구 ( 연필 모드로 설정)로 모든 픽셀을 간단하게 제거합니다 .

나는 또한 충돌 한 모든 픽셀을 지웠다. 빛과 어두움이 만나는 모퉁이.

7 단계

동전의 내부 원과 비슷한 효과를 내자. 그러나 이것은 역 효과를 가지므로 빛이 아래쪽과 오른쪽 가장자리에 부딪칩니다.

추가 각도 만들기

우리는 4 개의 각도로 그려서 동전을 회전시킬 것입니다. 우리가 이미 가지고있는 것 : 정면도. 우리는 또한 가장자리에보기가 필요하고 그 둘 사이에는 두 가지 더보기가 필요합니다.

1 단계

정면 동전의 사본을 확인하고 스케일 (수평으로 무료 변환> 편집 으로) 보간 으로 설정 가장 가까운 이웃 약 70 %. 이것은 정면보기를 따르는 프레임입니다.

2 단계

그 뒤를 따르는 프레임은 더 좁아 져야합니다. 그러면 원래 정면보기 코인과 스케일의 사본 을 약 35 % 만들 것입니다.

3 단계

그리고 이것들은 두 개의 새로운 관점이 될 것입니다, 우리는 그것들을 프레임 2와 프레임 3이라고 부를 수 있습니다.

스케일링에서 세부 사항이 많이 손실되었지만이를 다시 가져오고 아웃 라인 복원을 시작합니다.

나는 동전의 내부 선들 중 몇 개를 분리하여 보관할 수 있도록 여분의 너비를 조금 더 넓게 주었다. 여기에 약간의 기술적 인 지식이 필요하기 때문에 모션을 향상시킬 수 있습니다. 동전은 정면에서 60도 회전 한 후에 1/3 좁게 보이지 않아야합니다. 분명히 얼마나 좁 았는지 정확히 알 수는 없지만 한 단계 씩 진행해야합니다.

4 단계

우리의 윤곽선이 그려지면서 우리는 동전에 대한 추가 차원을 보여주기 시작할 수 있습니다. 약간 움푹 패인 동전이 필요합니다. 가장자리에보기에도 명백하게 볼 수있는 동전이 필요합니다. 프레임 2의 경우에는 가장자리가 거의 나타나지 않으므로 오른쪽의 개요를 1 픽셀 씩 확장합니다 . 프레임 3의 경우 가장자리에 2 픽셀을 추가로 제공합니다 .

5 단계

우리에게는 세 개의 프레임이 있지만 한 개 더 필요합니다. 다행히도, 가장 쉬운 방법입니다!

그것은 에지에보기 그리고 그것만으로 직사각형 있어야 2 픽셀 내부 폭 (단지 내부 픽셀 폭을 도시한다.)

프레임에 색상 및 디테일 추가

기술 부분은 꽤 많이 끝났습니다. 예술적인 부분으로 넘어 갑시다.

1 단계

우리 동전의 색을 고르자. 전통적인 선택 : 금.

40도 색조가 너무 노란색이 아니며 너무 주황색이 아닙니다. 제 취향에 맞습니다. 그것의 채도는 100 %가 아니기 때문에 더 어두워지며 빛나기를 원합니다.

여기에서는 동전 안쪽에 적용됩니다.

2 단계

하이라이트를 위해 금색의 밝은 그늘이 필요합니다. 그 색상이 이미 100 % 밝기를 가지기 때문에 더 밝게 만드는 유일한 방법은 채도를 낮추는 것입니다. 또한 색조를 5˚와 같이 약간 더 연하게 만들 수 있습니다.

한 번의 클릭으로 이전 색상을 대체하려면 페인트 버킷 을 연속으로 선택하지 마십시오 .

3 단계

검은 색은 짙은 금색 음영으로 바뀝니다. 조금 더 채도가 낮고 밝기가 조금 적다.

외곽선을 그대로 남기려면 동전이 들어있는 레이어를 명령 클릭 하여 모든 내용과 일치하는 선택 항목을 제공 한 다음 선택 항목 ( 선택> 수정> 계약 ... )을 1 픽셀 씩 축소합니다 . 그런 다음 페인트 통을 사용 하여 색상을 적용하면 윤곽선이 선택 영역 밖에 있고 변경되지 않습니다.

4 단계

이제는 프레임 2와 프레임 3을 고치는 좋은시기입니다. 그들은 동전의 얼굴에 약간의 엉망이있었습니다.

프레임 2의 경우 정면보기 동전에서 동일한 세부 정보를 정리하고 거의 복사 할 수 있습니다. 단 수평 적으로 공간을 적게 차지합니다.

5 단계

프레임 3의 경우 동일한 작업을 수행 할 수 없으며 많은 세부 사항을위한 충분한 공간이 없지만 여전히 정리할 수 있습니다.

그리고 우리는 내부 원 테두리를 보여줄 수 있고 중간에 사인의 세부 사항을 암시 할 수 있습니다.

6 단계

이제 업데이트 된 라인업을 다시 작업하십시오. 우리는 가장자리에 자체 쉐이딩을 제공 할 것입니다. 가장자리가 세 프레임에 표시되므로 세 프레임에도 똑같이 적용되어야합니다. 제가 사용하고있는 색상은 위쪽, 밝은 영역의 주된 금색 색과 낮은 영역의 어두운 색조입니다.

그리고 나는 더 어두운 그늘 하나를 더하고 있습니다. 가장자리의 아래쪽 몇 픽셀 만 보아요.

7 단계

그건 동전의 네 가지 견해에 관한 우리의 작업을 끝내는 것입니다. 완전히 스핀하려면 프레임 2와 프레임 3 만 가져 와서 복제 하고 수평으로 뒤집 습니다 ( 편집> 변형> 수평 뒤집기 ).

이것은 우리에게 반복을줍니다. 프레임 2는 프레임 5가되고 그 후에 우리는 정면으로 돌아가서 전체 애니메이션을 만듭니다 (반대쪽에 동전이 다른 디자인을 가지기를 원하지 않는 한, 프레임과 비트를 두 배로해야합니다). 추가 작업.)

8 단계

우리는 동전의 반대쪽에 다른 디자인을하지는 않겠지 만 우리는 여전히 세부 사항을 다루어야합니다. 프레임을 뒤집 으면 이렇게 신중하게, 다른 프레임과 일치하지 동전의 얼굴에 음영을 만들어 선택 프레임 5 뺀 가장자리와 윤곽에 동전의 얼굴을하고 플립 그 수평. 프레임 6에 대해서도 반복하십시오.

9 단계

동전에 대한 작업을 마치기 위해 우리는 일종의 반짝이는 효과를 추가하려고 할 수 있습니다. 이를 수행하는 방법은 여러 가지가 있지만 동전의 가독성과 단순성에 영향을 미칠 수 있으므로 미묘한 음영을 선택하여 프레임 3에서 동전의 표면을 약간 가볍게 만들고 프레임 5에서 더 밝게 만듭니다. 프레임 3의 경우 빛을 확대했습니다 몇 픽셀 씩 음영 처리하고 어두운 픽셀을 몇 픽셀 씩 축소합니다. 프레임 5의 경우 얼굴의 각 색상을 다음 어두운 음영으로 바 꾸었습니다.

프레임 애니메이션 만들기

프레임을 완성했습니다. 우리 동전은 회전 할 준비가되었습니다!

1 단계

투명한 배경과 16x16 픽셀 크기 로 새 파일 을 만듭니다 . 여기에서는 정면도에서 프레임 6까지 프레임을 하나씩 붙여 넣습니다.

타임 라인 ( 윈도우> 타임 라인 )을 열고 중간에있는 버튼을 프레임 애니메이션 만들기로 설정하십시오 .

2 단계

그런 다음 Create Frame Animation 버튼을 누릅니다.

패널의 오른쪽 위에있는 버튼을 클릭하고 그 메뉴 에서 레이어로 프레임 만들기를 선택하십시오 .

3 단계

이어서 설정된 반복 옵션 에 영원히 모든 프레임들에게 제공 0.1 ( 또는 0.2 ) 초 지연.

놀이를 누르고 영원히 당신의 작은 동전 회전을보십시오!

4 단계

움직이는 동전을 볼 때 눈에 띄는 픽셀이 있습니까? 잘못된 방향으로 움직이는 것처럼 보이나요? 이제 최종 수정 작업을 할 때입니다.

얼굴의 음영을 깨끗이 정리했습니다.

그리고 이제 동전이 완료되었습니다!

게임에서 프레임을 사용하거나 애니메이션 파일을 GIF로 내보낼 준비가되었습니다. 아주 작을거야. 그러나 이미지 크기 ( 이미지> 이미지 크기 )를 300 % 이상 (100 %의 배수 )으로 변경하면 이미지 를 가장 가까운 이웃으로 설정 한 다음 내보낼 수 있습니다. 그럼 당신의 창조물을 즐기고 그것을 보여!

잠금 해제 업적!

신난다, 당신은 살아 움직이는듯한 동전을 완성했다! 이제 게임 캐릭터가 포인트를 획득 할 수 있습니다.

이것이 첫 번째 픽셀 아트인지, 첫 번째 애니메이션인지, 아니면 그래픽 라이브러리를 확장하는 데 도움이되었는지, 나는 그것이 사용되기를 희망합니다.

행복한 pixeling!