이제 서점에서 책으로 만나요. - 만들면서 배우는 픽셀아트(한빛미디어)

1. 개발자를 위한
도트디자인 입문
2017. 3. 9.
유유자적 라이프 김윤정

2. 강사 소개
 2000 년대 초반 , 피쳐폰 초기 시절 도
트디자이너 .
 게임회사 2D/3D 디자이너로 12 년동
안 일했고 , 지금은 독립하여 인디게임
만듭니다 .
 최근 고등학생들과 함께 만든 퍼즐게임
aVoid( 어보이드 ) 를 구글플레이 출시
했어요 !
 게임잼에서 만난 사람들을 하나둘 도트
의 길로 인도하다가 지금 이 자리에 오
게 되었어요 .

3. 시작하기 전에
“ 우리는 누구나 그림을 그릴 수 있어요 ! “
• 부담 없이 그리세요 .( 난이도 : 쉬움 )
• 연습장에 볼펜으로 낙서한다 생각하세요 .
• 다이어리에 사인펜으로 색칠한다 생각하세요 .
• 그림 그리기는 즐거운 일입니다 .

4. Photoshop
오늘 강의는 Photoshop CC 2017 영문판 기준으로 진행합니다
.
Adobe 사의 그래픽 편집 프로그램 .
다양한 이미지 편집 가능

5. 픽셀 (pixel)
 화면을 구성하는 가장 기본이 되는
단위 .
 연필로 한 땀 한 땀 (1px 씩 ) 아주
작은 그림을 그려요 .
 작게 그려서 마지막에 400%,
500% 확대해서 *.png 로 저장

6. 포토샵 도트작업 ,
이 3 가지 도구만 꼭 기억하세요 !
연필 , 지우개 , 돋보기 !
도트 작업에 필요한 기본기능은 이 것 .
(+ 그 외 편집 기능 )

7. ctrl C+ : 복사
ctrl V+ : 붙여 넣기
ctrl Z+ : 취소 (Undo)
자주 쓰는 단축키는
포토샵도 같아요 .
ctrl A
+
: 전체 선택
ctrl S : 저장
+
ctrl N+ : 새 그림
기본 단축키

8. 새 그림 [File]-[New] 를 누르고 ,
16x16 의 새 그림을 만듭니다 .

9. 보이세요 ?

10. 도구 (1) - 돋보기

11. 이제 좀 보이죠 ?

12. 환경설정 (Grid)
[Edit]-[Preference]-[Guides, Grid & Slice] 에서 1 로 변경

13. 환경설정 (Snap) [View]-[Show]-[Grid] 체크 .
Snap 은 체크 해제 .

14. 환경설정 (Rulers)
[View]-[Show]-[Rulers] 를 체크 ( 눈금자 단위는 pixel)

15. 레이어 추가
그릴 때 항상 레이어 추가하고 나서 그리세요 . 그 이유는…

16. 배경을 투명하게 !
*.png 저장할 때 , 배경을 안 보이게 하면
투명한 이미지를 만들 수 있어요 .

17. 도구 (2) - 연필
연필 크기는 1px,
Opacity 는 100%

18. 도구 (3) - 지우개 도트작업할 땐 꼭
Block 으로 놓고 그리기

19. Q. 사각형을 도트로 ?
사각형은 도트로 어떻게 표현할까요 ?
(16 x 16)

20. Q. 둥근 사각형을 도트로 ?
둥근 사각형은 도트로 어떻게 표현할까요 ?
(16 x 16)

21. Q. 동그라미를 도트로 ?
* 연필과 지우개만 써서 만들어보세요 .(16x16)

22. 가볍게 시작하세요 .
그림 그리는건 어렵지 않아요 .

23. Q. 하트를 도트로 ?
하트를 그려보세요 !(16x16)
♥

24. 도트로 그린 하트

25. Q. 단검을 도트로 ?
단검은 도트로 어떻게 표현할까요 ?(16x16)

26. Q. 단검을 도트로 ?
45 도 기울였습니다 . 도트로 어떻게 표현할까요 ?(16x16)
* 연필과 지우개만 써서 만들어 보세요 .

27. 연필과 지우개만 쓰세요
포토샵에서 회전시키면 기본적으로 픽셀이 뭉개집니다 .
픽셀이 부드럽게 보이도록 자동으로 보정해주기 때문 .

28. 대각선의 표현
도트에서는 대각선을 이렇게 규칙적으로 표현해요 .
* 마치 수학의 기울기 그래프 같죠 ?
픽셀은 정수 단위입니다 .
1.5 픽셀은 없어요 .

29. 도트로 그린 단검

30. 단축키
도구 (4) - 페인트통
- 넓은 면을 연필색으로 채웁니다 .
- Alt + Del : 연필색 ( 전경색 ) 으로 채우기
- Ctrl + Del : 지우개색 ( 배경색 ) 으로 채우기

31. - Tolerance( 동일색상 허용값 )
- 미묘하게 비슷한 색 중 몇 개까지 같은 색으로 볼까 ?
- 정확히 그 색상인 픽셀만 선택하려면 1
- Anti-alias( 계단현상 방지 )
- 투명도가 미묘하게 다른 색이 섞임 ( 픽셀 보정 )
- 체크 해제 해야 , 정확히 그 색상인 픽셀만 선택 .
- Contiguous( 인접 )
체크하면 , 클릭한 위치 주변에서 같은 색을 찾아 선택 .
체크 해제 하면 , 이미지 전체를 대상으로 선택 .

32. 응용해봅시다 !
둥근 사각형 (16x16) 을 만들어보세요 .
넓은 영역은 페인트통으로 쉽게 채울 수 있어요 .

33. Q. 무엇에 쓰는 도형 ?
이게 어디에 쓰일지 , 아시는 분 ?

34. A. 버튼
간단하면서도
게임에 가장 자주 쓰여요 .

35. 9patch 작은 용량으로 크기에 맞게 늘려서 사용 .
( 버튼 / 팝업창 / 말풍선 등 )

36. 응용하기 레이어의 투명도를 조정하면 ,
반투명하게 쓸 수도 있어요 .

37. 사람 사람 = 머리 + 몸통 + 팔 + 다리
기본도형을 조합했다고 생각하면 쉬워요 .

38. Q. 사람을 도트로 ?
사람을 도트로 어떻게 표현할까요 ?
(16x16 또는 32x32)

39. [ 참고 ] 기본형
너비가 짝수일 때 너비가 홀수일 때
16x16 또는 32x32
그려보세요 .

40. 픽셀 키우기 !
[Image]-[Image Size] 를 띄워서 , 원하는 비율로 확대 !
Resample 옵션을 Nearest Neighbor 로 OK

41. 누구세요 (..)
안 바꾸시면 이렇게 됩니다 . Ctrl + Z 하세요 .

42. 만약 , 150% 확대하면 ..
1 픽셀 -> 1.5 픽셀로 만들 순 없어요 . 픽셀은 오직 정수 단위 .

43. 배경을 투명하게
Background 레이어의 눈 아이콘을 끄세요 .

44. *.PNG 저장
Png-24 로 바꾸고 *.png 로 저장하면 끝 !
[File]-[Export]- [Save for web(legacy)]
*.PNG 로 리소스 저장

45. 색상 정하는 방법
 Eyedropper( 스포이드 )
 Swatches( 팔레트 )
 Color Picker

46. Eyedropper( 스포이드 )
마음에 드는 이미지에서 원하는 색상을 콕 찍으세요 .

47. Swatches( 팔레트 ) 게임의 전체적인 색감이
안정되고 통일됩니다 .

48. Color Picker
16 만 컬러 중 직접 원하는 색상 찾기 .
(RGB 값 및 16 진수 코드 입력가능 )

49. 명암 넣는 방법 빛이 들어오는 방향을 고려하여
밝음과 어둠을 정합니다 .

50. 명암 단계 만들기
하늘색과 파랑 사이에는 어떤 색이 있을까요 ?
시작 끝중간색
#0030FF#13FFFF
?

51. 명암 단계 만들기
아마도 이 중에 하나…한번 찾아보세요 !
시작 끝중간색
#0030FF#13FFFF

52. 중간색 찾기 (1)
시작 끝중간색
#0030FF#13FFFF #0997FF
비슷한 색상 찾으셨나요 ?

53. 중간색 찾기 (2)
시작 끝중간색
이번엔 중간색 2 개 더 찾아보세
요 .
#0030FF#13FFFF #0997FF
? ?

54. 중간색 찾기 (2)
시작 끝중간색
비슷한 색상 찾으셨나요 ?
#0030FF#13FFFF #0997FF

55. 중간색 찾기 (3)
연필의 Opacity( 불투명도 ) 를 활용하세요 .
0% 100%50%
#0030FF#13FFFF #0997FF
25% 75%

56. Gradation 도트가 아닐 땐 ,
Gradient 툴을 써도 됩니다 .
이렇게 단계를 좀더 나누면 푸른 하늘도 만들 수 있어요 .
* Gradation : 한 색상에서 다른 색상으로 매끄럽게 변하는 것 .
시작 끝

57. 먼셀 색상환 색의 변화를 동그라미로 나타낸 표 .
색상 사이의 중간색을 알 수 있음 .

58. 캐릭터 기본형
외곽선이 없으면 캐릭터가 배경에 묻히기도 합니다 .

59. 구글 이미지 검색
마음에 드는 원화를
찾으세요 !

60. 원화를 도트로 !
캐릭터의 특징을 잡고
최대한 단순하게 표현

61. 캐릭터 꾸미기 기본형을 바탕으로
개성을 살려 꾸며 보세요 .

62. 도트 애니메이션을
만들어봅시다 !

63. 대기 ( 앞 ) [1 프레임 ] – [2 프레임 ]
* 숨쉴 때 허리를 1px 만 살짝 늘려주면 끝 !

64. Marquee( 선택영역 )
특정 모양의 영역 선택하기 .
- Rectangular Marquee( 사각형 )
- Elliptical Marquee( 원형 )
- Single Row Marquee( 가로로 한 줄 )
- Single Column Marquee( 세로로 한 줄 )
* 기본도형 그릴 때도 써요 .

65. 캔버스 넓히기
바닥을 기준 삼고 , 높이만 1px 늘렸어요 .
16 * 16 -> 16 * 17
[Image]-[Canvas Size]
그림 그릴 수 있는 공간 늘리기

66. 대기 ( 앞 ) 레이어를 하나 복사해서 수정하고 ,
끊어진 곳은 연필로 이어주세요

67. 애니메이션
[Window]-[Timeline] 를 누르
고 , Create Video Timeline 버
튼을 누르세요 .
* 포토샵 CS5 이전 버전에서
는 [Window]-[Animation] 이에
요 .

68. 애니메이션 레이어의 눈을 하나씩 껐다 / 켰다 하며
키프레임 애니메이션 제작
반복 : Forever, 재생간격 : 0.2 초

69. 애니메이션
[File]-[Export]- [Save for web(legacy)]
*.GIF 애니메이션 완성

70. 이렇게 움직여요

71. 1. 새 그림 만들기 (16x16)
2. 연필과 지우개로 그리기
3. 픽셀 확대 하기 (Image Size)
4. 마지막 *.png 저장
도트작업은 ? 표현 방식만 픽셀일 뿐 ,
결국은 작은 그림을 그리는 것

72. 이 3 가지만 꼭 기억하세요 !
연필 , 지우개 , 돋보기 !
제일 마지막에 픽셀을 500% 확대해서
*. png 로 저장

73. pixelfor.me/crc 4 단계 , 8 단계 , 16 단계 명암을
RGB 값으로 추출해주는 사이트

74. Q & A
혹시 궁금하신 거 있으신가요 ?

75. 감사합니다 ! 인디게임 개발자 분들께
작은 도움이 되었으면 합니다 .