• Hiện tại trang web đang trong quá hình chuyển đổi và tái cấu trúc lại chuyên mục nên có thể một vài chức năng chưa hoàn thiện, một số bài viết và chuyên mục sẽ thay đổi. Nếu sự thay đổi này làm bạn phiền lòng, mong bạn thông cảm. Chúng tôi luôn hoan nghênh mọi ý kiến đóng góp để chúng tôi hoàn thiện và phát triển. Cảm ơn

HƯỚNG DẪN CHI TIẾT CÁCH THIẾT KẾ SKIN CHO TTPOD V4.X

gakho209

New Member
Phần hướng dẫn này là mình (dân vọc IT) tự nghiên cứu và share với anh em (chứ không phải của 1 lập trình viên), nếu có gì sai sót trong từ ngữ chuyên môn mong các chuyên gia IT thông cảm bỏ qua cho =D>

Cấu trúc của một skin ttpod bao gồm 2 file:
- File xxx.ttb là file chứa tất cả các hình ảnh tạo nên skin, cái mà ttpod cho phép bạn chỉnh sửa trong khuôn khổ 1 skin.
- File xxx.xml là file text có nhiệm vụ khai báo file .ttb chứa hình ảnh và sắp xếp các file hình ảnh, các mục, để tạo nên giao diện.

Để chỉnh sửa một skin bạn phải làm trên PC (trừ khi bạn chỉ điều chỉnh một vài thông số mà không thay đổi hình ảnh trong file .ttb).
Dù là mod skin hay là tạo skin mới bạn cũng nên chọn một skin chuẩn (skin gốc là tốt nhất, hoặc một skin bạn thích), sau đó chỉnh sửa hoặc thêm bớt hình ảnh theo thiết kế của mình. OK bắt đầu nhé:

1. Trước tiên, bạn phải chuyển file .ttb thành .mbm bằng phần mềm TtbConverter. (Đính kèm)

1-1.jpg


2. Mở file .mbm bằng phần mềm MBM Tool. (Đính kèm)

3. Xử lý hình ảnh ở đây: xóa, thêm, chọn mức màu (colour),...


2.jpg


Các bạn sẽ thấy tất cả hình ảnh ở đây đều có định dạng .bmp, được sắp xếp theo thứ tự 000, 001, 002. Tốt nhất các bạn design hình xong thì đặt tên theo thứ tự 000.bmp, 001.bmp và khi add vào thì hình phải đúng thứ tự (để ý đấy nhé)

4. Xử lý file .xml.

File .xml có định dạng như sau (mở bằng notepad hoặc wordpad,...)
***Các dòng đầu tiên:

<?xml version="1.0" encoding="UTF-8"?>

<Theme Name="Winamp" Author="TTPod" Ver="4.1" Size="360 640" EMail="support@ttpod.com" WebPage="http://www.ttpod.com">
<Bitmap ID="BackGround" File="winamp.ttb" />
Trong các dòng đầu tiên này bạn chú ý:
- Ver="4.1": là version, tốt nhất nên đặt là 4.0 tất (dùng cho tất cả v4.x luôn)
- File = "Winamp.ttb": là tên file .ttb, khai báo không đúng thì khi chọn skin, ttpod sẽ đứng luôn (vì tìm hoài sao ko thấy, ơ ờ:D).

***Tiếp theo, cấu trúc của mỗi dòng lệnh cơ bản sẽ có dạng như sau:
Ví dụ:
<Icon ID="BottomBkg" Position="0 548 360 92" Icon="9" ZOrder="2"/>

- ID="xyz": với xyz, một số cái là chuẩn (ko thay đổi được), một số cái mình tự đặt tên gì cũng được (trường hợp này nè).
- Position="a b c d":
+ a b - tọa độ (pixel) của đối tượng, tính từ gốc tọa độ (0,0) là góc phái trên trái màn hình.
+ c d - kích thước của đối tượng

- Icon="x" - trong dấu ngoặc là số thứ tự của đối tượng trong file .ttb (hoặc .mbm), ví dụ trên nhìn ở bước 3 bạn sẽ thấy hình này là 009.bmp
Nếu Icon="x y" thì y sẽ là nền của x, tức là hai cái này thường sẽ nằm trùng lên nhau và sẽ tạo nên một hình duy nhất theo ý đồ tác giả
Còn nhiều trường hợp nữa, các bạn tự tìm hiểu sẽ biết.

- ZOrder="x" - Lớp (layer) của đối tượng, số layer thì không giới hạn, đối tượng có ZOrder lớn hơn sẽ nằm trên (nếu đụng nhau thì sẽ che cái phía dưới luôn)
Kết luận: Dòng lệnh này sẽ hiển thị hình 009.bmp có vị trí là 0 548, độ lớn 360x92 pixel trên màn hình. Yeah!=D>

Tương tự, ví dụ dòng này:
<Text ID="Artist" Position="157 62 185 30" FontName="Sans MT SC 936_S60C" FontStyle="20 0" FontColor="250 250 250" ZOrder="2" />
Sẽ hiển thị tên Artist (ca sĩ) ở vị trí như vậy đó, font gì, cỡ chữ 20, màu gần gần trắng, thứ tự lớp là 2,...OK

***Cuối cùng, cấu trúc của file .xml:

Các dòng đầu tiên là khai báo.
Các phần tiếp theo sẽ nằm trong tag <Panel ID="xyz"> ...</Panel>. Theo đó thì:
zyz= "common": tất cả đối tượng chung, hiển thị mọi lúc.
zyz= "Visual": các đối tượng hiển thị trong phần Hiệu ứng đó.
zyz= "Main": các đối tượng hiển thị trong phần có hình album đó.
zyz= "Lyrics": các đối tượng hiển thị trong phần Lời bài hát đó.
zyz= "Miniplayer": phần thu nhỏ ngoài màn hình chính
zyz= "Minilyric": phần thu nhỏ khi đang ở menu.

Xong tất cả các phần quan trọng rồi.

5. Lưu lại file .xml, .mbm.

6. Dùng TtbConverter chuyển .mbm trở lại thành .ttb.

7. Copy hai file .ttb và .xml vào thư mục X:\TTpod\Skin và test thử.

8. Test xong thấy đẹp thì share lên đây cho anh em Pdaviet cùng thưởng thức.


Hết.

Một số skin mình đã mod hoặc tự thiết kế nằm trong ....chữ ký, mời các bạn tham khảo.;;);;);;)
 
Hêhê,phải nói là bài giảng của anh "gà" quá xúc tíc & dễ hiểu,đến em đọc trên đt cũng ok nữa là :D thanks a bằng ... "miệng" trước,có PC sẽ vote cho a sau ;;) :)) quả xứng danh "Super TTpod's Skin Creator" :D
nói thiệt 2cái nỳ em dùng để edit skin's ttpod 3.7x thui,chứ chưa nghịch cái nào của 4.x cả :( lâu quá cũng ko nhớ rõ cách edit nữa,em chỉ edit thui,creat như anh thì hổng dám :)) để khi nào phá thử cái nhể :D cái này phải biết thêm tý photoshop mới đẹp :( mà giờ em thì ... :(
 
Chỉnh sửa cuối:
Hêhê,phải nói là bài giảng của anh "gà" quá xúc tíc & dễ hiểu,đến em đọc trên đt cũng ok nữa là :D thanks a bằng ... "miệng" trước,có PC sẽ vote cho a sau ;;) :)) quả xứng danh "Super TTpod's Skin Creator" :D
nói thiệt 2cái nỳ em dùng để edit skin's ttpod 3.7x thui,chứ chưa nghịch cái nào của 4.x cả :( lâu quá cũng ko nhớ rõ cách edit nữa,em chỉ edit thui,creat như anh thì hổng dám :)) để khi nào phá thử cái nhể :D cái này phải biết thêm tý photoshop mới đẹp :( mà giờ em thì ... :(

Thì chủ yếu cũng là edit là chính thôi, để creat được một cái ngon lành thì photo xốp phải khá lắm chứ ko phải lơ tơ mơ như anh em mình đâu :D
 
Nhìn bác Gakho209 hướng dẫn đầy đủ và chi tiết quá.Chắc toàn bộ tâm huyết nghề nghiệp của bác đổ vào đây cả.Ủng hộ bác 2 tay vì đã lập 1 topic hay để anh em vọc=D>
Tối nay đi chơi về sẽ Test liền \-/

[=========> Bổ sung bài viết <=========] 17 minutes:

Mượn lap con bạn.
Mình thích Skin này nhưng mắc mấy chữ China
Mình muốn thay mấy chữ China này thành Tiếng Việt và chỉnh chữ Trình đơn với thư viện vừa màn không to quá chạy đi chạy lại hoa cả mắt.
Mình chưa vọc được vì đang đi chơi.Tối về mới test được.Nếu được thì bác nói qua cách sửa với

100ddf5fae2a47759fba903c791ca3df.jpg


Link:http://www.pdaviet.net/showthread.p...ng-cho-PM-TTPod-v4.x-Cập-nhật-liên-tục/page19
Bác kéo xuống 1 tí là thấy link dow đó
 
Chỉnh sửa cuối:
Nhìn bác Gakho209 hướng dẫn đầy đủ và chi tiết quá.Chắc toàn bộ tâm huyết nghề nghiệp của bác đổ vào đây cả.Ủng hộ bác 2 tay vì đã lập 1 topic hay để anh em vọc=D>
Tối nay đi chơi về sẽ Test liền \-/

[=========> Bổ sung bài viết <=========] 17 minutes:

Mượn lap con bạn.
Mình thích Skin này nhưng mắc mấy chữ China
Mình muốn thay mấy chữ China này thành Tiếng Việt và chỉnh chữ Trình đơn với thư viện vừa màn không to quá chạy đi chạy lại hoa cả mắt.
Mình chưa vọc được vì đang đi chơi.Tối về mới test được.Nếu được thì bác nói qua cách sửa với

100ddf5fae2a47759fba903c791ca3df.jpg


Link:http://www.pdaviet.net/showthread.p...ng-cho-PM-TTPod-v4.x-Cập-nhật-liên-tục/page19
Bác kéo xuống 1 tí là thấy link dow đó

Woo, cái này đẹp quá chứ. Skin này có một hàng phía dưới là tiếng CN (hình, ko phải text) bao gồm: Trình đơn, âm thanh, repeat, thư viện (cái này là theo chức năng như vậy chứ ko phải mình biết tiếng Tung của nhé :p)
Có hai cách để đổi nó:
1 là bạn vào file .ttb của nó tìm cái hình đó, copy ra sửa lại hoặc làm cái mới thay thế (đương nhiên là tiếng Anh hoặc tiếng việt tùy bạn).
2 là bạn bỏ các dòng lệnh hiển thị các hình đó đi, thay thế bằng dòng chữ. Ở đây Trình đơn và Thư viện thì đã có dòng lệnh sẳn, bạn chỉ cần sửa: vị trí và độ lớn (a b c d trong h dẫn đó), fontstyle. Hai cái kia thì nên sửa lại ảnh (cách 1) hoặc muốn thì làm giống như Trình đơn và Thư viện cũng được.
Thử đã rồi tính tiếp nhé. :D
 
Có hai cách để đổi nó:
1 là bạn vào file .ttb của nó tìm cái hình đó, copy ra sửa lại hoặc làm cái mới thay thế (đương nhiên là tiếng Anh hoặc tiếng việt tùy bạn).
2 là bạn bỏ các dòng lệnh hiển thị các hình đó đi, thay thế bằng dòng chữ. Ở đây Trình đơn và Thư viện thì đã có dòng lệnh sẳn, bạn chỉ cần sửa: vị trí và độ lớn (a b c d trong h dẫn đó), fontstyle. Hai cái kia thì nên sửa lại ảnh (cách 1) hoặc muốn thì làm giống như Trình đơn và Thư viện cũng được.
Thử đã rồi tính tiếp nhé. :D
Cai này theo em nên thay ảnh thì sẽ dễ dàng hơn nhiều :D hìhì,thủ công nhất mà em nghĩ ra ngay đó là lấy cái ảnh có chữ "khựa" đém dùng "Paint" tô đen nó đi,rồi viết chữ "Ăng-lê" lên đó,ngắn gọn,ko bị rối mắt :D hìhì
p/s anh "gà khô" về "nhà - lý lịch của anh" nhé,em hỏi tý :D
 
Cai này theo em nên thay ảnh thì sẽ dễ dàng hơn nhiều :D hìhì,thủ công nhất mà em nghĩ ra ngay đó là lấy cái ảnh có chữ "khựa" đém dùng "Paint" tô đen nó đi,rồi viết chữ "Ăng-lê" lên đó,ngắn gọn,ko bị rối mắt :D hìhì
9 xác, anh cũng hay dùng "Paint" đó mà.X_X
 
9 xác, anh cũng hay dùng "Paint" đó mà.X_X
hehe,vậy mà cứ nghĩ anh phải "khủng" cái khoản "fô tô xốp" lắm :)) em cũng dùng toàn dùng Paint thôy,em đang phá thử 1 cái skin ttpod 4.x theo "bài" của anh :D xong em sẽ báo kết quả liền \-/
 
hehe,vậy mà cứ nghĩ anh phải "khủng" cái khoản "fô tô xốp" lắm :)) em cũng dùng toàn dùng Paint thôy,em đang phá thử 1 cái skin ttpod 4.x theo "bài" của anh :D xong em sẽ báo kết quả liền \-/

Thì nói là hay dùng "Paint" chứ có nói là ko "khủng" PT xốp đâu.:D
Giỡn chơi thôi, chứ mấy cái lặt vặt như vậy thì paint cho nhanh chứ có làm mới gì đâu mà xốp cho nặng máy. Xốp thì cơ bản đại cương chơi thôi, chứ chuyên ngành thì...chưa có thời gian học.:D8-|
 
Eo,topic hay thế này mà ko thấy ae hưởng ứng gì vậy :( thế mà ở bên topic tổng hợp skin ttpod 4.x thì cứ loạn lên hỏi cách chỉnh sửa :p hay là mấy ngày hôm nay được nghỉ mọi người đi du lịch hết rồi :))
hêhê,chúc ae PDA ngày Quốc Tế Lao Động vui vẻ ;;) Happy Labor Day !!! :D
 
Eo,topic hay thế này mà ko thấy ae hưởng ứng gì vậy :( thế mà ở bên topic tổng hợp skin ttpod 4.x thì cứ loạn lên hỏi cách chỉnh sửa :p hay là mấy ngày hôm nay được nghỉ mọi người đi du lịch hết rồi :))
hêhê,chúc ae PDA ngày Quốc Tế Lao Động vui vẻ ;;) Happy Labor Day !!! :D

Hi vọng là vậy. Chứ cứ im lìm thế này chắc vài bữa sửa lại bài (rút gọn nội dung :D), chi tiết quá cũng...phí:p
 
Back
Top