[skin 따라하기] 10픽셀 두께의 테두리 skin 제작하기

 

 

[skin 따라하기] 10픽셀 두께의 테두리 skin 제작하기

안녕하세요. photoWORKS 사용자 spacus입니다. 우선은 프로그램을 제작하고, 무료로 공유해주신 장효성 님에게 감사 드립니다. photoWORKS의 skin을 직접 만들어 보려는 분들이 많으신것 같더군요. 나름의 깜냥으로 정리해 보겠습니다. ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 기본 skin 만들기 우선은 다음과 같이 사진 주변에 10픽셀의 검은 테두리를 둘러주는 skin을 만들어 보겠습니다. ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ■ 고정되는 부분과 늘어나는 부분 이해하기. photoshop과 같은 이미지 편집 프로그램을 몇번 다루어 보신 분이라면, 10픽셀 폭의 테두리를 사진 주변에 두르는 것은 쉬운 작업일 것입니다. 테두리를 두르고자 하는 사진을 photoshop에 불러와서 그 주변에 10픽셀의 검은 선을 그리면 끝이죠. 하지만 이렇게 만들어진 테두리는 크기가 조금이라도 다른 여타의 사진들에게는 맞지 않는 테두리가 될것입니다. 사용해 보셔서 아시겠지만, photoWORKS 는 임의의 모든 사진들에게 정확히 10픽셀의 검은 테두리를 만들어 줍니다. 그러기 위해서 skin은 가변적으로 쭉쭉 늘어나야 합니다. 그런데 늘어나는 것과 확대와는 차이가 있습니다. 확대를 할경우 10픽셀이라는 폭도 함께 증가 하기때문에 안됩니다. 그래서 photoWORKS의 skin은 늘어나는 부분과 고정된 부분으로 나뉘게 됩니다. 1. upleft..................고정 2. upmid.................늘어남 3. upright................고정 4. ctleft...................늘어남 5. ctright.................늘어남 6. btleft...................고정 7. btmid..................늘어남 8. btright.................고정 skin을 위와 같이 8개의 부분으로 나누어서 생각합니다. 고정되는 부분은 upleft,upright,btleft,btright 부분입니다. 가변적으로 늘어나는 부분은 upmid,ctleft,ctright,btmid 이렇게 네 부분입니다. 늘어 나는 부분중 upmid와 ctmid 부분은 가로 방향으로 늘어나게 되고, ctleft와 ctright부분은 세로 방향으로 늘어납니다. 이렇게 가로와 세로 방향으로 늘어나는 부분이 있기때문에 임의 크기의 사진에도 테두리로 적용할 수 있는 것입니다. ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ■ 늘어나는 부분이 가장 짧을때의 모습으로 skin 이미지 만들기. 실제로 skin을 만들때는 가로 세로 늘어나는 부분의 길이가 최소가 되었을때의 크기로 만들어 주면 됩니다. 가로 길이가 최소가 되는 경우는 upmid와 btmid의 가로 폭이 1픽셀일때 입니다. 세로 길이가 최소가 되는 경우는 ctleft와 ctright의 세로 길이가 1픽셀 일때 입니다. 위에서 언급한 예시 그림의 왼쪽 부분처럼 하면 됩니다. 자~~ 그러면 skin으로 만들어줄 image는 다음과 같이 가로 세로size가  21픽셀이고, 가운데 1픽셀X1픽셀 부분만 흰색인 다음과 같은 모습이 될것입니다. 만드셨으면, bmp 화일 형태로 photoWORKS>skin 폴더 안에 black10.bmp라고 저장합니다. 간단하죠..?? skin 이미지는 다 만드신 겁니다. ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ■  ini 화일 편집하기. skin 폴더를 살펴 보시면, bmp화일과 같은 이름의 ini화일이 있습니다. 이 화일을 편집해서 photoWORKS 프로그램에게 내가 만든 skin 이미지 중에 어느 부분이 고정되어 있는 모서리 부분인지 쭉쭉 늘어날 부분인지를 알려주는 것입니다. 임의의 ini 화일을 선택 하시고, Ctrl+C 를 누르고 다시 Ctrl+V를 눌러보세요. 사본-어쩌구.ini 화일이 만들어 질겁니다. 이 화일을  black10.ini 로 이름바꾸기 합니다. ^^ 더블 클릭해서 워드패드나 메모장으로 열면 다음과 같은 입력 내용들이 나옵니다. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ; This file contains full information about the frame skin. ;                                  written by Hyosung Jung. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; [Info] ver=1.0         title=spacus         direction=0 [Skin] file=spacus.bmp upleft=200 200 upmid=1 200 upright=30 200 ctleft=200 1 ctright=30 1 btleft=200 58 btmid=1 58 btright=30 58 [Make] stretch_mode=0 pic_drawpt=5 5 extraspace=35 63 ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ■ 우선은 [Info]의 내용을 볼까요..?? title에 해당하는 내용은 photoWORKS를 실행하면 skin을 선택하는 메뉴가 있는데, 거기에 표시되는 이름입니다. 10픽셀의 검은 테두리니까 black10 이라고 수정합니다. ■ 이번엔 [skin]부분을 수정해 보겠습니다. file은 사용할 skin 이미지의 화일 명입니다. 아까 photoshop에서 black10.bmp로 저장했죠..?? 그러니 black10.bmp로 수정해 줍니다. 그 다음 각각의 위치에 해당하는 부분의 가로 세로 픽셀을 적어 주면됩니다. 우리가 만든 black.bmp 이미지를 보면서 수정해 볼까요..?? upleft는 가로 10픽셀 세로 10픽셀이므로 upleft=10 10 이라고 수정합니다. upmid는 가로 1픽셀 세로 10픽셀 이므로 upmid=1 10 이라고 수정합니다. upright는 가로 10픽셀 세로 10픽셀 이므로 upright=10 10 이라고 수정합니다. ctleft는 가로 10픽셀 세로 1픽셀 이므로 ctleft=10 1 이라고 수정합니다. ctright는 가로 10픽셀 세로 1픽셀 이므로 ctright=10 1 이라고 수정합니다. btleft는 가로 10픽셀 세로 10픽셀 이므로 btleft= 10 10 이라고 수정합니다. btmid는 가로 1픽셀 세로 10픽셀 이므로 btmid=1 10 이라고 수정합니다. btright는 가로 10픽셀 세로 10픽셀 이므로 btright=10 10 이라고 수정합니다. 지금까지의 입력 작업을 통해서 photoWORKS는 black10.bmp 이미지중에서 어느 부분이 고정되어지는 네개의 모서리 부분인지 알게 되었고, 어느 부분이 쭉쭉 늘어나는 부분인지 판단하게 되었습니다. ■ 이제는 [Make] 부분을 수정해서 얼마만큼 쭉쭉 늘려줄지를 정해 주면 됩니다. 수정에 앞서서 한가지 집고 넘어가야 할 문제가 있습니다. 임의 크기의 사진에 우리의 black skin을 적용하면 원본 사진의 가로 크기에 비해서 skin을 적용한 사진의 가로 크기는 얼마나 커질까요..?? 그렇습니다. 20 픽셀 입니다. skin의 가로 크기는 원본 사진보다 20픽셀이 더 커야 외쪽 10픽셀 오른쪽 10픽셀의 테두리가 생기겠죠.?? 그럼 원본 사진보다 skin의 세로 크기는 얼마나 커야 될까요..?? 역시 20픽셀입니다. 위쪽 10픽셀과 아랫쪽 10픽셀입니다. 이렇게 원본 사진 보다 skin의 가로 세로길이가 얼마나 더 큰게 skin이 쭉쭉 늘어날 것인가를 정해주는 것이 extraspace입니다. 우리 black10 skin은 가로 세로 모두 원본 사진의 가로 세로보다 20픽셀씩 커야 하므로 extraspace=20 20 이라고 수정합니다. ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ■ 이제 액자의 크기도 정해졌고, 원본 사진을 액자에 끼우면 됩니다. 액자의 어느 부분에 원본 사진을 붙일 것인지를 정해 주는 것이 pic_drawpt 부분입니다. 원본 사진의 정확한 위치를 정해 주기 위해서 "원본 사진의 왼쪽 상단 모서리"가 "테두리의 왼쪽 상단"에서 몇 픽셀 떨어졌는지를 입력해 주면 됩니다. 우리의 black10 skin의 경우 테두리의 왼쪽 상단에서 가로 방향으로 10픽셀만큼, 세로 방향으로 10픽셀 만큼 떨어진 위치에 놓이면 되죠..?? 그래서 pic_drawpt=10 10 이라고 수정합니다. ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 모두 끝났습니다. 최종적으로 수정된 black10.ini 화일의 내용은 다음과 같습니다. [Info] ver=1.0 title=black10 direction=0 [Skin] file=black10.bmp upleft=10 10 upmid=1 10 upright=10 10 ctleft=10 1 ctright=10 1 btleft=10 10 btmid=1 10 btright=10 10 [Make] stretch_mode=0 pic_drawpt=10 10 extraspace=20 20 ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 야~~~ 이제 다 되었습니다. 기본적인 테두리를 만들어 주는 skin은 간단하게 정리하면, 1. 늘어나는 부분의 길이가 최소가 되도록 skin 이미지를 만들어 bmp 화일로 저장한다. 2. bmp화일과 같은 이름을 ini화일을 만든다. 3. ini 화일의 [info]부분을 수정한다. 4. [skin]부분에서는 skin 이미지의 여덟개의 영역중 고정된 모서리 부분과 늘어나게될 네부분의 영역을 가로 세로 픽셀로 입력한다. 5. [make]부분에서 완성될 skin의 크기가 원본 이미지의 가로세로 크기보다 몇픽셀 크게 될지 정해준다. 6. 원본 이미지의 왼쪽 상단 모서리가 skin의 왼쪽 상단 모서리에서 가로 세로 몇픽셀 떨어져서 위치할지 정해준다.

 

.