화면/시각효과
2006.01.08 20:02

포토샵으로 게임 타이틀 제작하기

조회 수 3778 추천 수 0 댓글 10
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
[준비물]
포토샵 6버전 이상

위의 그림을 다운로드 해주세요. 예제이미지입니다.



서장


Q : 타이틀은 어떻게 만들어요?
A : 포토샵으로 만듭니다.

이말에 눈이 반짝반짝해져 후루나에서 포토샵을 다운받는 초보.
설치하고, 시리얼찍고, 크랙깔고 이제 포토샵을 키는데!!

"....."

영어, 영어, 영어!!

"이게 뭔소리야!!"

결국, 포토샵에 쫄아서 프로그램을 얼른 지워버리는 초보.

"그냥 타이틀 요청이나 해야지... 내 주제에 무슨.."

..
..
..
당신일지도..






이런 시절은 이제 오늘부로 끝나는겁니다!
자, 일단 준비해둔 포토샵을 켜줍니다. 저는 7.0으로 할게요.

포토샵을 연후, 위쪽 메뉴에서 file -> open (ctrl + o)을 해준 후,
준비물에서 받았던 이미지를 열어줍니다.


오오! 이미지가 열렸습니다 +ㅆ+ 뭔가 뿌듯. (....;;)


일단 포토샵을 쓸때 알아둬야 할것이 있습니다.
포토샵역시 초보자에게 적합하게 쉽게 다룰 수는 있지만, 애초에 학생을
염두하고 제작한 알툴만큼 쉽지는 않다는겁니다.

즉, 알툴보다 어려운것이 바로 포토샵이라는 뜻입니다.

(온통 영어라는 것 때문에 더 어려운건 아니고? -ㅁ-)


그럼, 여기서 이해해야 할 것이 있습니다.

포토샵은 8bit, 16bit, 24bit, 32bit모두 사용가능합니다.
하지만 알툴은 오로직 8bit만 사용합니다.

여기서 8bit란 무엇을 뜻할까?
아마 RTP를 많이 다뤄보셨거나 도트를 찍어보신 분이면 알겁니다.
8bit란, 256색을 뜻합니다. ( 2x2x2x2x2x2x2x2 = 256)

위에서 말했 듯 포토샵은 8bit가 가능합니다. 즉, 알툴과 호환하여
사용할 수 있다는 뜻이죠.
여기서 알아둬야 할것은, 포토샵에서 8bit는 index라고 말합니다.

뭐.. 이런겁니다,
r2k에서는 칩셋이라고 말하고 rxp에서는 타일셋이라고 말하는것.
그냥 말하는 것이 다를뿐, 실제적인 뜻은 같죠.


일단 여기까지 하고, 이미지를 열었으면 먼저 확인해야 하는것이
바로 색상 확인입니다.
이 이미지의 색상을 확인해보죠.


자세히 보니 index라고 써있습니다. 256색으로 제작되었다는 뜻이죠.
여기서 중요한것은 포토샵에서는 index는 도트할때나 쓰는 저급한
방식입니다. (이녀석이 눈이 좀 높거든요 ^^;;;)

그렇다면 이 256색으로 제작된 그림을 포토샵에서 쓰려면 어떻게
해야 할까요?


..
..
음..

포토샵을 달래주면.... 될것같군요.

일단 녀석의 비위에 맞춰줍시다. 포토샵이라는 멋쟁이는 16bit이상이
아니면 취급을 안합니다 ^^;;

그럼 16bit로 바꿔주도록 하죠.


이렇게 바꾸는 겁니다. 뭐해요? 따라해야죠.


바꾸니까 옆의 글씨가 layer1 / RGB라고 써있군요.

뭔소린지 알아먹겠습니까?
별로 중요하진 않아요.

그냥 이것만 기억하세요.

Index = 8비트이하(256색 이하)
RGB = 16비트 이상


단순하니 보기 좋군요.
이제 이 이미지는 16비트가 되었습니다. 역시 뭔가 뿌듯해지는군요.

여기까지 왔으면 이제 뭘해야 할까요?
알툴에 꽉차게 사이즈를 조정해야 합니다.
알툴이란 녀석은 애기와 같아서, 뭐든지 녀석의 비위에 맞춰줘야
합니다.
녀석에 비위에 어긋나면 에러가 나면서 이미지가 안들어가집니다.


따라서 이 그림을 알툴의 비위에 맞도록, 사이즈를 바꿔줘야 합니다.

이미지 위쪽에 있는 푸른 줄무늬에 오른쪽 클릭을 하면 위와
같이 나옵니다.

image size(이미지 사이즈)를 클릭하면 검은 박스에 있는 윈도우가
나옵니다.

width는 가로, height는 세로를 말합니다.
이 사이즈는 가로 1005, 세로 615사이즈로 제작되었군요.
즉, 1005*615입니다.

알툴 사이즈를 아시나요?
알툴 사이즈는 320*240입니다. 물론 r2k기준입니다.

이 그림은 가로가 더 깁니다. 따라서 비교적 짧은 세로방향의
사이즈를 맞춰주면 딱 맞는 사이즈가 되겠군요.

왜냐구요? 글쎄요... 그건 자신이 직접 사이즈를 변경하면
알게 됩니다. 경험이 최고의 실력이라구요.

세로 사이즈를 240으로 맞추면 이렇게 됩니다.
포토샵은 자동으로 사이즈가 확대/축소 되기 때문에
이렇게 사이즈를 임의대로 조정해주기만 하면 알아서 사이즈가
커졌다 작아졌다, 변합니다.



사이즈는 320*240이 아니라 392*240가 됩니다.
아무래도 이 그림은 가로 사이즈가 너무 큰 모양입니다.
이렇게 되면 조금 복잡해 지겠군요.

여기서 방법이 2가지로 나뉩니다.

방법 .1

사이즈를 억지로 320*240으로 맞춰주는겁니다.
어떻게요?


빨간박스가 두개가 있습니다. 읻란 아래쪽에 써있는
constrain어쩌고 하는 것의 체크를 풀어줍니다.

이것을 푸는 이유는 사이즈를 억지로 조정하기 위해서 입니다.
이것의 기능은 사이즈가 비율에 맞게 확대/축소되기 위해서인데요,
이해가 안된다면 아드레날린의 [비율고정]기능을 예로 들수 있겠
네요.

아드레날린에서 [비율고정]을 한후, 동영상의 가로사이즈를 늘리면
세로 사이즈 역시 자동으로 늘어나죠? 그것과 같습니다.

이 constrain어쩌고 하는 녀석이 그 기능을 해줍니다.
이것을 풀지 않으면 320*240사이즈로 맞추고 싶어도 약올리듯 숫자가
막 변해요. (비율에 맞춰주는 거죠.)

일단 이걸 풀고나서 320*240사이즈를 써준후, OK를 누르면 됩니다.
그럼 조금.. 거북하죠.. 마치 사람의 얼굴을 억지로 네모낳게 만든
듯한..




방법 .2

둘중 특별히 나쁘다 할만한 방법은 아니지만 개인적으로 이쪽을
많이 사용합니다. 1번 방법은 편리하기는 하지만
비율고정이 되지 않는다는게 보기에 상당히 거북하죠.
..예를들면..


이 그림이

이렇게 변하는.. 음, 역시 보기 않좋군요. 워낙 미소녀니까 이정도지,
만약 .. .. 우리 생각하지 말죠 -ㅁ-;;


이러한 이유로 저는 1번 방법은 왠만해서는 안씁니다. 물론 쓸때도
있지만요.  별로 티 안날때는 1번방법처럼 깔끔한것도 없어요 ^^

여하튼, 2번방법을 이렇습니다. 아까 조정했던 392*240사이즈 있죠?
그리고 새로운 이미지를 한장 열어줍니다.


사이즈는 당연하게도 320*240으로 해줘야 합니다.
이 새로만드는 이미지가 타이틀이 될거니까요.


위처럼 새로운 이미지가 열립니다. 체크무늬바탕은 아무것도 없다는
뜻입니다.

여기서 이미지가 있는 윈도우를 클릭하세요. 제 스샷에서는
shdive어쩌고.jpg라는 이름으로 되어있군요.

그리고 CTRL + A를 누릅니다.
이거는 이미지 전체를 선택한다는 뜻입니다.
그러면 테두리에 이상한 그물이 움직이는데요. 그다음 CTRL + C를
누릅니다.
이미지를 복사한다는 뜻입니다. 물론 단축키이고 편하기 때문에 이렇
게 알려준것이지, 마우스로 직접 복사할수도 있어요. (전 몰라요 -_-;;)

그리고 새로운 이미지를 클릭합니다. 제 스샷에서는 뭘바염-이라는
이미지군요.

그리고 CTRL + V를 눌러줍니다.
그럼 붙여넣기가 된겁니다. 역시 마우스로 할수도 있지만.. 전 할줄 몰라
요. -_-; 별로 알 필요도 없구요.



이렇게 하면 화면에 꽉차게 나오는군요. 이제 예전 이미지는 닫아도 될것
같아요. shdive어쩌고.jpg 윈도우를 닫아줍시다.

그리고 옆쪽에 있는 돋보기를 클릭한후 이미지를 클릭합니다.


그러면 위쪽에 파란줄무늬에 200%라고 나옵니다. 가로세로 2배, 총합
4배 확대된거죠.

이미지는 커졌는데 윈도우는 그대로군요. 윈도우를 크게 늘려줍니다.
늘리는건 그냥 보통 폴더 늘리듯이 하면 되요.


이렇게 늘려준 이유는 글씨쓰기 쉬운 환경을 만들어주는 겁니다.
안해줘도 상관없는데다가
전에 썼던 [Image size(이미지사이즈)]를 사용하지 않으면
이미지크기는 변하지 않아요. 그냥 확대된거죠.

이제 옆쪽에 도구상자에 있는 T버튼을 누르면 마우스의 모양이 변합니다.
그리고 이미지에 찍어줍시다.
T버튼은 Texture의 약자입니다. (뭐? 아니라고? 그냥 그렇게 알아!!)


전 이렇게 썼어요.
the story. 이야기.. 캬~! 뭔가 감이 오지 않습니까? 뭐? 안온다고?

끝나고 댓글달도록!(... 어쨰서 댓글인건데?)

자세히보니 위치가 영 맘에 안드네요.


스샷에 보면 빨간박스가 좀 많죠? 일단 스샷처럼 왼쪽에 있는 도구툴에서
2번째에 있는 그림을 클릭해줍니다.
그리고 가장 위쪽에 있는 빨간박스처럼 show bounding box라는 곳에 체크
해주세요. 이걸 체크해주면 효과를 주기가 더 용이합니다.

그리고 오른쪽에 있는 빨간 박스는 글씨체와 글씨크기입니다.
아마 포토샵을 쓰지 않는 집에서는 글씨체가 많지 않을거에요.
이런건 후루나에서 폰트나 글씨체로 검색하면 잔뜩 나옵니다.

그 글씨체들을 그대로 c:windows\font에 넣으면 부팅한번하는데
5분걸립니다 -_-; 그러지말고 네이버에 font manager혹은 폰트매니저라고
검색해서 다운로드하면 많이 쓸수도 있고 부팅도 쌩쌩합니다.


여하튼, 이 도구의 능력은 "위치이동"입니다. 위에서 쓴곳이 뭔가 맘에
안들어요. 왼쪽위로 쳐졌잖아요. 그쵸?
그래서 가운데로 옮기려고 합니다. 별거 아닝에요. 옮겨보세요.
그리고 다 옮긴후에 도구 상자에 있는것 아무거나 찍고 엔터를 치던가,
그냥 엔터를 연타하면 됩니다 (-_-;)


자, 이제 이쁘게 써졌는지 확인해봅시다. CTRL를 누르고 -를 누르세요.
이건 축소의 기능입니다. 반대로 +를 누르면 돋보기 없이 확대가 됩니다.

..이쁘긴 한데 뭔가 밋밋하군요. 다시 확대하죠. 정상적인 이미지 크기는 가장
작업후에 보는게 좋아요.

아래쪽에 보면 뭔가 버튼이 여러개 있군요.
다른건 다 필요없습니다.
첫번째 버튼만 알면 됩니다. 클릭하면 이런게 뜨는군요.


blending options? 해석하자면 합성설정이라는 뜻이군요.
합성? 연애인들의 공포의 대명사라는 그 합성이라는게 이건가 봅니다.
한번 들어가보죠.

뭔가 이상하게 막막 나올겁니다.. .. 뭔소린지..



아래쪽에 여러가지가 있습니다. 그중에 drop shadow를 클릭해봅시다.
얼레? 자동으로 체크되네요.
drop shadow, 그림자를 떨어뜨린다?
글씨로만으로는 알수 없겠군요. 오른쪽에 빨간박스가 보이시나요?

위쪽에 preview, 프리뷰라고 써있군요. (미리보기라는 뜻입니다.)

오호, 그냥 회색에 뭔가 그림자가 생겼군요. 뭔가를 기대해보면서 OK
를 눌러봅시다.


오오오옷!!! 고급스러워!! 고급스러워!!

아무래도 blending options(합성설정)이란 이런걸 말하는건가 봅니다.
이펙트라는건가!! 크하하하하~!
이것저것 만져봅시다, 여기서 다 쓰기는 뭐하니 직접 해보시길 -_-;;

이제 뭔가 그럴듯 한것 같으니 저장을 해봅시다.

저장은 file -> save 혹은 as new as save인지 as save as new인지 뭔가로
합니다. 그럼 아래처럼 나와요.


이제 세이브를 합니다.

여기서 그냥 쓰면 안되고 형식을 설정해줘야 합니다.

아래쪽에 Format : 어쩌고   뭐 이런곳이 있을겁니다.
사뿐히 클릭해주고 jpg로 해주죠.


jpg로 해주는 이유는 jpg형식이 용량에 비해 화질이 좋은 편이기 때문입니다.
흔히 말하는 "압축 그림"이죠.

내친김에 더 해보죠.
bmp는 그림판으로 나온것으로, 압축이 거의 되지 않은 고화질의 그림입니다.
하지만 용량이 심하게 큽니다 -_-; jpg에 비해 적으면 2배, 많으면 10배정도?
그래서 인터넷에 도는 많은 그림은 jpg로 나옵니다.
이 강좌의 스샷도 jpg로 제작되어 있죠.

알툴은 png와 bmp, xyz포맷을 사용합니다. png는 GIF에서 파생된것으로, 낮은
용량에 도트형 화질의 특징을 가지고 있습니다.
언뜻 들은것이지만, GIF포맷은 출처와 저작권때문에 이리저리 치이는 일이
많다고 합니다. 그래서 png포맷형식이 나왔다고 하네요. png포맷은 저작권
논란이 없나봅니다.

bmp는 설명했고, xyz은 알툴만의 포맷입니다. 알씨에서도, 심지어 포토샵에서
역시 지원이 안됩니다. (못읽는다는 뜻이죠.)
오로직 알툴만이 쓸수 있는 포맷으로, 보통 많은 분들이 자신의 RTP를 숨기고
싶을 때 쓰더군요. 알툴만으로 열어지니 나름대로 노력을 요해서 볼 수 있겠
죠.



자, SAVE를 해주면 이런게 뜹니다. JEPG 옵션이라는군요. 아래쪽에 보니
Quality(퀄리티 ; 화질)라고 있습니다.

이것이 용량과 화질을 조절합니다. 보통 5~8사이면 됩니다만, 에잇, 용량이
문제냐!!
사실 어차피 그리 많이 차이도 안납니다. 많아봤자 4배정도?
워낙 용량이 작은것이 jpg형식이니 4배라고 해도 많이 안늘어납니다.
그냥 최대 퀄리티를 해줍시다! 좋아 가는거야, 12퀄리티!!

자, 어려분들도 그렇게 저장한후 냉큼 알툴로 들어가죠!
잠깐, 잠깐, 아직 포토샵은 끄지 말아요. 혹시 모르잖아요.






...얼레?
분명히 저장을 했는데 없는걸로 나오네요.
빨간박스를 친 부분을 봅시다.
커헉!
그렇습니다, 알툴에서는 jpg를 지원하지 않는 것입니다!!
완전 삽질한것 같습니다. (-_-;


..할수없죠. 다시 포토샵으로 들어가서 png형식으로 바꿔줍시다.








젠장! 또 왜 안되는거냐!!
에러박스를 읽어봅시다.
unsupported PNG image

unsupported? 그게뭐지?
영한사전을 뒤적뒤적.. 아, 찾았습니다.


지원하지 않는다.. 라는 뜻이군요.

즉, 이 에러박스는 이렇게 말하고 있습니다.

"이딴거 지원안해."

..
...
....
이게 아닌가?

다시 해석해봅시다.

"PNG 이미지는 지원하지 않습니다."

음. 뭔가 그럴듯 하군요.
png이미지를 지원하지 않는다? 그게 뭔소리일까요?
분명 png이미지를 사용했는데 말이죠.

..
..
..
..
..
..
모르겠습니다. 도저히 모르겠습니다.

이 타이틀과 다른것의 차이가 뭘까요? 포토샵으로 들어가서
들어가는 타이틀과 안들어가는 타이틀을 열나게 비교해봅시다.



..
..
..
한눈에 이유가 눈에 들어옵니다. 그것은 바로 잊고있었던 index!

그렇습니다,

우리는 포토샵의 비위에 맞춰주기 위해 이 이미지를 16bit로 맞춰주었
지만 이번엔 알툴의 비위를 맞춰줘야 한다는걸 잊었군요.
즉, 마지막에 다시 8bit로 맞춰주는걸 잊고 있었던 겁니다.

..이런 바보같은 실수가 -_-;



재빨리 index로 바꿔줍시다.
세이브도 png형식으로 잘 해주고요.
bmp로 해도 상관은 없습니다만, 차이가 없습니다.
왜냐면 8bit니까.
..
..
..
..

..?

아, 무슨소리냐면 어차피 256색엔 화질의 차이가 없다는 뜻입니다.
그게 그거라는거죠 -_-ㅋ 어차피 256색밖에 못쓰는데 좋고 나쁘고가
어디있을까요..;

이번에야 말로!



자, 알툴에 들어가보니... 있습니다, 예, 있어요!! +ㅆ+

데이터베이스-> 시스템으로 가서 냉큼 바꿔줍시다.


..근데 뭔가 이상하군요. 왜이렇게 화질이 꾸리지?
..
..
..
그건 r2k의 한계입니다 -_-; F4누르고 풀스크린으로 맞추면 그나마
좀 나아집니다만.. 뭐..



여하튼, 이렇게 완성이 됬습니다!




---------------------------------------------------------------------


자, 여기서 뽀오너스~!!!

효과를 주는것이 더 있습니다!
도구툴도 있죠. 하지만 멋진 기능중 하나가 바로 "필터" 기능입니다.

필터.. 필터? 담배필터?.. 는 아니고..

공기 청정기? .. 이것도 아니고..

포토샵 메뉴를 잘 보면 fillter인지 filter인지가 있습니다.

fill은 칠하다라는 뜻이니, 칠해주는 메뉴라고 해석할수 있겠네요.

이 메뉴엔 여러가지가 있는데요. 이건 포토샵을 강좌해주는 홈페이지나

주변 도서관에 가면 포토샵 초보강좌가 있습니다.

그 수가 너무많아서 일일히 다 올리면 아마 이 홈페이지가 포토샵홈피가

될지도 모르겠습니다 -_-; 필터는 응용전용이니까 따로따로 쓸수는 없어요.

그럼, 포토샵 홈페이지에서 열심히 내공쌓고 멋있는 타이틀 만드시길!
  • ?
    Heoro레이드v 2006.01.08 20:05
    뭔지 모르겠다만..(퍼억) 하여튼 수고 하셨슴다..
    [포토샾이 없걸랑요,..]
  • ?
    게임메이커 2006.01.11 21:43
    오우!! 수고하셨어요 찬던 강좌임다!
  • ?
    라이덴찡 2006.01.18 04:05
    이야. 재밌어서 쏙쏙 들어오네요 +ㅂ+
  • ?
    명현대왕 2006.02.12 18:49
    포샵은 한글패치가 있는데(물론 98에서는 깨지긴 하지만)
  • ?
    ㅋㅋzzㅋㅋ 2006.04.18 21:05
    ㅋㅋ 저는 7.0이라서 그것도 한글판 아주 쉽게 했습니다.ㅋㅋ
    그런데요.. 그림자 떯어뜨리기가 아니라 그림자 효과에요..ㅋㅋ 태클건거 ㅈㅅ
  • ?
    ㅋㅋzzㅋㅋ 2006.05.25 17:25
    그런데요 비트맵의 색수가 일정하지 않다고 나오는데 화려한걸 하려 그랬더니
  • ?
    푸른사슬 2009.08.11 03:27
    케릭터 레이더로 원본을 슥슥 수정해도 될듯 ㅋㅋ
  • ?
    깡쭌☆ 2010.01.21 11:41

    아.. 집에 포토샵이 없다는것을 알고나서 좌절한 1人

  • profile
    니오티 2010.01.21 13:03

    그림판으로도 가능하답니다.ㅎ

  • ?
    애플이다 2010.01.22 16:48

    아 그래서 지금까지 안됐구나

    8비트였구나...

    지금까지는 그림판으로 열어서 256색으로 저장했는데...

    그리고 저는 포토샵카페 강좌에 다 영어로 되어있어서 포샵 영판이 더 편함

    근데 문제는 집에 있는건 한글판


  1. 동영상 찍는법을 모르시는분들! 주목!!

  2. 판타지소설에 많이 나오는 칼이름 ver.1

  3. [초급] 맵칩! 기본 만큼은 알고 넘어가자! (제 1편 맵칩 기초 사용)

  4. 천영진 개발 액알 3차 계정판!!! (난이도 높음)

  5. 간단한 액션 알피지 만들기

  6. 상점만들기

  7. 총쏘기 예제

  8. 먼거리에서 총을 쏘는 액션 알피지 만들기

  9. rpg쯔꾸르xp설치법

  10. 게이지바 어떤 지역에서도 표시

  11. Harmony.dll File 이 없습니다라는 오류

  12. 액알 만들기.

  13. 자동으로 채워지는 맵칩

  14. [액알]난수를 이용하여 액샨알피지를 만들어보자!

  15. 캐릭터 대화창 만들기

  16. RPG 만들기 게임 소리가 안날 경우

  17. RPG 에는 빠질 수 없는 스토리

  18. 레벨 제한 아이템 만들기

  19. 은행 만들기

  20. HP/MP 게이지바 만들기

  21. 횡스크롤 rpg 점프 이벤트 만들기!

  22. 몬스터 HP게이지를 화면에 표시하기

  23. 액션RPG숫자게이지퍼센트로 나타내기

  24. 움직이는 배경

  25. 액알강좌.

  26. RPG2003 액알에서 소환마법 (소환한몬스터와 적 몬스터 설정...) 도와주세요!!!

  27. 색다른 여관시스템

  28. 액션 알피지 예제

  29. 색다른 상점시스템

  30. 다시 만나는 오프닝강좌

  31. 몬스터 처리하기.

  32. 스위치로 말 끊기 (간단)

  33. 스위치 이용법

  34. 소리내고 문열고 바로 들어가기

  35. 게이지강좌 (HP,MP,EXP)

  36. 색다른 턴알 방식 예제

  37. 파티 초기 위치

  38. 기술 만들기

  39. 간단 간단 변수

  40. 다른맵으로 장소 이동하기

  41. 포토샵으로 게임 타이틀 제작하기

  42. 액션 알피지의 게이지바 실제 예제

  43. 데미지 표시 예제 동영상

  44. 액션 알퓌지 천영진 버젼 - 개발버젼

  45. 스킬 필드에서 쓰기

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 15 Next
/ 15

Copyright ⓒ Nioting All Rights Reserved. (since 1999)    개인정보
        

Fatal error: Cannot access property sessionController::$lifetime in /web/old/xe/modules/session/session.controller.php on line 45