Qianqianjingting 맞춤형 피부를 만드는 방법
1. Qianqianjingting의 피부 제작이 무엇인지 이해하십니까?
1. 스킨 제작에 노출된 적이 없다면 다음 단락을 주의 깊게 읽어 보십시오.
설계된 스킨 렌더링을 적용하는 방법 Qianqianjingting 소프트웨어를 사용할 때 다음이 있습니다. 이해해야 할 두 가지 주요 아이디어: 하나는 렌더링의 컨트롤(또는 버튼)을 별도로 잘라내야 한다는 것이고, 다른 하나는 이전 지점에서 언급한 컨트롤(또는 버튼)을 잘라내야 한다는 것입니다. 좌표를 정확하게 찾아보세요. 조금 혼란스럽다면 계속 진행해 보세요.
2. Qianqian의 스킨은 설치 디렉터리 아래의 Skin 폴더에 있습니다. 확장자는 .skn 또는 .zip일 수 있습니다. 실제로 둘은 동일합니다. 전자의 경우 먼저 .skn의 확장자를 .zip으로 변경할 수 있습니다(시스템에 파일 확장자를 표시하려면 "도구" - "폴더 옵션" - "보기"를 클릭한 다음 "알려진 파일 형식 숨기기"를 변경하세요). 확장자 앞에 있는 작은 확인 표시를 제거하세요.") 그런 다음 별도의 폴더에 압축을 풉니다. 폴더에 들어가면 많은 bmp 형식의 사진과 여러 개의 xml 파일이 포함되어 있는 것을 확인할 수 있습니다. 이 파일은 스킨입니다. bmp 사진은 각 창의 배경과 버튼 그림, Skin.xml은 스킨의 기본 정보, 창과 버튼의 위치와 크기 등을 정의한 구성 파일입니다. XML 형식을 기반으로 한 파일로, 직접 시스템에 내장된 메모장이나 기타 텍스트 편집 도구를 사용하여 엽니다.
자, 위의 기본 지식을 이해한 후 실제 제작 과정을 배우기 시작합니다.
2. 만들기 시작!
4단계를 따르세요: (A) 이미지 잘라내기 (B) 구성 파일 수정 (C) 스킨 파일로 패키징하기 (D) 스킨 적용
(A) 잘라내기 이미지:
PS 또는 FW를 사용하여 디자인 렌더링을 열고 전체적으로 관찰해 보세요. 어떤 그림을 따로 잘라야 하는지, 그림 이름은 무엇인지 이야기해 보세요.
1. 메인 창 컨트롤
(1) 메인 창 배경 이름 지정: player_skin.bmp
핵심 사항: 화면의 작은 둥근 모서리를 비우기 가장자리를 색상(#ff00ff)으로 채워야 합니다. 가장자리는 1픽셀씩 채워야 합니다. (위 그림과 같이 빈 부분의 색상 처리)
(2) 최소화 버튼(4개) 상태)
이름: 최소화.bmp
요점: 모든 기능 버튼에는 4가지 상태가 있어야 하며, 이 4가지 상태는 하나의 사진으로 만들어 .BMP 형식으로 저장하므로 각 상태 버튼의 너비와 높이가 일관되어야 한다는 점에 유의하세요.
첫 번째 상태: 자연 상태
p>두 번째 상태: 마우스 교차할 때의 상태
세 번째 상태: 마우스를 눌렀을 때의 상태
네 번째 상태: 버튼이 실패했을 때의 상태 (예를 들어 재생목록에 1곡만 있는 경우 '다음곡' 버튼을 클릭할 수 없으므로 이때의 버튼 상태는 실패했을 때의 상태입니다)
3) 미니 모드 버튼
이름: minimode.bmp
위와 동일하므로 여기서는 자세히 설명하지 않겠습니다.
(4) 닫기 버튼
이름: close.bmp
(5) 재생 진행률 슬라이더(이 예에서는 재생 진행률에 있는 작은 원형 버튼) bar )
이름: Progress_thumb.bmp
요점: 이 작은 버튼을 배경 부분에서 분리해야 하므로 빈 부분을 처리하여 최종적으로 투명도를 표시하는 방법 인터페이스 효과에 대한 해결책은 위 그림과 같이 빈 공간을 색상(#ff00ff)으로 채우는 위의 큰 배경 빈 공간 처리와 동일합니다.
(6) 재생 진행률 채우기 배경 이미지
이름: Progress_fill.bmp
(7) 재생 목록 창 열기 및 닫기 버튼
이름: 재생 목록.bmp
(8) 이퀄라이저 창 열기 및 닫기 버튼
이름: equalizer.bmp
(9) 가사 창 열기 및 닫기 버튼
p>
이름: lyric.bmp
(10) "이전" 버튼
이름: prev.bmp
( 11) "재생" 버튼
이름: play.bmp
(12) "일시 정지" 버튼
이름: Pause.bmp
(13) "다음 노래" 버튼
이름: next.bmp
(14) "재생 파일 열기" 버튼
이름: open.bmp
(15) 볼륨 스피커 버튼
이름: mute.bmp
(16) 볼륨 진행 배경 채우기 이미지
이름: Progress2. bmp
(17) 볼륨 슬라이더
(5)와 동일
2. 이퀄라이저 창 컨트롤
(18) 열기 버튼
이름: eq_enabled.bmp
(19) 재설정 버튼
이름: Reset.bmp
(20) 구성 버튼
p>이름 : eq_profile.bmp
(21) 닫기 버튼, 메인 창의 닫기 버튼과 동일하게 그림을 잘라냅니다.
(22) 밸런서 서라운드 사운드 모두 슬라이딩 작은 버튼은 (5)와 동일합니다.
(23) 균형 있고 서라운드로 채워진 배경
이름: eqfactor_full2.bmp
(24) 균형 채워진 배경
이름: eqfactor_full.bmp
3. 재생 목록 창 제어
(25) 기본 창 닫기 버튼과 동일한 닫기 버튼
p>
(26) 도구 모음 버튼,
이름: Playlist_toolbar.bmp
핫스팟 상태 이름 지정: Playlist_toolbar_hot.bmp
(27) 스크롤 막대 위쪽 및 아래쪽 버튼
이름: scrollbar_button.bmp
요점: 위쪽 및 아래쪽 버튼을 하나의 그림에 결합
(28) 스크롤 막대 슬라이딩 버튼
이름: scrollbar_thumb.bmp
(29) 스크롤 막대 배경
이름: scrollbar_bar.bmp
4. window
(30) 닫기 버튼, 메인 창과 동일
(31) 항상 상단 버튼
이름: ontop.bmp
5. 음악 창 컨트롤
위 그림은 Qianqian Music 창 인터페이스를 보여줍니다. 녹색 테두리로 둘러싸인 부분은 표시 부분이며 스킨 디자인과 관련이 없습니다. 예를 들어, 우리가 원하는 것은 녹색 테두리 밖의 콘텐츠입니다.
자, 제작 부분을 명확히 하고 제작 과정에 대해 이야기를 시작하겠습니다. 먼저 사진에 보이는 가장 바깥쪽에 있는 파란색 스타일의 창인 창 배경을 만들어야 합니다. 이해하기 어렵지 않습니다. 형식도 .bmp이므로 투명한 배경(#FF00ff)을 설정하고 둥근 모서리 픽셀 처리에 주의해야 합니다.
그런 다음 위 그림에서 뒤로, 앞으로, 새로 고침, 닫기, 다중 선택 상자 및 연결된 텍스트 영역을 포함한 모든 컨트롤이 빨간색 상자로 표시되어 있습니다. 뒤로 및 앞으로 기능은 웹 페이지처럼 현재 페이지를 제어하는 기능이지만 노래의 뒤로 및 앞으로 기능은 없지만 아무런 효과가 없으므로 더 이상 설명하지 않겠습니다.
마지막으로 음악 창을 열 수 있는 버튼을 만들어야 합니다. 버튼은 메인 창에 배치해야 합니다. 메인 창을 만들 때 공간을 남겨 두는 것을 잊지 마세요...
자세히 잘라내기 다이어그램의 예는 다음과 같습니다. 한 눈에 알 수 있습니다.
(B) 구성 파일 수정
1. 먼저 살펴보겠습니다. 구성 파일 skin.xml
skin version="2" name="Just Listening to Azure"author="Qianqian Listening" url="" email="none" transparent_color="#ff00ff"
아래 그림을 참고하시면 코드를 이해하실 수 있습니다
player_window image="player_skin.bmp"
play position="50, 123, 90, 163" image ="play.bmp"/
일시 정지 위치="50, 123, 90, 163" image="pause.bmp"/
prev position="9, 123, 49 , 163" image="prev.bmp"/
다음 위치="132, 123, 172, 163" image="next.bmp"/
정지 위치="91 , 123, 131, 163" image="stop.bmp" /
mute position="183, 137, 194, 148" image="mute.bmp" /
가사 position="248, 112, 272, 126" image="lyric.bmp"/
이퀄라이저 위치="223, 112, 242, 126" image="equalizer.bmp"/
재생 목록 위치="197, 112, 216, 126 " image="playlist.bmp"/
브라우저 위치="214, 86, 276, 106" image="browser.bmp" /
최소화 위치="230, 3 , 247, 21" image="minimize.bmp"/
미니모드 position="248, 3, 265, 21" image="미니모드 .bmp"/
종료 위치= "266, 3, 283, 21" image="close.bmp"/
진행 위치="7, 112, 184, 123" bar_image="" Thumb_image="progress_thumb.bmp" fill_image=" Progress_fill.bmp"/
볼륨 위치="197, 136, 277, 147" Vertical="false" bar_image="" Thumb_image=" Progress_thumb.bmp" fill_image="progress2.bmp"/
p>다음 텍스트는 플레이어의 일부 표시 텍스트 설정입니다.
아이콘은 Qianqianjingting의 로고입니다.
정보는 음악 제목이며 스페셜입니다.
가수 정보를 편집하여 플레이어 창에 표시합니다.
led는 시간 숫자입니다. 이것은 텍스트 코드가 아니라 그림입니다. 0 1 2 같은 크기의 문자입니다. 3 4 5 6 7 8 9: -
이 12자는 필수라는 것을 기억하세요.
Stereo는 스테레오 글꼴 설정입니다.
Status는 상태 글꼴 설정입니다.
Visual은 단순히 위치를 정의하는 시각 효과 설정입니다. 자세한 내용은 참조하세요. 설정을 위한 Visual.xml 파일
icon position="4, 3, 20, 19" image="TTPlayer.ico"/
info position="21, 34, 208, 49" color="#ffffff" 글꼴="타호마"font_size="13" align="왼쪽"/
led position="160, 37, 270, 49" image="번호. bmp" align="right"/
스테레오 위치="224, 54, 273, 70" color="#ffffff" 글꼴="타호마"font_size="13" align="right" /
상태 위치="200, 70, 273, 86" color="#ffffff" 글꼴="타호마"font_size="13" align="right" /
시각적 위치= "17, 56, 185, 106"/
/player_window
2. 가사 표시창 코드
아래 그림 참고
p>lyric_window position="0, 393, 287, 475" resize_ect="49, 25, 245, 73" image="lyric_skin.bmp"
lyric position="10, 25, 277, 73 "/
close position="221, 3, 283, 20" image="close.bmp" align="right"/
ontop position="202, 3, 264 , 20" image="ontop.bmp" align="right"/
/lyric_window
3. 이퀄라이저 윈도우 코드
equalizer_window position= " 0, 165, 287, 279" image="eq_skin.bmp" eq_interval="5"
close position="266, 3, 283, 20" image="close.bmp" align=" 오른쪽 "/
enabled position="152, 3, 187, 21" image="eq_enabled.bmp"/
profile position="224, 3, 259, 21" image = "eq_profile.bmp"/
reset position="188, 3, 223, 21" image="reset.bmp"/
균형 위치="15, 45, 71 , 56" Thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_
full2.bmp"/
서라운드 위치="15, 76, 71, 87" Thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full2.bmp"/
프리앰프 위치="81, 36, 92, 99" Thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/
eqfactor position="115, 36, 126, 98" Thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/
/equalizer_window
4. 재생목록 창 코드
playlist_window 위치 ="0, 279, 287, 393" resize_ect="61, 43, 265, 105" image="playlist_skin.bmp"
close position="221, 2, 283, 19" image= " close.bmp" align="right"/
toolbar position="10, 24, 278, 41" image="playlist_toolbar.bmp" hot_image="playlist_toolbar_hot.bmp" align="left"/
스크롤바 버튼_이미지="scrollbar_button.bmp" Thumb_image="scrollbar_thumb.bmp" bar_image="scrollbar_bar.bmp" align="center"/
재생목록 위치="10, 43, 278 , 105" selected_image="playlist_selected.bmp"/
/playlist_window
1. 미니 윈도우 코드
mini_window image="mini-player.bmp "
재생 위치="177, 3, 271, 27" image="play_mini.bmp" /
일시 중지 위치="177, 3, 271, 27" image="pause_mini. bmp" /
prev position="153, 3, 247, 27" image="prev_mini.bmp" /
next position="224, 3, 318, 27 " 이미지 ="next_mini.bmp" /
stop position="201, 3, 295, 27" image="stop_mini.bmp" /
lyric position="269, 17 , 379 , 27" image="lyric_mini.bmp" /
미니모드
e position="272, 3, 335, 20" image="minimode.bmp" /
최소화 위치="255, 3, 317, 20" image="minimize.bmp" /
exit position="289, 3, 351, 20" image="close.bmp" /
icon position="3, 6, 19, 22" image="TTPlayer.ico" /
info position="27, 7, 142, 22" color="#ffffff"font="타호마"font_size="13" align="left"/
/ mini_window
2. 음악창의 코드(//코드 뒤 부분은 주석)
browser_window position="540, 0, 810, 336" image=" browser_skin.bmp" transparent_color ="#ff00ff"
close position="452, 3, 469, 19" image="close.bmp" //닫기 버튼 위치
뒤로 위치 ="112, 3, 133, 19" image="browser_backward.bmp" //뒤로 버튼 위치
앞으로 위치="148, 3, 169, 19" image="browser_forward.bmp" // 앞으로 버튼 위치
새로 고침 위치="186, 2, 207, 18" image="browser_refresh.bmp" //새로 고침 버튼 위치
시작 위치="7, 458, 144 , 473" ckbox_image="browser_startup.bmp" 간격=4 color="#ffffff"font="SimSun"font_size="12" //다중 선택 상자의 위치입니다. X 좌표에는 다음 텍스트가 포함되어야 합니다. 간격의 값은 다중 선택 상자와 텍스트 사이의 거리입니다.
linktxt position="280, 457, 464, 472" color="#ffffff"font="SimSun"font_size=" 12" //텍스트 영역을 연결합니다. 더 많은 텍스트 콘텐츠를 표시하려면 더 많이 남겨 두는 것이 좋습니다.
browser position="9, 26, 464, 447" //html 웹 페이지 위치, 동일한 성격 "Lyrics Show"의 가사 표시 범위
/browser_window
2. Lyric.xml 구성 파일을 살펴보겠습니다
설정은 다음과 같습니다. 강조 색상과 배경 색상을 각각 정의하는 가사 텍스트
ttplayer_lyric
가사
Font="-11, 0 , 0, 0, 400, 0, 0, 0, 134 , 3, 2, 4, 49, 타호마"
TextColor="#008CC1"
HilightColor="#005489 "
ㄴ
kgndColor="#F4FBFE" /
/ttplayer_lyric
3. Playlist.xml 구성 파일을 살펴보겠습니다.
이것은 재생목록 창에는 글꼴 종류, 글꼴 색상, 하이라이트 색상, 첫 번째 배경색, 숫자 색상, 시간 색상, 현재 선택한 색상, 두 번째 배경색(첫 번째 배경색과 일치할 수 있음)이 각각 정의됩니다.
ttplayer_playlist
재생 목록
Font="-11, 0, 0, 0, 400, 0, 0, 0, 134, 3, 2, 4, 49, Tahoma"
Color_Text="#008CC1"
Color_Hilight="#005489"
Color_Bkgnd="#EAF5FA"
Color_Number="#005489 "
Color_Duration="#005489"
Color_Select="#84CEF9"
Color_Bkgnd2="#EAF5FA"
/
/ttplayer_playlist
넷. Visual.xml 구성 파일을 살펴보겠습니다.
이것은 시각적 표시 효과를 설정하는 데 사용됩니다. 먼저 Qianqianjingting을 소개하겠습니다. .어떤 종류의 시각 효과가 제공되는지:
1. 스펙트럼 분석
2. 환상적인 별이 빛나는 하늘
3. >4. 앨범 커버
5. 비디오 효과 표시 안 함
이 5가지 상황은 플레이어의 메인 창에서 마우스 오른쪽 버튼을 클릭하여 전환할 수 있습니다.
그림과 같이:
다음 구성 파일은 다양한 시각 효과의 색상을 설정하는 데 사용됩니다. 사용해 보고 원하는 효과를 조정할 수 있습니다.
ttplayer_visual
시각적
SpectrumTopColor="#FFFFFF"
SpectrumBtmColor="#07F7FF"
SpectrumMidColor="#8CDCFF"
SpectrumPeakColor="#FFFFFF "
SpectrumWide="1"
BlurSpeed="3"
Blur="1"
BlurScopeColor="#07F7FF"
TextColor="#FFFFFF"
Font="-11, 0, 0, 0, 400, 0, 0, 0, 134, 3, 2, 4, 49, Tahoma"
/
/ttplayer_visual
(C) 스킨 파일로 패키징
자, 위는 스킨 제작의 전체 과정입니다. 자, 위의 컷팅 사진과 구성 파일을 만든 후, WinRAR이나 WinZIP과 같은 압축 도구를 사용하여 스킨 파일로 패키징할 수 있습니다. 키보드의 Ctrl+A를 눌러 모든 파일을 선택한 다음 모두 압축 폴더에 파일을 추가하고, 압축 파일 형식으로 "zip"을 선택하고, 압축 방법으로 "best"를 선택한 후 "확인"을 클릭하세요!
(D) 스킨 적용
이 압축 파일을 Qianqian 설치 디렉터리의 Skin 폴더에 복사한 후 "Qianqian 옵션..." - "스킨"에서 선택하세요. 스킨 적용을 선택하거나 메인 패널에서 마우스 오른쪽 버튼을 클릭하세요 - "스킨 선택"!
아마도 피부를 만드는 방법을 이미 알고 계실 것입니다.
이해를 돕기 위해 다음 부분을 추가했습니다.
3. 여러 중요한 속성에 대한 설명
위치: 요소 중 가장 기본적인 속성 중 하나이며 창을 정의하는 데 사용됩니다. 배경과 버튼의 위치와 크기. 매개변수 값 형식은 "a, b, c, d"입니다. 이 네 가지 값은 요소의 위치를 고정할 뿐만 아니라 크기도 결정합니다. 여기서 (a, b)는 왼쪽 위 모서리의 좌표이고, (c, d)는 오른쪽 아래 모서리의 좌표이고, c-a는 길이, d-b는 높이입니다. 좌표의 원점은 두 가지 상황으로 나눌 수 있습니다. 가사 표시, 이퀄라이저, 재생 목록의 세 하위 창 위치는 기본 창의 위치입니다. 왼쪽 위 모서리는 각 창 내부의 버튼 위치인 경우 좌표 원점으로 사용됩니다. 예를 들어, 가사 표시 창의 "닫기" 버튼은 가사 표시 배경 이미지의 왼쪽 상단을 기준으로 하며, 다른 항목도 마찬가지입니다. !
특별히: ① 재생 목록의 스크롤바 요소는 위치 속성을 정의할 필요가 없으며 해당 위치는 자동으로 재생 목록의 가장 오른쪽에 고정됩니다. ② 기본 창의 진행률 및 볼륨 요소; 및 이퀄라이저 창 밸런스, 서라운드, 프리앰프 요소의 위치 속성은 슬라이더가 이동할 수 있는 범위의 좌표를 나타냅니다. ③ 재생 목록 악기 창의 재생 목록 요소와 가사의 가사 요소의 위치 속성은 악기 창은 재생 목록과 가사 표시 범위를 나타냅니다. 재생 목록 창과 가사 표시 창 크기가 변경되면 이 두 요소의 크기가 자동으로 변경되지만 네 면과 창의 네 면 사이의 거리는 이 위치에 반영됩니다.
resize_direct: 가사 표시 및 재생 목록 창의 고유한 속성으로, 확장할 수 있는 두 창의 부분을 정의하는 데 사용됩니다. 해당 매개변수 형식은 위치와 동일합니다. 창 크기가 변경되면 직사각형 프레임 내의 부분만 늘어나고 이 범위 밖의 부분은 변경되지 않습니다. 해당 매개변수 값은 0 또는 1일 수 있습니다. 여기서 0은 변경되지 않습니다. 창 크기를 변경할 때 스트레칭 방법이 사용됩니다. 1은 타일링 방법이 사용됨을 의미하며 이 속성은 생략 가능합니다. 즉 기본값 0이 사용됩니다.
또한 가사는 및 재생 목록 창에는 선택적 요소도 있습니다: 제목, 특정 항목이 있을 때 사용할 수 있습니다. 필요할 때 사용합니다(예: 창 크기를 변경할 때 제목을 중앙에 유지하는 등). 형식은 다음과 같습니다.
제목