메뉴 건너뛰기

창조도시 기록보관소

VNAP [연재] 1강 보조강의 - 아이콘과 커서를 만들자!

2006.09.04 05:29

만삐 조회 수:229 추천:3

딤딤과 만삐의 VNAP 강의 1. 비주얼 노벨을 만들자!


 


** 딤딤과 만삐의 VNAP 강의는 "딤딤과 만삐의 게임 공방"에서
시나리오와 CG를 담당하고 있는 딤딤(천어랑)과
음악과 스크립트를 담당하고 있는 만삐가 함께 만들고 있습니다.
수정 및 무단도용, 무단전제는 금지.
출처와 제작자를 공지하고서 퍼 가는 건 괜찮습니다. **


 


1강 보조강의. 아이콘과 커서를 만들자!


 


자작게임을 만들면서 빼놓을 수 없는 것이
아이콘과 커서의 디자인!
그런데, 아이콘과 커서는
일반적인 그래픽프로그램으로 만들 수가 없네요...?


 


네, 아이콘과 커서는 전용 프로그램으로 만들어야 합니다.
사용법 자체는 일반 그래픽프로그램과 별로 다르지 않아요.


 


그러니 이번 강의에서는
1) 아이콘과 커서를 만들 수 있는 프로그램을 소개하고
2) 일반 CG를 만들 때와는 다르게 아이콘이나 커서를 만들 때
신경써야 할 것을 지적하고


3) 일반 그래픽 프로그램으로 그린 것을


어떻게 아이콘이나 커서로 만드는지를 설명하도록 하겠습니다.


 


## 아이콘을 만들자! ARTIcons Pro!
아이콘을 만드는 프로그램에는 여러가지가 있습니다.
그 중에 제가 소개하려는 건 ARTIcons Pro입니다.
그것은 그저! 이게 바로 제가 쓰는 프로그램이기 때문입니다 -ㅁ-



다른 프로그램을 안 써봐서 상대적 우위는 잘 모르겠지만,
별로 불편한 건 없고 기능도 괜찮아요.


심파일(http://simfile.chol.com)에서
ARTIcons Pro 라고 검색하시면 바로 나올 겁니다.
이밖에 Microangelo라는 프로그램도 유명한 듯해요.
역시 심파일에서 찾을 수 있습니다.


 


그런데 한 가지 문제가 있는데,
ARTIcons Pro는 셰어웨어라서 30일 밖에 못 쓴다는 거에요.
30일이 지나면 아예 실행이 안 되더군요 -ㅁ-
제 경우에는 인스톨파일을 놔뒀다가
날짜가 지나면 다시 설치해서 쓰고 있습니다...
(Microangelo는 기한이 21일이던데...
기한이 지나도 쓸 수 있는지 잘 모르겠네요)


아무튼, 이 프로그램을 설치해서 실행해 봅시다.


 



 


자, 인터페이스가 꽤 직관적이죠?
그래픽프로그램이라면 오에카키나 그림판만 다뤄보신 분이라도
저 도구들을 보기만 하면 무슨 뜻인지 다 아실 거에요.
그러니 설명은 패스.
(사실 저도 잘 몰라요. 그래픽은 딤딤이 담당하기 때문에...;;)


 


주의할 점은
1) 아이콘 사이즈는 32X32, 색상은 32비트로 설정해 줄 것.
(사이즈와 색상은 새 파일을 만들 때 설정합니다.
이게 기본값이니 옵션을 건드리지 않으면 됩니다.)


 



 


이 이상의 사이즈도 일단 만들 수 있기는 한데,
VNAP이 지원하는지 잘 모르겠어요.
(혹시 해 보시고 되면 알려 주세요 ^^;)


 


2) 투명색 지정을 해 주셔야 합니다.
대부분의 아이콘은 가운데에 그림이 있고 나머지 부분은 투명하지요?
투명색은 대체로 빗금으로 표시하지요.
이 프로그램에선 아래 붉은 네모 안의 부분으로 해요.


 



 


색조의 차이는 투명도의 차이를 나타내는 거겠지요?
그럼 아이콘 프로그램 소개는 끝,
이제 커서 제작 프로그램으로 넘어갑시다.


 


## 커서를 만들자! Axialis AX Cursors!
제가 소개하려는 프로그램은 Axialis AX Cursors 입니다.
이것도 심파일(http://simfile.chol.com)에서 받으실 수 있습니다.
이것도 셰어웨어인데, 이건 기한 넘겨도 계속 쓸 수 있어요.


이것도 설치해서 실행해 봅시다.


 



 


역시 직관적이지요?


여기서도 아이콘처럼
1) 32X32, 24비트로 해 줄 것.
(주: 이 프로그램은 기본값이 32X32, 4비트이기 때문에
꼭 바꿔 주셔야 합니다!)


 



 


2) 투명색 지정을 해 줄것


 



 


이걸 신경쓰셔야 합니다.
그런데 커서에서는 신경써야할 것이 하나 더 있어요.


 


3) 그건 바로 "Hot Spot"이라는 걸 지정해 주는 겁니다.
Hot Spot이란, 커서에서 클릭이 되는 지점을 말합니다.
예를 들어서, 화살표 모양 커서를 생각해 보세요.
화살표의 뾰족한 쪽(왼쪽 위)을 버튼에 놓고 클릭하면 클릭이 되지만
그런데 뭉툭한 쪽(오른쪽 아래)을 버튼에 놓고 클릭하면 클릭이 안 되지요?
그것은 화살표의 뾰족한 쪽 끝에 Hot Spot이 지정되어 있기 때문입니다.


 


그러니, Hot Spot 지정을 빼먹으시면
무슨 수를 써도 클릭이 안 되는 이상한 커서가 생기고 맙니다!
그러니 Hot Spot 지정을 꼭 하셔야 합니다.
지정은 저 아이콘으로 합니다.


 



 


## 아이콘 만들기, 커서 만들기의 실제
그럼 직접 커서 만드는 과정을 봅시다.
그래픽프로그램은 잘 다루는데
아이콘이나 커서 프로그램은 익숙하지 않은 경우,
그래픽프로그램으로 그림을 그린 다음
그것을 아이콘이나 커서 프로그램에 붙여넣는 방법을 추천합니다.
여기서는 그 방법을 보여드리겠습니다.


 


1) 그림 그리기. (일단 32X32보다 더 큰 사이즈로 그려도 되요)
저희 아이콘, 커서의 원본 그림은 이거에요.


 



 


100X100 사이즈지요.


 


2) 그림 전체 선택(Ctrl+A) & 복사(Ctrl+C).
여기까지는 자신에게 제일 익숙한 그래픽 프로그램을 쓰세요 ^^


 


3) 아이콘 프로그램에서 붙여 넣기(Ctrl+P).
그러면 다음과 같은 창이 뜨는데,
이때 다음에 네모 친 세 부분을 신경써 주셔야 합니다.


 



 


i) 복사된 그림 전체 중 선택된 부분만 아이콘으로 만들어집니다.
전체를 선택하시려면 저 Select All을 눌러 주세요.
ii) Stretch를 선택하시면 복사될 그림이
아이콘 사이즈에 맞게 자동으로 크기 조정이 됩니다.
(크면 작게, 작으면 크게.
정사각형이 아니어도 정사각형으로 만들어 주지요.)
기본값은 체크되어 있어요.
iii) 투명색 설정. 저 Transparent를 선택하시면
저 바로 아래에 표시된 색상을 투명색으로 만들어 줍니다.
저 그림의 경우엔 배경이 검정색으로 되어있으니,
검정색이 투명색이 되도록 RGB는 0, 0, 0으로 놔 두고
Transparent만 체크해 두면 되겠지요.


이걸 다 살펴본 다음 OK를 누르면 이렇게 됩니다.


 



 


4) 다듬기. 문제 없다고 생각하시면 안 다듬어도 되고요. ^^
이 그림의 경우는 커서도 겸하는 그림이라 왼쪽 위 화살표가 있지요.
저걸 지워줘야겠네요.


 



 


5) 이제 적당한 이름으로 저장(Ctrl+S)하면 끝!



끝~!


커서도 거의 비슷해요.


1) 그림을 그리고 2) 그림 전체 선택(Ctrl+A), 복사(Ctrl+C)는 똑같고.


3) 커서 프로그램에서 붙여넣기.(Ctrl+P)
이 프로그램은 붙여넣기 창이 좀 다르네요.


 



 


옵션이 두 개 있는데, 위 옵션은 원래 그림 사이즈 그대로 붙여 넣는 거고,
아래 옵션을 선택하면 커서에 맞게 리사이즈 해 줍니다.


 



 


이렇게 되지요.


4) 다듬기 & 투명색 지정.
그 다음 배경을 투명하게 칠하고, 다듬을 데가 있으면 다듬고...


 



 


5) Hot Spot 지정.
보통은 왼쪽 위 지점으로 해 주면 되겠지요?


 



 


6) 이제 적당한 이름으로 저장하면(Ctrl+S) 끝입니다!


 


오늘의 강의는 이것으로 끝!
여러분들도 자기만의 아이콘과 커서를 만들어 보세요~

번호 제목 글쓴이 날짜 조회 수
20 이론강의 4. 시나리오 작성 - 내용 Vermond 2007.03.06 126
19 이론강의 4. 시나리오 작성 - 설정 [2] Vermond 2007.01.12 189
18 이론강의 3. 제작에 앞서 해야 될 것들 [1] Vermond 2006.12.08 154
17 이론강의 2.Vnap으로 제작가능한 장르 [2] Vermond 2006.12.05 358
16 이론강의 1. Vnap이란? [2] Vermond 2006.12.04 189
15 VNAP 배경음 예제 [1] dnajs 2006.09.13 141
14 [연재] 2강. 스크립트의 종류를 알아보자! [1] 만삐 2006.09.04 278
» [연재] 1강 보조강의 - 아이콘과 커서를 만들자! 만삐 2006.09.04 229
12 [연재] 1강 보조강의 - RGB값을 알아내자! 만삐 2006.09.02 214
11 [연재] 1강 보조강의 - 좌표질을 하자! 만삐 2006.09.02 208
10 [연재] 비주얼 노벨을 만들자! 1강. 게임 디스플레이를 디자인하자! : vnap.ini 건드리기 (3) [7] file 만삐 2006.08.25 316
9 [연재] 비주얼노벨을 만들자! 1강. 게임 디스플레이를 디자인하자! : vnap.ini 건드리기 (2) [4] 만삐 2006.08.24 205
8 [연재] 비주얼노벨을 만들자 1강. 게임 디스플레이를 디자인하자! : vnap.ini 건드리기 (1) [2] file 만삐 2006.08.24 366
7 [연재] 1. 비주얼 노벨을 만들자! - 0강. 강의를 시작하기 전에 (2) file 만삐 2006.08.23 270
6 [연재/딤삐의 VNAP 강의] 1. 비주얼노벨을 만들자! - 0강. 강의를 시작하기 전에 (1) [1] 만삐 2006.08.23 378
5 Vnap 초보 길들이기 -2 "시작과 설정" [2] Vermond 2006.07.27 361
4 '켄타'의 Vnap 왕초보강좌 [1. Vnap의 기본상식!] [1] file 켄타 2006.07.25 366
3 Vnap 초보 길들이기 -1 "기본적인 설명" [1] Vermond 2006.07.25 467
2 '켄타'의 Vnap 왕초보강좌 [0.Vnap이란?] [4] file 켄타 2006.07.25 392
1 [크레시스군의 vnap 강좌] 1강 기초중의 기초 [3] 크레시스 2006.07.23 394