Tut này có thể được chia làm 2 phần: phần đầu hướng dẫn bạn các ý tưởng
và kĩ năng cần thiết để làm một cái theme, ko riêng cho Firefox, mà cho
cả Chrome, IE hay Windows, Linux... Phần thứ 2 sẽ đi riêng vào từng
trình duyệt vì mỗi trình duyệt có cấu trúc, hệ thống giao diện khác
nhau.
Phần 1. Ý tưởng thiết kế giao diện như đã nói trên, trình duyệt hay HĐH thì đều có giao diện mang một cấu
trúc, một hệ thống riêng (vd IE với firefox thì tab nằm dưới, sử dụng
mẫu các button, check box từ windows... còn Safari với Opera thì có các
button và checkbox riêng...) nhưng tất cả đều có vài điểm chung
Thứ nhất:thay đổi giao diện ko khó như bạn nghĩ và cũng ko vi phạm bản quyền hay
dính j` tới pháp luật cả. (ở đây ko xét Safari bởi vì thay đổi giao
diện Safari 3.0 rất khó, dính nhiều tới code và theo mong muốn của
apple là ko muốn bị thay đổi). Ko cần một kĩ năng lập trình, bạn hoàn
toàn có thể thay đổi giao diện của bất kì phần mềm nào nói chung, kể cả
HĐH, và ở đây là trình duyệt nói riêng
Thứ hai. Giao
diện của một chương trình được lưu trữ riêng với file exe. Với Chrome
thì đó là một file dll. Với Firefox thì lại file nén... Vì thế, chúng
ta chỉ cần thay đổi file riêng lẻ đó, ko đá động gì tới file exe chính.
Thông thường, cách thay đổi giao diện thường là dựa trên những mẫu giao
diện, từ đó thiết kế lên. Cái cách làm là trích xuất những hình ảnh,
thông số của kiểu theme mặc định của phần mềm, sau đó dùng Photoshop
hay cái j` đó chỉnh sửa những hình ảnh, rồi đưa vào file dll gốc lại.
Cái ý tưởng là vậy.
Trích hình từ file gốc ~> chỉnh sửa ~> đưa lại vào file gốc. Vậy, cả phần 1 này, bạn chỉ cần nắm một cái: thiết kế theme cho phần mềm là xây dựng một theme mới từ những hình ảnh có sẵn ====================================
Phần 2. Cách thiết kế giao diện trên một phần mềm cụ thể Sau khi nắm được cái ý tưởng thiết kế theme, bi giờ cái mục đích của
chúng ta là tìm kiếm những file gốc để trích hình như đã nói trên.
Những file này thay đổi tùy theo từng phần mềm. Đó là lí do có phần 2
này. Phần 2 này sẽ giúp bạn thay đổi theme với một phần mềm cụ thể. Cụ
thể ở đây được đề cập là Firefox, IE và Chrome. Bên cạnh đó, cuối bài
viết mình cũng sẽ nói sơ về việc thiết kế các phần mềm khác như WinRAR
hay iTunes
1. Thiết kế giao diện Firefox Nếu như dùng Firefox lâu và hay đổi skin, bạn đã biết là firefox sử
dụng các file chứa skin là .jar. Công việc đổi skin là mở cửa sổ add-on
lên và kéo file .jar chứa skin vào.
Vậy để chỉnh sửa giao diện firefox, chúng ta sẽ chỉnh sửa file .jar này.
Trong file .jar này là cái j`, thật chất, đây là một dạng file nén ZIP
nhưng được đổi định dạng thành .jar. Trong file nén này chứa các hình
ảnh của skin và các file text chứa các thông số...
Bây giờ,
nói mãi cũng chán, chúng ta sẽ thực hành. Như hồi nãy đã nói trên,
chúng ta thiết kế skin từ một cái mẫu. Vì vậy, bạn download file .jar
sau về để thực hành trên nó. Đây là cái skin của Firefox 3.7 for 3.5
(mình làm
). Nếu bạn ko thích có thể lên mạng (DeviantArt) để tìm một cái skin .jar phù hợp
(tổng dung lượng 1MB
file skin của firefox rất nhẹ dù chứa cả trăm hình)
Sau khi down về, có file Dvkndn.jar, giải nén bằng WinRAR vào một thư mục nào đó
Đây là hình ảnh bên trong thư mục vừa giải nén xong
Đầu tiên, chúng ta sẽ lưu dấu ấn cá nhân tại 2 file Contents và install.rdf
Bạn mở file install.rdf bằng notepad, chú ý và thay đổi các thông tin sau
tương tự cũng làm thế với file Contents.rdf
Dù bạn thay đổi thế nào, cần phải có tên tác giả gốc trong cái skin đó vì bạn thiết kế từ skin của họ lên. Sau khi đã có vài dấu ấn cá nhân, công việc tiếp theo của bạn chỉ là thay đổi hình ảnh trong đó mà thôi.
Thay đổi như thế nào? Mở lên bằng Photoshop và chỉnh sửa, xong lưu đè lại
Vd bạn muốn sửa nút back, vào Browser và chỉnh sửa file back-forward.png
Còn muốn chỉnh sửa chỗ khác, xin thưa, chỉ có một cách là mò riết mới
quen. Ví dụ bạn muốn đổi biểu tượng stop thì đi tìm hình nào có biểu
tượng đó mà sửa. Nếu bạn không biết hình đó thể hiện biểu tượng nào thì
cứ sửa, xong lưu lại và áp dụng sẽ thấy
Ở bài viết này, mình
chỉ đề cập đến mức độ sửa hình ảnh và file text, như thế đã đủ một skin
Pờ rồ rồi, nếu muốn cao hơn nữa thì bạn chỉ việc mở các file css và sửa
tiếp
Sau khi sửa xong, bạn trở lại thư mục ban đầu, chọn tất
cả các file và thư mục (chứ ko chọn thư mục chứa tất cả file đó) và nén
lại thành file ZIP
Sau đó đổi tên file .zip thành file .jar (để hiển thị phần mở rộng, vào
folder Option và bỏ dấu tick chỗ Hide Extension for Know file Types
Vậy là bạn đã có một skin cho Firefox rồi đó, công việc tiếp theo là
kéo vào cửa sổ Addon và chia sẽ cho bạn bè (trên windowsvn.net
)
======================================
1. Thiết kế giao diện Chrome Cũng cùng ý tưởng trích xuất hình ~> Sửa và lưa lại như Firefox, nhưng những hình của Chrome được chứa trong một file
default.dll nằm ở
|
D:Documents and SettingsDvkndnLocal SettingsApplication DataGoogleChromeApplication3.0.192.1Themes |
trong đó D là ổ cài Windows, Dvkndn là tên Username của bạn, 3.0.192.1 là tên phiên bản Chrome bạn đang dùng
Sau khi đã nhân dạng file default.dll này, bạn copy nó thành một bản
backup mới do CHrome chỉ có 1 theme, sửa trên cái này mà sai là teo luôn
Sau khi backup, bạn mở file default.dll bằng Restorator (cái này search
trên mạng, down bản trial về) và Extrace toàn bộ thư mục BINDATA thành
định dạng file PNG vào một thư mục
Công việc tiếp theo của bạn chỉ là chỉnh sửa các hình trong đây thôi
Sau khi chỉnh sửa hoàn tất, cũng mở default.dll bằng Restorator lại, và
Assign thư mục BINDATA với thư mục chứa hình bạn vừa sửa (Nói đại khái
là sync cho cái BINDATA giống của bạn) bằng cách click phải BINDATA
~> Assign ~> chọn thư mục
Vậy là xong, restart google để thấy hậu quả
====================================
1. Thiết kế giao diện IE Sở dĩ mình chọn 3 trình duyệt này để viết là vì cả 3 có những nơi lưu
trữ giao diện (skin, theme) rất đặc trưng: Firefox lưu trong một file
nén tự do, Chrome lưu trong file dll cất kĩ lưỡng, IE lại có một phần
mềm để làm, đó là SKin Studio (FREE)
Thế này thì IE dễ hơn hai
thằng kia do có phần mềm, bạn chỉ việc tạo skin mới (hoặc dùng skin đã
có) và chỉnh sửa trong mục IE 7. Hiện nay SKin Studio chỉ hổ trợ IE 7.
Bản skin studio mới ra (sắp ra thì đúng hơn) sẽ hổ trợ IE 8
Sau đó thì save SKin lại và Apply là xong
================================