|
작업을 시작하기 전에 먼저 어디에 어떤 이미지가 위치하고 있는 지를 파악을 해두시면 좋습니다. 작업 중간중간에 어떻게 만들어 졌는지 윈앰프 스킨을 열어보시면서 작업하시는게 좋습니다.
왼쪽은 윈앰프의 기본 메인스킨으로 하나의 덩어리로 보내지만 여러 개의 이미지가 모여 있는 것입니다.
윈앰프를 구성하고 있는 이미지의 이름은 main.bmp, text.bmp, numbers.bmp, posbar.bmp, balance.bmp, titlebar.bmp , cbuttons.bmp, playpaus.bmp, monoster.bmp, shufrep.bmp, volume.bmp의 이미지 파일로 되어 있습니다. |
|
음~~ main.bmp부터 시작하겠습니다. 직접 찍은 사진 중에 바탕에 넣고 싶은 이미지를 하나 골라보세요.
저는 우리집 강아지 재롱이를 넣어 보겠습니다. 바탕색은 단색으로 꾸미시는게 좋습니다. 버튼이나 다른 기능을 나타내는 아이콘들이 보여야하는데 너무 알록 달록하면 지저분해 보일 수도 있기 때문이죠.
고르신 사진을 배치하실 때는 윈앰프 원래 스킨을 보시고 중요한 버튼이 있는 곳은 피해서 배치하시는 게 좋습니다. 참고하세요. |
|
포토샵에서 File > New.. 누르고 275 * 116 크기, 해상도 72로 설정하고 OK 버튼을 눌러주세요.
열린 바탕에 위에서 골라둔 이미지를 적당한 위치에 배치하신 후 바탕도 정리해 주세요. |
|
바탕을 만드셨으면 넣어둘 곳을 만들어야죠. 윈앰프가 설치된 위치(프로그램이 있는 드라이브 > Program File > Winamp > Skins...)에 새로운 폴더를 하나 만들고 앞으로 작업한 이미지들을 이곳에 저장합니다.
저는 새로운 폴더 이름을 "newskin"이라고 만들었습니다. |
|
위에서 만들 폴더에 왼쪽의 이미지와 같이 표시창을 만드신후 왼쪽의 이미지의 이름을 main.bmp 파일로 저장합니다. 표시창의 위치는 상단의 윈앰프 이미지를 겹치고 위치를 잡아주시면 됩니다.
|
|
작업한 바탕화면이 어떻게 보이는지 보았습니다. 스킨을 바꿔보기 위해서는 윈앰프창의 왼쪽 상단 부분에 마우스를 대고 왼쪽을 클릭하시면 메뉴가 보입니다. 제일 하단부분에 Skins.. 메뉴가 보이지요?
보이시면 만드신 폴더를 선택해주시면 됩니다. |
|
재롱이가 보이는군요. 음하하하하 ^________^
신기하지요? |
|
text.bmp 이미지를 만들어 보겠습니다. 직접 만드는 것 보다는 다운 받은 이미지를 변형시키는 것이 좋습니다.(다운 받으신게 없다면 왼쪽 이미지를 그대로 쓰셔도 됩니다.) ( 왼쪽 이미지 다운받기)
스킨을 다운받았는데 이미지가 보이지가 않는다구요? 인터넷에서 윈앰프 스킨으로 검색을 하면 쉽게 스킨을 구할 수 있습니다. 이때 스킨을 다운 받습니다. 다운 받는 파일 들은 압축파일이라 Winamp > Skin... 안에 가도 이미지가 보이지 않습니다. 다운 받은 스킨의 이름을 찾으신 후 압축프로그램을 이용하여 압축을 풀어주면 스킨의 이름과 같은 폴더가 생깁니다. 이 폴더 안에 *.bmp 이미지들이 들어 있습니다.
|
|
다운 받은 text.bmp 파일을 포토샵에서 열고 마술봉을 선택합니다. 옵션에서 설정을 Tolerance를 0, Anti-aliased 와 Contiguous를 체크하지 말고 흰색부분을 마술봉으로 선택하면, 글자를 제외한 나머지 부분이 선택됩니다.
선택된 부분에 배경으로 정한 사진의 바탕색으로 채워줍니다. 저는 검정색으로 채우면 되겠네요.
그리고 폴더 안에 text.bmp 이름으로 저장해주세요.
|
|
numbers.bmp 이미지를 작업하겠습니다. 지금부터의 작업은 앞에서 한 작업의 반복입니다. 바탕을 선택하고 같은 색으로 채워주고 복사하고 정확한 위치에 붙여주는 식이지요. 이전 포토샵 작업에서 가장 기본 적인 작업들이니 어려운 점은 없을 것입니다. ( 왼쪽 이미지 다운받기)
다운 받은 이미지를 열고 마술봉을 앞에서 작업했던 조건(Tolerance를 0, Anti-aliased 와 Contiguous를 체크 않하기)으로 설정하시고 검정색을 제외한 흰색 부분만 선택을 합니다.
|
|
배경이미지와 같은 색을 채워주시고 검은색 부분도 다른색으로 바꿔주세요.
|
|
monoster.bmp 파일은 소리가 스테레오(Stereo)인지, 모노(Mono)인지를 표시해주는 곳으로 사용자가 설정하는 부분은 아닙니다.
왼쪽의 바탕을 보면 눈금이 보이지요? 메뉴에서 Windows > Show Rulers...이 체크 되어 있지 않으면 안보이니 확인해 보시고 체크하시고 작업하세요. 체크를 하고 나니 눈금이 보이시나요?
왼쪽 이미지를 파란색 라인이 보이는데 이 라인은 마우스를 왼쪽 눈금이나 상단 눈금에 대시고 원하는 위치로 드래그 하시면 나타납니다.
원하는 위치에 선을 끌어다 놓으면 되는데 정확한 위치는 포토샵 파레트 Info를 보시면 라인의 위치를 나타나는 수치를 보시면서 정확한 위치에 끌어다 놓으시면 됩니다.
|
|
메인 이미지로 만들었던 이미지에서 위치 239(가로) / 41(세로) 부분에서 29 * 12부분만큼 선택영역을 만듭니다.
선택한 영역을 복사하시고 새창을 열 때 창의 크기를 58 * 24로 정하고 해상도는 72로 합니다. 이 부분은 스테레오로 나오고 있나는 표시를 하는 부분입니다.
|
|
그 다음엔 위 파일에서 212 / 41 부분의 27 * 12 영역을 선택하고 복사합니다. |
|
앞에서 만든 새창의 이미지 옆에 나란히 붙입니다. 이 부분은 모노(활성) 표시가 되는 부분입니다.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
나란히 나열한 이미지를 아래 빈 공간에 똑같이 붙여줍니다. 왼쪽의 이미지를 monoster.bmp 로 저장해주세요.
위에 있는 있는 이미지는 활성이 되는 부분으로 스테레오, 모노 표시가 되는 부분이고, 아래 이미지는 활성이 되지 않는 부분으로 스테레오, 모노로 나오지 않는 것을 표시하는 부분입니다.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
작업한 곳의 변화를 보면서 작업하고 계시나요?
활성이 되면 배경 이미지인 재롱이의 눈위로 스테레오, 모노 텍스트가 생겨 눈이 가려지고 활성이 되지 않으면 텍스트가 안보이므로 재롱이의 눈이 보입니다. |
|
이번에는 posbar.bmp 파일을 작업해 보겠습니다. posbar.bmp은 노래가 진행되는 위치를 표시해 주는 부분입니다.
배경 이미지에서 16 / 72 위치에 248 * 10 만큼 영역을 선택한 후 복사를 합니다. |
|
새창 열기를 하신 후 바탕의 크기를 307 * 10으로 하시고 해상도는 72로 하신 후 앞에서 복사한 부분을 붙여줍니다.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
복사한 영역을 제일 왼쪽 면에 붙이고 남은 오른쪽 영역에는 위치를 표시해 주는 영역으로 두 개의 사각형을 붙여줄 것입니다.
왼쪽 사각형은 노래가 진행될 때 나타나는 부분, 오른쪽 사각형은 클릭을 했을 때 나타나는 부분으로 사각형의 크기는 29 * 10으로 하시고, 사각형과 사각형 사이를 한 픽셀 떨어지게 나란히 나열해 주세요.
나열하셨으면, posbar.bmp로 저장해주세요. ^___^
사각형 두 개를 그냥 붙이시는 것 보다는 예쁜 버튼을 만들어서 붙여 주시면 보기에 좋겠지요? 포토샵 강좌에서 배운 엠보싱 기능을 이용하여 버튼을 만들어서 넣어 보세요.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
이번에는 cbuttons.bmp을 만들어 볼텐데 이 부분은 노래를 재생, 정지, 다음, 이전 등을 조작하는 부분입니다. 바탕 이미지에서 16 / 88 영역에서 114 * 18 만큼을 선택하신 후 선택한 영역을 복사합니다. |
|
새창 열기를 하신 후 바탕의 크기를 136 * 36으로 하시고 해상도는 72로 하신 후 앞에서 복사한 부분을 바탕의 왼쪽 면에 바짝 붙여줍니다. 위에 붙인 이미지를 하나더 붙인후 아래부분에 붙여주세요.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
바탕이미지에서 136 / 89 위치에서 22 * 16 만큼 선택 해주신 후 선택영역을 복사하시고 바로 위에서 만든 바탕의 오른쪽 여백에 아래위로 붙여주세요.
|
|
총 4개의 사각형이 붙여진 상태입니다. 오른쪽 아래 부분에 조금 공간이 남았지요? 윗 부분은 평상시의 버튼모습이고, 아랫 부분은 클릭 했을 때의 버튼 모습이 나타나는 곳으로 실제 버튼을 만들어 넣어 보겠습니다.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
왼쪽에 들어갈 버튼 5개의 크기는 23 * 18 크기로 재생, 정지, 일시정지, 앞으로 이동, 뒤로 이동 등의 버튼을 만들어 나열합니다.
오른쪽의 버튼의 크기는 22 * 16 입니다. (위에서 붙인 이미지의 크기와 같습니다.) 작업이 끝난 이미지를 cbuttons.bmp로 저장해주세요.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
현재 어떤 상태인지를 보여주는 부분인 playpaus.bmp를 만들어 보겠습니다. 연주시간을 표시하는 바로 왼쪽에 표시됩니다.
이부분은 주로 단색의 배경 이미지가 많이 표시되는 부분이라 메인 이미지에서 복사하여 사용하는 것 보다는 직접 다운받은 스킨에서 변형하는게 편합니다.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.) |
|
text.bmp 만드는 방법과 같습니다. 바탕을 마술봉으로 선택하시고 원하는 색으로 채워 주신 후 playpaus.bmp로 저장해 주시면 됩니다. 마술봉으로 선택하실 때는 이미지를 확대하시고 작업하시는게 좋습니다.
|
|
shufrep.bmp 윈앰프에서 플레이 리스트, 이퀄라이저와 무작위 재생, 연속 재생을 표시하는 부분으로 이 부분 역시 다른 스킨에서 다운 받아 변형 시켜 주시면 됩니다.
( 왼쪽 이미지 다운받기)
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
Loop 부분은 연속 재생을 설정하는 부분으로 제일 왼쪽 면에 4개의 직사각형이 위치해 있습니다. 위에서 부터 나타내는 기능은 선택되지 않았을 경우, 선택 되지 않은 상태에서 클릭한 경우, 선택 되었을 경우, 선택 되어 있는 상태에서 클릭했을 때입니다.
배경 이미지에서 210 / 89 위치에서 28 * 15 영역을 선택하신 후 복사하여 Loop 위치에 붙여주시면 됩니다. |
|
4개의 자리에 위에서 복사한 영역을 각각 잘 붙여 주시고, 들어 가는 텍스트도 Loop 적당한 효과를 적용하여 입력해주세요. |
|
Shuffle 는 무작위 재생을 설정하는 부분으로 오른쪽면에 4개로 위에서 부터 순서대로, 선택되지 않았을 경우, 선택되지 않은 상태에서 클릭할 경우, 선택되어 있을 경우, 선택되어 있는 상태에서 클릭할 경우입니다.
배경 이미지에서 164 / 89위치에서 47 * 15 영역을 선택 복사를 하여 Shuffle 위치에 붙여주세요. |
|
Shuffle 4자리에 위에서 복사한 영역을 각각 붙이고, 텍스트도 적당한 효과를 적용하여 입력해주세요. |
|
아래 남은 여백에는 EQ와 PL가 위치 할건데, EQ는 이퀄라이저 창을 보이게 할지 설정하는 부분이며, PL 는 플레이리스트 창이 나타나게 할지 여부를 설정하는 부분입니다.
EQ와 PL은 동시에 제작을 하셔도 됩니다. 왼쪽 첫 번째 부분은 둘다 표시가 되지 않을 때, 오른쪽 첫 번째는 표시가 되지 않는 상태에서 클릭을 했을 때, 왼쪽 두 번재 부부은 둘다 표시가 되었을 때, 오른쪽 두 번째는 둘다 표시가 되는 상태에서 클릭했을 때를 나타냅니다. |
|
배경 이미지에서 219 / 58에서 46 * 12 영역을 복사를 한 후 남은 영역에 위쪽과 사이가 한 픽셀 떨어지게 붙입니다. 붙이신 후 텍스트도 넣고 shufrep.bmp 이름으로 저장해주세요. |
|
무지 길죠? 몇 개만 더 만들면 됩니다. ㅡ_ㅡ;;
이번엔 소리를 조절하는 부분을 표시해주는 volume.bmp을 만들겠습니다. 배경 이미지에서 107 / 57에서 68 * 13만큼 영역을 선택합니다. |
|
위에서 복사한 영역을 붙일 새창의 크기를 68 * 433, 해상도 72로 만드신 후 위쪽에 딱 맞게 붙여주세요. 그리고 아래로 같은 이미지를 붙여 주시면 되는데요 이미지와 이미지 사이를 2픽셀 띠어서 붙여주시면됩니다. 이렇게 붙여주시면 음~~ 총 28개가 붙을 거예요.
같은 색으로 나열해도 되지만 좀 신경을 쓰셔서 색상을 나열하시면 완성도가 더 좋아지겠죠?
저는 검정의 사각형을 28개 붙인 후 볼륨조절 표시가 구분이 되게 하기 위해 흰색 라인을 넣어 주었습니다. 이렇게 넣을 때는 왜 넣는지 모르시겠지만 나중에 완성된 스킨을 보시면 "이게 그거구나." 하실 거예요.
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.) |
|
아래 남아 있는 공간에는 소리를 조절할 아이콘을 만들어 줍니다. 14 * 11 크기의 아이콘 2개인데, 가장 왼쪽에 아이콘은 클릭을 하였을 때, 한 픽셀 띠우고 만든 아이콘은 클릭하지 않았을 때를 나타낼 아이콘입니다. |
|
소리조절의 좌우크기를 조절하는 부분 balance.bmp입니다. 배경 이미지 177 / 57에서 38 * 13만큼 선택영역을 복사하세요. |
|
복사한 영역을 47 * 433, 크기의 해상도 72 새로운 바탕에 가로 9픽셀을 띄우신 다음 위쪽 상단과 오른쪽에 딱 맡게 붙혀 주세요.
그리고 아랫쪽으로 2픽셀씩 계속 띠우시면서 28개를 붙여줍니다. volume.bmp 작업이랑 같죠?
|
|
28개를 붙이고 보니 아래부분이 남았죠? 여기에는 발란스를 조절할 아이콘을 만들어 넣을 자리입니다. 14 * 11만큼 아이콘을 2개를 나열할건데요.
왼쪽에 바짝 붙인 아이콘은 클릭을 하였을 때, 1픽셀 띠우고 만든 아이콘은 클릭하지 않았을 때의 아이콘입니다.
작업을 다 하셨으면 balance.bmp로 저장해주세요. |
|
만들 윈앰프의 상단에 제목이 나타날 titlebar.bmp 파일을 만들어 보겠습니다.
앞에서 까지 작업은 정확한 위치를 선택해야하는거 외에는 어려운 점이 없었지만, 이부분은 좀더 신경을 쓰셔야 합니다. 순서대로 잘 따라 오시면 되니까 겁먹지는 마세요.
포토샵에서 File > New... 크기는 344 * 87, 해상도 72의 새로운 새로운 창을 만들어주세요. |
|
제일 왼쪽부터 메뉴, 최소화, 닫기 아이콘으로 클릭했을 때 나타나는 아이콘입니다. 아래 나머지 두 개는 쉐이드모드(윈앰프를 축소화 시켜 표시하는 모드), 쉐이드모드 아이콘을 클릭했을 때, 바로 밑은 정상모드, 정상모드 아이콘을 클릭 했을 때의 아이콘입니다.
위에서 만든 새창 안에 9 * 9의 크기의 이미지를 왼쪽 상단부터 빈틈없이 붙여 왼쪽 이미지와 같이 만들어 주세요.
만드시기 어려우시다면 다운 받으신 후 변형해서 쓰셔도 됩니다. ( 왼쪽 이미지 다운받기)
|
|
앞에서 만든 아이콘 아래에 위치에 있는 2개의 아이콘은 (왼쪽부터) 쉐이드모드일 때 연주 진행 상태를 나타내는 진행바로 17 * 7, 아이콘은 3 * 7 크기로 만들어주세요.
작업이 어려우시다면 왼쪽 이미지를 다운 받아 변형해서 쓰세요. ( 왼쪽 이미지 다운받기)
|
|
타이틀(스킨 제목)이 들어가는 부분은 위에서 작업한 아이콘 바로 옆에 붙이는데 아랫쪽으로 네 개가 나란히 위치합니다. 중간에 테두리 친 부분이 위에서 작업하려고 한 타이틀바 부분입니다.
위에서 부터 활성화 되었을 때 타이틀, 비 활성화 되었을 때 타이틀, 쉐이드 모드일 때 활성화 타이틀, 쉐이드 모드일 때 비활성화 타이틀입니다.(왼쪽 이미지는 다운받은 titlebar.bmp 파일입니다.) ( 왼쪽 이미지 다운받기)
(※ 왼쪽 이미지의 검은 테두리는 이미지 구분을 위해 임의로 둘러놓은 것입니다. 작업시에 테두리는 없어야 합니다.)
|
|
배경 이미지에서 0 / 0에서 275 * 14 만큼의 영역을 선택해 주세요. |
|
선택한 영역을 복사한 후 앞에서 준비해 둔 타이틀바 이미지에 왼쪽에 만든 아이콘 바로 옆, 이미지 위쪽부분에 붙여주세요.
|
|
왼쪽에 있는 아이콘 중에 활성화된 아이콘들을 복사를 해서 왼쪽 이미지와 같이 위치시켜 줍니다. 제일 왼쪽에 있는 아이콘은 메뉴 활성화 아이콘, 위치는 33 / 5에 우측에 있는 세 개의 아이콘은 최소화 아이콘, 위치는 271 / 5 위에 붙여주시면 됩니다. 타이틀 부분을 구분해주기 위해 라인을 둘러주어도 좋을거 같네요. 저는 둘러 보았습니다.
|
|
메뉴 활성화 아이콘 옆으로 타이틀을 적어주셔도 좋습니다. 붙여진 아이콘들은 위에서 다운 받은 이미지의 아이콘을 변형하여 붙여 보았습니다. |
|
바로 한 픽셀을 띄운 다음 쉐이드모드 아이콘을 위치시키고, 바로 한 픽셀을 띄우고 위에서 작업한 아이콘을 붙여주세요. 배경으로 들어간 타이틀 이미지도 같이 복사해야 합니다.
좀 복잡하지요? 작은 아이콘들을 나열한다는게 그냥 하려면 어렵지만 이미지를 확대해서 작업을 하면 좀 수월하실거예요.
정확한 위치에 두는 게 어려우시다면 위에서 타이틀 견본으로 보여드린 이미지를 다운 받으신 후 작업 중인 창에 붙이신 후 종이에 먹지를 대고 그리듯이 참고 하시면서 작업하시는 방법도 있습니다.
텍스트바의 제목은 활성일 때와 아닐 때의 색을 다르게 해주시면 좋습니다.
|
|
세번째로 만들 타이틀바는 활성화된 쉐이드 모드 타이틀바입니다. 이 부분도 다운 받은 이미지를 변형해서 만들어 보세요.
작업중인 이미지에 붙이기를 한다음 이퀄라이저가 표시되는 부분과 파일을 연주, 멈춤등의 제어하는 아이콘 다섯 개와 연주 진행상태 부분 등을 표시해 줍니다. 우측에 쉐이드 모드 아이콘 대신에 정상모드의 아이콘으로 대신해야 합니다.
|
|
이제 비활성화된 쉐이드 모드 타이트바를 만들면 끝이군요. 세 번째로 만든 부분 아래에 복사해서 붙입니다. 앞에선 첫번째와 번째 바를 붙일 때 한 픽셀을 띄고 나열했는데 비활성화 부분의 바를 나열하실 때는 띄우지 마시고 겹쳐서 나열해주세요.
동그라미 부분이 한 픽셀 겹치는 부분입니다.
그리고 비활성화를 나타내는 아이콘은 좀 다르게 해야겠지요?
|
|
이제 정말 마지막 작업입니다. 알파벳으로 표시되는 옵션 아이콘을 만들어야 하는데 배경 이미지에서 10 / 22에서 8 * 43 만큼 영역을 복사해서 작업하고 있는 타이틀바 이미지 304 / 0 위치에 붙여주세요.
|
|
바로 옆에 붙여서 하나 더 만들어 주시구요, 밑으로는 아래의 이미지와 같이 아래로 한 픽셀을 띄운 다음 복사한 후 붙여주세요.
위의 두 옵션은 선택되지 않았을 때, 밑의 다섯 아이콘들은 각각의 메뉴가 선택되었을 때를 나타냅니다.
다운받은 이미지을 이용하시는 것이 편하실 것입니다. |
|
완성을 하셨으면 이미지를 같은 폴더 안에 titlebar.bmp 파일로 저장을 하시고, 윈앰프 실행 하신 후 왼쪽 상단 부분에 마우스를 대고 왼쪽을 클릭하시고, 제일 하단 부분에 Skins.. 메뉴에서 직접 만드신 폴더를 선택해주시면 스킨이 바뀝니다.
|
|
완성한 메인스킨입니다. 헉헉~~ 저도 너무 힘드는군요. ((ιご,.ご)
따라하시다가 포기하신분 많을 것 같네요. 끝까지 작업 하신 분들은 나만의 스킨이 생겨 기분 좋으실거 같구요. -_-;
작업한 이미지들이 어느 부분에서 기능을 하는지 알아보시라고 아이콘을 통일감 없이 만들었더니 이상하네요.
완성된 스킨을 보시면서 각각의 이미지 파일의 위치를 자세히 따져 보시면 다음 작업에는 더 예쁜 스킨을 만드실 수 있을거예요.
|