Hướng dẫn làm theme hoàn thiện từ A-Z!

tanpossible · 31/8/09

Từ trước đến giờ các mem dùng điện thoại chỉ việc lên mạng search theme cho vào máy và sử dụng.Có bao giờ tự hỏi:
"Tại sao họ làm đẹp thế?",
"Liệu mình có làm được hay không?"
Nếu ai đã tiến hành làm theme thì chỉ ở mức độ dùng những source(tài nguyên) có sẵn bê vào Soft và dùng thôi đúng không nào?

Sau một thời gian mày mò phá phách Symbian mình đã thu thập được một số kinh nghiệm làm theme và quyết định mang lên đây chia sẻ cho anh em PDA
Sau khi đọc bài viết này mình dám chắc các bạn có thể là cho mình những theme tuyệt vời không khác gì Designer của nước ngoài.

Yêu cầu:
+Máy tính:cấu hình đủ để chạy s60 Theme studio(cái này nặng khi chạy lag èo èo luôn-chắc ai cũng biết)

Photoshop:khuyến cáo nên dùng các bản từ CS 8.0 trở lên

+Điện thoại:cài đủ bộ Python kèm Libs full trong diễn đàn
Phần mềm quản lý file(X-plore là tốt nhất)Tbuilder và Theme Editor

Phần 1:Icon

Đối với chương trình làm theme trên máy tính(s60 theme studio) chỉ cần dùng những icon pack trên mạng down về dùng kéo thả vào những icon mặt định trong phần mềm là bạn có thể tạo cho mình một cái theme rồi.Nói rõ hơn khoảng này một tí:
Icon làm theme thường ở 2 định dạng cơ bản:là đuôi .PNG và .SVG
.PNG thì không có gì để bàn.Riêng SVG là định dạng ảnh vector,không phải tool thông thường là có thể dùng được.S60 Theme Studio hỗ trợ cho các bạn thay icon ở định dạng này.
Tuy nhiên chúng ta không thể xem trước các icon SVG ngay trong folder mà phải dùng SVGView.Nhấp Download để tải về máy(Nhớ chọn hệ điều hành tương thích )!
Sau khi cài đặt xong nhấp đôi vào icon .SVG thì nó sẽ mở icon của bạn bằng trình duyệt default của máy tính.Lúc này thì tha hồ mà lựa chọn icon thích hợp.

Tiếp theo là phần icon sử dụng trong Tbuilder và Theme Editor:
Cần nắm rõ các điều cơ bản sau
Icon trong Tbuilder ở định dạng .PNG và icon pack nén thành file zip để chép vào Data.Một icon ứng dụng sẽ bao gồm:
.29x42 Colour Icon(Icon chính)
.29x42 One-bit Mask(Mặt nạ cho icon)
.44x44 Colour Icon(Icon chính)
.44x44 One-bit Mask(Mặt nạ cho icon)
Chú thích:Đối với size 29x42 icon hiển cho Menu chính
44x44 icon hiển thị trên góc lúc chạy ứng dụng khoảng vài giây

Sau đây mình lấy icon Bluetooth làm ví dụ
Đây là icon chính:

Đây là icon mặt nạ:

Trường hợp 1:Icon bạn có là địng dạng .PNG
Chỉ cần mở Photoshop lên là OK.Mở file icon PNG.Nhấn tổ hợp phím Ctrl+Shift+N để tạo một Layer mới đè lên file cũ.Chọn phân vùng viền bên ngoài Icon cho nó màu đen.Còn phần Icon Del đi.Sau đó xóa Background để lại Layer và save lại định dạng .PNG.Giống như 2 icon ví dụ ở trên là ổn.Khi đặt tên cho icon để nén thành zip chép vào Tbuilder cần chú ý thứ tự liên tục.VD như
1.png:.29x42 Colour Icon
2.png:.44x44 One-bit Mask
3.png:.44x44 Colour Icon
4.png:.44x44 One-bit Mask
Trong Tbuiler thì icon bắt đầu từ 024.png->027.png(Bluetooth)
028.png->029.png(Phone)
..................................
Muốn biết chính xác tên số nào là icon nào thì chép icon pack tron E:/system/apps/Tbuilder/Data/ICO ra giải nén và xem rồi thay đổi cho thích hợp.Nén zip lại sau khi ưng ý.Chép vào là có thể build theme rồi.

Trường hợp 2:
Icon ở định dạng SVG:Cái này hơi mất công một chút:
Bước đầu là xem icon trước(Đã nói ở trên)
Sau đó truy cập vào trang:http://www.fileformat.info/convert/image/svg2raster.htm
Chọn file icon muốn convert
Height: 29 Width:42 icon menu
Height: 44 Width:44 icon trong lúc chạy
Submit->Download về là có thể sở hữu Icon.PNG và tiến hành như ở trường hợp 1

tanpossible · 31/8/09

Một số icon pack đỉnh cho anh em thực tập trước nè:

Download

tanpossible · 31/8/09

Download

tanpossible · 31/8/09

Download

tanpossible · 31/8/09

Sau khi làm theme xong giờ vấn đề tiếp theo,Icon ứng dụng quá xấu và không phù hợp với theme.Chuyện nhỏ
Cách 1:Bình thường chỉ cần dùng S60 Icon Wizard đã có một số diễn đàn hướng dẫn.Mình xin tóm gọn lại:
-Dùng sisboom get UID của ứng dụng cần thay icon
-Vào S60 Icon Wizard
Ô 1:Mã UID vừa lấy được
Ô 2:Tên folder chứa app
Ô 3:Tên chương trình hiển thị trên menu(Có thể dùng NameOk để sửa)

Bước tiếp theo là chọn Icon cho chương trình
Vẫn là 2 size cơ bản

29x42 và 44x44
Tiếp đến là build file sis rồi cài vào máy là icon đã thay đổi

tanpossible · 31/8/09

Cách 2: (với những ai biết chút ít về lập trình C)
1.Cần có
Icon định dạng bitmap

* 44x44 colour bitmap icon
* 44x44 one-bit mask
* 42x29 colour bitmap icon
* 42x29 one-bit mask
-Ứng dụng mở rộng sẽ nói ở phần 3
-Đóng gói pkg sẽ nói ở phần 4

(Cách này không cần sử dụng AIF Builder và Sisboom)
2.Chuẩn bị Bitmap image:
Cần chuyển đổi 4 bitmap đơn ở trên thành một bitmap đơn dạng MBM(Multi bitmap) bằng cách sử dụng MBM Converter
Ví dụ là Bluetooth.app
Trong thư mục chứa các bitmap sẽ gồm:
Bluetooth.mbm
icon-44x44-colour.bmp
icon-44x44-mask.bmp
icon-42x29-colour.bmp
icon-42x29-mask.bmp
3.Chuẩn bị Aif file:
Aif không phải là định dạng văn bản.Nó được tạo từ source đặt biệt là rss.Tập tinh này bạn phải viết.Mẫu Icon Aif sẽ là như sau

Mã:

// BluetoothAif.rss
#include <aiftool.rh>

RESOURCE AIF_DATA
{
caption_list=
        {
        CAPTION { code=ELangEnglish; caption="My App"; },
        CAPTION { code=ELangFrench; caption="Mon App";}
        };

// Replace the following app_uid with your program's UID.
app_uid=0x12345678;

// The number of icons (not including masks)
num_icons=2;
}

Nếu UID sai thì icon sẽ không hiển thị
4.Tạo file sis:
Các sis file mà bạn cuối cùng sẽ được gửi đến điện thoại của bạn. Xây dựng của nó được xác định bởi một tập tin pkg, trông một chút gì đó như thế này:

Mã:

Myapp.pkg

;Language - standard language definitions
&EN

#{"Bluetooth"},(0x12345678),1,0,5

;Supports Series 60 v 0.9
(0x101F6F88), 0, 0, 0, {"Series60ProductID"}

"\Symbian\6.1\Series60\epoc32\release\armi\urel\myapp.app"
   -"!:\system\apps\myapp\myapp.app"
"\Symbian\6.1\Series60\epoc32\release\armi\urel\myapp.rsc"
   -"!:\system\apps\myapp\myapp.rsc"
"\Symbian\6.1\Series60\epoc32\release\armi\urel\myapp.aif"
   -"!:\system\apps\myapp\myapp.aif"

Cuối cùng là dùng Visual Studio đóng gói lại thôi.
Cách này phức tạp nhưng cũng được nhiều mem bên dotsis và ipmart dùng để tạo icon dạng AIF
Theo mình dùng cách 1 là nhanh mà hiệu quả cao

tanpossible · 31/8/09

Trong C++
#include là để gọi thư viện và // là chú thích.Cách 2 dành cho ai mê khám phá.Nếu thắc mắc gì cứ hỏi mình sẽ hướng dẫn chi tiết.Chúc vui!

tandat2104 · 2/9/09

alo
mong ban post lun mấy pm cần thiết lun nha

tanpossible · 2/9/09

tandat2104 nói:
alo
mong ban post lun mấy pm cần thiết lun nha

Mấy cái PM này đã có hết trên diễn đàn rồi.Chịu khó search đi bạn hiền

tiephien1 · 2/9/09

các bạn cho mình hỏi cách thay icon của theme mặc định của máy. không biết có thay được không nhỉ?

tanpossible · 2/9/09

tiephien1 nói:
các bạn cho mình hỏi cách thay icon của theme mặc định của máy. không biết có thay được không nhỉ?

Ý bạn là icon của theme có sẵn trong máy hay sao?Nếu là vậy thì cũng đơn giản.Dùng X-plore vào Z:\system\skins chép folder skin của nó ra bỏ vào
E:\system\skins.Dùng Theme editor(đã có bản việt hóa).Mở file MBM.Move tới icon cần thay.Thay xong pack MBM lại là bạn đã thay được rồi đó!

tiephien1 · 3/9/09

tanpossible nói:
Ý bạn là icon của theme có sẵn trong máy hay sao?Nếu là vậy thì cũng đơn giản.Dùng X-plore vào Z:\system\skins chép folder skin của nó ra bỏ vào
E:\system\skins.Dùng Theme editor(đã có bản việt hóa).Mở file MBM.Move tới icon cần thay.Thay xong pack MBM lại là bạn đã thay được rồi đó!

mình hiểu ý bạn. nhưng mình hỏi là thay cả icon cho cái theme mặc định trong ổ Z ấy. không bít có được không nhỉ. theo cách bạn là mình chỉ tạo 1 theme mới giống theme mặc định rồi mới thay icon đúng không?

tanpossible · 3/9/09

tiephien1 nói:
mình hiểu ý bạn. nhưng mình hỏi là thay cả icon cho cái theme mặc định trong ổ Z ấy. không bít có được không nhỉ. theo cách bạn là mình chỉ tạo 1 theme mới giống theme mặc định rồi mới thay icon đúng không?

Vâng đúng rồi bạn.Ổ Z là chỉ xem cấm sờ mó và di chuyển hiện vật.Bạn bạn không thể thao tác trên Z được(Read-only files)

tanpossible · 3/9/09

Phần 2:Hình nền,Hover menu và tất cả các thứ còn lại
Mình hướng dẫn trên nền Tbuilder để dễ làm:

Cần nắm vững những thao tác Photoshop cơ bản :
-Crop
-Resize
-Tạo Layer
-Transparent
-Cut
-Paste.....

Mình ví dụ là hình nền của banner PDA việt:
1.Cut banner
Dùng photoshop mở file ảnh banner của PDA lên
Chọn Rectangular Maquee Tools như hình

Dùng chuột nhấn và kéo size thích hợp để mình chọn:

2.Sau khi lấy được phần hình cần thiết giờ làm background.Chọn background thích hợp theo ý mình,sau đó copy vùng chọn lúc nãy paste vào/Lúc này nó sẽ tương tự như tạo một layer mới.

3.Điều chỉnh độ trong suốt bằng cách:
Chọn Opacity theo % thích hợp.KHoảng 50% là nó trong rồi

4.Crop cho thích hợp với size màn hình điện thoại:

5.Tạo soft key không cần dùng effect:
Copy một nét của thanh taskbar trong windown vista.Dán vào tấm vừa crop.Di chuyển nó đến vị trí thích hợp.Nhấn tổ hợp ctrl + t và kéo nó dài ra.Để smooth khoảng 5 point và opacity là 70.Và đây là kết quả cho được:

tanpossible · 6/9/09

Thêm vài gói icon đỉnh cho anh em làm theme đây:

Download

tanpossible · 6/9/09

Download

tanpossible · 6/9/09

Download

xp88 · 4/11/09

Về việc tạo icon cho ứng dụng

Mình thấy 1 số theme như của MrM@son thường có thêm icon khác cho những ứng dụng cài thêm vào, ví dụ như FExplorer khi dùng theme Blue XM của MrM@son sẽ hiện biểu tượng khác.
Vậy làm thế nào để tạo theme như vậy với Carbide.ui Theme Edition 3.4, thanks

tanpossible · 7/11/09

xp88 nói:
Mình thấy 1 số theme như của MrM@son thường có thêm icon khác cho những ứng dụng cài thêm vào, ví dụ như FExplorer khi dùng theme Blue XM của MrM@son sẽ hiện biểu tượng khác.
Vậy làm thế nào để tạo theme như vậy với Carbide.ui Theme Edition 3.4, thanks

Cái đó dễ lắm bạn à.Bạn chỉ cần dùng FExplore lấy mã UID của icon trong lúc làm Theme đến phần kéo thả các icon SVG vào ThemeEdition click phải vào icon muốn đổi nhập set values UID đúng với mã UID của icon cần thay.
Ví dụ:
X-plore có mã là 123456
thì khi làm theme click phải vào icon muốn đổi cho X-plore set nó là 123456

Thử xem sao nha bạn.Thân chúc ngày tốt lành

ymme · 12/11/09

thế muốn làm third party icon thì phải điền major ID với minor ID thế nào hả bạn.bạn có thể cho mấy cái ID của icon như là game,adobe reader được ko,càng nhièu càng tốt.

Hướng dẫn làm theme hoàn thiện từ A-Z!

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member