콘텐츠
- 1. 투명성
- 2. 개요
- 3. 먼저 머리
- 4. 올드 스쿨
- 5. 음영
- 6. 8 비트 효과
- 7. 조정
- 8. 세부 사항
- 9. 신체 부위
- 10. 사지 레이어
- 11. 광택 추가
- 12. 시작 위치
- 13. 그룹 레이어
- 14. 모션
- 15. 위치 추가
- 16. PNG 내보내기
- 17. 프레임 정렬
- 18. 스타일 추가
- 19. 키 프레임
- 20. 러프 업
- 21. 지상 작업
- 22. 애니메이션
- 23. 시차
- 24. 하늘의 한계
- 25. 테스트 시간
- 26. 소유권 증서
- 27. 생명을 불어 넣다
- 28. 다음 단계
- 필요한 지식: 그래픽 편집, CSS, 기본 HTML
- 필요: CSS3 가능 브라우저 (Safari, Chrome, Firefox, IE10 +), Photoshop 또는 기타 이미지 편집기
- 프로젝트 시간: 6 시간
- 소스 파일 다운로드
이 기사는 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지 인 .net 잡지 229 호에 처음 게재되었습니다.
웹 디자이너가 새로운 CSS3 기능을 이해하는 동안 웹 디자인은 많은 새로운 기술이 발견되고 개발되기를 기다리고있는 미지의 영역이되었습니다. 초안 사양의 가장 흥미로운 측면 중 하나는 스크립팅없이 애니메이션을 적용 할 수 있다는 것입니다. 이것은 엄청난 기회를 제공하지만 여전히 좋은 구식 사전 렌더링 그래픽을위한 장소가 있습니다. 실제로 페이지로드 시간을 줄이는 일반적인 기술인 CSS 스프라이트는 원래 의미에 가까운 것으로 회귀하여 정교한 플립 북 스타일 애니메이션을 만드는 데 사용할 수 있습니다.
- Creative Bloq에서이 Photoshop CS6 리뷰를 확인하는 것을 잊지 마십시오.
이 용어에 익숙하지 않은 경우 스프라이트는 단일 외부 파일에 저장된 그래픽 집합을 나타냅니다. 많은 대형 웹 사이트는 하나의 배경 이미지를 사용하여 모든 그래픽을로드하고 background-position CSS 속성을 사용하여 각 그래픽을 올바른 위치에 배치합니다. 스프라이트라는 용어는 8 비트 게임에서 유래했으며 그래픽이로드되어 게임 내에서 애니메이션을 표시하는 데 사용되는 방식을 나타냅니다. 이 튜토리얼에서는 선구적인 게임 디자이너와 동일한 접근 방식을 사용하여 복고풍에서 영감을 얻은 캐릭터를 만들고 6 가지 캐릭터 위치가있는 스프라이트를 사용하여 그를 애니메이션화합니다.
서로 다른 위치를 전환하여 움직이는 느낌을 만들고 캐릭터에 애니메이션을 적용합니다. 마지막으로 적절한 시차 스크롤링이 포함 된 영구 애니메이션 배경에 그를 배치합니다. 이 모든 작업은 이미지 편집기 (Photoshop을 사용했지만 모든 비트 맵 편집기에서 사용)와 CSS 만 사용하여 수행 할 것입니다. 스크립팅이 필요하지 않습니다.
1. 투명성
Photoshop 또는 기타 이미지 편집기에서 문서를 만듭니다. 똑바로 서있는 캐릭터에 맞게 너비보다 더 크게 만듭니다. 높이 300px, 너비 200px를 선택했습니다. 문서의 배경이 투명한지 확인하세요. 나중에 캐릭터 뒤를 확인해야합니다.
2. 개요
각 신체 부위를 다른 레이어로 분리하여 캐릭터의 기본 윤곽선을 스케치하십시오. 세부 사항에 대해 걱정하지 마십시오. 먼저 종이에 초안을 찍거나 이미지를 스캔하여 가이드로 사용하거나 기본 몸체를 형성하기 위해 회전하는 채워진 타원형으로 시작하여 자신의 길을 느껴보십시오.
3. 먼저 머리
머리부터 시작하십시오. 여기에서 닌자 캐릭터를 선택 했으므로 검은 색 타원이 캐릭터의 머리처럼 작동합니다. 올가미 도구로 그리고 살색으로 채워서 눈 슬릿을 추가합니다. 눈알, 동공을 추가하고 조명을 받아 생생하게 보이게합니다.
4. 올드 스쿨
우리는 복고풍 느낌을 원하므로 완벽한 그라디언트와 부드러운 전환에 대해 너무 걱정하지 마십시오. 연필 도구를 선택하고 의도적으로 디자인 내의 각 요소에 픽셀 화 효과를 추가 할 수도 있습니다. 가장 효과가 있다고 느끼는 일을하십시오.
5. 음영
간단한 음영을 사용하여 캐릭터가 더 3D로 보이도록 만들 수 있습니다. 각 얼굴 요소에 대해 스포이드 도구를 사용하여 소스 색상을 샘플링합니다. 그림자에 대해 곱하기로 설정된 브러시를 사용하여 맨 위에 페인트하고 하이라이트를 위해 화면으로 설정합니다.
6. 8 비트 효과
완전한 8 비트 효과를 얻으려면 획이 1px로 설정된 레이어 스타일을 사용하여 각 요소의 윤곽을 그립니다. 획이 곱하기로 설정되어 있는지 확인하고 너무 강하지 않도록 레이어 스타일 대화 상자 내에서 효과의 불투명도를 줄입니다.
7. 조정
전체적인 음영을 추가하고 2D 스프라이트 내부에있는 3D 캐릭터의 느낌이 만족 스러울 때까지 계속 조정하십시오. 이 과정은 몇 시간이 걸릴 수 있으므로 마음을 잃지 말고 작동하는 것을 찾을 때까지 계속하십시오.
8. 세부 사항
묶인 두건, 귀 및 추가 눈썹 음영과 같은 최종 세부 사항을 추가하십시오. 캐릭터의 머리에 대해 다른 관점을 얻으려면 정기적으로 확대 및 축소하십시오. 디자인의 최종 모습을 확인하려면 정기적으로 100 % 시청하는 것이 중요합니다.
9. 신체 부위
각 바디 요소에 대해이 과정을 반복합니다. 흰색을 Screen으로 설정하고 연필 도구로 가볍게 두드려 픽셀 화 된 근육 효과를 만들어 바디 셰이딩을 구성했습니다. 이로 인해 몸이 너무 밝게 보이지만 나중에 반박하겠습니다.
10. 사지 레이어
캐릭터를 올바르게 구성하는 것이 중요합니다. 우리 닌자의 경우 오른쪽 다리와 팔이 카메라에 가장 가깝고 왼쪽 팔다리는 몸 뒤에 있습니다. 팔다리가 몸 뒤로 움직일 때 올바르게 가려 지도록 레이어를 배치합니다. 나중에 두통을 덜기 위해 지금 당장 구입하십시오!
11. 광택 추가
모든 개별 요소가 함께 작동하고 일관된 전체를 생성하도록 디자인을 수정하십시오. 최종 애니메이션 프레임의 위치를 지정하기 시작하면 전체 디자인을 편집하는 것이 번거롭기 때문에 다음 단계로 진행하기 전에 만족하는지 확인하십시오.
12. 시작 위치
걷기 애니메이션의 첫 번째 위치에 팔다리, 손과 발, 몸과 머리를 배치합니다. 우리는 왼발로 리드하기로 결정 했으므로 오른발은 오른팔과 함께 뒤로 당겨지고 왼발과 팔은 모두 앞쪽입니다. 일치하도록 몸통을 기울입니다.
13. 그룹 레이어
머리를 제외한 몸통을 구성하는 모든 레이어를 선택하고 그룹화합니다. 이 위치의 이름을 1로 지정합니다. 그룹을 복제하고 복사 위치 2의 이름을 바꾸고 첫 번째 그룹의 불투명도를 약 20 %로 줄여서 시작 프레임을 두 번째 프레임과 비교할 수 있습니다.
14. 모션
움직임을 제안하기 위해 머리, 팔, 다리의 위치를 약간 변경합니다. 6 개 프레임에 걸쳐 단일 전체 단계를 애니메이션하고 있으며, 전체주기를 만들기 위해 앞뒤로 재생합니다. 따라서 위치 4에 도달 할 때까지 다리를 교차해야했습니다.
15. 위치 추가
애니메이션에서 각각 다른 프레임을 표시하는 6 개의 다른 신체 위치가 될 때까지 4 번 더 복제하고 위치를 변경합니다. 최상의 효과를 얻으려면 나중에 돌아와 사지 위치를 조정해야 할 수도 있으므로 문서를 저장하십시오!
16. PNG 내보내기
6 개의 다른 몸체를 머리와 함께 투명한 PNG로 내 보냅니다. 각 프레임마다 머리를 조금씩 움직 이세요. 애니메이션 판매에 도움이됩니다! 이 애니메이션은 반복 될 것이므로 각 프레임의 머리 위치는 이전 항목과 가까워 야합니다.
17. 프레임 정렬
주인공 문서보다 6 배 더 넓은 새 문서를 만듭니다. 6 개의 프레임을이 단일 이미지로 가져 와서 정렬하여 세트가 완벽하게 정렬 될 때까지 배치합니다. Photoshop의 Distribute horizontal centers 기능을 사용하여이 문제를 해결하십시오.
18. 스타일 추가
시작 파일을 열고 닌자의 너비, 높이 및 배경 이미지를 정의하는 스타일 세트를 추가합니다. 시작 HTML 문서에 첫 번째 애니메이션을 포함 시켰습니다. 캐릭터의 치수에 맞게 값을 조정해야 할 수도 있습니다. 취향에 맞게 디자인과 애니메이션을 조정합니다.
19. 키 프레임
기본 캐릭터 속성을 할당하는 스타일 세트와 메인 캐릭터 스타일 선언에 사용되는 애니메이션 키 프레임 세트가있는 경우 코드에서 알 수 있습니다. 이것들은 배경 이미지를 간격으로 배치하여 플립 북 효과를 얻습니다.
20. 러프 업
기본적으로 브라우저는 값 사이의 background-position 속성을 매끄럽게 애니메이션합니다. 우리는 그것을 원하지 않으므로 각 전환 전에 '홀딩 키 프레임'을 만들었습니다. 깜박임과 아티팩트를 방지하기 위해 다음 프레임보다 1 / 1000 % 적은 비율로 설정됩니다.
21. 지상 작업
Photoshop에서 배경 및 전경 요소를 만듭니다. 일부 일러스트 레이터 심볼을 사용하여 한 이미지에는 잔디밭, 다른 이미지에는 큰 식물, 세 번째에는 작은 식물, 네 번째 이미지에는 지구의 단면을 만들었습니다. 이음매없는 이미지 여야합니다.
22. 애니메이션
HTML 및 CSS로 돌아갑니다. 키 프레임을 추가하여 0px 0px에서 0px –1200px까지 배경에 애니메이션을 적용합니다. 각지면 요소에 대한 스타일을 만들고 카메라와의 근접성에 따라 다양한 속도로 키 프레임을 배치하고 적용합니다. 우리는 시차 효과를 목표로하고 있습니다.
23. 시차
깊이를 암시하기 위해 초기 비디오 게임에서 사용 된 또 다른 기술은 카메라에 더 가까운 물체가 멀리있는 물체보다 더 빠르게 움직이는 것처럼 보이기 때문에 작동합니다. 다른 속도로지면 요소를 추가하고 스크롤하여 시차를 만들고 깊이를 제안 할 수 있습니다.
24. 하늘의 한계
배경 하늘 (이것을 애니메이션 할 필요가 없음)과 두 개의 구름 레이어에 대해이 과정을 반복합니다. 하나는 시차 효과를 완성하기 위해 다른 하나보다 카메라에 더 가깝게 배치됩니다. HTML 및 CSS 코드를 추가하여 페이지에 넣으십시오.
25. 테스트 시간
페이지를 철저히 시험 해보고 최상의 효과를 얻기 위해 타이밍을 조정하십시오. 닌자가 걷는 잔디의 속도에 특히주의하십시오. 잔디가 닌자의 발자국이 올바르게 보이도록 적절한 속도로 움직 이도록 일치시켜야합니다.
26. 소유권 증서
Ninja 타이틀로 게임에서 영감을받은 테마에 마지막 번창하고 끄덕임을 추가하십시오. 무료 Ninja 글꼴 (튜토리얼 파일에 포함)을 다운로드하고 나머지 아트 워크를 보완하는 멋진 3D 효과를 사용하여 Illustrator에서 제목을 만들었습니다. CSS를 만들어 페이지로 가져옵니다.
27. 생명을 불어 넣다
캐릭터 애니메이션과 동일한 접근 방식을 사용하여 제목 요소의 배율과 불투명도를 애니메이션합니다. 배율과 불투명도를 0에서 80 %까지 설정 한 다음 두 속성 모두 100 %로 최대 1로 배율을 조정합니다. 적절한 타이밍으로 실험 해보세요. 6 초에서 10 초 사이가 효과적입니다!
28. 다음 단계
CSS3 기반 애니메이션을 완료했지만 여기서 멈출 필요는 없습니다. :표적 선택기 또는 스크립트를 사용하여이 애니메이션을 간단한 플랫폼 게임으로 바꾸거나 유사한 애니메이션 접근 방식을 사용하여 시간이 지남에 따라 미묘하게 변경되는 간단한 대화 형 비디오 그램 이미지를 만듭니다. 실험하고 경계를 넓히십시오!
